🔹 Hello everyone! You now have an almost ready-made project in front of you, the development of which took a lot of effort and time. This is my first big project in the field of IT website creation. Now I will try to briefly describe the essence of the project, its purpose and how it works. The goal of the project is to create an online marketplace for ordering any product on the site and transfer the order data to a convenient environment for order analysis.Using HTML5 and CSS, I made the layout of the site.
🇷🇺 Всем привет! Перед вами сейчас расположен почти готовый проект, на разработку которого ушло не мало сил и времени. Это мой первый большой проект в сфере IT создания веб-сайтов. Сейчас я постараюсь кратко описать суть проекта его цель и то как он работает. Цель проекта - создать онлайн маркетплейс для заказа какого-либо товара на сайте и передать данные заказа в удобную среду для анализа заказа.Используя HTML5 и CSS сделал макет сайта.
🔹 The question arose about how to make a basket of goods and the first thing that came to mind was to create a server for downloading goods, but then I would have to study JS frameworks, and there was not much time for this, especially since I did not plan to make more products on the site, this method would only complicate the creation process. After studying JS, I learned about localStorage, which formed the basis for creating a bucket (Then I will return to the discussion of this method). I decided to choose telegram as the medium for processing information, since it is a popular social network in which you can conveniently create a bot. There were also convenient options that also took place in the project: sending an order by e-mail, sending an exel table. 📧
🇷🇺 Встал вопрос о том как сделать корзину товаров и первое что полезло на ум - создание сервера для загрузки товаров, но тогда пришлось бы изучать фреймворки JS, а на это времени особо не было, тем более что я не планировал делать больше количество товаров на сайте, этот способ только усложнял бы процесс создания. После изучения JS я узнал о localStorage, который и лег в основе создания корзины (Далее я еще вернуть к обсуждению данного способа). В качестве среды для обработки информации я решил выбрать телеграм, так как это популярная соц-сеть в которой можно удобно создать бота. Были еще удобные варианты, которые тоже имели место быть в проекте: отправка заказа на e-mail, отправка таблицы exel. 📧
🔹 Local storage provides storage for data on an ongoing basis. Data from local storage is not automatically deleted and has no expiration date. This storage was perfect for my requirements, and there were enough videos on how to create a shopping cart on the site using localStorage. After learning the basics of JS, I started searching on YouTube for information on how to create a shopping cart. Unfortunately, most of the videos seemed too sophisticated and incomprehensible to me, I was looking for an easier way to create a shopping cart, but not all videos were useless. I found two videos that helped me create the SIMPLEST SHOPPING CART (The videos are attached below).
🇷🇺 Local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Это хранилище идеально подходило под мои требования, да и было достаточное количество видео о том, как создать корзину на сайте при помощи LocalStorage. Изучив основу JS я начал искать на ютубе информаию о том, как создать корзину. К сожалению, большинство видео для меня показались слишком замудренными и непонятными, я искал более простой способ для создания корзины, однако не все видео ролики были бесполезными. Я нашел два видео которые помогли мне создать САМУЮ ПРОСТУЮ КОРЗИНУ (Видео прикрепленны ниже).
🔹 After I made a shopping cart that automatically adds products, I started thinking about how to automatically add new products to the page. The idea is exactly the same - to parse information from a JSON file into local Storage and upload elements to the page from there. Yes, the method may seem strange, slow and impractical, but it was the best thing that came to my mind. Below are examples of the contents of JSON files.
🇷🇺 После того, как я сделал корзину, в которую автоматически добавляются товары, начал думать о том, как автоматически добавлять на страницу новые товары. Идея точно такая же - парсить информацию из JSON файла в local Storage и уже от туда подгружать элементы на страницу. Да, метод может показаться странным, медленным и нецелесообразным, но это было лучшее, что пришло мне на ум. Ниже приведены примеры содержания JSON файлов.
🔸 BANNERS - Advertisement 🔖 / Реклама - Банеры 🔖
[
{
"text": "Турнир по игре<br>Dota2 на купон!🏆",
"scr": "https://i.ibb.co/fGTdYyY/image.jpg"
},
...
[🔸 Categorys ✅ / Категории ✅
[
{
"categorya": "Пицца",
"id": 1
},
...
[🔸 Cards 📤 / Карточки товара 📤
[
{
"id": 1,
"name": "Пицца 'Сплошной сыр'",
"img": "https://i.ibb.co/C9gyzf2/PIZZA-SIR.png",
"price": 499,
"category": "Пицца",
"quantity": 0,
"about_one": "30 см, традиционное тесто, 470 г" ,
"about_sec": "Моцарелла, сыры чеддер и пармезан, фирменный соус альфредо, Традиционное тесто"
},
...
[🔹 This technology is based on a JSON file that initially stores a list of products, advertising banners, and categories. With it, you can not write code for each card, but use a script to make products, banners and categories add themselves! Next, the script tracks the click on each button on the site and records the click on the individual counter n. In the code you can find a lot of functions, comments to which I tried to write well and I think you can figure out what each of them does. Briefly: When you click on the button, an element from the "products" key (All products) is transferred to the "cart" key. Then, using the function, everything in the "cart" is transferred to a specific column in the table. The final sum is displayed at the bottom of the table, which is calculated by the function. After clicking on the "Send order" button, using the "Axios" module (Link below), an overgrowth is sent to the bot in the telegram, which displays the text in the group chat message.
🇷🇺 В основе этой технологии - файл JSON в котором изначально хранится список товаров, банеры рекламы, категории. С помощью него можно не писать код для каждой карточки, а при помощи скрипта сделать так чтобы товары, банера и категории добавлялись сами! Далее скрипт отслеживает нажатие на каждую кнопку на сайте и записывает нажатие на индивидуальный счетчик n. В коде вы можете найти множество функций, комметарии к которым я постарался хорошо написать и думаю вы сможете раобраться что делает каждая из них. Кратко: При нажатии на кнопку в ключ "cart" переносится элемент из ключа "products" (Все товары). Потом при помощи функции все что находится в "cart" переноситься в определенный столбец таблицы. Снизу таблицы выведена конечная сумма, которая подсчитывается функцией. После нажатия на кнопку "Отправить заказ" при помощи модуля "Axios" (Ссылка снизу) посылается зарос на бота в телеграмме который выводит текст в сообщении чата группы.
🔹 This is what it looks like in a telegram:
🇷🇺 Вот как это выглядит в телеграмме:
🔹 I have a new task in front of me - the functionality of the bot in the telegram. I have never worked with bots in telegram before, only in online constructors. Realizing that the designer's site was not enough for me, I started writing a bot in Python. Why Python? Because it is a convenient and understandable programming language that I have known for 2 years. After studying the material that is needed to create bots in telegram using the pyTelegramBotAPI library, I wrote two bots. The first is the identifier. The bot can send a link to the group if the person sends the correct password. The second one is a bot for the group. It also monitors the pressing of the "Confirm" and "Delete" buttons. A piece of code from the second bot:
🇷🇺 Передо мной встала новая задача - функционал бота в телеграмме. Прежде я никогда не работал с ботами в телеграмме, только в онлайн-конструкторах. Поняв, что сайта конструктора мне не хватит, я принялся писать бота на Python. Почему Python? Потому что удобный и для меня понятный язык программирования который я знаю уже 2 года. Изучив материал который нужен для создания ботов в телеграмме при помощи библиотеки pyTelegramBotAPI, написал двух ботов. Первый - аунтификатор. Бот может прислать ссылку на группу, если человек отправит верный пароль. Второй - бот для группы. Он же, отслеживает нажатие кнопок "Подтвердить" и "Удалить". Частица кода со второго бота:
🔸 A bot that tracks button clicks in a group \ Бот отслеживающий нажатие на кнопки в группе
import telebot
from telebot import types
# Токен бота с группы
TOKEN_BotGROUP = '6895427216:AAHUd-VmtQNfR6MB_v32bO9_SQkwOEHXf-g'
bot = telebot.TeleBot(TOKEN_BotGROUP)
# Чекаю нажатие на кнопки
@bot.callback_query_handler(func=lambda call: True)
def callback_inline(call):
try:
if call.message:
# Если подтвердить то закрепляю сообщение
if call.data == 'accept':
bot.pin_chat_message(call.message.chat.id, call.message.message_id)
# Если удалить - удаляю сообщение
elif call.data == 'delete':
bot.delete_message(call.message.chat.id, call.message.message_id)
except Exception as e:
print(repr(e))
bot.polling(none_stop=True)
- It takes no more than 2 minutes to turn on the bot 🕘
- The working time of the bot is from 40 minutes (I don't know for sure yet) 🕛
- There is a mobile application
🇷🇺 Боты написаны, но как поддерживать их работу на постоянной основе? Один из видеороликов ниже помог мне найти ответ. Хостинг. После изучения 2-5 хостингов я выдвинул лучший. replit.com - сайт на котором можно запускать свой код, и который может на протяжении некоторого времени включать бота. Плюсы эого сервиса:
- Включить бота занимает не более 2х минут 🕘
- Время работы бота от 40 минут (Точно не знаю пока что) 🕛
- Есть мобльное приложение
🔹 Bots can be uploaded to a full-fledged 24/7 hosting, but it's free, a good 24-hour host is currently impossible. As a result of my work, I got: A working website hosted on Github, Bots in telegram, and of course invaluable experience working with HTML, CSS, JAVASCRIPT (Local Storage), PYTHON (Bots).
🇷🇺 Ботов можно залить на полноценный 24/7 хостинг, но нати бесплатный, хороший круглосуточный хост на данный момент невозможно. В результате работы я получил: Рабочий сайт на хостинге Github, Ботов в телеграмме, и конечно же бесценный опыт работы с HTML, CSS, JAVASCRIPT (Local Storage), PYTHON (Bots).
Tip
🇷🇺 Видео частично помогут решить основные задачи.
- RU: 🎥 Курс HTML + CSS, который я прошел перед созданием макета сайта
- RU: 🎥 Корзина JS на чистом DOM
- US: 🎥 Local storage shopping cart. | Insert, update, remove products from the browser's local storage.
-
Видео крайне полезно! Оно предоставляет почти готовое решения которое я подкрутил.
- RU: 🎥 Отправляем html форму с сайта на telegram + с документом на JavaScript
-
Мужик отлично рассказал о Axios и как им пользоваться.
- RU: 🎥 Пишем TELEGRAM бота на Python
-
Почти готовый ТГ бот
- RU: 🎥 БЕСПЛАТНЫЙ 24/7 ХОСТИНГ ДЛЯ БОТА ДИСКОРД! JavaScript + Python! .js + .py
-
Хостинг
Note
🇷🇺 Сервисы помогут в создании проекта.
Project Pizzeria "Pizza and Capybara" is distributed under the MIT license