# | Название видеоурока | Видео / Тесты | Решило | Рейтинг | Доступ |
---|---|---|---|---|---|
1 |
![]() |
|
|||
На этом уроке мы поговорим о qr-коде, что это, для чего он нужен, где используется. Кроме того, мы сгенерируем qr код для своей фразы, а также распознаем сторонний qr код, используя возможности qrrd.ru https://ru.wikipedia.org/wiki/QR-%D0%BA%D0%BE%D0%B4 - информация о qr-коде в википедии https://www.qrrd.ru/ - ресурс создания и распознания qr кодов Отчёт отправил: 30514. Tom Выполнено за 14 мин. [Показать отчёт] Научился: Познакомился с сайтом 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 Отчёт отправил: 30514. Tom Выполнено за 8 мин. [Показать отчёт] Научился: Подготовил инструменты для разработки: node js и редактор кода. |
|||||
3 | Создание проекта |
|
|||
На этом уроке мы создадим проект и инициируем его в npm. npm init Отчёт отправил: 30514. Tom Выполнено за 16 мин. [Показать отчёт] Научился: Создал файл проекта package.json с помощью команды npm init. Создал файл app.js, в котором вывел текст приветствия. |
|||||
4 | Установка библиотеки qrcode. Вывод qr кода в консоль |
|
|||
На этом уроке мы установим библиотеку qrcode и выведем код в консоль https://www.npmjs.com/package/qrcode - библиотечка qrcode для nodejs npm install --save qrcode Отчёт отправил: 30514. Tom Выполнено за 14 мин. [Показать отчёт] Научился: С помощью команды "npm install --save qrcode" установил библиотеку qrcode. Добавил в файл app.js код для создания qr-кода по заданной строке и вывел в консоль результат. Сложности: |
|||||
5 | Вывод qr кода в файл. |
|
|||
На этом уроке мы выведем qr код в файл изображения, а также распознаем его при помощи online-сервиса qrrd.ru https://www.qrrd.ru/ - ресурс создания и распознания qr кодов Отчёт отправил: 30514. Tom Выполнено за 19 мин. [Показать отчёт] Научился: С помощью метода toFile научился сохранять qr-код в файл. Создал файл изображения qr-кода, загрузил его на сайт qrrd.ru, распознал исходный текст. |
|||||
6 | Параметры вывода |
1 тест |
|||
На этом уроке мы зададим параметры qr кода: цвет, размер (масштаб), отступ https://www.npmjs.com/package/qrcode#api - описание свойств qr кода в библиотечке qrcode Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт] Научился: Научился изменять параметры изображения qr-кода: цвет, отступ и масштаб. |
|||||
7 | Создание проекта qr_web |
|
|||
На этом уроке мы создадим проект для web генератора qr кода и подключим к нему необходимые библиотеки
Отчёт отправил: 30514. Tom Выполнено за 42 мин. [Показать отчёт] Научился: Научился создавать проект с помощью команды npm init -y. Создал новый проект, установил библиотеки qrcode, express, hbs и nodemon. |
|||||
8 | Запуск web проекта |
1 тест |
|||
На этом уроке мы напишем алгоритм запуска express сервера в index.js, а потом запустим с командной строки https://expressjs.com/ru/ - ссылка на на официальный сайт express
Отчёт отправил: 30514. Tom Выполнено за 23 мин. [Показать отчёт] Научился: Запустил сервер на localhost по порту 3000. При обращении к index странице выводится сообщение. Научился использовать nodemon для автоматического перезапуска сервера при изменении в файле index.js. |
|||||
9 | Подключение представления |
|
|||
На этом уроке мы создадим представление и подключим его к нашему проекту
Отчёт отправил: 30514. Tom Выполнено за 5 мин. [Показать отчёт] Научился: Подключил к проекту библиотеку hbs. Использовал ее как view engine для библиотеки express. Создал файл представления index.hbs, вывел его по запросу get к адресу / с помощью res.render("index"). |
|||||
10 | Создание формы |
1 тест |
|||
На этом уроке мы создадим форму для генерации qr кода https://placeholder.com/ - генерация заглушек для изображения Отчёт отправил: 30514. Tom Выполнено за 14 мин. [Показать отчёт] Научился: Добавил в представление index.hbs форму для генерации qr-кода. Разместил на форме элементы textarea, кнопку submit и заглушку для изображения. |
|||||
11 | Обработка данных формы |
|
|||
На этом уроке мы создадим обработчик данных формы
Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт] Научился: Создал обработчик post для адреса '/'. Добавил parser и после нажатия кнопки вывел текст, который был введен в текстовое поле qrtext. |
|||||
12 | Получение qr кода |
1 тест |
|||
На этом уроке мы получим qr код и выведем его на страницу
Отчёт отправил: 30514. Tom Выполнено за 21 мин. [Показать отчёт] Научился: Подключил библиотеку qrcode. Создал изображение qr кода при нажатии кнопки "Создать qr код". Реализовал передачу параметра image_link в представление через аргумент метода render. Для get запроса передается адрес с сайта placeholder, для post запроса передается название созданного изображения qr кода. Распознал текст в созданном изображении qr кода с помощью сайта qrrd.ru. |
|||||
13 | Управление параметрами: добавление элементов в представлении |
|
|||
На этом уроке мы создадим элементы управления параметрами в представление
Отчёт отправил: 30514. Tom Выполнено за 16 мин. [Показать отчёт] Научился: Добавил ссылку для сохранения изображения, указал для нее атрибут download. Добавил на форму элементы для выбора цвета фона и кода, размера и отступа qr-кода. |
|||||
14 | Управление параметрами: создание qr кода |
|
|||
На этом уроке мы реализуем создание qr кода с параметрами Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт] Научился: Научился с помощью nodejs и express получать данные из формы по POST запросу. Реализовал создание изображения qr-кода с переданными значениями цвета фона, кода, размера и отступа. |
|||||
15 | Bootstrap дизайн: подключение bootstrap |
|
|||
На этом уроке мы подключим к нашему представлению функционал фреймворка bootstrap и создадим заготовку колонок для дизайна https://getbootstrap.com https://getbootstrap.com/docs/5.1/getting-started/introduction/ Отчёт отправил: 30514. Tom Выполнено за 11 мин. [Показать отчёт] Научился: Подключил bootstrap к проекту, вставил шаблон страницы, заменил заголовок, добавил две колонки с текстами "Первая колонка" и "Вторая колонка". |
|||||
16 | Bootstrap дизайн: карты, поля, две колонки |
|
|||
На этом уроке мы перенесем элементы управления в bootstrap функционал (начало)
Отчёт отправил: 30514. Tom Выполнено за 34 мин. [Показать отчёт] Научился: С помощью bootstrap создал новый интерфейс страницы генерации qr-кода. Перенес в первую колонку поля для ввода текста и выбора цвета фона и кода. Во второй колонке разместил блок изображения. |
|||||
17 | Bootstrap дизайн: масштаб, отступ, кнопка, панель |
|
|||
На этом уроке мы реализуем числовые поля, кнопку submit и панель в bootstrap функционале
Отчёт отправил: 30514. Tom Выполнено за 29 мин. [Показать отчёт] Научился: Добавил на форму поля для задания размера и отступа изображения qr кода. Добавил кнопку submit. Разместил на верхней части страницы элемент nav. |
|||||
18 | ФИНАЛЬНЫЙ УРОК |
без видео |
|||
Сделай видео-презентацию своей программы.
Отчёт отправил: 30514. Tom Выполнено за 55 мин. [Показать отчёт] Научился: На этом курсе я научился генерировать qr коды с помощью node js. Попрактиковался в создании сервера с помощью библиотеки express. Познакомился с bootstrap 5. Следующий курс "Bootstrap-4 первые шаги". Видеообзор: ShtMPvbjFFw |
|||||
Итого: 18 видеоуроков |
00 мин. 4 теста |
2 чел. | |||
Финалисты: Tom, Николай Денисов . |