В рамках этой инструкции мы разберем следующие моменты:
- Научимся работать с тремя видами кнопок.
- Реализуем интернет-магазин с возможностью сохранять товары.
- Разработаем форму сбора пользовательских данных.
- Зальем интернет-магазин в облако для беспрепятственного доступа.
С чего начать разработку
Сначала заведем два проекта: для разработки на front-end мы будем использовать React, а для back-end — node.js.
Начнем с того, что инициализируем react-приложение. Пока создает приложение в существующей папке, выбрав путь через точку. Далее инициализируем backend, чтобы в файле .json появились базовые настройки.
Для удобной и актуальной разработки, как dev-зависимость устанавливаем пакет nodemon. Так мы сможем автоматически перезапускать бота после любых изменений в его коде.
Теперь установим пакет API. Лучше выбрать Node.js Telegram Bot API как более новую версию API. Пока пакет устанавливается, можно перейти к BotFather и ввести команду /newbot.
Бесплатные программы для магазина? Да, они существуют!
Вводим уникальное название бота (обязательно содержит Bot). В ответ BotFather отдаст токен, который лучше скопировать себе куда-то в блокнот (а лучше держать в секрете), поскольку он понадобится чуть позже.
Импортировать пакет API можно через require. Часть кода можно взять из документации, заменив токен демонстрационный токен на собственный.
Сначала разберем ситуацию, когда после команды /start нужно отдать пользователю какие-то кнопки.
Для проверки напишем в боте команду /start и при нажатии на кнопку теперь будет открываться окно с мини-браузером.
Кроме этого, можно написать BotFather команду /setmenubutton, выбрать бота, для которого будет использоваться кнопка и прописал URL, куда поведет кнопка.
Далее мы будем взаимодействовать с полем window.Telegram.WebApp.
import ‘./App.css’; const tg = window.Telegram.WebApp; function App() < const onClose = () => < f >return ( work >Закрыть ); > export default App;
Чтобы дебажить веб-приложение с Telegram-ботом онлайн, придется создать репозиторий на гите и привязать его в netlify. Получив ссылку на приложение, можно вставить ее в код.
Теперь кастомизируем кнопку. Изменим цвет, чтобы соответствовать айдентике мессенджера.
import ‘React’ from ‘react’; import Button from «../button/button»; import ‘./Header.css’; const Header = () => < const tg = window.Telegram.WebApp; const onClose = () => < tg.close() >return ( > >Закрыть > ); >;
Каждый такой пуш будет заново триггерить сборку на netlify, a через 30 секунд мы получим обновленную версию приложения.
Теперь создадим отдельный хук для корректного получения объекта.
const tg = window.Telegram.WebApp; export function useTelegram() < const onClose = () => < tg.close() >const onToggleButton = () => < if(tg.MainButton.isVisible) < tg.MainButton.show(); >else < /основная кнопка взаимодействия с ботом/ >return < onClose, tg, user: tg.initDataUnsafe?.user, >>
Общение с ботом происходит при помощи метода Telegram.WebApp.sendData. Теперь можно переходить к созданию страниц и маршрутов.
import React from ‘react’; import ‘./button.css’; const Button = (props) => < return ( className= /> ); >; export default Button;
Стили заносим в ProductList.css и переходим к следующему этапу.
>>ProductList.jsx
import React from ‘react’; import ‘./ProductList.css’; const ProductList = () => < return ( ProductList ); >; export default ProductList;
В index.js файле теперь нужно обернуть все наше приложение:
Теперь в App.js импортнем Route, выглядеть это будет так:
import from ‘react-router-dom’; /используется 6 версия/ Здесь же создаем две страницы для двух адресов: > /> element=> />
Теперь в приложении по корневому пути будет открываться ProductList.
import React from ‘react’; import ‘./from.css’; const Form =() => < return ( >
Введите ваши данные
type=»text» placeholder= /> >Юр.лицо >Физ.лицо ); >; export default Form;
Форму можно взять отсюда, здесь все по стандарту. Чтобы форма теперь открывалась в боте, нужно дополнить путь в index.js. [ >].
Теперь сделаем конфигурационный файл netlify.toml с опциями для редиректов. То есть, мы по любому маршруту делаем редирект в index.html.
[[redirects]] from = «/*» to = «/index.html» status = 200
На этом этапе мы уже можем вводить данные в форму, но пока не можем их отправить.
Когда мы получаем данные из веб-приложения, мы можем их отправить. Заметьте, что функции, которые мы добавляем асинхронны.
await bot.SendMessage( chatId, text ‘Спасибо за обратную связь!’) await bot.SendMessage( chatId, text ‘Ваша страна: ‘ + data? .country ); await bot.SendMessage( chatId, text ‘Ваша страна: ‘ + data? .street); setTimeout(handler ()=> < await bot.SendMessage( chatId, text ‘Ваша страна: ‘ + data? .street); >timeout 3000)
Отправка данных
Корзина для интернет-магазина на фронте или Пишем модульный javascript
Однажды пришла мне в голову безумная идея написать серию постов про различные подходы к организации javascript-кода. Такая мысль образовалась, когда по рабочей надобности изучал React.js и возрадовался от некоторых идей, заложенных его авторами. Захотелось потрогать его побольше, а потому как писать хеллоуворды из документации скучно, нужна была какая-то идея.
Раз уж я начал вести блог на тему веб-разработки, то почему бы не создать простое, но более-менее внятное приложение с применением различных библиотек и фреймворков? И не только реакта, а любых других, до которых доберется дурной и воспаленный ум. В качестве подопытного приложения я возьму простенький интернет-магазин с каталогом и корзиной.
Фишка будет в том, что код и каталога, и корзины будет написан на javascript. Корзина на фронте — не самое удачное решение для реальных проектов, но для небольших сайтов и в качестве изучения подойдет неплохо.
Для изучения React понадобится сколько-то времени, поэтому для начала развлеку вас статьей, где опишу процесс создания нашего приложения без использования библиотек и фреймворков, но с использованием яваскрипт-модулей. Главная моя цель — это показать различные подходы к созданию приложений на javascript.
С версткой заморачиваться сильно не буду, сверстаю на bootstrap, основной упор сделаю на javascript-код. Манипулировать DOM будем всем знакомым добрым jquery. Также подключим underscore для работы с данными и html-шаблонами. Данные для каталога загрузим из внешнего json-файла, а корзину будем хранить в localStorage. Итак, начнем.
Идея приложения и схема работы.
Итак, интернет-магазин на фронте. Что мы хотим от него? Хотим, чтобы была возможность как минимум вывести каталог товаров, реализовать добавление их в корзину, просматривать оную корзину, менять количество товаров в ней и удалять ошибочно добавленные с пересчетом стоимости заказа. Плюс добавим хранение данных в localStorage, дабы после перезагрузки страницы наша корзина не ушла в небытие.
Обращаю внимание, что это не одностраничное приложение. Мы создадим 2 html-страницы, каталог и корзина, но они будут служить только каркасом с основному коду. Основной код — это все-таки javascript.
Функционал подробнее.
Главное меню — 2 кнопки, каталог и корзина. В меню рядом с надписью «корзина» показывается выбранных количество товаров. Страница index — главная страница магазина, она же каталог. Подгружаем товары их из внешнего json-файла. Товары имеют поля: id, name, price, img. У каждого товара есть кнопка «Добавить в корзину».
Список товаров храним в localStorage (id, name, count, price). Корзина — таблица с выбранными товарами. Выводим id и название товара, его количество и сумму. Под таблицей показываем общую сумму всех товаров. При изменении количества товаров и его удалении меняем все связанные данные.
Каталог и корзину мы оформим в виде отдельных модулей.
Можно посмотреть, что у нас в итоге получится, здесь. Попробуйте добавить товары в корзину, перейти в нее, менять количество и удалять товары, и увидите, как задумана работа магазина. Или можете сразу скачать исходники по этой ссылке.
Структура файлов
В корне проекта разместим 2 файла: index.html (каталог) и cart.html (корзина). И несколько папок: css, там лежит bootstrap.min.css и main.css — наши стили. Папка data содержит один файл goods.json — наши товары. fonts хранит шрифты от bootstrap-иконок. img — картинки товаров и гифку loading, которую мы будем показывать посетителям сайта, пока грузится каталог и корзина. Папка js разделена на 2 подпапки: vendor и modules. vendor содержит нужные нам библиотеки: jquery и underscore, а modules — модули нашего приложения. Их всего 3: main.js отвечает за инициализацию приложения, catalog — за вывод товаров, cart — за работу корзины.
Небольшое отступление: я намеренно не стал вводить лишнюю логику для нашего проекта. Хорошей практикой считается разработка с подходом MVC, разделение кода на модели, контроллеры и представления и разбиение этих частей на отдельные файлы для наглядности. Можно долго спорить на тему правильности применения такого подхода для абсолютно всех проектов, но в нашем конкретном примере мы отойдем от этого постулата и весь код для управления корзиной разместим в одном файле, а уже внутри него логически отделим работу с данными от разметки.
Приступаем к разработке.
Я не буду расписывать подробно каждую строчку кода, это заняло бы слишком много места и времени. В статье рассмотрим основные моменты, а весь код можно посмотреть в исходниках по ссылке выше. Код с подробными комментариями.
Начинаем.
Создаем разметку.
Создадим в корне нашего проекта файлы index.html и cart.html. Каждый файл — стандартная html5-заготовка. В блоке head подключим шрифт Ubuntu с Google Fonts и 2 css-файла: bootstrap.min.css и наши собственные стили main.css.
Webdevkin. Интернет-магазин. Javascript
Источник: webdevkin.ru
Создание магазина с оплатой на Python / Изучение Flask
Разработка веб-сайтов на основе Flask не столь сложная работа. В статье мы познакомимся с фреймворком Flask и на его основе создадим магазин с системой оплаты на сайте.
Прежде чем мы вникнем в разработку, давайте немного поговорим про Flask и узнаем на что он способен.
Фласк является гораздо более простым и в некоторой степени более удобным веб фреймворком для построения сайтов на Python нежели Django . Это его огромное преимущество, но оно обусловлено тем, что Flask – менее масштабный и обладает меньшим набором функций в сравнении с Джанго.
Flask очень удобен, когда требуется построить быстро веб сайт, при чём сайт не должен быть каким-то гигантом по типу Youtube или некой социальной сети.
На Flask были созданы такие веб сайты, как: Airbnb, Lyft, Uber, и даже Reddit. Больше сайтов можете посмотреть по этой ссылке .
Настройка проекта
Приступим к практической части. Сперва убедитесь что Python установлен, а также скачайте любой текстовый редактор, к примеру, PyCharm . Внутри редактора создайте новый проект.
Чтобы работать с Flask его нужно установить. Для этого в терминале пропишите команду:
pip install flask
Создание интернет магазина
Дальнейшая полная разработка интернет магазина описана в видео формате ниже:
Полезные ссылки:
- Программа обучения Python ;
- Изучение Django в одном видео ;
- Подборка проектов на Flask ;
- Курс по изучению Flask ;
- Платежная система Fondy ;
- Ссылка на скачивание готового проекта из видео.
Дополнительный курс
На нашем сайте также есть углубленный курс по изучению языка Питон . В ходе огромной программы вы изучите не только язык Питон, но также научитесь создавать веб сайты за счёт веб технологий и фреймворка Джанго. За курс вы изучите массу нового и к концу программы будете уметь работать с языком Питон, создавать на нём полноценные ПК приложения на основе библиотеки Kivy, а также создавать веб сайты на основе библиотеки Джанго.
Больше интересных новостей
Лучшие примеры страниц ошибок 404
Поисковая оптимизация сайтов: 7 важных компонентов SEO
Google Translate теперь использует ИИ
MVP: определение и правила создания
Источник: itproger.com