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

Серия колбы, часть 2 – Создание простого приложения с Spoonacular API

Введение как продолжение части I с моими знаниями Флеры, я покажу, как построить простой en … Tagged Flask, Python, WebDev, приложения.

Серия колбы (13 части серии)

Вступление

Как продолжение части I с моими знаниями Флески, я покажу, как создать простую страницу ввода, которая заполняется некоторыми данными API после того, как пользователь типирует в некотором вводе в поле поиска.

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

Конечный продукт

Раньше мы начинаем, это то, что мы будем строить:

И если мы посмотрим на это на нашем мобильном телефоне:

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

Давайте научимся создать это сами!

Некоторые основы на маршрутизации архитектуры и колбы

Идея этой целевой страницы довольно проста, мы хотим:

  • Введите некоторые данные (в виде запятой отделенных имен ингредиентов)

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

  • Когда мы достигнем правильной конечной точки, мы выполним запрос GET в API, используя «очищенные» значения в качестве входных данных, в формате, где они могут быть использованы API, и получать JSON в качестве ответа.

  • Как только у нас появится ответ в наших руках, мы сможем связать его с шаблоном джинджи (Jinja – это шаблонный двигатель, который используется с помощью колбы для создания страниц), а затем убедиться, что он будет отображаться так, как мы хотим в пользовательском интерфейсе.

Все это будет довольно много работы, так что давайте разберем ее шаг за шагом.

Ввод данных: версия 0.1

Очевидно, что этот способ ввода данных ошибочен и должен быть улучшен позже.

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

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

Для начала мы можем увидеть HTML для шаблона, который будет составлять наше мнение:

Это небольшой кусочек полного шаблона джинджи, который способствует странице, увиденной выше в начале статьи.

Он содержит форму, настроенную с методом POST, которая позволит нам публиковать данные на сервере.

Например, когда мы введем какой -то ввод Сыр, стейк , это будет опубликовано в бэкэнд как содержимое формы.

Что касается флезы, «привязка» между конечной точкой и фактическими данными, которые мы хотим обработать, происходит через:

  • Название свойства входной панели, “restaurant_name” с передней стороны;

  • Колбу, Запрос Объект, который действует как прокси в текущий контекст и может использоваться для проверки запросов методов (это сообщение, Get и т. Д.?), Используется для доступа к содержимому форме (request.form []) и другим вещам. Этот объект объект создается в среде WSGI в качестве первого аргумента и добавит себя в среду WSGI как 'werkzeug.request' , становясь доступным для использования в любой конечной точке;

После того, как у нас будут доступны данные в нашей конечной точке, мы можем просто обработать их (в данном случае нам нужно будет выполнить некоторую обработку, поскольку API требует конкретного формата для запроса, который мы собираемся сделать), используйте его для Запрос в API и получить ответ JSON, а затем мы можем отображать наш шаблон с помощью данных, которые нам нужны, и наша начальная страница будет завершена!

Конечная точка колбы, которая выполнит работу

Теперь, когда мы можем отправлять данные, нам нужно настроить конечную точку, чтобы получить эти данные и работать на них, чтобы мы могли сделать что -то полезное с ним!

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

Маршрут получает путь (подумайте, картирование URL), на которое соответствует запросу, а также методы, которые он будет поддерживать.

Маршрут добавляется в качестве декоратора поверх фактического имени метода, которое мы используем со стороны клиента для обозначения определенной конечной точки:

@app.route('/', methods=['GET', 'POST'])
def recipes():
    if request.method == 'POST':
        content = requests.get(
            +
            convert_input(request.form['restaurant_name']) +
            + API_KEY)
        json_response = json.loads(content.text)
        print json_response
        return render_template("restaurant_list.html", response=json_response) if json_response != [] else render_template(
            "restaurant_list.html", response="")
    else:
        return render_template("restaurant_list.html")

