ANTICHAT - Web-интерфейс для Python

Хаю-хай с вами ивангай, порылся на bh и вроде бы не нашёл данного гайда/информации, поэтому решил написать свой крутой красивый прикальдесный гайд как приклеить веб-интерфейс к мозгам на питоне, если такая тема уже есть, не надо пожалуйста проявлять агрессию в мою сторону пж, заранее спасибо.

В этом гайде я разжую вам как можно соединить языки разметки гипертекста(html,css) и язык программирования/бэкэнда "Python" на простых словах - html/css - тело, python - мозги. Так же хочу сразу сказать, в этом гайде я не буду писать какую либо программу, а вот в следующем гайде мы будем писать красивое крутое приложение с показом погоды, или какой нибудь плеер, это лишь вводный гайд по теме веб-интерфейса и python, тк такую вещь как DevelNext не каждый может понять.

Что нам нужно:

1. Python, скачать(клик) можно с официального сайта, качаем последнею версию для вашей винды или другой ос, думаю про разрядность системы не стоит упоминать.

2. Библиотека EEL, pip install eel - на простых словах - крутая вещь для связи веб интерфейса и python.

3. Библиотека PyInstaller, pip install pyinstaller - на простых словах - чтобы скинуть вашу приколюху вашему другу без заморочки с установкой питона.

4. Иметь представление, хотя бы чуть чуть об гипертекстовых языках - css/html - на простых словах, html - абсолютно все, что вы видите в интернете, css - одежда для сайта(цвета,формы, размеры и тд.)

5. Уметь пользоваться компьютером и не путаться среди 2х папок в папке...

Итак начнём... После установки питона, открываем командную строку на Windows это сочетание Win+R, по русски - кнопка с квадратами + англ. R или рус. К.

Готово, командная строка у нас открыта, я же буду использовать эмулятор командной строки, потому что - потому. Он ничем не отличается от обычной кроме наличия некоторых удобств и функций.

Перед вами примерно такая картина:

https://forum.antichat.xyz/attachmen...d4c80f438a.png

Заходим на любой нужный диск и создаём там папку где и будет хранится наше приложение, я же буду использовать диск "C".

Затем прописываем в командной строке "cd c:/python/program" ПО РУССКИ - cd (ваш диск):/ваша папка/файл или еще 1 папка где будет сама программа.

В моём же случаи, программа будет храниться на диске C в папке python и в папке program. Думаю понятно объяснил.

Если видим такую ситуацию как ниже, то я вас поздравляю, вы в директории вашей будущей программы.

Как надо:

https://forum.antichat.xyz/attachmen...475996714c.png

Теперь создаём в этой папке 1 текстовый файл и 1 папку.

У текстового файла расширение .txt меняем на .py, если у вас не видно расширения и у вас Windows 10, то в этой же папке, чуть выше нажмите "Вид" ставим галочку "Расширения имен файлов"

Включаем возможность изменять расширения файлов:

https://forum.antichat.xyz/attachmen...b1069384e8.png

Теперь, когда у нас есть .py файл(у меня это who.py) нам нужно создать папку, желательно с каким то нужным названием например: web, interface или что то такое, я же назову "why" так как я показываю вам пример. В папке которая рядом со скриптом создаём файл - название.html, у меня же это who.html, так же сразу там можно создать папку css.

Основная папка:

По русски - здесь у нас так сказать логика/мозги - .py, а в папке тельце для наших мозгов, так сказать сайт с бэкэндом на Python, только это будет приложение.

https://forum.antichat.xyz/attachmen...0bc1bd9703.png

Папка с интерфейсом:

В файле .html у нас будет основные элементы приложения, а с помощью css мы сделаем его ультра красивым!

Python, играет роль не только как открывашка html,css,js в формате приложения, но и как эффективный язык программирования, паралельно с интерфейсом, например тот же тэг в html мы можем просто заменить оператором "print" в питоне, но это нам не надо, я вижу питон как решение сложных и даже не возможных задач для html.

https://forum.antichat.xyz/attachmen...f62f095002.png

Сразу решим вопрос с python, открываем наш .py файлик любым текстовым редактором но не блокнотом, я же использую sublime text 2, затем пишем там следующее:

.py:

Код:

print ( "[PYTHON]: Я запустился!" ) # Это не обязательная строчка, её я написал для себя. import eel # Импортируем нашу библиотеку eel . init ( 'why' ) # Подключаем папку с интерфейсом eel . start ( 'who.html' , size = ( 500 , 500 ) ) # ell.start - подключаем основной файлик, size=(500, 500) - размеры приложения при открытии.

Теперь, при запуске нашей программы у нас будет открываться наше приложение.

Запустить программу через консоль: переходим в директорию с нашей программой, и пишем "python название.py", если у вас есть ошибки в коде - командная строка сообщит об этом и программа не запуститься.

Итак, приложение у нас есть, но что в него запихать? Да всё что угодно, можно запихать туда то же navbar меню, написать его в стиле сайта но это не совсем логично и глупо, можно приклеить тот же калькулятор, считать будет python, а за оформление приложения будут отвечать css и html.

Давайте напишем стандартную структуру html страницы и 1 фразу в нашем приложении.

Основной html:

Код:

BlastHack - Гайд Привет, мир!

Давайте запустим наше приложение! Пока мы еще его не скомпилировали в exe, откроем через консоль! Заходим в директорию с нашим творением и пишем - python название.py я же пишу - python who.py.

