📓 Конспект в 2-х частях, задание с секретом и упражнение для самостоятельной работы
➡️ in english README.md
© Д-р Норд, 2022
Исключительное право на содержимое этого репозитория принадлежит Доктору Норду, разрешается использовать его в личных некоммерческих целях, подробности изложены в файле LICENSE-DN.txt.
Преврати своё "Я не понимаю" в "Я разбираюсь что к чему".
💻 Освой базовые инструменты IT-разработчика.
Экипируйся как следует перед непростой дорогой в мир информационных технологий.
Смотри видео-урок часть 1.
👉 Установка базовых приложений, настройка информационного окружения для IT-разработки.
👉 Используемые технологии: систематизация учётных записей, симметричное и асимметричное шифрование, управление версиями, цифровые подписи, уничтожение информации.
🌱 Научись формировать свою экосистему для IT-разработки.
🌍 Начни путь в мир информационных технологий в полной готовности.
Смотри видео-урок часть 2.
👉 Установка и настройка интегрированной среды разработки и расширений.
👉 Используемые технологии: подсветка синтаксиса и расширенные возможности редактирования кода, проверка правописания, статический анализ кода, отладка, живой сервер.
- 1. Интернет-обозреватель и справочная документация
- 2. Менеджер паролей
- 3. Уничтожение данных
- 4. Адреса электронной почты
- 5. Цифровая подпись и шифрование сообщений
- 6. Репозитории онлайн
- 7. Управление версиями
- Домашнее задание
Знания:
- Основные:
- устройство компьютера;
- элементарное администрирование операционной системы;
- английский язык на уровне начинающего - A2 по Общеевропейской системе компетенций владения иностранным языком.
- Дополнительные:
- основы цифровой криптографии.
Умения:
- Основные:
- устанавливать и настраивать программы;
- систематизировать файлы и папки;
- читать документацию, пользоваться программами на английском языке;
- пользоваться терминалом.
- Дополнительные:
- запоминать незапоминаемую информацию.
Оборудование:
- Основное:
- компьютер (ноутбук) с установленной операционной системой;
- стабильное Интернет-соединение.
- Дополнительное:
- 🤸♀️ коврик для йоги.
Предполагается, что используется операционная система Windows 10. Тем не менее, все используемые программы имеют либо альтернативу, либо версию для Linux.
Также вам обязательно понадобятся внимательность и настойчивость!
Установите современный браузер, хорошим выбором будет Opera, Mozilla Firefox или Google Chrome, также подойдут Edge или Safari.
Почаще пользуйтесь поисковиком, например duckduckgo или google - в современном Интернете есть ответы на великое множество общих и частных вопросов.
Периодически обращайтесь к справочной документации. Для, например, веб-фронтенда хорошим выбором будет справочник от Mozilla Developer Network.
Обязательно изучайте руководства пользователя к используемым программам.
Менеджер паролей используется для безопасного и упорядоченного хранения ваших учётных данных в сети Интернет. Рекомендуется пользоваться менеджерами паролей, которые хранят базу паролей локально. Хорошим выбором будет приложение KeePass:
- создайте новый файл - базу ваших паролей;
- придумайте надёжный основной пароль;
- обязательно запомните его, также вы можете его записать и надёжно спрятать;
- создайте копию файла базы паролей и также надёжно спрячьте (файл и пароль к нему должны храниться отдельно);
- пользуйтесь программой регулярно, чем большее количество раз вы вводите пароль, тем лучше вы его запомните.
При удалении файлов и папок (даже после очистки корзины) данные остаются на диске. Фактически операционная система лишь помечает область, где хранились данные, как свободную. Такие данные легко восстанавливаются, если в эту свободную область не было записано ничего нового.
Возьмите за правило важную информацию уничтожать надёжным способом с помощью перезаписывания.
С такой задачей успешно справляется программа Eraser.
В настройках способа удаления достаточно выбрать 1 проход. Для уничтожения сверхважной информации вы можете выбрать более интенсивные методы удаления вплоть до нескольких десятков проходов. Однако помните, что так вы можете очень быстро выработать ресурс вашего диска. Особенно это актуально для SSD-дисков.
Заведите хотя бы два адреса электронной почты:
- первый - для регистрации на интернет-ресурсах, держите его в секрете, чтобы обезопасить его от попыток восстановления пароля злоумышленником;
- второй - для распространения в открытом доступе и коммуникаций - его можно публиковать и распространять различными способами.
Внесите учётные данные ваших адресов электронной почты в менеджер паролей. Составьте себе псевдоним, под которым вы сможете представить ваши труды в сети Интернет, если не хотите публиковаться под настоящим именем.
Освойте приложение "Страж конфиденциальности" - The GNU Privacy Guard (GnuPG), предназначенное для создания криптографических пар ключей и реализующее функции шифрования и цифровой подписи электронных сообщений и других данных. Скачайте программу и проверьте подлинность скачанного файла. Если скачиваете программу впервые:
- рассчитайте контрольную сумму скачанного файла:
> certutil -hashfile <filename> sha1
- найдите публикации объявлений о выпуске новой версии приложения GnuPG на различных интернет-ресурсах, в таких объявлениях как правило публикуют и контрольные суммы;
- сравните контрольную сумму, которую вы рассчитали, с опубликованными контрольными суммами, они должны полностью совпадать.
Чем больше сравнений вы сделаете, тем меньше вероятность, что вы столкнулись с подделкой.
Подробные инструкции по верификации приложения GnuPg вы можете найти на официальном сайте.
Создайте набор криптографических ключей:
> gpg --gull-generate-key --expert
При создании ключа можно использовать значения по умолчанию.
- Сгенерируйте надёжный пароль в программе KeePass и введите его при создании секретного ключа.
- Сохраните открытый и секретный ключи на диске:
> gpg --output public.asc --export --armor <keyID>
> gpg --output private.asc --export-private-key --armor <keyID>
В качестве <keyID> можно задать либо имя, либо имейл, либо идентификатор, программа самостоятельно найдёт соответствующий ключ в вашей связке.
Параметр --armor обеспечит сохранения данных в текстовом формате (бинарные данные будут представлены отображаемыми ASCII-символами).
Сохраните в менеджере паролей файлы с ключами (воспользуйтесь возможностью прикрепления файлов), а также сертификат отзыва (путь к нему отобразился в терминале после создания пар-ключей).
Сертификат отзыва применяется в случае, если секретный ключ был скомпрометирован и должен храниться отдельно от секретного ключа. Впоследствии вы можете изъять сертификат отзыва из менеджера паролей и сохранить в другом надёжном месте, либо сейчас его удалить, а позже сгенерировать новый.
После сохранения в менеджере паролей удалите файлы с секретным ключом и с сертификатом отзыва с диска безопасным способом - с помощью программы Eraser.
Секретный ключ сохраняется на диске в зашифрованном виде, т.е. для его использования необходим пароль, тем не менее удалять его следует безопасным способом.
✍️ Задание для самостоятельной работы (выполняется в паре): выполните зашифрованную передачу сообщения:
- Добавьте открытый ключ партнёра в свою связку.
- Создайте файл с коротким текстовым сообщением.
- Зашифруйте его с помощью программы GnuPG, используя открытый ключ партнёра.
- Отправьте сообщение партнёру, попросите его расшифровать и озвучить вам.
Наиболее популярными на сегодня сервисами управления репозиториями являются GitHub, GitLab и BitBucket.
- Заведите себе профиль на Гитхабе (используйте первый адрес электронной почты, предназначенный для регистраций).
- Внесите учётные данные в менеджер паролей.
- В настройках профиля добавьте ваш открытый ключ.
- Добавьте адрес электронной почты (второй, который предназначен для открытой публикации) и верифицируйте его.
- Сгенерируйте криптографический талон - "token" - поставьте галочку, разрешающую управлять репозиториями.
- Внесите токен в менеджер паролей: в поле имя задайте ваш логин, в поле пароль вставьте токен.
Создайте тестовый репозиторий, поставьте галочку "создать файл readme.md".
Перейдите в настройки (settings) репозитория, во вкладке "pages" активируйте хостинг веб страницы.
Скачайте и установите git.
Перейдите к пути C:\Program Files\Git\usr\bin\.
Переименуйте файл "gpg.exe" в, например, "gpg-in-git.exe". То же самое рекомендуется сделать и с остальными файлами из этой папки, которые относятся к программе GnuPG.
Так из терминала Bash будет доступна версия GnuPG, установленная вами ранее, вместо версии GnuPG, поставляемой в комплекте Git.
Отключение помощника по учётным данным (кеширование вводимых паролей):
git config --unset --system credential.helper
Отключение интерактивного окна ввода учётных данных (чтобы ввод был из терминала):
git config --system core.askPass ""
Выберите текстовый редактор, запускаемый при редактировани сообщений:
git config --global core.editor notepad
Задайте расположение программы GnuPG:
git config --global gpg.program gpg
Введите информацию о себе (должна совпадать с информацией в вашем gpg-ключе):
git config --global user.name "Name Surname"
git config --global user.email your_email@address.com
Активируйте опции цифровой подписи коммитов и тегов:
git config --global commit.gpgsign true
git config --global tag.gpgsign true
Задайте идентификатор ключа, которым Git будет подписывать коммиты и теги:
git config --global user.signingkey <keyID>
Просмотр настроек:
git config --list --show-origin
Создадим новую папку:
mkdir test
Инициализируем новый репозиторий в ней:
git init
Свяжем его с репозиторием на Гитхабе:
git remote add origin https://github.com/<your_login>/test.git
Сделаем пустой корневой коммит:
git commit --allow-empty -m "Empty root"
Закрепим за ним тег:
git tag root -m "Start point"
Создадим файл списка игнорирования:
notepad .gitignore
Создадим или вставим новый файл с простой веб-страницей:
notepad index.html
Добавим все файлы в репозиторий:
git add --all
Проверим статус:
git status
Cделаем коммит:
git commit
Оценим дерево коммитов:
git log --graph --all --show-signatures
Зальём наш репозиторий на Гитхаб, имя пользователя и токен возьмём из менеджера паролей:
git push origin main --tags -f
Параметр -f здесь позволит перезаписать репозиторий полностью, в дальнейшем использовать его не рекомендуется, так как это нарушает историю коммитов (подробности читайте в официальной документации).
Ещё раз оценим дерево коммитов:
git log --graph --all --show-signatures
Если вы всё сделали правильно, то через короткий промежуток времени страница станет доступной онлайн:
https://<your_login>.github.io/test/
Домашнее задание вы найдёте здесь: hometask.
Не пропустите эпичную битву сверхразумов!
Интегрированная среда разработки (ИСР) - это комплекс программных средств, используемый программистами для разработки программного обеспечения.
Основными компонентами ИСР являются редактор кода (текстовый редактор со специальными возможностями, повышающими эффективность написания программ), транслятор (компилятор или интерпретатор), средства автоматизации сборки, отладчик и другие инструменты.
Современные ИСР обладают функциями включения нескольких курсоров, сворачивания частей кода, выделения столбцом, автосохранения, поиска и замены, рефакторинга и многих других.
Рассмотрим основные возможности ИСР.
Одной из открытых, функциональных и расширяемых ИСР является Visual Studio Code от Microsoft (далее - VS-сode). Скачайте и установите это приложение.
Для изучения возможностей ИСР вы можете набросать код собственноручно, открыть какой-либо завершённый проект, если таковой имеется у вас, либо клонировать репозиторий из первой части урока:
git clone https://github.com/DrNord/web-frontend-barehanded/
Самой заметной особенностью ИСР является подсветка синтаксиса, существенно улучшающая восприятие кода.
VS-code самостоятельно распознаёт использованный в коде язык.
В VS-code вы можете выбрать и скачать цветовую тему на свой вкус в соответствующем разделе настроек File -> Preferences -> Color Theme либо используя комбинацию клавиш:
Ctrl + K, Ctrl + T
Также для вашего удобства вы можете активировать миникарту и перенос длинных строк в меню View.
В процессе написания кода ИСР предлагает вам варианты завершения тех или иных слов в виде всплывающих подсказок, что повышает вашу производительность. Для верстки HTML-страниц вы можете включить опции автоматического закрытия тега и объединённого редактирования тегов:
html.autoClosingTags": true
editor.linkedEditing": true
Использование расширений позволяет существенно усилить возможности вашей среды разработки. VS-code содержит встроенный механизм поиска и установки расширений.
Установите расширение для проверки правописания Code Spell Checker, а также дополнительные языки в виде словарей, например Russian - Code Spell Checker.
Активируйте словарь через командную панель (вызывается нажатием клавиши F1), для этого вводится команда:
Enable Russian Spell Checker Dictionary.
Установите расширение "Дерево задач" TODO Tree. Вы можете проставлять в комментариях специальные метки и записывать что предстоит ещё доработать, а через дерево задач можно быстро перейти к любой такой метке.
Статический анализатор кода позволяет обнаруживать синтаксические и стилистические ошибки в процессе написания программ, не дожидаясь их выполнения.
VS-code имеет встроенный анализатор кода для JavaScript и CSS.
Для статического анализа HTML разметки можно воспользоваться расширением HTMLHint.
Процесс отладки предназначен для поиска логических ошибок в вашем коде. Иными словами, программа может запускаться, но далеко не всегда выполнять то, что было задумано. Заставить программу работать как надо можно через пошаговое выполнение инструкций, изучение процессов, происходящих в ней, обнаруживая и устраняя ошибки, допущенные при написании кода.
VS-code содержит встроенный отладчик для "Node.js" и умеет отлаживать всё, что переводимо на JavaScript.
Поскольку веб-приложения выполняются в браузере, ИСР должна быть снабжена специализированным инструментом для отладки программы, запущенной в браузере.
VS-code содержит отладчик, способный работать с браузерами Edge и Chrome.
Мы же воспользуемся расширением для отладки в браузере Firefox: Debugger for Firefox.
Если Firefox у вас не установлен - установите его: firefox-inst.
После установки его надо настроить под управление извне, согласно инструкции:
- откройте Firefox;
- наберите в строке поиска
about:config; - установите следующие параметры:
devtools.debubber.remote-enabled: true [Required]
devtools.chrome.enabled: true [Required]
devtools.debubber.workers: true [Required if you want to debug workers]
devtools.debubber.prompt-connection: false [Recommended]
devtools.debugger.force-local: false [Set this only if you want to attach VS Code to Firefox running on a different machine (using the "host" property in the "attach" configuration)
На вкладке "отладчик" выберите "Создать конфигурационный файл", из выпадающего меню выберите Firefox и содержимое конфигурационного файла заполнится автоматически. При необходимости эти конфигурации можно редактировать.
На данном этапе мы будем использовать конфигурацию Launch index.html:
- расставьте точки останова "breakpoints";
- добавьте наблюдаемые объекты;
- запустите отладку. Откроется браузер в режиме внешнего управления.
Пошагово выполняя программу, вы можете отследить все действия, которые в ней происходят.
Если обновить страницу, то процесс повторится.
Следующей полезной составляющей интегрированной среды разработки является встроенный терминал. В VS-code вы можете открывать несколько разных терминалов для ваших задач и пользоваться ими наравне с внешними терминалами.
Важной частью современной интегрированной среды разработки является поддержка системы контроля версий.
Git-репозитории хранят всю необходимую информацию в скрытой папке ".git" в каталоге вашего проекта. VS-code распознаёт эту информацию и предоставляет инструменты Git для управления версиями вашего проекта. Например, вы можете сравнивать изменения между коммитами и текущим состоянием файлов, создавать коммиты и выполнять прочие необходимые операции.
В процессе создания веб-приложений результаты работы отображаются в браузере. При внесении изменений в код разработчик вынужден каждый раз обновлять страницу. Автоматизировать этот процесс можно с помощью расширения Live Server от Ritwick Dey. Оно предназначено для перезагрузки вашей веб-страницы каждый раз, когда вы сохраняете изменения в коде, что также повышает эффективность разработки.
Для большего удобства активируйте функцию автосохранения File -> Auto Save.
- Войдите в свою учётную запись на Гитхабе.
- Сделайте ветку репозитория из первой части урока: gpg-key.
- Клонируйте репозиторий на свой компьютер.
- Внесите произвольные изменения в веб-страницу.
- Опубликуйте результат у себя на ГитХабе.
При выполнении упражнения пользуйтесь изученными инструментами.
Александр Норд, также известный как "Д-р Норд" - доктор технических наук, профессор:
- научные исследования и научное руководство;
- обучение индивидуально и в группах;
- проектирование и разработка;
- подготовка учебных курсов (общеобразовательных, узкоспециализированных, индивидуальных).
Сквозь тернии к звёздам!
📧 nordexium@gmail.com - напишите письмо, или...
💬 https://discord.com/invite/85zEyUhQpM - присоединяйтесь к сообществу в Discord, или...
https://drnord.github.io - изучите другие ресурсы Доктора Норда.