Tutorial

Cómo mostrar datos de la API de DigitalOcean con Django

Published on April 10, 2020

Ari Birnbaum and Brian MacDonald

Español

Cómo mostrar datos de la API de DigitalOcean con Django

El autor seleccionó a Mozilla Foundation para recibir una donación como parte del programa Write for DOnations.

Introducción

A medida que continúa en aumento la demanda de desarrollo integral, los marcos web están haciendo que los flujos de trabajo de desarrollo sean menos complicados y más eficientes; Django es uno de esos marcos. Django se ha usado en sitios web importantes como Mozilla, Pinterest e Instagram. A diferencia de Flask, que es un micromarco neutral, el paquete PyPI de Django incluye todo lo que necesitaría para un desarrollo completo; sin necesidad de configurar una base de datos ni de controlar el panel para su desarrollo.

Un caso de uso común para Django consiste en usarlo para mostrar información de las API (como publicaciones de Instagram o repositorios de GitHub) en sus aplicaciones y sitios web propios. Aunque esto es posible con otros marcos, la filosofía de “baterías incluidas” de Django implica que habrá menos problemas y se necesitarán menos paquetes para generar el mismo resultado.

A través de este tutorial, creará un proyecto de Django que mostrará información del Droplet de su cuenta de DigitalOcean usando la API de DigitalOcean v2. En términos específicos, creará un sitio web que mostrará una tabla de Droplets listando cada ejemplar de sus direcciones IP, ID, regiones de hosting y recursos. Su sitio web usará BulmaCSS para dar estilo a la página, de modo que pueda concentrarse en el desarrollo y a la vez disponga de algo estético al final.

Una vez completado este tutorial, dispondrá de un proyecto de Django que podrá producir una página web con el siguiente aspecto:

Plantilla con tabla de datos del droplet

Requisitos previos

Para completar esta guía, necesitará lo siguiente:

Una cuenta de DigitalOcean con al menos un Droplet y un token de acceso personal. Asegúrese de registrar el token en un lugar seguro; lo necesitará más adelante en este tutorial.
Familiaridad al realizar solicitudes a API. Para ver un tutorial completo sobre cómo trabajar con API, consulte Cómo usar API web en Python3.
Un entorno virtual para Python para mantener dependencias. En este tutorial, usaremos el nombre do_django_api para el directorio de nuestro proyecto y env para nuestro entorno virtual.
Familiaridad con la lógica de plantillas de Django, para renderizar páginas con datos de API.
Familiaridad con la lógica de la vista de Django, para gestionar los datos recibidos de la API y proporcionarlos a una plantilla para su renderización.

Paso 1: Crear un proyecto de Django básico

Desde el entorno virtual env, instale Django:

pip install Django

Ahora puede iniciar un proyecto de Django y ejecutar algunos comandos de configuración inicial.

Utilice django-admin startproject <name> para crear en la carpeta del proyecto un subdirectorio que lleve el nombre del proyecto de Django. Luego posiciónese en ese directorio.

django-admin startproject do_django_project
cd do_django_project

Una vez creado, dentro de este subdirectorio, encontrará manage.py, que es la alternativa habitual para interactuar con Django y ejecutar su proyecto. Utilice migrate para actualizar la base de datos de desarrollo de Django:

python3 manage.py migrate

A medida que se actualice la base de datos, verá un resultado similar a este:

OutputOperations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying sessions.0001_initial... OK

A continuación, utilice el comando runserver para ejecutar el proyecto de modo que pueda probarlo:

python3 manage.py runserver

El resultado tendrá este aspecto cuando se inicie el servidor:

OutputWatching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
September 22, 2019 - 22:57:07
Django version 2.2.5, using settings 'do_django_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Ahora, dispondrá de un proyecto de Django básico y un servidor de desarrollo activo. Para ver su servidor de desarrollo activo, visite 127.0.0.1:8000 en un navegador. Mostrará la página de inicio de Django:

Página de inicio genérica de Django

A continuación, creará una aplicación de Django y configurará su proyecto para ejecutar una vista desde dicha aplicación. Por lo tanto, verá algo más interesante que la página predeterminada.

Paso 2: Crear una aplicación de Django básica

En este paso, creará el esqueleto de la aplicación que contendrá los resultados de su Droplet. Volverá a esta aplicación más tarde, una vez que haya configurado la invocación de API para completarla con datos.

Asegúrese de que estar posicionado en el directorio do_django_project y cree una aplicación de Django usando el siguiente comando:

