# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
|
|||
На этом уроке мы поговорим о qr-коде, что это, для чего он нужен, где используется. Кроме того, мы сгенерируем qr код для своей фразы, а также распознаем сторонний qr код, используя возможности qrrd.ru https://ru.wikipedia.org/wiki/QR-%D0%BA%D0%BE%D0%B4 - информация о qr-коде в википедии https://www.qrrd.ru/ - ресурс создания и распознания qr кодов |
|||||
2 | Инструменты для работы Node JS |
|
|||
На этом уроке мы проверим наличие, и при необходимости установим средства разработки программ на Node JS https://nodejs.org/en/ - официальный сайт NodeJS https://disk.yandex.ru/i/yX9_pRaV_DZ0jQ - инструкция по установке NodeJS https://code.visualstudio.com/ - официальный сайт Visual Studio Code https://disk.yandex.ru/i/G2ImK2S1iFER2Q -инструкция по установке Visual Studio Code |
|||||
3 | Создание проекта |
|
|||
На этом уроке мы создадим проект и инициируем его в npm. npm init |
|||||
4 | Установка библиотеки qrcode. Вывод qr кода в консоль |
|
|||
На этом уроке мы установим библиотеку qrcode и выведем код в консоль https://www.npmjs.com/package/qrcode - библиотечка qrcode для nodejs npm install --save qrcode |
|||||
5 | Вывод qr кода в файл. |
|
|||
На этом уроке мы выведем qr код в файл изображения, а также распознаем его при помощи online-сервиса qrrd.ru https://www.qrrd.ru/ - ресурс создания и распознания qr кодов |
|||||
6 | Параметры вывода |
1 тест |
|||
На этом уроке мы зададим параметры qr кода: цвет, размер (масштаб), отступ https://www.npmjs.com/package/qrcode#api - описание свойств qr кода в библиотечке qrcode |
|||||
7 | Создание проекта qr_web |
|
|||
На этом уроке мы создадим проект для web генератора qr кода и подключим к нему необходимые библиотеки
|
|||||
8 | Запуск web проекта |
1 тест |
|||
На этом уроке мы напишем алгоритм запуска express сервера в index.js, а потом запустим с командной строки https://expressjs.com/ru/ - ссылка на на официальный сайт express
|
|||||
9 | Подключение представления |
|
|||
На этом уроке мы создадим представление и подключим его к нашему проекту | |||||
10 | Создание формы |
1 тест |
|||
На этом уроке мы создадим форму для генерации qr кода https://placeholder.com/ - генерация заглушек для изображения |
|||||
11 | Обработка данных формы |
|
|||
На этом уроке мы создадим обработчик данных формы | |||||
12 | Получение qr кода |
1 тест |
|||
На этом уроке мы получим qr код и выведем его на страницу | |||||
13 | Управление параметрами: добавление элементов в представлении |
|
|||
На этом уроке мы создадим элементы управления параметрами в представление | |||||
14 | Управление параметрами: создание qr кода |
|
|||
На этом уроке мы реализуем создание qr кода с параметрами |
|||||
15 | Bootstrap дизайн: подключение bootstrap |
|
|||
На этом уроке мы подключим к нашему представлению функционал фреймворка bootstrap и создадим заготовку колонок для дизайна https://getbootstrap.com https://getbootstrap.com/docs/5.1/getting-started/introduction/ |
|||||
16 | Bootstrap дизайн: карты, поля, две колонки |
|
|||
На этом уроке мы перенесем элементы управления в bootstrap функционал (начало) | |||||
17 | Bootstrap дизайн: масштаб, отступ, кнопка, панель |
|
|||
На этом уроке мы реализуем числовые поля, кнопку submit и панель в bootstrap функционале | |||||
18 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Сделай видео-презентацию своей программы. | |||||
Итого: 18 видеоуроков |
00 мин. 4 теста |
2 чел. | |||
Финалисты: Tom, Николай Денисов . |