HOME FORUMS MEMBERS RECENT POSTS LOG IN  
× Авторизация
Имя пользователя:
Пароль:
Нет аккаунта? Регистрация
Баннер 1   Баннер 2
НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ
loading...
Скрыть
Вернуться   ANTICHAT > ПРОГРАММИРОВАНИЕ > Python
   
Ответ
 
Опции темы Поиск в этой теме Опции просмотра

  #1  
Старый 08.03.2021, 03:51
Mamashin
Познавший АНТИЧАТ
Регистрация: 17.11.2021
Сообщений: 1,134
С нами: 2363906

Репутация: 8


По умолчанию

Хаю-хай с вами ивангай, порылся на 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 или рус. К.

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

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



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

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

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

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

Как надо:



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

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

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




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

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

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




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

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

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



Сразу решим вопрос с 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.

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



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



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



Если у вас всё так же, то я готов вас поздравить у вас всё получилось, а те кто знают хотя бы чуть чуть 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 документе!



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

Основной html:





Код:
BlastHack - Гайд

Меню

BlastHack


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

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



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



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

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



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

Основной html:





Код:
BlastHack - Гайд

Меню

BlastHack

Крутые песни:

The Girl Next Door feat. WMD - ON TOP

Gorillaz - Feel Good Inc.

Найтивыход - ты никому не нужен


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

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



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



Конечно вы можете использовать точно так же как и для сайтов 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 приложение!

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



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






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

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

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

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

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

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

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



Готовый exe-python:



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


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

  #2  
Старый 08.03.2021, 11:04
frit
Постоянный
Регистрация: 02.03.2020
Сообщений: 388
С нами: 3263158

Репутация: 48
По умолчанию

баян
 
Ответить с цитированием

  #3  
Старый 08.03.2021, 11:30
Metall
Познающий
Регистрация: 04.01.2008
Сообщений: 62
С нами: 9658140

Репутация: 30
По умолчанию

я конечно все понимаю, но зачем подключать бутстрап и не использовать его...
 
Ответить с цитированием

  #4  
Старый 08.03.2021, 11:38
Mamashin
Познавший АНТИЧАТ
Регистрация: 17.11.2021
Сообщений: 1,134
С нами: 2363906

Репутация: 8


По умолчанию

Цитата:
Сообщение от pepsi_cola  

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

  #5  
Старый 08.03.2021, 11:42
Metall
Познающий
Регистрация: 04.01.2008
Сообщений: 62
С нами: 9658140

Репутация: 30
По умолчанию

Цитата:
Сообщение от MiR0nov  

Привет, я использовал navbar, а так же я планирую писать еще несколько гайдов, и решил подключить эту утилиту сразу, чтобы потом не было недопониманий.
ты в гайде его не использовал, и подключать его нужно в head
 
Ответить с цитированием

  #6  
Старый 08.03.2021, 11:51
Mamashin
Познавший АНТИЧАТ
Регистрация: 17.11.2021
Сообщений: 1,134
С нами: 2363906

Репутация: 8


По умолчанию

Цитата:
Сообщение от pepsi_cola  

ты в гайде его не использовал, и подключать его нужно в head
Почитай пожалуйста внимательно гайд, потом перейди в navbar от bootstrap, стили bootstrap я подключил в head, а скрипты между тегами и , если бы я писал navbar без стилей bootstrap, было бы не очень красиво.

Вот тебе скриншот из 1 моего кода выше, а вот ссылка на navbar из bootstrap: https://bootstrap5.ru/docs/components/navbar

 
Ответить с цитированием

  #7  
Старый 09.03.2021, 02:08
Rei
Познавший АНТИЧАТ
Регистрация: 18.06.2017
Сообщений: 1,632
С нами: 4686777

Репутация: 183


По умолчанию

прикольно, но сколько эта лабуда ресурсов жрет?
 
Ответить с цитированием

  #8  
Старый 09.03.2021, 18:04
Mamashin
Познавший АНТИЧАТ
Регистрация: 17.11.2021
Сообщений: 1,134
С нами: 2363906

Репутация: 8


По умолчанию

Цитата:
Сообщение от Rei  

прикольно, но сколько эта лабуда ресурсов жрет?
Привет, чуть меньше чем 1 открытая страница в браузере. Ну естественно чем больше стилей, js скриптов тем думаю понятно что больше, так сказать на слабом пк пойдёт)
 
Ответить с цитированием
Ответ



Предыдущая тема Следующая тема

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 


Быстрый переход




ANTICHAT ™ © 2001- Antichat Kft.