Если после принта, у вас нету ошибок значит всё прекрасно и приложение успешно запустилось!

https://forum.antichat.xyz/attachmen...586941d583.png

Теперь смотрим на само приложение!

https://forum.antichat.xyz/attachmen...6c6a44c972.png

Панель задач:

https://forum.antichat.xyz/attachmen...40f3bd9b04.png

Если у вас всё так же, то я готов вас поздравить у вас всё получилось, а те кто знают хотя бы чуть чуть html,css,js уже поняли что можно сделать)

Я же покажу вам лишь несколько интересных вещей только на html, в следующем гайде как я уже сказал будем писать мозги на python, возможно даже и игру.

Итак, наложим красивый гридиентовый фон для нашего приложения!

Открываем папку css и создаём там любой файл с расширением .css, затем вставляем в него:

style.css:

Код:

body { background : linear-gradient ( -45deg , #ee7752 , #e73c7e , #23a6d5 , #23d5ab ) ; background-size : 400% 400% ; animation : gradient 10s ease infinite ; } @keyframes gradient { 0% { background-position : 0% 50% ; } 50% { background-position : 100% 50% ; } 100% { background-position : 0% 50% ; } }

Теперь посмотрим на наше приложение! Заранее подключив этот стиль в html документе!

https://forum.antichat.xyz/attachmen...0dc69d0261.png

Фон раздвоился поскольку у нас всего лишь 1 элемент! Нечего страшного, сейчас мы свами подключим библиотеку bootstrap и добавим меню в наше приложение.

Основной html:

Код:

BlastHack - Гайд Меню BlastHack

Теперь давайте взглянём на наше приложение!

Так оно будет выглядит в полном окне:

https://forum.antichat.xyz/attachmen...fbf1ed2453.png

А вот так в стандартных размерах или на телефоне с ОС Android:

https://forum.antichat.xyz/attachmen...867d7774f8.png

Опять же полоски, смотрится не очень красиво я согласен, но опять же у нас нечего нету) Давайте добавим тег и добавим 3 песни в наше приложение, чтобы хоть чем то занять это место, кстати ниже можно сделать информативную штуку как на многих сайтах, честно не знаю как это называется :D.

Создадим в папке с нашим веб-интерфейсом папку "source" и кинем туда 3 трека(просто ради примера), я буду использовать свои любимые.

https://forum.antichat.xyz/attachmen...50e24f172f.png

Теперь сам код

Основной html:

Код:

BlastHack - Гайд Меню BlastHack Крутые песни: The Girl Next Door feat. WMD - ON TOP Gorillaz - Feel Good Inc. Найтивыход - ты никому не нужен

И вот, что у нас получилось:

Вот так выглядит наше простое и красивое приложение на весь экран:

https://forum.antichat.xyz/attachmen...2ce026a273.png

Теперь в стандартных размерах:

https://forum.antichat.xyz/attachmen...7e99eef4fe.png

Конечно вы можете использовать точно так же как и для сайтов javascript, я хотел лишь показать вам все это в деле) Теперь я пожалуй добавлю 1 картинку и информационную панель! И пожалуй на этом закончу данный гайд. Для начала код:

Основной html:

Код:

BlastHack - Гайд Меню BlastHack Крутые песни: The Girl Next Door feat. WMD - ON TOP Gorillaz - Feel Good Inc. Найтивыход - ты никому не нужен Приложение создано в ознакомительных целях для: BlastHack . Без цели оскорбить кого либо, автор гайда - MiR0nov .

Так же создал еще 1 стиль для нижнего подвала приложения!

style.css:

Код:

.info { background : black ; border : 0px solid black ; position : fixed ; left : 0 ; right : 0 ; bottom : 0 ; } img { position : fixed ; left : 45px ; bottom : 10px ; }

Теперь посмотрим на наше готовое, красивое, фактически на python приложение!

Полный размер:

https://forum.antichat.xyz/attachmen...fb14144729.png

Размер при запуске:

https://forum.antichat.xyz/attachmen...b303767f51.png

Вот такой вот получился у меня гайд! Спасибо всем за внимание, я потратил 3 часа на создание этого гайда, после других порталов и долгого отсутствия на bh мне очень тяжело привыкнуть ко всему. Так оставлю архив со всем этим делом, у вас вообще нечего не получится даже по всем моим комментариям в коде и разжовкой в тексте.

Ну, а теперь как же все таки скинуть это своему другу?

Ответ очень прост:

1. Вспоминаем про библиотеку PyInstaller, про которую я говорил в самом начале.

2. Переходим в директорию со скриптом(через кмд).

3. Прописываем следующие: pyinstaller -F название.py, в моём случаи: pyinstaller -F who.py.

И ожидаем от 20 секунд до полторы минуты, зависит от размера всей вашей программы, как вы помните мы подключали html,css, а там еще пару треков и поэтому вес программы вышел аж на 11мб. После компиляции у вас появятся несколько папок по верх вашего файла и папки с интерфейсом, вам нужна папка "dist", открываете вашу папку с интерфейсом копируете от туда все файлы и папки и вставляйте в папку dist уже к exe файлу - готово! Данную папку с программой можно кидать любому вашему другу и ему не обязательно даже устанавливать питон.

Готовый exe-python:

https://forum.antichat.xyz/attachmen...28ac9e647f.png

Всем еще раз большое спасибо за прочтение данного гайда, я рад если он вам чем нибудь помог, ждите следующих тем!

Материал из гайда(на бх не помещается!):YandexDisk(click)