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

Потребляющая API с Django и Chart.js [Часть 1]

Это будет обучение серии из 3 частей, вы собираетесь узнать, как потреблять API в Django … Теги с Python, Django, JavaScript, WebDev.

Потребляющая API COINDESK с Django и Chart.js (3 части серии)

Это будет обучение серии из 3 частей, вы собираетесь узнать, как потреблять API в Django и представить его в графическом формате с помощью Chart.js. Мы будем использовать API COINDESK «Исторические данные BPI BPI». Вот образец API мы будем использовать.

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

Я предполагаю, что у вас уже есть Python, установленный на вашей машине. Если вы этого не сделаете, вы можете скачать и настроить его через этот ссылка . Пожалуйста, убедитесь, что вы загружаете последнюю версию Python. (Python 3.97)

Откройте командную строку в Windows, терминала на Mac и Linux и перейдите к каталогу, где вы хотите сохранить проект и создать новый каталог

mkdir bitcoin_api

Перейти в новый каталог

cd bitcoin_api

Создайте виртуальную среду.

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

For mac/unix users: python3 -m venv env
For windows users: py -m venv env

После создания среды активируйте его бегом:

For mac/unix users: source env/bin/activate
For windows users: .\env\Scripts\activate

Вы можете деактивировать его, просто запустив команду ниже, но вам еще не нужно деактивировать ее.

deactivate

Установка Django.

Теперь давайте перейдем к установке Django,

pip install django

Мы официально сделаны с созданием нашей системы для проекта Django 🤝, теперь давайте перейдем к самому настроению проекта.

Вы думали, что мы сделали, да? 😅. Не волнуйтесь, у нас есть всего несколько шагов, чтобы пойти 😀 И тогда мы будем приступить к кодированию.

Настройка проекта

Создайте новый проект Django и назовите его «Биткойн-цена»

django-admin startproject bitcoin_price

Перейти к папке проекта

cd bitcoin_price

Создать новое заявление с именем «цена»

python manage.py startapp price

Далее мы должны добавить имя вновь созданного приложения в файл Settings.py в нашем каталоге проекта «Биткойн-цена». Откройте файл settings.py; В разделе «Установленные приложения» настроек добавьте строку «цена» на нее, чтобы она заканчивалась так.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #my_app
    'price',
]

Затем мы добавим наш HTML-шаблон, а также статические файлы пути к настройкам, которые будут обрабатывать файлы HTML, CSS и JavaScript. Мы будем изменять только содержание «Dirs» здесь. Все, что мы делаем, объявляет путь к папке, где мы будем хранить наши собственные шаблоны HTML

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR/ 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

В нижней части нашего файла настроек вы увидите раздел статических файлов. Добавьте это под конфигурацию Static_url

STATICFILES_DIRS = [
    BASE_DIR/ 'static'
]

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

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR/ 'static'
]

Это все, что нам нужно сделать в файле settings.py.

Мы не будем нуждаться в базе данных для этого урока, поскольку данные API будут вытеснены и отобраны в режиме реального времени. Таким образом, вы можете идти вперед и удалить файл Models.py под вашим приложением «Цена». Да, вы прочитаете это правильно, мы не будем нужны файл «Models.py». Поверьте мне на этом один😁. На данный момент ваша структура папки должна выглядеть так 👇

Теперь мигрируйте ваши «миграции» с этой командой

python manage.py migrate

Затем вы можете начать свой сервер, чтобы убедиться, что все работает должным образом

python manage.py runserver 

Скопируйте этот URL: http://127.0.0.1:8000 И открыть в любом браузере по вашему выбору. Вы должны увидеть что-то похожее на это 👇 Далее мы будем создавать статические и шаблонные папки. Убедитесь, что вы находитесь в папке, которая содержит файл manage.py

Создайте статическую папку и в нем две дополнительные папки с именем CSS и JS соответственно. Они будут держать наш JavaScript и Styling Codes позже.

Затем создайте имя папки «Шаблоны». Создайте файл base.html в нем. Затем вставьте следующий код в HTML-файле.




  
    
    

    Bitcoin Price Chart
  
  

    

CoinDesk's Bitcoin Api Data

Теперь нам нужно настроить наш URL, поэтому мы можем просмотреть нашу HTML-страницу. Откройте URLS.PY файл в папке BitCoin_price. Нам нужно импортировать функцию включения и ссылку URL-адрес нашей «цене» приложения. Мы будем настроить это как это👇.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("price.urls"))
]

Это похоже на то, что у нас есть, но нам просто нужно редактировать строку 2 и добавить строку 5. Затем мы открываем ценовую папку и создаем новый файл с именем URLS.PY. Скопируйте это в новый файл.

from django.urls import path
from .views import chart

urlpatterns = [
    path("", chart, name="chart"),
]

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

Views.py

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

def chart(request):
     context = {}
     return render(request, 'base.html', context)

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

Вы можете увидеть эту ошибку в вашей командной строке или клемме: «ModuleNotfoundError: No модуль с именем« Price.urls ». Это потому, что наш сервер все еще работает, когда мы сделали изменения, так что не может прочитать файл URLS.PY, который мы только что создали Отказ Выключите сервер с

 'Control + C' buttons on your keyboard

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

python manage.py runserver 

Обновите страницу, которую вы открыли на своем сервере. Вы должны увидеть содержимое H1 в нашем файле Base.html на странице.

(Если вы ничего не видите. Две вещи, возможно, произошли:

  1. Вы закрыли страницу. Откройте этот URL: 127.0.0.1:8000 в вашем браузере
  2. Вы уже сбили сервер. Запустите команду ниже.
python manage.py runserver
then open this url 127.0.0.1:8000 in your browser.

Теперь вы должны быть в состоянии увидеть страницу выше👆.

Наконец, мы создаем папку шаблона в нашем каталоге цен и добавить файл Chart.html к нему.

Voilà !!! Мы успешно завершили создание нашего проекта Django. Ваша структура файлов проекта должна выглядеть так сейчас.

Теперь давайте начнем с написания логических кодов ✍ ️. Нет, мы не будем делать это в части 1 😅. Давайте отдохнем и отставьте основную работу на следующую часть серии. Если вы сильны 💪, вы можете продолжить прямо в части 2

Если у вас есть какие-либо вопросы, не стесняйтесь бросить его как комментарий или пришлите мне сообщение на LinkedIn или твиттер

Потребляющая API COINDESK с Django и Chart.js (3 части серии)

Оригинал: “https://dev.to/faruqt/consuming-coindesk-s-api-with-django-and-chart-js-part-1-5ehb”