Рубрики
Без рубрики

Как создать веб-приложение, используя колбу и развернуть его в облаке

Автор оригинала: FreeCodeCapm Team.

Сальвадор Вильялон

Вступление

В каждом разделе я покажу кусочки кода для того, чтобы следовать. Весь код, используемый в руководстве, доступен в этом Github Repository Отказ

Что такое http и что это связано с колбой?

Http . это протокол для сайтов. Интернет использует его для взаимодействия и взаимодействия с компьютерами и серверами. Позвольте мне привести пример того, как вы используете его каждый день.

Когда вы вводите имя веб-сайта в адресной строке вашего браузера, и вы попадаете в Enter. Что произойдет, это то, что HTTP-запрос был отправлен на сервер.

Например, когда я перехожу к моей адресной строке и введите Google.com, затем нажмите Enter, запрос HTTP отправляется на сервер Google. Сервер Google принимает запрос и должен понять, как интерпретировать этот запрос. Сервер Google отправляет обратно ответ HTTP, который содержит информацию, которую получает мой веб-браузер. Затем он отображает то, что вы просили на странице в браузере.

Как участвует колба?

Мы напишем код, который позаботится о обработке боковых серверов. Наш код получит запросы. Это выяснится, что эти запросы имеют дело и то, что они спрашивают. Это также поймет, какой ответ на отправку пользователю.

Чтобы сделать все это, мы будем использовать колбу.

Что такое колба?

Это делает процесс разработки веб-приложения проще. Колба позволяет нам фокусироваться На что Пользователи запрашивают и какой ответ вернуть.

Узнайте больше о Micro Frameworks Отказ

Как работает приложение Flask?

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

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
if __name__ == "__main__":
    app.run(debug=True)

Этот кусок кода хранится в нашей Main.py.

Линия 1: Здесь мы импортируем модуль колба и создавая веб-сервер Flask из модуля Flask.

Строка 3: __name__ означает этот текущий файл Отказ В этом случае это будет main.py. Этот текущий файл будет представлять мое веб-приложение.

Мы создаем экземпляр класса Flask и вызывая его приложение. Здесь мы создаем новое веб-приложение.

Линия 5: Он представляет собой страницу по умолчанию. Например, если я пойду на веб-сайт, такой как «Google.com/», ничем после косы. Тогда это будет страница Google по умолчанию.

Линия 6-7 : Когда пользователь идет на мой сайт, и они переходят на страницу по умолчанию (ничего после косы), то функция ниже будет активирована.

Строка 9: Когда вы запускаете сценарий Python, Python назначает имя «__main__» на сценарий при выполнении.

Если мы импортируем другой скрипт, Если заявление не позволит запустить другие скрипты. Когда мы запускаем main.py, это изменит свое имя __main __ и только тогда будет, если оператор активируется.

Строка 10: Это запускает приложение. Наличие Debug = True Позволяет возможные ошибки Python появляться на веб-странице. Это поможет нам отслеживать ошибки.

Давайте попробуем запустить main.py

В вашем терминале или командной строке перейдите в папку, содержащую ваш Main.py. Тогда сделай PY Main.py или Python Main.py Отказ В вашем терминале или командной строке вы должны увидеть этот вывод.

Важная часть – это то, где она говорит Бег на http://127.0.0.1:5000/ Отказ

127.0.0.1 означает этот локальный компьютер. Если вы не знаете смысла этого (вроде я не начал – Эта статья действительно полезная ), главная идея состоит в том, что 127.0.0.1 и localhost относятся к этому локальному компьютеру.

Перейдите на этот адрес, и вы должны увидеть следующее:

Больше веселья с колбой

Ранее вы видели, что произошло, когда мы работали Main.py с одним маршрутом, который был app.route (“/”).

Давайте добавим больше маршрутов, чтобы вы могли видеть разницу.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)

В Линии 9-11 Отказ Мы добавили новый маршрут, на этот раз в /Сальвадор.

Теперь запустите Main.py снова и перейдите к http://localhost: 5000/Salvador Отказ

До сих пор мы возвращаем текст. Давайте сделаем наш веб-сайт отличным, добавив HTML и CSS.

HTML, CSS и виртуальные среды

HTML и шаблоны в колбе

Сначала создайте новый HTML-файл. Я позвонил мою home.html.

Вот какой-то код, чтобы начать.




  
    
    Flask Tutorial
  
  
    
 My First Try Using Flask 

    
 Flask is Fun

Важный момент, чтобы помнить

Flask Framework ищет файлы HTML в папке, называемой шаблоны. Вы нужно создать шаблоны Папка и поместите все ваши файлы HTML там.

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

from flask import Flask, render_template      

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/salvador")
def salvador():
    return "Hello, Salvador"
    
if __name__ == "__main__":
    app.run(debug=True)
  We made two new changes

Линия 1: Мы импортировали Render_template () Метод от фрейм-флэки. Render_template () Ищете шаблон (HTML-файл) в папке шаблонов. Затем он сделает шаблон, для которого вы спрашиваете. Узнайте больше о Render_templates () Функция Отказ

Линия 7: Мы меняем возврат, чтобы теперь он возвращается Render_template ("Home.html") Отказ Это давайте просмотрите наш HTML-файл.

Теперь посетите свой Localhost и посмотрите изменения: http://localhost: 5000/ Отказ

Давайте добавим больше страниц

Давайте создадим о.html внутри Шаблоны папки.




  
    
    About Flask
  
  
    
 About Flask 

    
 Flask is a micro web framework written in Python.

    
 Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.

Давайте сделаем изменение, похожие на то, что мы сделали до нашего main.py.

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html")
    
