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

Создание и размещение базового веб-приложения с помощью Django и Reply.it

Учебник по Django, показывающий, как создать веб-приложение с помощью Repl.it. Мы смотрим на определение местоположения и динамически показываем текущую погоду в физических местах посетителей.

Автор оригинала: Gareth Dwyer.

В этом уроке мы будем использовать Django для создания онлайн-сервиса, который показывает посетителям их текущую погоду и местоположение. Мы разработаем сервис и разместим его с помощью repl.it .

Чтобы работать с этим учебником, вы должны в идеале иметь базовые знания Python и некоторые знания в области разработки веб – приложений. Тем не менее, мы подробно объясним все наши рассуждения и каждую строку кода , так что если у вас есть какой-либо опыт программирования, вы должны быть в состоянии следовать за ним как полный новичок Python или веб-приложения. Мы также будем использовать некоторые HTML, JavaScript и jQuery, поэтому, если вы уже сталкивались с ними раньше, вы сможете работать быстрее. Если нет, то это будет отличное место для начала.

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

  • A Django приложение, чтобы показать пользователю веб-страницу с динамическими данными
  • Ipify чтобы получить IP-адрес нашего посетителя, чтобы мы могли угадать его местоположение
  • ip-api для поиска города и страны наших посетителей по их IP-адресу
  • OpenWeatherMap чтобы получить текущую погоду в местоположении ваших посетителей.

Основные цели этого урока заключаются в том, чтобы:

  • Покажите, как настроить и разместить приложение Django с помощью repl.it.
  • Покажите, как объединить существующие API вместе, чтобы создать новую службу.

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

Установка

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

Нажмите кнопку + в правом верхнем углу, чтобы создать новый проект и найти “Шаблон Django”. Дайте вашему проекту имя и нажмите “Создать ответ”.

По умолчанию Django поставляется с довольно сложной структурой папок существующих файлов и папок. Есть также README.md файл, который откроется по умолчанию, давая вам некоторые рекомендации о том, как найти свой путь вокруг.

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

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

Нажмите кнопку Run на панели вверху и вы увидите Reply.it установите все необходимые пакеты и запустите приложение Django по умолчанию.

Создание статической домашней страницы

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

Чтобы создать свою собственную страницу на месте, нам придется изменить несколько файлов. Если вы уже создавали базовый HTML-файл раньше, вы можете быть удивлены тем, насколько сложен этот шаг. Как и другие фреймворки, Django “делает легкие вещи трудными, а трудные-возможными”. Если вы просто хотите отобразить базовую веб-страницу, это, вероятно, излишне, но по мере роста вашего веб-приложения вы найдете применение для всей дополнительной структуры.

Давайте создадим базовую страницу “Hello world”, чтобы убедиться, что все части на месте. Для этого вам нужно будет создать еще несколько папок и файлов.

Создайте папку с именем templates . Именно здесь Django получит HTML – шаблоны для рендеринга страниц.

Давайте добавим HTML-шаблоны, которые мы будем использовать для визуализации нашей статической страницы. Создайте файл с именем base.html в только что созданную папку templates добавьте следующий код.

{% load static %}





    
    Hello World!
    
    
    


    {% block content %}{% endblock content %}


Выше приведен базовый HTML-шаблон, который наше приложение Django будет использовать при рендеринге страниц. Мы также ссылаемся на таблицу стилей, которую Django получит из папки с именем static/css , которую мы вскоре создадим. Обратите внимание на {% load static %} в первой строке, это должно сказать Django, что мы используем статические файлы в этом шаблоне ie. style.css .

Все еще в папке templates создайте файл с именем index.html и добавьте следующий код.

{% extends "base.html" %}

{% block content %}
  

Hello World!

{% endblock content %}

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

Вышеизложенное расширяет base.html шаблон и добавляет в него содержимое блока, в данном случае “Hello World!”.

Django по умолчанию ищет папки шаблонов в папках “app”. Это полезно, когда у вас есть несколько приложений в вашем проекте, но в этом случае мы этого не делаем, поэтому нам нужно сказать Django, где найти нашу папку шаблонов.

Откройте mysite/settings.py файл, прокрутите вниз до TEMPLATES и добавьте os.path.join(BASE_DIR, 'templates') в квадратных скобках рядом с DIRS: как показано ниже

        'DIRS': [os.path.join(BASE_DIR, 'templates')],

Теперь, когда мы добавили наши шаблоны, давайте добавим папки и файлы для добавления таблицы стилей.

Создайте папку с именем static , а также создайте папку с именем css в папке static .

Создайте файл с именем style.css в каталоге static/css/ и добавьте следующий код.

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Выше мы добавим базовый CSS-код, чтобы продемонстрировать, как вы можете изменить внешний вид вашего сайта.

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

Откройте mysite/settings.py файл, прокрутите весь путь вниз и добавьте следующий код сразу после STATIC_URL

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

В каталоге mysite/ создайте файл с именем views.py и добавьте следующий код.

from django.shortcuts import render

# Create your views here.
def home(request):
  return render(request, 'index.html')

Функция представления в Django-это функция Python, которая принимает веб-запросы и возвращает веб-ответ. Здесь вы добавляете логику, которая будет возвращать определенный ответ при вызове. В нашем случае мы определяем представление, которое будет возвращать index.html страница.

Чтобы вызвать эту функцию представления, нам нужно добавить ее в ваши шаблоны URL-адресов. Откройте mysite/urls.py файл и замените его содержимое приведенным ниже кодом.

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name= 'home'),
    path('admin/', admin.site.urls),    
]

Обратите внимание, что мы импортируем файл представлений, созданный ранее from . импорт представлений . Затем мы добавляем шаблон URL с пустым путем " и указываем его на созданное ранее представление home . Путь admin/ указывает на страницу администратора, которая поставляется по умолчанию с Django.

Когда Django получает запрос, он проходит через список urlpatterns , пока не найдет совпадение. В нашем случае .com будет соответствовать первому пути и вернет представление home , которое будет отображать index.html страница. Если мы перейдем к .com/admin/ , Django будет соответствовать шаблону пути admin/| и вернет страницу администратора.

Перезагрузите сервер и обновите веб-страницу справа. Вы должны увидеть нашу страницу “Привет, мир!”.

Отлично, теперь мы расставили все по местам для нашей веб-страницы “Привет, мир!”.Давайте расширим это и начнем создавать наше приложение погоды.

Откройте templates/index.html файл и измените код, где он говорит “Привет, мир!”, чтобы прочитать “Погода”, как показано ниже.

{% extends "base.html" %}

{% block content %}
  

Weather

{% endblock content %}

Нажмите кнопку обновить, как указано ниже, чтобы увидеть изменение результата с “Hello World!” на “Weather”.

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

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

Вызов IPIFY из JavaScript

IP – адрес – это как номер телефона. Когда вы приедете “google.com”, ваш компьютер на самом деле ищет имя google.com чтобы получить результирующий IP – адрес, связанный с одним из серверов Google. В то время как людям легче запоминать такие имена, как “google.com-компьютеры лучше работают с числами. Вместо того, чтобы печатать “google.com” на панели инструментов вашего браузера вы можете ввести IP-адрес 216.58.223.46 с теми же результатами. Каждое устройство, подключенное к Интернету, будет ли обслуживать контент (например google.com) или потреблять его (как и вы, читая этот учебник) имеет IP-адрес.

IP-адреса интересны нам тем, что по их IP-адресу можно угадать местоположение пользователя. (На самом деле это неточный и очень сложный процесс, но для наших целей он будет более чем адекватен). Мы будем использовать веб-сервис ipify.org для получения IP-адресов ваших посетителей.

В Reply.it вкладка файлы, перейдите к templates/base.html , который должен выглядеть следующим образом.

{% load static %}





    
    Hello World!
    
    
    


    {% block content %}{% endblock content %}


Раздел “head” этого шаблона находится между строками 5 и 11-открывающий и закрывающий теги . Мы добавим наши скрипты непосредственно под ...> в строке 10 и над закрывающим тегом в строке 11. Измените эту часть кода, чтобы добавить следующие строки: …>




Это два фрагмента JavaScript. Первая (строки 1-5)-это функция, которая при вызове отображает всплывающее окно (“предупреждение”) в браузере нашего посетителя, показывая его IP-адрес из объекта json, который мы передаем. Второй (строка 7) загружает внешний скрипт из API ipify и просит его передать данные (включая IP-адрес нашего посетителя) в функцию use_ip , которую мы предоставляем.

Если вы снова откроете свое веб-приложение и обновите страницу, вы увидите этот скрипт в действии (если вы используете adblocker, он может заблокировать сценарии ipify, поэтому попробуйте временно отключить его, если у вас есть какие-либо проблемы).

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

Теперь вместо того, чтобы просто показывать этот IP-адрес нашему посетителю, мы изменим код, чтобы скорее передать его нашему веб-серверу Repl (“бэкенд” нашего приложения), чтобы мы могли использовать его для получения информации о местоположении через другой сервис.

Добавление нового маршрута и представления, а также передача данных

В настоящее время наше приложение Django имеет только два маршрута: маршрут по умолчанию ( admin/ ) и ваш домашний маршрутизатор ( / ), который загружается как наша домашняя страница. Мы добавим еще один маршрут в /get_weather_from_ip , где мы можем передать IP-адрес нашему приложению, чтобы определить местоположение и получить текущий прогноз погоды.

Для этого нам нужно будет изменить файлы в mysite/views.py и mysite/urls.py .

Править urls.py выглядеть следующим образом (добавьте строку 8, но больше ничего менять не нужно).

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name=home),
    path('admin/', admin.site.urls),  
    path('get_weather_from_ip/', views.get_weather_from_ip, name="get_weather_from_ip"),
]

Мы добавили определение для маршрута get_weather_from_ip , сообщив вашему приложению, что если кто-то посетит https://django-weather-tutorial-eugenedorfling.ritza.repl.co/get_weather_from_ip тогда мы должны вызвать функцию в нашем views.py файл, который также называется get_weather_from_ip . Давайте напишем эту функцию сейчас.

В вашем views.py файл, добавьте функцию get_weather_from_ip() под существующей функцией home() и добавьте импорт из ответа Json в строке 2. Все твое views.py файл теперь должен выглядеть так:

from django.shortcuts import render
from django.http import JsonResponse


# Create your views here.
def home(request):
    return render(request, 'index.html')

def get_weather_from_ip(request):
  print(request.GET.get("ip_address"))
  data = {"weather_data": 20}
  return JsonResponse(data)

По умолчанию Django передает аргумент request всем представлениям. Это объект, который содержит информацию о нашем пользователе и соединении, а также любые дополнительные аргументы, передаваемые в URL. Поскольку наше приложение еще не подключено к каким-либо метеорологическим службам, мы просто составим температуру (20) и передадим ее нашему пользователю в виде JSON.

В строке 10 мы распечатываем IP-адрес, который мы будем передавать по этому маршруту из аргументов GET (мы рассмотрим, как это использовать позже). Затем мы создаем поддельные данные (которые позже заменим реальными) и возвращаем ответ JSON (данные в формате, который компьютер может читать легче, без форматирования). Мы возвращаем JSON вместо HTML, потому что наша система будет использовать этот маршрут внутренне для передачи данных между передним и задним концами нашего приложения, но мы не ожидаем, что наши пользователи будут использовать его напрямую.

Чтобы протестировать эту часть нашей системы, откройте свое веб-приложение на новой вкладке и добавьте /get_weather_from_ip?ip_address=123 к URL-адресу. Здесь мы просим нашу систему получить данные о погоде для IP-адреса 123 (не настоящий IP-адрес). В вашем браузере вы увидите поддельные данные о погоде, отображаемые в формате, который можно легко программно проанализировать.

Просмотр поддельных данных JSON

В выводе нашего Repl мы видим, что бэкэнд нашего приложения нашел “IP-адрес” и распечатал его между некоторыми другими выводами, сообщающими нам, какие маршруты посещаются и на каком порту работает наш сервер:

Django print output поддельного IP-адреса

Шаги, которые остаются сейчас, заключаются в том, чтобы:

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

Давайте начнем с использования Ajax для передачи IP-адреса пользователя, который мы собрали ранее, на наш новый маршрут, без необходимости явно посещать конечную точку get_weather_from_ip или обновлять свою страницу.

Вызов маршрута Django с помощью Ajax и jQuery

Мы будем использовать Ajax через jQuery для “частичного обновления страницы” – то есть для обновления части страницы, которую видит пользователь, отправляя новые данные из нашего бэкэнд-кода без необходимости перезагрузки страницы.

Для этого нам нужно включить jQuery в качестве библиотеки.

Примечание: обычно вы не добавляете JavaScript непосредственно в свой base.html шаблон, но чтобы все было проще и не создавалось слишком много файлов, мы будем отклоняться от некоторых хороших практик. См. Документацию Django для получения некоторых рекомендаций о том, как правильно структурировать JavaScript в больших проектах.

В вашем templates/base.html файл, добавьте следующий скрипт над строкой, где мы ранее определили функцию user_ip () .


  

Это загружает всю библиотеку jQuery из CDN , позволяя нам выполнять определенные задачи, используя меньше строк JavaScript.

Теперь измените сценарий use_ip () , который мы написали ранее, чтобы вызвать наш бэкенд-маршрут с помощью Ajax. Новая функция use_ip() должна быть следующей:

  function use_ip(json) {
    $.ajax({
      url: {% url 'get_weather_from_ip' %},
      data: {"ip": json.ip},
      dataType: 'json',
      success: function (data) {
        document.getElementById("weatherdata").innerHTML = data.weather_data 
      }
    });
  }

Наша новая функция use_ip() выполняет асинхронный вызов нашего get_weather_from_ip маршрута, отправляя по IP-адресу, который мы ранее отображали во всплывающем окне. Если вызов успешен, мы вызываем новую функцию (в разделе success: ) с возвращенными данными. Эта новая функция (строка 7) ищет HTML-элемент с идентификатором weatherdata и заменяет содержимое атрибутом weather_data ответа, который мы получили от get_weather_from_ip (который на данный момент все еще жестко закодирован как “20”).

Чтобы увидеть результаты, нам нужно добавить HTML-элемент в качестве заполнителя с идентификатором weather data . Сделайте это в templates/index.html файл выглядит следующим образом.

{% extends "base.html" %}

{% block content %}
  

Weather

{% endblock %}

Это добавляет пустой элемент HTML paragraph , который наш JavaScript может заполнить, как только у него есть необходимые данные.

Теперь перезагрузите приложение, и вы должны увидеть нашу подделку 20 отображается пользователю. Если вы не видите того, что ожидаете, откройте инструменты разработчика вашего браузера для Chrome и Firefox ) и посмотрите в разделе Консоли на наличие ошибок JavaScript. Чистая консоль (без ошибок) показана ниже.

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

Использование ip-api.com для геолокации

Служба по адресу ip-api.com очень прост в использовании. Чтобы получить страну и город с IP-адреса, нам нужно сделать только один веб-звонок. Для этого мы будем использовать библиотеку python requests , поэтому сначала нам придется добавить импорт для этого в наш views.py файл, а затем напишите функцию, которая может переводить IP-адреса в информацию о местоположении. Добавьте следующий импорт в ваш views.py файл:

import requests

а над функцией get_weather_from_ip() добавьте функцию get_location_from_ip() следующим образом:

def get_location_from_ip(ip_address):
    response = requests.get("http://ip-api.com/json/{}".format(ip_address))
    return response.json()

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

Вы можете увидеть ответ, который мы получим от этой службы, попробовав ее в вашем браузере. Посещение http://ip-api.com/json/41.71.107.123 чтобы увидеть ответ JSON для этого конкретного IP-адреса.

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

Прежде чем мы настроим компонент погоды, давайте отобразим текущие данные о местоположении пользователя вместо жестко заданной температуры, которая была у нас раньше. Измените функцию get_weather_from_ip () , чтобы вызвать нашу новую функцию и передать некоторые полезные данные следующим образом:

def get_weather_from_ip(request):
  ip_address = request.GET.get("ip")
  location = get_location_from_ip(ip_address)
  city = location.get("city")
  country_code = location.get("countryCode")
  s = "You're in {}, {}".format(city, country_code)
  data = {"weather_data": s}
  return JsonResponse(data)

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

приложение погоды, показ местоположения

Это компонент местоположения нашего приложения done and dusted-давайте теперь перейдем к получению данных о погоде для этого местоположения.

Получение данных о погоде с OpenWeatherMap

Чтобы автоматически получать данные о погоде из OpenWeatherMap , вам понадобится ключ API. Это уникальная строка, которую OpenWeatherMap предоставляет каждому пользователю своего сервиса, и она используется главным образом для ограничения количества звонков, которые каждый человек может сделать за определенный период. К счастью, OpenWeatherMap предоставляет щедрое “бесплатное” количество звонков, поэтому нам не нужно будет тратить деньги на создание нашего приложения. К сожалению, это пособие недостаточно великодушно, чтобы позволить мне поделиться своим ключом с каждым читателем этого урока, поэтому вам нужно будет зарегистрироваться в своей учетной записи и создать свой собственный ключ.

Посещение openweathermap.org , нажмите кнопку “Зарегистрироваться” и зарегистрируйтесь на сервисе, предоставив им адрес электронной почты и выбрав пароль. Затем перейдите в раздел API Keys и запишите свой уникальный API-ключ (или скопируйте его в буфер обмена).

Страница ключа API OpenWeatherMap

Этот ключ немного похож на пароль-когда мы используем сервис Openweathermap, мы всегда посылаем этот ключ, чтобы указать, что это мы делаем звонок. Потому что Repl.it проекты по умолчанию являются общедоступными, нам нужно быть осторожными, чтобы сохранить этот ключ в секрете и не допустить, чтобы другие люди делали слишком много звонков, используя нашу квоту OpenWeatherMap (что может привести к сбою нашего приложения, когда OpenWeatherMap начнет блокировать наши звонки). К счастью Repl.it обеспечивает аккуратный способ решения этой проблемы с помощью .env файлов .

В вашем проекте создайте новый файл с помощью кнопки “Новый файл”, как показано ниже. Убедитесь, что файл находится в корне вашего проекта и что вы называете файл .env (в Linux имя файла начинается с . обычно указывает, что это системный или конфигурационный файл). Внутри этого файла определите переменную OPEN_WEATHER_TOKEN следующим образом, но используя свой собственный токен вместо поддельного ниже. Убедитесь, что по обе стороны от знака = нет пробелов.

OPEN_WEATHER_TOKEN=1be9250b94bf6803234b56a87e55f
Создание нового файла

Reply.it загрузит содержимое этого файла в переменные окружения нашего сервера . Мы сможем получить доступ к нему с помощью библиотеки os в Python, но когда другие люди просматривают или разветвляют наш Repl, они не увидят файл .env , сохраняя наш ключ API безопасным и закрытым.

Чтобы получить данные о погоде, нам нужно вызвать API OpenWeatherMap, передавая поисковый запрос. Чтобы убедиться, что мы получаем нужный нам город, хорошо передать код страны, а также название города. Например, чтобы узнать погоду в Лондоне прямо сейчас, мы можем посетить его (опять же, вам нужно будет добавить свой собственный ключ API вместо строки после appid= )

Чтобы проверить это, вы можете сначала посетить URL-адрес в вашем браузере. Если вы предпочитаете Фаренгейт Цельсию, просто измените unit=metric часть URL-адреса на units=imperial .

Ответ Json от OpenWeatherMap

Давайте напишем одну последнюю функцию в нашем views.py файл для репликации этого вызова для города нашего посетителя, который мы ранее отображали.

Сначала нам нужно добавить импорт для модуля Python os (операционная система), чтобы мы могли получить доступ к нашим переменным среды. В верхней части views.py добавить:

import os

Теперь мы можем написать функцию. Добавьте в следующее views.py :

def get_weather_from_location(city, country_code):
    token = os.environ.get("OPEN_WEATHER_TOKEN")
    url = "https://api.openweathermap.org/data/2.5/weather?q={},{}&units=metric&appid={}".format(
        city, country_code, token)
    response = requests.get(url)
    return response.json()

В строке 2 мы получаем наш API-ключ из переменных окружения (обратите внимание, что иногда вам нужно обновить repl.it page with your repl in to properly load in the environment variables), а затем мы используем это для правильного форматирования нашего URL-адреса в строке 3. Мы получаем ответ от OpenWeatherMap и возвращаем его в виде json.

Теперь мы можем использовать эту функцию в нашей функции get_weather_from_ip () , изменив ее следующим образом:

def get_weather_from_ip(request):
  ip_address = request.GET.get("ip")
  location = get_location_from_ip(ip_address)
  city = location.get("city")
  country_code = location.get("countryCode")
  weather_data = get_weather_from_location(city, country_code)
  description = weather_data['weather'][0]['description']
  temperature = weather_data['main']['temp']
  s = "You're in {}, {}. You can expect {} with a temperature of {} degrees".format(city, country_code, description, temperature)
  data = {"weather_data": s}
  return JsonResponse(data)

Теперь мы получаем данные о погоде в строке 6, анализируем их в описание и температуру в строках 7 и 8 и добавляем их в строку, которую мы передаем обратно в наш шаблон в строке 9. Если вы перезагрузите страницу, то увидите свое местоположение и погоду.

Погодное приложение, показывающее местоположение и погоду

Поскольку сейчас мы выполняем несколько вызовов API, страница может быть пустой в течение нескольких секунд после загрузки, прежде чем заполнять данные о погоде и местоположении. Опять же, если вы не видите того, что ожидаете, проверьте Reply.it вывод сервера и посмотрите на консоль инструментов разработчика вашего браузера.

Раздвоение ответа, чтобы продлить его

Теперь у вас есть базовое приложение Django, которое может посетить любой желающий и которое показывает динамические данные.

Если вы хотите продлить срок действия приложения, Repl.it это позволяет легко “раскошелиться”, а это значит, что вы сможете клонировать Repl именно там, где мы остановились, и модифицировать его так, как вам захочется. Просто перейдите к моему ответу по адресу https://repl.it/@ritza/django-weather-tutorial-eugenedorfling и нажал кнопку “Вилка”. Если вы не создали учетную запись в начале этого урока, вам будет предложено создать ее. (Вы даже можете использовать множество функций Repl без создания учетной записи.)

Раздвоение ответа

Если вы застряли в поисках идей, то некоторые возможные расширения таковы:

  • Сделайте страницу более красивой, используя Bootstrap или другой CSS-фреймворк в файлах шаблонов.
  • Сделайте приложение более настраиваемым, позволив пользователю выбрать свое собственное местоположение, если IP-местоположение, которое мы предполагаем, неверно
  • Сделайте приложение более полезным, показывая прогноз погоды вместе с текущей погодой. (Эти данные также доступны из Открытой карты погоды).
  • Добавьте в веб-приложение другие данные, связанные с местоположением, такие как новости, конвертация валют, перевод, почтовые индексы. См. https://github.com/toddmotto/public-apis#geocoding для хорошего списка возможностей.

Если вам понравился этот учебник, вам может быть интересно Создание чат-бота с использованием Telegram и Python где я показываю, как создавать чат-ботов, или моя книга Flask на примере где я даю более подробное введение в разработку веб-приложений с использованием Python. Не стесняйтесь пинговать меня в Твиттере по любым вопросам об этом уроке, указывать на ошибки или спрашивать о веб-разработке в целом.