В этом случае декоратор маршрута – «/», так как мы соответствуем домашней странице, а не какой -либо другой конкретный путь (поэтому URL -адрес сопоставлен: 0.0.0.0:5000 ), а конечная точка должна поддерживать оба поста и получить Методы с момента:

  • Когда страница сначала загружается, на главную страницу выполняется запрос GET, так что начальная страница может быть отображена на экране (это еще часть).

  • Когда мы набираем что -то в нашу строку поиска, на домашней странице происходит запрос поста, чтобы разместить данные из нашей формы, поэтому необходимо поддерживать оба метода.

Логика самой конечной точки относительно проста, в тех случаях, когда мы получаем запрос на почту, мы выполним запрос GET в наш API, чтобы получить данные, которые мы хотим, получить ответ JSON и сделать шаблон, обогащенный этими данными, чтобы Заполняйте наш пользовательский интерфейс.

Мы используем Python Запросы модуль для выполнения запроса GET и получить ответ. Метод convert_input (request.form ['restaurant_name']) это простой вспомогательный метод, который мы используем для обеспечения того, чтобы входные параметры были хорошо форматированы и в формате, который требуется API. Чтобы узнать это, это хорошая практика, чтобы прочитать доступную документацию для API ( Этот для текущего кода), чтобы убедиться, что все правильное.

Когда страница загружена в первый раз, ответ будет пустым, и на стороне Джинджи мы сделаем только то, что нам нужно в соответствии с полученным нами ответом, который приводит нас к …

Рендеринг данных на фронт-конце

Jinja – это язык двигателя шаблона, в том смысле, что он объединяет статические элементы интерфейса пользователя с динамическими данными, что идеально подходит в качестве механизма для отображения веб -страниц с помощью базового шаблона и мутирующих данных.

Напомним, что у нас была переменная, называемая ответом внутри нашего render_template метод Это будет использоваться для параметризации передней части с помощью пользовательских элементов просмотра на основе значения ответа:


    {% if response!=undefined and response|length > 0%}
    
Recipes using these ingredients

    {% else %}
    {% if response!="No recipes found"%}
    
No recipes found

    {% else %}
    

    {% endif %}
    {% endif %}
    
            {% for entry in response %}
            

                
                
            

            {% endfor %}

Как мы видим, Jinja использует вьющиеся скобки в качестве нотации для параметризации значений, полученных снаружи и которые предназначены для динамического характера, и использует трубу (|) для связи с некоторыми свойствами, такими как длина и другие. Это также позволяет провести наследование зацикливания и шаблона, среди прочего.

Если ответ пуст или вход недействителен (генерируя неопределенный ответ), мы решили отобразить простой абзац, чтобы указать, что рецептов нет. В противном случае мы перечитываем данные (которые являются списком JSON), и мы

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

Чтобы закончить эту статью, единственная вещь, необходимая для упоминания, заключается в том, что нам нужны заголовки для начальной загрузки, которая является библиотекой, которая позволяет гибким конструкциям на разных устройствах, которые можно добавить в заголовок вместе с функцией Jinja, которая позволяет нам указать, где добавить наш Пользовательские файлы CSS:


    
    
    
    
    
    
    
    Title

Последняя строка – единственная, которую стоит упомянуть здесь, и то, что она делает, это обеспечение масштабирования видового порта в соответствии с шириной устройства, и он не является пользовательским масштабируемым, что дает нам «нормальную строку поиска» на мобильных устройствах, а не в панели с Та же ширина, что и в рабочем столе, но увеличилась, чтобы поместиться на крошечном экране, что сделает его не мобильным.

Файл CSS содержит некоторый базовый и стандартный стиль для ширины и высот отдельных компонентов, и это все, что нужно!

Вывод

Надеюсь, вам понравилось читать эту статью, и это может быть интересно (И если вы любите еду).

PS: предложения относительно архитектуры конечных точек и лучших практик приветствуются, вы никогда не перестаете учиться в программировании!

Серия колбы (13 части серии)

Оригинал: “https://dev.to/brunooliveira/flask-series-part-2-building-a-simple-app-with-the-spoonacular-api-4hea”

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