- 969
- 517
Хаю-хай с вами ивангай, порылся на 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 в формате приложения, но и как эффективный язык программирования, паралельно с интерфейсом, например тот же тэг <p> в html мы можем просто заменить оператором "print" в питоне, но это нам не надо, я вижу питон как решение сложных и даже не возможных задач для html.
Сразу решим вопрос с python, открываем наш .py файлик любым текстовым редактором но не блокнотом, я же использую sublime text 2, затем пишем там следующее:
Теперь, при запуске нашей программы у нас будет открываться наше приложение.
Запустить программу через консоль: переходим в директорию с нашей программой, и пишем "python название.py", если у вас есть ошибки в коде - командная строка сообщит об этом и программа не запуститься.
Итак, приложение у нас есть, но что в него запихать? Да всё что угодно, можно запихать туда то же navbar меню, написать его в стиле сайта но это не совсем логично и глупо, можно приклеить тот же калькулятор, считать будет python, а за оформление приложения будут отвечать css и html.
Давайте напишем стандартную структуру html страницы и 1 фразу в нашем приложении.
Давайте запустим наше приложение! Пока мы еще его не скомпилировали в exe, откроем через консоль! Заходим в директорию с нашим творением и пишем - python название.py я же пишу - python who.py.
Если после принта, у вас нету ошибок значит всё прекрасно и приложение успешно запустилось!
Теперь смотрим на само приложение!
Панель задач:
Если у вас всё так же, то я готов вас поздравить у вас всё получилось, а те кто знают хотя бы чуть чуть html,css,js уже поняли что можно сделать)
Я же покажу вам лишь несколько интересных вещей только на html, в следующем гайде как я уже сказал будем писать мозги на python, возможно даже и игру.
Итак, наложим красивый гридиентовый фон для нашего приложения!
Открываем папку css и создаём там любой файл с расширением .css, затем вставляем в него:
Теперь посмотрим на наше приложение! Заранее подключив этот стиль в html документе!
Фон раздвоился поскольку у нас всего лишь 1 элемент! Нечего страшного, сейчас мы свами подключим библиотеку bootstrap и добавим меню в наше приложение.
Теперь давайте взглянём на наше приложение!
Так оно будет выглядит в полном окне:
А вот так в стандартных размерах или на телефоне с ОС Android:
Опять же полоски, смотрится не очень красиво я согласен, но опять же у нас нечего нету) Давайте добавим тег <audio> и добавим 3 песни в наше приложение, чтобы хоть чем то занять это место, кстати ниже можно сделать информативную штуку как на многих сайтах, честно не знаю как это называется :D.
Создадим в папке с нашим веб-интерфейсом папку "source" и кинем туда 3 трека(просто ради примера), я буду использовать свои любимые.
Теперь сам код
И вот, что у нас получилось:
Вот так выглядит наше простое и красивое приложение на весь экран:
Теперь в стандартных размерах:
Конечно вы можете использовать точно так же как и для сайтов javascript, я хотел лишь показать вам все это в деле) Теперь я пожалуй добавлю 1 картинку и информационную панель! И пожалуй на этом закончу данный гайд. Для начала код:
Так же создал еще 1 стиль для нижнего подвала приложения!
Теперь посмотрим на наше готовое, красивое, фактически на 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)
В этом гайде я разжую вам как можно соединить языки разметки гипертекста(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 в формате приложения, но и как эффективный язык программирования, паралельно с интерфейсом, например тот же тэг <p> в 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:
<!DOCTYPE html> <!--Сообщаем, что мы html5 и пришли с миром!-->
<!--Сообщаем что, здесь уже начинается html код-->
<html>
<!--Данный тег служит для подключения css-стилей,js-скриптов,иконок, установки кодировок и многово другого-->
<head>
<!--Установим кодировку "UTF-8", чтобы не было ироглифов в нашем приложении-->
<meta charset="UTF-8">
<!--Данный тег служит для задачи названия в треи нашего приложения, я назову его BlastHack-->
<title>BlastHack - Гайд</title>
<!--Подключим favicon, или по русски картинку в треи, я же буду использовать favicon blasthack-->
<link rel="icon" type="image/png" href="https://www.blast.hk/styles/io/images/blasthack/logo_b_new.png">
<!--Подключаем стиль, чтобы наше приложение выглядило стильно, модно, молодёжно.-->
<link rel="stylesheet" href="/css/who.css">
<!--Подключим скрипт которого у нас нету, но это нужно сделать :D-->
<script src="eel.js"></script>
</head>
<!--В данном теге хранится всё что видно человеку открывшему наше приложение-->
<body>
<!--Напишем заголовок-->
<h1>Привет, мир!</h1>
</body>
</html>Давайте запустим наше приложение! Пока мы еще его не скомпилировали в 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:
<!DOCTYPE html> <!--Сообщаем, что мы html5 и пришли с миром!-->
<!--Сообщаем что, здесь уже начинается html код-->
<html>
<!--Данный тег служит для подключения css-стилей,js-скриптов,иконок, установки кодировок и многово другого-->
<head>
<!--Установим кодировку "UTF-8", чтобы не было ироглифов в нашем приложении-->
<meta charset="UTF-8">
<!--Данный тег служит для задачи названия в треи нашего приложения, я назову его BlastHack-->
<title>BlastHack - Гайд</title>
<!--Подключим favicon, или по русски картинку в треи, я же буду использовать favicon blasthack-->
<link rel="icon" type="image/png" href="https://www.blast.hk/styles/io/images/blasthack/logo_b_new.png">
<!--Подключаем стиль, чтобы наше приложение выглядило стильно, модно, молодёжно.-->
<link rel="stylesheet" href="/css/who.css">
<!--Подключаем полезный плагин bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!--Подключим скрипт которого у нас нету, но это нужно сделать :D-->
<script src="eel.js"></script>
</head>
<!--В данном теге хранится всё что видно человеку открывшему наше приложение-->
<body>
<!--Простое меню-->
<!--navbar-dark bg-dark - цвета меню! Подробнее о navbar ищите в гугле!-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Меню </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<!--Убрав "target" сайт откроется прямо в нашем приложении!-->
<a class="nav-link" aria-current="page" href="https://www.blast.hk/" target="_blank">BlastHack</a>
</li>
</div>
</div>
</nav>
</div>
</body>
<!--Так же подключаем скрипты от boostrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/bootsnav/bootsnav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</html>Теперь давайте взглянём на наше приложение!
Так оно будет выглядит в полном окне:
А вот так в стандартных размерах или на телефоне с ОС Android:
Опять же полоски, смотрится не очень красиво я согласен, но опять же у нас нечего нету) Давайте добавим тег <audio> и добавим 3 песни в наше приложение, чтобы хоть чем то занять это место, кстати ниже можно сделать информативную штуку как на многих сайтах, честно не знаю как это называется :D.
Создадим в папке с нашим веб-интерфейсом папку "source" и кинем туда 3 трека(просто ради примера), я буду использовать свои любимые.
Теперь сам код
Основной html:
<!DOCTYPE html> <!--Сообщаем, что мы html5 и пришли с миром!-->
<!--Сообщаем что, здесь уже начинается html код-->
<html>
<!--Данный тег служит для подключения css-стилей,js-скриптов,иконок, установки кодировок и многово другого-->
<head>
<!--Установим кодировку "UTF-8", чтобы не было ироглифов в нашем приложении-->
<meta charset="UTF-8">
<!--Данный тег служит для задачи названия в треи нашего приложения, я назову его BlastHack-->
<title>BlastHack - Гайд</title>
<!--Подключим favicon, или по русски картинку в треи, я же буду использовать favicon blasthack-->
<link rel="icon" type="image/png" href="https://www.blast.hk/styles/io/images/blasthack/logo_b_new.png">
<!--Подключаем стиль, чтобы наше приложение выглядило стильно, модно, молодёжно.-->
<link rel="stylesheet" href="/css/who.css">
<!--Подключаем полезный плагин bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!--Подключим скрипт которого у нас нету, но это нужно сделать :D-->
<script src="eel.js"></script>
</head>
<!--В данном теге хранится всё что видно человеку открывшему наше приложение-->
<body>
<!--Простое меню-->
<!--navbar-dark bg-dark - цвета меню! Подробнее о navbar ищите в гугле!-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Меню </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<!--Убрав "target" сайт откроется прямо в нашем приложении!-->
<a class="nav-link" aria-current="page" href="https://www.blast.hk/" target="_blank">BlastHack</a>
</li>
</div>
</div>
</nav>
</div>
<!--Тэг который будет держать все что в нём в центре, а так же создадим тэг div-->
<div>
<h2 style="padding: 15px; padding-left: 15px; color: white;"><strong>Крутые песни:</h2></strong>
<center>
<!--Первая песня-->
<p><strong>The Girl Next Door feat. WMD - ON TOP</p></strong>
<audio controls>
<source src="source/girl.mp3" type="audio/mpeg">
</audio>
<!--Вторая песня-->
<p style="padding: 15px;"><strong>Gorillaz - Feel Good Inc.</p></strong>
<audio controls>
<source src="source/Gorillaz.mp3" type="audio/mpeg">
</audio>
<!--Третья песня-->
<p style="padding: 15px;"><strong>Найтивыход - ты никому не нужен</p></strong>
<audio controls>
<source src="source/findexit.mp3" type="audio/mpeg">
</audio>
</center>
</div>
</body>
<!--Так же подключаем скрипты от boostrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/bootsnav/bootsnav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</html>И вот, что у нас получилось:
Вот так выглядит наше простое и красивое приложение на весь экран:
Теперь в стандартных размерах:
Конечно вы можете использовать точно так же как и для сайтов javascript, я хотел лишь показать вам все это в деле) Теперь я пожалуй добавлю 1 картинку и информационную панель! И пожалуй на этом закончу данный гайд. Для начала код:
Основной html:
<!DOCTYPE html> <!--Сообщаем, что мы html5 и пришли с миром!-->
<!--Сообщаем что, здесь уже начинается html код-->
<html>
<!--Данный тег служит для подключения css-стилей,js-скриптов,иконок, установки кодировок и многово другого-->
<head>
<!--Установим кодировку "UTF-8", чтобы не было ироглифов в нашем приложении-->
<meta charset="UTF-8">
<!--Данный тег служит для задачи названия в треи нашего приложения, я назову его BlastHack-->
<title>BlastHack - Гайд</title>
<!--Подключим favicon, или по русски картинку в треи, я же буду использовать favicon blasthack-->
<link rel="icon" type="image/png" href="https://www.blast.hk/styles/io/images/blasthack/logo_b_new.png">
<!--Подключаем стиль, чтобы наше приложение выглядило стильно, модно, молодёжно.-->
<link rel="stylesheet" href="/css/who.css">
<!--Подключаем полезный плагин bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!--Подключим специальный стиль для информационной рамки снизу-->
<link rel="stylesheet" href="css/info.css">
<!--Подключим скрипт которого у нас нету, но это нужно сделать :D-->
<script src="eel.js"></script>
</head>
<!--В данном теге хранится всё что видно человеку открывшему наше приложение-->
<body>
<!--Простое меню-->
<!--navbar-dark bg-dark - цвета меню! Подробнее о navbar ищите в гугле!-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Меню </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<!--Убрав "target" сайт откроется прямо в нашем приложении!-->
<a class="nav-link" aria-current="page" href="https://www.blast.hk/" target="_blank">BlastHack</a>
</li>
</div>
</div>
</nav>
</div>
<!--Тэг который будет держать все что в нём в центре, а так же создадим тэг div-->
<div>
<h2 style="padding: 15px; padding-left: 15px; color: white;"><strong>Крутые песни:</h2></strong>
<center>
<!--Первая песня-->
<p><strong>The Girl Next Door feat. WMD - ON TOP</p></strong>
<audio controls>
<source src="source/girl.mp3" type="audio/mpeg">
</audio>
<!--Вторая песня-->
<p style="padding: 15px;"><strong>Gorillaz - Feel Good Inc.</p></strong>
<audio controls>
<source src="source/Gorillaz.mp3" type="audio/mpeg">
</audio>
<!--Третья песня-->
<p style="padding: 15px;"><strong>Найтивыход - ты никому не нужен</p></strong>
<audio controls>
<source src="source/findexit.mp3" type="audio/mpeg">
</audio>
</center>
</div>
<!--Создаздим еще 1 div для информационного блока!-->
<div class="info">
<center>
<footer>
<p style="color: white;"><strong>Приложение создано в ознакомительных целях для:</strong><a href=""> BlastHack</a>.<p>
<p style="color: white;"><strong>Без цели оскорбить кого либо, автор гайда -</strong><a href=""> MiR0nov</a>.</p>
<img src="https://www.blast.hk/styles/io/images/blasthack/logo_b_new.png" width="50" heigth="50" alt="Купите интернет">
</footer>
</center>
</div>
</body>
<!--Так же подключаем скрипты от boostrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/bootsnav/bootsnav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</html>Так же создал еще 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)
Последнее редактирование:
