C# обучение видео

Формула программиста

основатель — Волосатов Евгений Витольдович

Код: nodejsqr

Генератор qr кодов на Node JS



Создание web генератора qr кода на Node JS



--


Список уроков | фото | видео

# Название видеоурока Видео / Тесты Решило Рейтинг Доступ
1 FREE О qr-коде 00:00:00
 3 чел. ★ 5 Free
  На этом уроке мы поговорим о 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 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы проверим наличие, и при необходимости установим средства разработки программ на 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 Создание проекта 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы создадим проект и инициируем его в npm. 

npm init

4 Установка библиотеки qrcode. Вывод qr кода в консоль 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы установим библиотеку qrcode и выведем код в консоль

https://www.npmjs.com/package/qrcode - библиотечка qrcode для nodejs

npm install --save qrcode
5 Вывод qr кода в файл. 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы выведем qr код в файл изображения, а  также распознаем его при помощи online-сервиса qrrd.ru

https://www.qrrd.ru/ - ресурс создания и распознания qr кодов
6 Параметры вывода 00:00:00
1 тест 		3 чел. ★ 5 $
  На этом уроке мы зададим параметры qr кода: цвет, размер (масштаб), отступ

https://www.npmjs.com/package/qrcode#api - описание свойств qr кода в библиотечке qrcode
7 Создание проекта qr_web 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы создадим проект для web генератора qr кода и подключим к нему необходимые библиотеки


npm init  -y
npm i qrcode express hbs
npm i -D nodemon
8 Запуск web проекта 00:00:00
1 тест 		3 чел. ★ 5 $
  На этом уроке мы напишем алгоритм запуска  express сервера в index.js,
а потом запустим с командной строки

https://expressjs.com/ru/ - ссылка на на официальный сайт express


"scripts": {
    "dev": "nodemon index"
  }
9 Подключение представления 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы создадим представление и подключим его к нашему проекту
10 Создание формы 00:00:00
1 тест 		3 чел. ★ 5 $
  На этом уроке мы создадим форму для генерации qr кода

https://placeholder.com/  - генерация заглушек для изображения
11 Обработка данных формы 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы создадим обработчик данных формы
12 Получение qr кода 00:00:00
1 тест 		3 чел. ★ 5 $
  На этом уроке мы получим qr код и выведем его на страницу
13 Управление параметрами: добавление элементов в представлении 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы создадим элементы управления параметрами в представление
14 Управление параметрами: создание qr кода 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы реализуем создание qr кода с параметрами
15 Bootstrap дизайн: подключение bootstrap 00:00:00
 3 чел. ★ 5 $
  На этом уроке мы подключим к нашему представлению функционал фреймворка bootstrap и создадим заготовку колонок для дизайна

https://getbootstrap.com

https://getbootstrap.com/docs/5.1/getting-started/introduction/
16 Bootstrap дизайн: карты, поля, две колонки 00:00:00
 2 чел. ★ 5 $
  На этом уроке мы перенесем элементы управления в bootstrap функционал (начало)
17 Bootstrap дизайн: масштаб, отступ, кнопка, панель 00:00:00
 2 чел. ★ 5 $
  На этом уроке мы реализуем числовые поля, кнопку submit и панель в bootstrap функционале
18 ФИНАЛЬНЫЙ УРОК без видео
 2 чел. ★ 5 $
  Сделай видео-презентацию своей программы.
  Итого:   18 видеоуроков 00 мин.
4 теста 		2 чел. ★ 5  
  Финалисты:   Tom,   Николай Денисов .

Начинаем практику по языку C#





Если вы пришли без приглашения -
введите тысяча двадцать четыре (цифрами).
Чтобы стать хорошим программистом — нужно писать программы. На нашем сайте очень много практических упражнений.

После заполнения формы ты будешь подписан на рассылку «C# Вебинары и Видеоуроки», у тебя появится доступ к видеоурокам и консольным задачам.

Несколько раз в неделю тебе будут приходить письма — приглашения на вебинары, информация об акциях и скидках, полезная информация по C#.

Ты в любой момент сможешь отписаться от рассылки.
30514. Tom / Генератор qr кодов на Node JS / Bootstrap дизайн: масштаб, отступ, кнопка, панель


Научился: Добавил на форму поля для задания размера и отступа изображения qr кода. Добавил кнопку submit. Разместил на верхней части страницы элемент nav.