@app.route("/about)
def about():
    return render_template("about.html")
    
if __name__ == "__main__":
    app.run(debug=True)

Мы сделали три новых изменения:

Строка 9: Изменить маршрут в "/О “ Отказ

Строка 10: Изменить функцию, так что сейчас def о ():

Строка 11: Измените возврат, чтобы теперь он возвращается Render_template ("about.html") Отказ

Теперь посмотрите изменения: http://localhost: 5000/О Отказ

Давайте подключаем обе страницы с навигацией

Чтобы подключить обе страницы, мы можем иметь меню навигации в верхней части. Мы можем использовать колбу, чтобы облегчить процесс создания меню навигации.

Во-первых, давайте создадим template.html. Это template.html будет служить родительским шаблоном. Наши две детские шаблоны наследуют из него код.

 


 
   
   Flask Parent Template
   
 
 
    

      

        
First Web App

        
      

    

    
    {% block content %}
    {% endblock %}

Строка 13-14: Мы используем функцию под названием url_for () Отказ Он принимает имя функции в качестве аргумента. Прямо сейчас мы дали ему название функции. Больше информации на url_for () Функция Отказ

Две линии с вьющимися скобками будут заменен на содержание home.html и about.html. Это будет Зависит от URL, в котором пользователь просмотрен.

Эти изменения позволяют дочерним страницам (home.html и about.html) для подключения к родителю (template.html). Это позволяет нам не иметь Скопируйте код для меню навигации в about.html и home.html.

Содержание about.html:




  
    
    About Flask
  
  
    {% extends "template.html" %}
    {% block content %}
    
    
 About Flask 

    
 Flask is a micro web framework written in Python.

    
 Applications that use the Flask framework include Pinterest,
      LinkedIn, and the community web page for Flask itself.

      
    {% endblock %}

Содержание home.html:




  
    
    Flask Tutorial
  
  
    {% extends "template.html" %}
    {% block content %}
    
    
 My First Try Using Flask 

    
 Flask is Fun 

    
    {% endblock %}

Давайте попробуем добавить некоторые CSS.

Добавление CSS на наш сайт

Важная заметка, чтобы запомнить

Так же, как мы создали папку под названием Шаблоны Чтобы сохранить все наши шаблоны HTML, нам нужна папка, называемая Статический Отказ

В Статический Мы будем хранить наши CSS, JavaScript, изображения и другие необходимые файлы. Вот почему важно, чтобы вы должны создать CSS Папка для хранения ваших стилей. После этого ваша папка Project должна выглядеть так:

Связывание наших CSS с нашим файлом HTML

Наш шаблон .html – это тот, который ссылает все страницы. Мы можем вставить код здесь, и это будет применимо ко всем дочерним страницам.




  
    
    Flask Parent Template
    
    
    

  
    

      

        
First Web App

        
      

    

    
{% block content %}
{% endblock %}

Линия 7: Здесь мы даем путь к тому, где находится template.css.

Теперь посмотрите изменения: http://localhost: 5000/О Отказ

Двигаться вперед с колбой и виртуальностью

Теперь, когда вы знакомы с использованием колбы, вы можете начать использовать его в ваших будущих проектах. Одна вещь всегда делать, это использовать VirtualenV.

Зачем использовать VirtualenV?

Вы можете использовать Python для других проектов, помимо веб-разработки.

Ваши проекты могут иметь разные версии установленных Python, различных зависимостей и пакетов.

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

Начало работы с Virtualenv

Сначала запустите эту команду в командной строке или клемме:

pip install virtualenv

Во-вторых, сделайте следующее:

virtualenv "name of virtual environment"

Здесь вы можете дать имя в окружающую среду. Я обычно даю ему имя виртуального. Это будет выглядеть так: Virtualenv Virtual Отказ

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

Активация виртуальной среды

Теперь перейдите в свой терминал или командную строку. Перейдите в каталог, который содержит файл под названием активировать. Файл под названием активировать найден внутри папки под названием Сценарии для Windows и Bin для OS X и Linux.

Для среды OS X и Linux:

$ name of virtual environmnet/bin/activate

Для среды Windows:

name of virtual environment\Scripts\activate

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

Следующим шагом является установка колбы на вашу виртуальную среду, чтобы мы могли запускать приложение внутри нашей среды. Запустите команду:

pip install flask

Запустите свое заявление и перейдите в http://localhost: 5000/

Мы наконец сделали наше веб-приложение. Теперь мы хотим показать весь мир нашего проекта.

(Дополнительная информация о Virtualenv можно найти в следующих направляющих на Virtualenv и Флэкская официальная документация )

Давайте отправим его в облако

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

Разверните ваше веб-приложение в облако

Чтобы развернуть наше веб-приложение в облако, мы будем использовать Google App Engine (Стандартная среда). Это пример Платформа как услуга (PAAS).

Паас относится к Доставка операционных систем и связанных с ними услугами через Интернет без загрузки или установки Отказ Подход позволяет клиентам создавать и развертывать приложения без необходимости инвестировать в базовую инфраструктуру (подробнее о проверке PAAS TechTarget ).

Прежде чем ты начнешь:

Вам понадобится Учетная запись Google Отказ Как только вы создадите аккаунт, перейдите к Консоль платформы Google Cloud и создать новый проект. Кроме того, вам нужно установить Google Cloud SDK Отказ

В конце этого учебника будет выглядеть ваша структура проекта.

Нам нужно будет создать три новых файла: app.yaml, appengine_config.py и thrue.txt.

Содержание app.yaml:

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /static
  static_dir: static
- url: /.*
  script: main.app
  
libraries:
  - name: ssl
    version: latest

Если бы вы проверили Учебное пособие Google в той части, где они говорить о содержании приложения.Ямль , он не включает раздел, где я написал о библиотеках.

Когда я впервые попытался развернуть мое простое веб-приложение, мое развертывание никогда не работало. После многих попыток я узнал, что нам нужно было включить библиотеку SSL.

Библиотека SSL позволяет нам Создайте безопасные соединения между клиентом и сервером Отказ Каждый раз, когда пользователь идет на наш веб-сайт, им нужно будет подключиться к серверу, запущенному управляющему Google App. Нам нужно создать безопасное подключение для этого. (Я недавно узнал это, так что если у вас есть предложения для этого, дайте мне знать!)

Содержание appengine_config.py:

from google.appengine.ext import vendor

# Add any libraries installed in the "lib" folder.
vendor.add('lib')

Содержание требований.txt:

Flask
Werkzeug

Теперь внутри нашей виртуальной среды (Убедитесь, что ваш VirtualenV активирован) , Мы собираемся установить новые зависимости, которые у нас в требованиях .txt. Запустите эту команду:

pip install -t lib -r requirements.txt

-t lib: Этот флаг копирует библиотеки в папку LIB, которые загружают в App Engine во время развертывания.

-R Требования. atxt: Рассказывает PiP, чтобы установить все из требований.

Развертывание приложения

Чтобы развернуть приложение к Google App Engine, используйте эту команду.

gcloud app deploy

Я обычно включаю – Проект [ID проекта]

Это указывает, какой проект вы развертываете. Команда будет выглядеть так:

gcloud app deploy --project [ID of Project]

Приложение

Теперь проверьте URL вашего приложения. Приложение будет храниться следующим образом:

"your project id".appspot.com

Мое приложение здесь: http://sal-flask-tutorial.appspot.com.

Заключение

Из этого учебника вы все узнали, как:

  • Используйте структуру под названием Flask, чтобы использовать Python в качестве языка сервера.
  • Узнал, как использовать HTML, CSS и Flask, чтобы сделать сайт.
  • Узнал, как создавать виртуальные среды с использованием VirtualenV.
  • Используйте стандартную среду Google App Engine для развертывания приложения в облако.

Что я выучил

Я узнал три важных веща от этого небольшого проекта.

Во-первых, я узнал о разнице между статическим веб-сайтом и веб-приложением

Статические сайты:

  • Значит, сервер обслуживает файлы HTML, CSS и JavaScript к клиенту. Содержание сайта не меняется, когда пользователь взаимодействует с ним.

Веб-приложения:

  • Веб-приложение или динамический веб-сайт генерирует контент на основе восстановленных данных (большую часть времени является базой данных), которая изменяется на основе взаимодействия пользователя с сайтом. В веб-приложении сервер отвечает за запросы, извлечение и обновление данных. Это приводит к тому, что веб-приложения будут медленнее и сложнее развернуть, чем статические веб-сайты для простых приложений ( Reddit ).

Серверная сторона и сторона клиента:

  • Я узнал, что веб-приложение имеет две стороны. Сторона клиента и сторона сервера. Клиентская сторона – это то, что пользователь взаимодействует, и сторона сервера – это то, что вся информация, которую обрабатывается пользователь.

Во-вторых, я узнал о облачных услугах

Большинство моих предыдущих проектов были статическими веб-сайтами, и развернуть их, которые я использовал Страницы GitHub Отказ Pages GitHub – это бесплатный статический хостинг сайта, предназначенный для проведения проектов с репозитория GitHUB.

При работе с веб-приложениями я не мог использовать страницы GitHub для их размещения. Страницы GitHub предназначены только для статических веб-сайтов, а не для чего-то динамического, например, веб-приложения, требующего сервера и базы данных. Мне пришлось использовать облачные сервисы, такие как Amazon Web Services или Heroku

В-третьих, я узнал, как использовать Python в качестве языка сервера

Чтобы создать сторону сервера веб-приложения, мы должны были использовать язык сервера. Я узнал, что смогу использовать рамки под названием Flask, чтобы использовать Python в качестве побочного языка сервера.

Следующие шаги:

Вы можете строить всевозможные вещи с колбой. Я понял, что колбу помогает сделать код за веб-сайтом легче читать. Я сделал следующие приложения в течение этого лета 2018 года, и я надеюсь сделать больше.

Личные проекты

Во время моей стажировки

Вот список ресурсов, которые помогли мне создать это руководство:

Если у вас есть какие-либо предложения или вопросы, не стесняйтесь оставить комментарий.

Читайте ещё по теме: