{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приветствую вас, начинающие веб-разработчики и просто любознательные пользователи! С вами “Цифровой Мир”, и сегодня мы совершим увлекательное путешествие в мир веб-разработки на Python. Мы создадим свой первый веб-сайт, используя простой и мощный фреймворк Flask.","type":"unstyled","key":"eua5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот туториал разработан специально для новичков, поэтому не пугайтесь, если вы никогда раньше не занимались веб-разработкой. Мы пройдем все этапы – от установки необходимого программного обеспечения до запуска вашего сайта в интернете.","type":"unstyled","key":"40v22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Что нам понадобится:","type":"unstyled","key":"ae39f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Python 3.6 или выше (убедитесь, что Python установлен на вашем компьютере)","type":"unordered-list-item","key":"4sbbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Текстовый редактор (например, VS Code, Sublime Text, Atom)","type":"unordered-list-item","key":"746sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Терминал или командная строка","type":"unordered-list-item","key":"fj40r"},{"data":{"image":{"id":"67a1e6318d43931c311adde5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5bhc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"74h49"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Шаг 1: Установка Flask","type":"unstyled","key":"9jv5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Flask – это легковесный веб-фреймворк для Python, который позволяет создавать веб-приложения быстро и просто. Чтобы установить Flask, откройте терминал или командную строку и выполните следующую команду:","type":"unstyled","key":"bgoss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install Flask","type":"unstyled","key":"dpn5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта команда установит Flask и все необходимые зависимости.","type":"unstyled","key":"6sdur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Шаг 2: Создание основного файла приложения","type":"unstyled","key":"c3q77"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте новую папку для своего проекта (например, “my_website”) и в ней создайте файл с именем app.py. Откройте app.py в вашем текстовом редакторе и добавьте следующий код:","type":"unstyled","key":"fcpiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":6,"offset":11,"style":"BOLD"},{"length":3,"offset":64,"style":"BOLD"},{"length":11,"offset":68,"style":"BOLD"},{"length":6,"offset":87,"style":"BOLD"},{"length":2,"offset":128,"style":"BOLD"}],"text":"from flask import Flask\n\napp = Flask(__name__)\n\n@app.route('/') def hello_world():\n return '

Привет, Цифровой Мир!

' \nif __name__ == '__main__':\n app.run(debug=True)","type":"unstyled","key":"4btqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберем этот код:","type":"unstyled","key":"bkngs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from flask import Flask: Импортирует класс Flask из библиотеки Flask.","type":"unordered-list-item","key":"8caor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"app = Flask(__name__): Создает экземпляр приложения Flask.","type":"unordered-list-item","key":"96uu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@app.route('/'): Декоратор, который связывает URL-адрес / с функцией hello_world.","type":"unordered-list-item","key":"7dkfu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def hello_world():: Функция, которая возвращает строку “Привет, Цифровой Мир!”. Это будет отображаться на главной странице вашего сайта.","type":"unordered-list-item","key":"adfce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if __name__ == '__main__':: Проверяет, запущен ли скрипт напрямую (а не импортирован как модуль).","type":"unordered-list-item","key":"etrum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"app.run(debug=True): Запускает сервер Flask в режиме отладки. Режим отладки позволяет видеть ошибки и изменения в коде в режиме реального времени.","type":"unordered-list-item","key":"41obi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Шаг 3: Запуск приложения","type":"unstyled","key":"2t4a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните файл app.py и вернитесь в терминал. Перейдите в папку вашего проекта (my_website) с помощью команды cd. Например:","type":"unstyled","key":"72c8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cd my_website","type":"unstyled","key":"eus05"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем запустите приложение Flask с помощью команды:","type":"unstyled","key":"cphav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"python app.py","type":"unstyled","key":"d721b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы должны увидеть что-то вроде этого:","type":"unstyled","key":"bqhhn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"* Serving Flask app 'app'\n * Debug mode: on\n * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)\n * Restarting with stat\n * Debugger is active!\n * Debugger PIN: xxx-xxx-xxx","type":"unstyled","key":"cf94r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это означает, что ваш веб-сайт запущен и доступен по адресу http://127.0.0.1:5000/ в вашем веб-браузере.","type":"unstyled","key":"dh24v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Шаг 4: Откройте свой веб-сайт в браузере","type":"unstyled","key":"9sver"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте ваш любимый веб-браузер и введите адрес http://127.0.0.1:5000/ в адресную строку. Вы должны увидеть на экране надпись “Привет, Цифровой Мир!”.","type":"unstyled","key":"4u5i4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"Поздравляю! Вы создали свой первый веб-сайт на Python!","type":"unstyled","key":"6rmr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Шаг 5: Добавление HTML-шаблона","type":"unstyled","key":"39mh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто возвращать строку “Привет, Цифровой Мир!” – это не очень интересно. Давайте добавим HTML-шаблон, чтобы сделать наш сайт более красивым.","type":"unstyled","key":"58pus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Создайте папку “templates” в папке вашего проекта (my_website).","type":"ordered-list-item","key":"c0f65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Создайте файл “index.html” внутри папки “templates” и добавьте следующий код:","type":"ordered-list-item","key":"d2jd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":10,"style":"BOLD"},{"length":4,"offset":17,"style":"BOLD"},{"length":4,"offset":24,"style":"BOLD"},{"length":5,"offset":35,"style":"BOLD"},{"length":5,"offset":55,"style":"BOLD"},{"length":4,"offset":64,"style":"BOLD"},{"length":4,"offset":71,"style":"BOLD"},{"length":2,"offset":82,"style":"BOLD"},{"length":2,"offset":108,"style":"BOLD"},{"length":1,"offset":117,"style":"BOLD"},{"length":1,"offset":155,"style":"BOLD"},{"length":4,"offset":160,"style":"BOLD"},{"length":4,"offset":168,"style":"BOLD"}],"text":" Цифровой Мир

Привет, Цифровой Мир!

Это мой первый веб-сайт на Python.

","type":"unstyled","key":"1mv1q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь измените файл app.py следующим образом:","type":"unstyled","key":"56a7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":6,"offset":11,"style":"BOLD"},{"length":3,"offset":81,"style":"BOLD"},{"length":5,"offset":85,"style":"BOLD"},{"length":6,"offset":98,"style":"BOLD"},{"length":2,"offset":136,"style":"BOLD"}],"text":"from flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('/') def index():\n return render_template('index.html')\n\nif __name__ == '__main__':\n app.run(debug=True)","type":"unstyled","key":"9ohfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание на изменения:","type":"unstyled","key":"40vus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from flask import Flask, render_template: Мы импортировали функцию render_template, которая позволяет отображать HTML-шаблоны.","type":"unordered-list-item","key":"bb4s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"def index():: Мы переименовали функцию hello_world в index.","type":"unordered-list-item","key":"b1ulk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return render_template('index.html'): Функция render_template отображает HTML-шаблон index.html, находящийся в папке “templates”.","type":"unordered-list-item","key":"6md90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните файлы, перезапустите приложение (нажмите Ctrl+C в терминале, а затем снова python app.py) и обновите страницу в браузере. Теперь вы должны увидеть более красивую страницу с заголовком и абзацем.","type":"unstyled","key":"5kobj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Шаг 6: Добавление динамического контента","type":"unstyled","key":"a7t97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте добавим немного динамического контента на наш сайт. Измените файл app.py следующим образом:","type":"unstyled","key":"5ir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":6,"offset":11,"style":"BOLD"},{"length":3,"offset":81,"style":"BOLD"},{"length":5,"offset":85,"style":"BOLD"},{"length":6,"offset":124,"style":"BOLD"},{"length":2,"offset":173,"style":"BOLD"}],"text":"from flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('/') def index():\n name = \"Пользователь\" return render_template('index.html', name=name)\n\nif __name__ == '__main__':\n app.run(debug=True)","type":"unstyled","key":"cqqlg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И измените файл index.html следующим образом:","type":"unstyled","key":"9j9j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":10,"style":"BOLD"},{"length":4,"offset":17,"style":"BOLD"},{"length":4,"offset":24,"style":"BOLD"},{"length":5,"offset":35,"style":"BOLD"},{"length":5,"offset":55,"style":"BOLD"},{"length":4,"offset":64,"style":"BOLD"},{"length":4,"offset":71,"style":"BOLD"},{"length":2,"offset":82,"style":"BOLD"},{"length":2,"offset":106,"style":"BOLD"},{"length":1,"offset":115,"style":"BOLD"},{"length":1,"offset":153,"style":"BOLD"},{"length":4,"offset":158,"style":"BOLD"},{"length":4,"offset":166,"style":"BOLD"}],"text":" Цифровой Мир

Привет, {{ name }}!

Это мой первый веб-сайт на Python.

","type":"unstyled","key":"eek1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы передаем переменную name из Python в HTML-шаблон. В HTML-шаблоне мы используем двойные фигурные скобки {{ name }}, чтобы отобразить значение переменной.","type":"unstyled","key":"at6j3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраните файлы, перезапустите приложение и обновите страницу в браузере. Теперь вы должны увидеть приветствие “Привет, Пользователь!”. Вы можете изменить значение переменной name в файле app.py, чтобы изменить приветствие.","type":"unstyled","key":"cslgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Шаг 7: Деплой на Heroku (опционально)","type":"unstyled","key":"dg00r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы ваш сайт был доступен в интернете, вам нужно задеплоить его на какой-нибудь хостинг. Heroku – это бесплатная платформа для деплоя веб-приложений.","type":"unstyled","key":"he8k"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":10,"offset":47}],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Зарегистрируйтесь на Heroku: Перейдите на сайт heroku.com и создайте учетную запись.","type":"ordered-list-item","key":"5qtgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Установите Heroku CLI: Скачайте и установите Heroku CLI с сайта Heroku.","type":"ordered-list-item","key":"1o09k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Войдите в Heroku CLI: Откройте терминал и выполните команду heroku login.","type":"ordered-list-item","key":"abpmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Создайте файл requirements.txt: В папке вашего проекта создайте файл requirements.txt и добавьте в него следующую строку:","type":"ordered-list-item","key":"5l7qd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Flask","type":"unstyled","key":"1o64h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это укажет Heroku, что необходимо установить Flask.","type":"unstyled","key":"7629q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Создайте файл Procfile: В папке вашего проекта создайте файл Procfile (без расширения) и добавьте в него следующую строку:","type":"ordered-list-item","key":"4ipkc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"web: gunicorn app:app","type":"unstyled","key":"9q6lf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это укажет Heroku, как запускать ваше приложение.","type":"unstyled","key":"dqd2e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Создайте Git-репозиторий:git init\ngit add .\ngit commit -m \"Initial commit\"\nbash","type":"ordered-list-item","key":"3eq4k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Создайте приложение Heroku:heroku create\nbash","type":"ordered-list-item","key":"f9hso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Разверните приложение:git push heroku master\nbash","type":"ordered-list-item","key":"c6qpi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"Откройте приложение:heroku open\nbash","type":"ordered-list-item","key":"d0fa9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"Поздравляю! Ваш веб-сайт запущен в интернете!","type":"unstyled","key":"46b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"unstyled","key":"fus3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом туториале мы создали свой первый веб-сайт на Python с использованием фреймворка Flask. Мы прошли все этапы – от установки Flask до деплоя сайта на Heroku.","type":"unstyled","key":"34bn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это только начало вашего пути в веб-разработке на Python. Вы можете продолжать изучать Flask, добавлять новые функции и создавать более сложные и интересные веб-приложения. Удачи!","type":"unstyled","key":"4vfe3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Что вы думаете об этом туториале? Поделитесь своими впечатлениями и вопросами в комментариях!","type":"unstyled","key":"3ehd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":127,"offset":0,"style":"BOLD"}],"text":"Подписывайтесь на канал “Цифровой Мир”, чтобы получать больше полезных туториалов и статей о веб-разработке и программировании!","type":"unstyled","key":"bmj6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Хэштеги:","type":"unstyled","key":"61mm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#python #flask #веб_разработка #туториал #для_начинающих #программирование #сайт #heroku #разработка #tutorial","type":"unstyled","key":"cgivs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"XLkjNuqSRvp5hv0cUdZR"}],"entityMap":{"0":{"data":{"href":"https://www.heroku.com/","url":"https://www.heroku.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}