python3 manage.py startapp display_droplets

Ahora, deberá añadir la nueva aplicación a INSTALLED_APPS en el archivo settings.py, de modo que Django la reconozca. settings.py es un archivo de configuración de Django que se ubica dentro de otro subdirectorio en el proyecto de Django y tiene el mismo nombre que la carpeta del proyecto (do_django_project). Django creó ambas carpetas. Posiciónese en el directorio do_django_project:

cd do_django_project

Modifique settings.py en el editor que prefiera:

nano settings.py

Añada su nueva aplicación a la sección INSTALLED_APPS del archivo:

do_django_api/do_django_project/do_django_project/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # The new app
    'display_droplets',
]

Guarde y cierre el archivo cuando termine.

Función de visualización GetDroplets

A continuación, creará una función, GetDroplets, dentro del archivo views.py de la aplicación de display_droplets. Esta función creará la plantilla que usará para mostrar datos del Droplet, como context, desde la API. context es un diccionario que se usa para tomar datos del código Python y eviarlos a una plantilla HTML para que pueda mostrarse en una página web.

Posiciónese en el directorio display_droplets:

cd ..
cd display_droplets

Abra views.py para editarlo:

nano views.py

Añada el siguiente código al archivo:

do_django_api/do_django_project/display_droplets/views.py

from django.views.generic import TemplateView

class GetDroplets(TemplateView):
    template_name = 'droplets.html'
    def get_context_data(self, *args, **kwargs):
        pass

Guarde y cierre el archivo.

Más adelante, completará esta función y creará el archivo droplets.html, pero primero configuraremos urls.py para invocar esta función cuando visite el directorio root del servidor de desarrollo (127.0.0.1:8000).

Vuelva al directorio del proyecto do_django_project:

cd ..
cd do_django_project

Abra urls.py para su editarlo:

nano urls.py

Añada la instrucción import para GetDroplets, y luego una ruta adicional para urlpatterns que apuntará a la nueva vista.

do_django_api/do_django_project/do_django_project/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', GetDroplets.as_view(template_name='droplets.html'), name='Droplet View'),
]

