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

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

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

Код: nodejsqr

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



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



--


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

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

npm init

Отчёт отправил: 30514. Tom Выполнено за 16 мин. [Показать отчёт]
Научился: Создал файл проекта package.json с помощью команды npm init. Создал файл app.js, в котором вывел текст приветствия. 
4 Установка библиотеки qrcode. Вывод qr кода в консоль 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы установим библиотеку 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 кода в файл. 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы выведем qr код в файл изображения, а  также распознаем его при помощи online-сервиса qrrd.ru

https://www.qrrd.ru/ - ресурс создания и распознания qr кодов
Отчёт отправил: 30514. Tom Выполнено за 19 мин. [Показать отчёт]
Научился: С помощью метода toFile научился сохранять qr-код в файл. Создал файл изображения qr-кода, загрузил его на сайт qrrd.ru, распознал исходный текст. 
6 Параметры вывода 00:00:00
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы зададим параметры qr кода: цвет, размер (масштаб), отступ

https://www.npmjs.com/package/qrcode#api - описание свойств qr кода в библиотечке qrcode
Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт]
Научился: Научился изменять параметры изображения qr-кода: цвет, отступ и масштаб. 
7 Создание проекта qr_web 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы создадим проект для web генератора qr кода и подключим к нему необходимые библиотеки


npm init  -y
npm i qrcode express hbs
npm i -D nodemon
Отчёт отправил: 30514. Tom Выполнено за 42 мин. [Показать отчёт]
Научился: Научился создавать проект с помощью команды npm init -y. Создал новый проект, установил библиотеки qrcode, express, hbs и nodemon. 
8 Запуск web проекта 00:00:00
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы напишем алгоритм запуска  express сервера в index.js,
а потом запустим с командной строки

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


"scripts": {
    "dev": "nodemon index"
  }
Отчёт отправил: 30514. Tom Выполнено за 23 мин. [Показать отчёт]
Научился: Запустил сервер на localhost по порту 3000. При обращении к index странице выводится сообщение. Научился использовать nodemon для автоматического перезапуска сервера при изменении в файле index.js. 
9 Подключение представления 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы создадим представление и подключим его к нашему проекту
Отчёт отправил: 30514. Tom Выполнено за 5 мин. [Показать отчёт]
Научился: Подключил к проекту библиотеку hbs. Использовал ее как view engine для библиотеки express. Создал файл представления index.hbs, вывел его по запросу get к адресу / с помощью res.render("index"). 
10 Создание формы 00:00:00
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы создадим форму для генерации qr кода

https://placeholder.com/  - генерация заглушек для изображения
Отчёт отправил: 30514. Tom Выполнено за 14 мин. [Показать отчёт]
Научился: Добавил в представление index.hbs форму для генерации qr-кода. Разместил на форме элементы textarea, кнопку submit и заглушку для изображения. 
11 Обработка данных формы 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы создадим обработчик данных формы
Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт]
Научился: Создал обработчик post для адреса '/'. Добавил parser и после нажатия кнопки вывел текст, который был введен в текстовое поле qrtext. 
12 Получение qr кода 00:00:00
1 тест 		3 чел. ★ 5 Done
  На этом уроке мы получим qr код и выведем его на страницу
Отчёт отправил: 30514. Tom Выполнено за 21 мин. [Показать отчёт]
Научился: Подключил библиотеку qrcode. Создал изображение qr кода при нажатии кнопки "Создать qr код". Реализовал передачу параметра image_link в представление через аргумент метода render. Для get запроса передается адрес с сайта placeholder, для post запроса передается название созданного изображения qr кода. Распознал текст в созданном изображении qr кода с помощью сайта qrrd.ru. 
13 Управление параметрами: добавление элементов в представлении 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы создадим элементы управления параметрами в представление
Отчёт отправил: 30514. Tom Выполнено за 16 мин. [Показать отчёт]
Научился: Добавил ссылку для сохранения изображения, указал для нее атрибут download. Добавил на форму элементы для выбора цвета фона и кода, размера и отступа qr-кода.  
14 Управление параметрами: создание qr кода 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы реализуем создание qr кода с параметрами
Отчёт отправил: 30514. Tom Выполнено за 15 мин. [Показать отчёт]
Научился: Научился с помощью nodejs и express получать данные из формы по POST запросу. Реализовал создание изображения qr-кода с переданными значениями цвета фона, кода, размера и отступа. 
15 Bootstrap дизайн: подключение bootstrap 00:00:00
 3 чел. ★ 5 Done
  На этом уроке мы подключим к нашему представлению функционал фреймворка bootstrap и создадим заготовку колонок для дизайна

https://getbootstrap.com

https://getbootstrap.com/docs/5.1/getting-started/introduction/


Отчёт отправил: 30514. Tom Выполнено за 11 мин. [Показать отчёт]
Научился: Подключил bootstrap к проекту, вставил шаблон страницы, заменил заголовок, добавил две колонки с текстами "Первая колонка" и "Вторая колонка". 
16 Bootstrap дизайн: карты, поля, две колонки 00:00:00
 2 чел. ★ 5 Done
  На этом уроке мы перенесем элементы управления в bootstrap функционал (начало)
Отчёт отправил: 30514. Tom Выполнено за 34 мин. [Показать отчёт]
Научился: С помощью bootstrap создал новый интерфейс страницы генерации qr-кода. Перенес в первую колонку поля для ввода текста и выбора цвета фона и кода. Во второй колонке разместил блок изображения. 
17 Bootstrap дизайн: масштаб, отступ, кнопка, панель 00:00:00
 2 чел. ★ 5 Done
  На этом уроке мы реализуем числовые поля, кнопку submit и панель в bootstrap функционале
Отчёт отправил: 30514. Tom Выполнено за 29 мин. [Показать отчёт]
Научился: Добавил на форму поля для задания размера и отступа изображения qr кода. Добавил кнопку submit. Разместил на верхней части страницы элемент nav.  
18 ФИНАЛЬНЫЙ УРОК без видео
 2 чел. ★ 5 Done
  Сделай видео-презентацию своей программы.
Отчёт отправил: 30514. Tom Выполнено за 55 мин. [Показать отчёт]
Научился: На этом курсе я научился генерировать qr коды с помощью node js. Попрактиковался в создании сервера с помощью библиотеки express. Познакомился с bootstrap 5. Следующий курс "Bootstrap-4 первые шаги". 
Видеообзор: ShtMPvbjFFw
  Итого:   18 видеоуроков 00 мин.
4 теста 		2 чел. ★ 5  
  Финалисты:   Tom,   Николай Денисов .

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





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

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

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

Ты в любой момент сможешь отписаться от рассылки.
30514. Tom / Генератор qr кодов на Node JS / ФИНАЛЬНЫЙ УРОК


Научился: На этом курсе я научился генерировать qr коды с помощью node js. Попрактиковался в создании сервера с помощью библиотеки express. Познакомился с bootstrap 5. Следующий курс "Bootstrap-4 первые шаги".

9014. Николай Денисов / Генератор qr кодов на Node JS / ФИНАЛЬНЫЙ УРОК


Научился: Познакомился с Node JS Поработал с Bootstrap Узнал как создовать сайты JS
Трудности: Вродебы все было просто - рекомендую всем к прохождению.