Si desea crear sus propias rutas personalizadas, el primer parámetro es la URL (como example.com/**admin**), el segundo es la función que se invocará para producir la página web y el tercero simplemente el nombre de la ruta.

Guarde y cierre el archivo.

Platilla de Droplets

A continuación, trabajará con plantillas. Las plantillas son archivos HTML que Django usa para crear páginas web. En este caso, usará una plantilla para crear una página HTML que muestre los datos de la API.

Vuelva al directorio display_droplets:

cd ..
cd display_droplets

Dentro de este, cree la carpeta template y posicónese en ella:

mkdir templates
cd templates

Cree droplets.html y ábralo para editarlo:

nano droplets.html

Para evitar tener que escribir cualquier tipo de CSS para este proyecto, usaremos Bulma CSS porque es un marco CSS gratuito y ligero que le permite crear páginas web de aspecto limpio simplemente añadiendo algunos atributos de clase al HTML.

Ahora, crearemos una plantilla con una barra de naevgación básica. Añada el siguiente código al archivo droplets.html.

do_django_api/do_django_project/display_droplets/templates/droplets.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DigitalOcean Droplets</title>
    <link crossorigin="anonymous"
          href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
          integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4="
          rel="stylesheet"/>
    <link rel="shortcut icon" type="image/png" href="https://assets.digitalocean.com/logos/favicon.png"/>
</head>
<body>
<nav aria-label="main navigation" class="navbar is-light" role="navigation">
    <div class="navbar-brand">
        <div class="navbar-item">
            <img atl="DigitalOcean" src="https://assets.digitalocean.com/logos/DO_Logo_icon_blue.png"
                 style="margin-right: 0.5em;">Droplets
        </div>
    </div>
</nav>
</body>
</html>

Guarde y cierre el archivo.

Este código importa Bulma a HTML estándar y crea la barra nav que muestra “Droplets”.

Actualice la pestaña de su navegador para ver los cambios realizados en la plantilla.

Plantilla con encabezado básico

Hasta ahora, no intervino en nada relacionado con las API; creó una base para el proyecto. A continuación, pondrá en uso esta página creando una invocación de API y presentando los datos del Droplet.

Paso 3: Crear la invocación de API

En este paso, configurará una invocación de API y enviará los datos del Droplet como contexto para que la plantilla se muestre en una tabla.

Obtener datos del Droplet

Vuelva al directorio de la aplicación display_droplets:

cd ..

Instale la biblioteca requests para poder comunicarse con la API:

pip install requests

La biblioteca requests permite que su código solicite datos de API y añada encabezados (datos adicionales enviados junto con nuestra solicitud).

Ahora creará un archivo services.py, en el que realizará la invocación de la API. Esta función usará requests para comunicarse con https://api.digitalocean.com/v2/droplets y anexar cada Droplet en el archivo JSON devuelto a una lista.

Abra services.py para editarlo:

nano services.py

Añada el siguiente código al archivo:

do_django_api/do_django_project/display_droplets/services.py

import os
import requests

def get_droplets():
    url = 'https://api.digitalocean.com/v2/droplets'
    r = requests.get(url, headers={'Authorization':'Bearer %s' % 'access_token'})
    droplets = r.json()
    droplet_list = []
    for i in range(len(droplets['droplets'])):
        droplet_list.append(droplets['droplets'][i])
    return droplet_list

Dentro de la función get_droplets pueden suceder dos cosas: se realiza una solicitud y se analizan los datos. url contiene los datos de la URL que solicita el Droplet de la API de DigitalOcean. r almacena los datos solicitados.

requests toma dos parámetros en este caso: url y headers. Si desea datos de una API diferente, sustituirá el valor de url por la URL apropiada. headers envía a DigitalOcean su token de acceso a fin de que la plataforma verifique que tiene permiso para hacer la solicitud y confirme la cuenta para la cual se realiza la solicitud.

droplets contiene la información de la variable r, pero ahora se convirtió a partir de JSON, el formato en el que cual API envía la información, en un diccionario fácil de usar en un bucle for.

Con las siguientes tres líneas se crea una matriz, droplet_list[]. A continuación, un bucle for itera la información de los droplets y añade cada elemento a la lista. Toda la información tomada del API y almacenada en los droplets puede encontrarse en los documentos del desarrollador de DigitalOcean.

Nota: No olvide sustituir access.token por su token de acceso. Además, guárdelo en un sitio seguro y nunca publique ese token en línea.

Guarde y cierre el archivo.

Proteger su token de acceso

Siempre debería ocultar su token de acceso, pero si alguna vez alguien quisiera usar su proyecto, debería disponer de una alternativa sencilla para que esa persona pueda añadir su propio token de acceso sin tener que editar el código Python. DotENV es la solución, ya que las variables se guardan en un archivo .env que puede editarse de forma conveniente.

Vuelva al directorio do_django_project.

cd ..

Para comenzar a trabajar con las variables de entorno, instale python-dotenv:

pip install python-dotenv

Una vez que lo haga, deberá configurar Django para gestionar las variables de entorno de modo que pueda hacer referencia a ellas en el código. Para hacer eso, deberá añadir algunas líneas de código a manage.py y wsgi.py.

Abra manage.py para editarlo:

nano manage.py

Añada el siguiente código:

do_django_api/do_django_project/manage.py


"""Django's command-line utility for administrative tasks."""
import os
import sys
import dotenv

def main():
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'do_django_project.settings')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)

if __name__ == '__main__':
    main()

dotenv.load_dotenv(
    os.path.join(os.path.dirname(__file__), '.env')
)

Añadir esto en manage.py significa que cuando emita comandos a Django durante el desarrollo, gestionará las variables de entorno de su archivo .env.

Guarde y cierre el archivo.

Si alguna vez debe gestionar variables de entorno en sus proyectos de producción, podrá hacerlo desde el archivo wsgi.py. Posiciónese en el directorio do_django_project:

cd do_django_project

Abra wsgi.py para su edición:

nano wsgi.py

Añada el siguiente código a wsgi.py:

do_django_api/do_django_project/do_django_project/wsgi.py


import os
import dotenv

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'do_django_project.settings')

dotenv.load_dotenv(
    os.path.join(os.path.dirname(os.path.dirname(__file__)), '.env')
)

application = get_wsgi_application()

Este snippet de código tiene un os.path.dirname() adicional porque wsgi.py debe revisar nuevamente dos directorios para encontrar el archivo .env. Este snippet no es el mismo que se usa para manage.py.

Guarde y cierre el archivo.

Ahora puede usar una variable de entorno en services.py en vez de su token de acceso. Vuelva al directorio display_droplets:

cd ..
cd display_droplets

Abra services.py para editarlo:

nano services.py

Ahora sustituya su token de acceso por una variable de entorno.

do_django_api/display_droplets/services.py

import os
import requests

def get_droplets():
    url = "https://api.digitalocean.com/v2/droplets"
    r = requests.get(url, headers={'Authorization':'Bearer %s' % os.getenv('DO_ACCESS_TOKEN')})
    droplets = r.json()
    droplet_list = []
    for i in range(len(droplets['droplets'])):
        droplet_list.append(droplets['droplets'][i])
    return droplet_list

Guarde y cierre el archivo.

El siguiente paso es crear un archivo .env. Vuelva al directorio do_django_project:

cd ..

Cree un archivo .env y abra el archivo para editarlo:

nano .env

En .env, añada su token como la variable DO_ACCESS_TOKEN:

do_django_api/do_django_project/.env

DO_ACCESS_TOKEN=access_token

Guarde y cierre el archivo.

Nota: Añada .env a su archivo .gitignore para que nunca se incluya en sus ejecuciones.

Con esto, configuró la conexión de la API y también protegió su token de acceso. Es el momento de presentar la información obtenida al usuario.

Paso 4: Manipular datos del Droplet en vistas y plantillas

Ahora que puede hacer invocaciones de API, deberá enviar los datos del Droplet a la plantilla para su representación. Regresaremos al módulo de la función, GetDroplets, que creó antes en views.py. En la función, enviará droplet_list como contexto a la plantilla droplets.html.

Posiciónese en el directorio display_droplets:

cd display_droplets

Abra views.py para editarlo:

nano views.py

Añada el siguiente código a views.py:

do_django_api/do_django_project/display_droplets/views.py

from django.shortcuts import render
from django.views.generic import TemplateView
from .services import get_droplets

class GetDroplets(TemplateView):
    template_name = 'droplets.html'
    def get_context_data(self, *args, **kwargs):
        context = {
            'droplets' : get_droplets(),
        }
        return context

La información enviada a la plantilla droplets.html se gestiona a través del diccionario context. Por eso, droplets funciona como clave y la matriz devuelta de get_droplets() como un valor.

Guarde y cierre el archivo.

Presentar los datos en la plantilla

Dentro de la plantilla droplets.html, creará una tabla y la completará con los datos del Droplet.

Posiciónese en el directorio templates:

cd templates

Abra droplets.html para editarlo:

nano droplets.html

Añada el siguiente código después del elemento nav en droplets.html:

do_django_api/do_django_project/display_droplets/templates/droplets.html

<table class="table is-fullwidth is-striped is-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>IPv4 Address(es)</th>
        <th>Id</th>
        <th>Region</th>
        <th>Memory</th>
        <th>CPUs</th>
        <th>Disk Size</th>
    </tr>
    </thead>
    <tbody>
    {% for droplet in droplets %}
    <tr>
        <th>{{ droplet.name }}</th>
        {% for ip in droplet.networks.v4 %}
        <td>{{ ip.ip_address }}</td>
        {% endfor %}
        <td>{{ droplet.id }}</td>
        <td>{{ droplet.region.name }}</td>
        <td>{{ droplet.memory }}</td>
        <td>{{ droplet.vcpus }}</td>
        <td>{{ droplet.disk }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>

{% for droplet in droplets %} ... {% endfor %} es un bucle que itera la matriz de Droplets recuperados de views.py. Cada Droplet se inserta en una fila de la tabla. Las diferentes líneas {{ droplet.<attribute> }} obtienen ese atributo para cada Droplet del bucle y lo insertan en una celda de tabla.

Guarde y cierre el archivo.

Actualice su navegador para ver una lista de Droplets.

Plantilla con tabla de datos de Droplets

Ahora, podrá gestionar la API de DigitalOcean dentro de sus proyectos de Django. Tomó los datos obtenidos de la API y los incorporó a la plantilla que creó anteriormente, para mostrar la información de una forma legible y flexible.

Conclusión

A lo largo de este artículo, creó un proyecto de Django que puede mostrar información de Droplets de la API de DigitalOcean con estilo de CSS de Bulma. A través de este tutorial, aprendió tres habilidades importantes:

Gestión de solicitudes de API en Python usando los módulos requests y json.
Exposición de datos de API en un proyecto de Django usando la lógica de view y template.
Gestión segura de sus tokens de API usando dotenv en Django.

Ahora que vio una introducción a la gestión de API en Django, puede crear un proyecto propio usando otra función de la API de DigitalOcean o una API diferente. También puede consultar otros tutoriales de Django o un tutorial similar con el marco React.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors