One place for hosting & domains

      Cómo crear una aplicación Web usando Flask en Python 3


      El autor seleccionó la Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Flask es un marco web de Python pequeño y ligero que proporciona herramientas y funciones útiles que hacen que crear aplicaciones web en Python sea más fácil. Ofrece a los desarrolladores flexibilidad y un marco más accesible para los nuevos desarrolladores ya que puede crear una aplicación web rápidamente usando únicamente un archivo Python. Flask también es extensible y no fuerza una estructura de directorio concreta ni requiere código estándar complicado antes de iniciarse.

      Como parte de este tutorial, usará el kit de herramientas Bootstrap para dar estilo a su aplicación, para que sea más atractiva visualmente. Bootstrap le ayudará a incorporar páginas web reactivas en su aplicación web para que también funcione bien en navegadores móviles sin tener que escribir su propio código HTML, CSS y JavaScript para conseguir estos objetivos. El kit de herramientas le permitirá centrarse en aprender cómo funciona Flask.

      Flask utiliza el motor de plantillas Jinja para crear dinámicamente páginas HTML usando conceptos Python familiares como variables, bucles, listas, etcétera. Usará estas plantillas como parte de este proyecto.

      En este tutorial, creará un pequeño blog web usando Flask y SQLite en Python 3. Los usuarios de la aplicación pueden ver todas las entradas del blog en su base de datos y hacer clic sobre el título de una entrada para ver su contenido, con la capacidad de añadir una nueva publicación a la base de datos y editar o eliminar una entrada existente.

      Requisitos previos

      Antes de comenzar con esta guía, necesitará lo siguiente:

      Paso 1: Instalar Flask

      En este paso, activará su entorno Python e instalará Flask usando el instalador de paquetes pip.

      Si aún no ha activado su entorno de programación, asegúrese de que está en el directorio de su proyecto (flask_blog) y utilice el siguiente comando para activar el entorno:

      Una vez activado su entorno de programación, su línea de comandos ahora tendrá un prefijo env que puede tener el siguiente aspecto:

      Este prefijo es una indicación de que el entorno env está activo actualmente, y puede tener otro nombre dependiendo de cómo lo llamó durante la creación.

      Nota: Puede utilizar Git, un sistema de control de versiones, para administrar y realizar un seguimiento de forma efectiva del proceso de desarrollo de su proyecto. Para aprender cómo usar Git, es posible que desee consultar nuestro artículo Introducción a la instalación de Git, uso y ramificaciones.

      Si está usando Git, es una buena idea ignorar el recién creado directorio env en su archivo .gitignore para evitar realizar un seguimiento de los archivos no relacionados con el proyecto.

      Ahora, instalará los paquetes Python y aislará el código de su proyecto de la instalación del sistema principal de Python. Hará esto usando pip y python.

      Para instalar Flask, ejecute el siguiente comando:

      Una vez que se complete la instalación, ejecute el siguiente comando para confirmar la instalación:

      • python -c "import flask; print(flask.__version__)"

      Utiliza la interfaz de la línea de comandos python con la opción -c para ejecutar el código Python. A continuación, importa el paquete flask con import flask; luego imprime la versión de Flask, que encontrará a través de la variable flask._version_.

      El resultado será un número de versión similar al siguiente:

      Output

      1.1.2

      Ha creado la carpeta del proyecto, un entorno virtual, e instalado Flask. Ahora está listo para configurar su aplicación básica.

      Paso 2: Crear una aplicación básica

      Ahora que tiene su entorno de programación configurado, comenzará a usar Flask. En este paso, creará una pequeña aplicación web dentro de un archivo Python, y la ejecutará para iniciar el servidor, que mostrará cierta información en el navegador.

      En su directorio flask_blog, abra un archivo llamado hello.py para su edición; para ello utilice nano o su editor de texto favorito:

      Este archivo hello.py servirá como ejemplo mínimo de cómo gestionar solicitudes HTTP. Dentro, importará el objeto Flask, y creará una función que devuelva una respuesta HTTP. Escriba el siguiente código dentro de hello.py:

      flask_blog/hello.py

      from flask import Flask
      
      app = Flask(__name__)
      
      
      @app.route('/')
      def hello():
          return 'Hello, World!'
      

      En el bloque de código anterior, primero importa el objeto Flask desde el paquete flask. A continuación lo usará para crear su instancia de aplicación Flask con el nombre app. Pasa la variable especial __name__ que alberga el nombre del módulo Pyhthon actual. Se utiliza para indicar a la instancia dónde está ubicada. Necesitará hacerlo porque Flask configura algunas rutas en segundo plano.

      Una vez que cree la instancia app, la utiliza para gestionar las solicitudes web entrantes y enviar respuestas al usuario. @app.route es un decorador que convierte una función Python regular en una función vista de Flask, que convierte el valor de devolución de la función en una respuesta HTTP que se mostrará mediante un cliente HTTP, como un navegador web. Pasa el valor '/' a @app.route() para indicar que esta función responderá a las solicitudes web para la URL /, que es la URL principal.

      La función de vista hello() devuelve la cadena 'Hello, World!'​​ como respuesta.

      Guarde y cierre el archivo.

      Para ejecutar su aplicación web, primero indicará a Flask dónde encontrar la aplicación (el archivo hello.py en su caso) con la variable de entorno FLASK_APP:

      A continuación, ejecútela en modo de desarrollo con la variable de entorno FLASK_ENV:

      • export FLASK_ENV=development

      Por último, ejecute la aplicación usando el comando flask run:

      Una vez que la aplicación se esté ejecutando, el resultado será algo similar a esto:

      Output

      * Serving Flask app "hello" (lazy loading) * Environment: development * Debug mode: on * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 813-894-335

      El resultado anterior tiene varias informaciones, como:

      • El nombre de la aplicación que está ejecutando.
      • El entorno en el cual se ejecuta la aplicación.
      • Debug mode: on significa que el depurador de Flask se está ejecutando. Esto es útil durante el desarrollo porque nos proporciona mensajes de error detallados cuando algo va mal, lo que hace que sea más fácil resolver los problemas.
      • La aplicación se ejecuta localmente sobre la URL http://127.0.0.1:5000/, 127.0.0.1 es la IP que representa el localhost de su equipo y :5000 es el número de puerto.

      Abra un navegador y escriba la URL http://127.0.0.1:5000; recibirá la cadena Hello, World! como respuesta. Esto confirma que su aplicación se está ejecutando correctamente.

      Advertencia Flask utiliza un servidor web sencillo para presentar nuestra aplicación en un entorno de desarrollo, lo que también significa que el depurador de Flask se ejecuta para hacer que sea más fácil ver los errores. Este servidor de desarrollo no debería usarse en una implementación de producción. Consulte la página Opciones de implementación en la documentación de Flask para obtener más información; también puede consultar este tutorial de Implementación Flask.

      Ahora puede dejar el servidor de desarrollo en ejecución en el terminal y abrir otra ventana del terminal. Vaya a la carpeta del proyecto donde está hello.py, active el entorno virtual, establezca las variables del entorno FLASK_ENV y FLASK_APP y continúe a los siguientes pasos. (Estos comandos se han enumerado antes en este paso).

      Nota: Cuando abra un nuevo terminal, es importante recordar activar el entorno virtual y configurar las variables de entorno FLASK_ENV y FLASK_APP.

      Mientras un servidor de desarrollo de la aplicación de Flask esté ejecutándose, no es posible ejecutar otra aplicación Flask con el mismo comando flask run. Esto es porque flask run utiliza el número de puerto 5000 por defecto, y una vez utilizado, no está disponible para ejecutar otra aplicación, de forma que recibiría un error similar al siguiente:

      Output

      OSError: [Errno 98] Address already in use

      Para resolver este problema, detenga el servidor que se está ejecutando actualmente mediante CTRL+C, luego ejecute flask run de nuevo, o si desea que ambos se ejecuten a la vez, puede pasar un número de puerto diferente al argumento -p; por ejemplo, para ejecutar otra aplicación en el puerto 5001 utilice el siguiente comando:

      Ahora tiene una aplicación web Flask pequeña. Ha ejecutado su aplicación y mostrado información en el navegador web. A continuación, utilizará los archivos HTML en su aplicación.

      Paso 3: Usar plantillas HTML

      Actualmente, su aplicación solo muestra un mensaje sencillo sin HTML. Las aplicaciones web utilizan principalmente HTML para mostrar información al visitante, de forma que ahora trabajará para incorporar archivos HTML en su aplicación, que puede ser mostrada en el navegador web.

      Flask proporciona una función de ayuda render_template() que permite el uso del motor de plantillas Jinja. Esto hará que gestionar HTML sea mucho más fácil escribiendo su código HTML en archivos .html, además de utilizar la lógica en su código HTML. Usará estos archivos HTML, (plantillas), para crear todas las páginas de su aplicación, de igual forma que la página principal donde mostrará las entradas actuales del blog, la página de la entrada del blog, la página donde el usuario puede añadir una nueva entrada, etcétera.

      En este paso, creará su aplicación Flask principal en un nuevo archivo.

      Primero, en su directorio flask_blog, utilice nano o su editor de texto favorito para crear y editar su archivo app.py. Éste albergará todo el código que usará para crear la aplicación de blog:

      En este nuevo archivo, importará el objeto Flask para crear una instancia de aplicación Flask, como hizo antes. También importará la función de ayuda render_template() que le permite representar archivos de plantilla HTML que existen en la carpeta templates que está a punto de crear. El archivo tendrá una función de vista única que será responsable de gestionar las solicitudes a la ruta principal /. Añada el siguiente contenido:

      flask_blog/app.py

      from flask import Flask, render_template
      
      app = Flask(__name__)
      
      @app.route('/')
      def index():
          return render_template('index.html')
      

      La función de vista index() devuelve el resultado de invocar render_template() con index.html como argumento; esto indica a render_template() que busque un archivo llamado index.html en la carpeta templates. La carpeta y el archivo no existen aún, y recibirá un error si ejecutase la aplicación en este momento. De todas formas la va a ejecutar, para que se familiarice con esta excepción que se encuentra comúnmente. Luego lo resolverá creando la carpeta y archivo necesarios.

      Guarde el archivo y ciérrelo.

      Detenga el servidor de desarrollo en su otro terminal que ejecuta la aplicación hello con CTRL+C.

      Antes de ejecutar la aplicación, asegúrese de especificar correctamente el valor para la variable de entorno FLASK_APP, ya que ahora no está usando la aplicación hello.

      • export FLASK_APP=app
      • flask run

      Al abrir la URL http://127.0.0.1:5000 en su navegador, se mostrará la página del depurador informándole de que no se ha encontrado la plantilla index.html. La línea de código principal en el código responsable de este error se resaltará. En este caso, es la línea return render_template('index.html').

      Si hace clic en esta línea, el depurador revelará más código de forma que tenga más contexto para ayudarle a resolver el problema.

      El Depurador de Flask

      Para solucionar este error, cree un directorio llamado templates dentro de su directorio flask_blog. Dentro de él, abra un archivo llamado index.html para su edición:

      • mkdir templates
      • nano templates/index.html

      A continuación, añada el siguiente código HTML dentro de index.html:

      flask_blog/templates/index.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>FlaskBlog</title>
      </head>
      <body>
         <h1>Welcome to FlaskBlog</h1>
      </body>
      </html>
      

      Guarde el archivo y utilice su navegador para navegar a http://127.0.0.1:500 de nuevo, o actualice la página. Esta vez, el navegador debería mostrar el texto Welcome to FlaskBlog en una etiqueta <h1>.

      Además de la carpeta templates, las aplicaciones web de Flask también tienen normalmente una carpeta estática para albergar archivos, como los archivos CSS, archivos JavaScript, e imágenes que utiliza la aplicación.

      Puede crear un archivo de hoja de estilo style.css para añadir CSS a su aplicación. Primero, cree un directorio llamado static dentro de su directorio flask_blog principal:

      Luego cree otro directorio llamado css dentro del directorio static para albergar los archivos .css. Esto normalmente se hace para organizar archivos estáticos en carpetas dedicadas y, en consecuencia, los archivos JavaScript dentro de un directorio llamado js, las imágenes se ponen en un directorio llamado images (o img), etcétera. El siguiente comando creará el directorio css dentro del directorio static:

      Luego abra un archivo style.css dentro del directorio css para su edición:

      • nano static/css/style.css

      Añada la siguiente regla CSS a su archivo style.css:

      flask_blog/static/css/style.css

      h1 {
          border: 2px #eee solid;
          color: brown;
          text-align: center;
          padding: 10px;
      }
      

      El código CSS añadirá un borde, cambiará el color a marrón, centrará el texto y añadirá un pequeño relleno a las etiquetas <h1>.

      Guarde y cierre el archivo.

      A continuación, abra el archivo de plantilla index.html para su edición:

      • nano templates/index.html

      Añadirá un enlace al archivo style.css dentro de la sección <head> del archivo de plantilla index.html:

      flask_blog/templates/index.html

      . . .
      <head>
          <meta charset="UTF-8">
          <link rel="stylesheet" href="https://www.digitalocean.com/{{ url_for("static', filename="css/style.css") }}">
          <title>FlaskBlog</title>
      </head>
      . . .
      

      Aquí utiliza la función de ayuda url_for() para generar la ubicación apropiada del archivo. El primer argumento especifica que está vinculando a un archivo estático, y el segundo argumento es la ruta del archivo dentro del directorio estático.

      Guarde y cierre el archivo.

      Tras actualizar la página de índice de su aplicación, observará que el texto Welcome to FlaskBlog es ahora marrón, está centrado y se encuadra dentro de un borde.

      Puede utilizar el lenguaje CSS para dar estilo a la aplicación y hacer que sea más atractiva usando su propio diseño. Sin embargo, si no es un diseñador web, o no está familiarizado con CSS, puede usar el kit de herramientas Bootstrap, que ofrece componentes fáciles de usar para dar estilo a su aplicación. En este proyecto, usaremos Bootstrap.

      Quizá haya imaginado que crear otra plantilla HTML significará repetir la mayoría del código HTML que ya escribió en la plantilla index.html. Puede evitar la repetición innecesaria de código con la ayuda de un archivo de plantilla base, desde el cual heredarán todos sus archivos HTML. Consulte Herencia de plantillas en Jinja para obtener más información.

      Para crear una plantilla base, primero cree un archivo llamado base.html dentro de su directorio templates:

      Escriba el siguiente código en su plantilla base.html:

      flask_blog/templates/base.html

      <!doctype html>
      <html lang="en">
        <head>
          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      
          <title>{% block title %} {% endblock %}</title>
        </head>
        <body>
          <nav class="navbar navbar-expand-md navbar-light bg-light">
              <a class="navbar-brand" href="https://www.digitalocean.com/{{ url_for('index')}}">FlaskBlog</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                  <li class="nav-item active">
                      <a class="nav-link" href="https://www.digitalocean.com/#">About</a>
                  </li>
                  </ul>
              </div>
          </nav>
          <div class="container">
              {% block content %} {% endblock %}
          </div>
      
          <!-- Optional JavaScript -->
          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        </body>
      </html>
      

      Guarde y cierre el archivo una vez que haya terminado de editarlo.

      La mayor parte del código en el bloque anterior es HTML estándar y el código necesario para Bootstrap. Las etiquetas <meta> proporcionan información para el navegador web, la etiqueta <link> enlaza los archivos CSS de Boostrap y las etiquetas <script> son enlaces a código JavaScript que permite algunas funciones adicionales de Boostrap; consulte la documentación de Boostrap para obtener más información.

      Sin embargo, las siguientes partes resaltadas son específicas para el motor de plantillas Jinja:

      • {% block title %} {% endblock %}: un bloque que sirve como marcador de posición para un título. Más adelante lo usará en otras plantillas para dar un título personalizado a cada página de su aplicación sin tener que reescribir toda la sección <head> cada vez.
      • {{ url_for('index')}: una invocación de función que devolverá la URL para la función de vista index(). Esto es diferente a la invocación anterior url_for() que utilizó para vincular a un archivo CSS estático, porque solo requiere un argumento, que es el nombre de la función de vista, y enlaza a la ruta asociada con la función en vez de con un archivo estático.
      • {% block content %} {% endblock %}: otro bloque que se sustituirá por contenido dependiendo de la plantilla secundaria (plantillas que heredan de base.html) que lo anulará.

      Ahora que tiene una plantilla base, puede aprovecharla usando la herencia. Abra el archivo index.html:

      • nano templates/index.html

      Sustituya su contenido con lo siguiente:

      flask_blog/templates/index.html

      {% extends 'base.html' %}
      
      {% block content %}
          <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
      {% endblock %}
      

      En esta nueva versión de la plantilla index.html, utiliza la etiqueta {% extends %} para que herede de la plantilla base.html. Luego la extiende sustituyendo el bloque content en la plantilla base con lo que está dentro del bloque content en el bloque de código anterior.

      Este bloque content contiene una etiqueta <h1> con el texto Welcome to FlaskBlog dentro de un bloque title, que a su vez sustituye el bloque title original en la plantilla base.html con el texto Welcome to FlaskBlog. De esta forma, puede evitar repetir el mismo texto dos veces, ya que funciona como título para la página y como encabezado que aparece bajo la barra de navegación heredada de la plantilla base.

      La herencia de plantillas también le ofrece la capacidad de reutilizar el código HTML que tiene en otras plantillas (base.html en este caso), sin tener que repetirlo cada vez que sea necesario.

      Guarde y cierre el archivo y actualice la página de índice en su navegador. Verá su página con una barra de navegación y un título con estilo.

      Página de índice con Bootstrap

      Utilizó plantillas HTML y archivos estáticos en Flask. También ha utilizado Bootstrap para comenzar a refinar el aspecto de su página y una plantilla base para evitar la repetición del código. En el siguiente paso, configurará una base de datos que almacenará los datos de su aplicación.

      Paso 4: Configurar la base de datos

      En este paso, configurará una base de datos para almacenar los datos, es decir, las entradas del blog para su aplicación. También completará la base de datos con algunas entradas de ejemplo.

      Usará un archivo de base de datos SQLite para guardar sus datos porque el módulo sqlite3, que utilizaremos para interactuar con la base de datos, está disponible en la biblioteca Python. Para obtener más información sobre SQLite, consulte este tutorial.

      Primero, ya que los datos de SQLite se guardan en tablas y columnas, y ya que sus datos principalmente son entradas de blog, primero deberá crear una tabla llamada posts con las columnas necesarias. Creará un archivo .sql que contiene comandos SQL para crear la tabla posts con algunas columnas. A continuación usará este archivo para crear la base de datos.

      Abra un archivo llamado schema.sql dentro de su directorio flask_blog:

      Escriba los siguientes comandos SQL dentro de este archivo:

      flask_blog/schema.sql

      DROP TABLE IF EXISTS posts;
      
      CREATE TABLE posts (
          id INTEGER PRIMARY KEY AUTOINCREMENT,
          created TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
          title TEXT NOT NULL,
          content TEXT NOT NULL
      );
      

      Guarde y cierre el archivo.

      El primer comando SQL es DROP TABLE IF EXISTS posts;, esto elimina cualquier tabla que exista llamada posts para que no tenga un comportamiento confuso. Observe que esto eliminará todo el contenido que tenga en la base de datos siempre que utilice estos comandos SQL, de forma que asegúrese de no escribir ningún contenido importante en la aplicación web hasta que haya terminado con este tutorial y experimente con el resultado final. A continuación, CREATE TABLE posts se utiliza para crear la tabla posts con las siguientes columnas:

      • id: es un entero que representa una clave primaria. La base de datos asignará un valor único para cada entrada (es decir, una entrada blog).
      • created: la hora en que se creó la entrada de blog. NOT NULL significa que esta columna no debería estar vacía y el valor DEFAULT es el valor CURRENT_TIMESTAMP, que es la hora en la cual la entrada se añadió a la base de datos. Igual que el id, no necesita especificar un valor para esta columna, y que se completará automáticamente.
      • title: el título de la entrada.
      • content: el contenido de la entrada.

      Ahora que tiene un esquema SQL en el archivo schema.sql, lo usará para crear la base de datos usando un archivo Python que generará un archivo base de datos .db de SQLite. Abra un archivo llamado init_db.py dentro del directorio flask_blog usando su editor preferido:

      Y luego añada el siguiente código.

      flask_blog/init_db.py

      import sqlite3
      
      connection = sqlite3.connect('database.db')
      
      
      with open('schema.sql') as f:
          connection.executescript(f.read())
      
      cur = connection.cursor()
      
      cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
                  ('First Post', 'Content for the first post')
                  )
      
      cur.execute("INSERT INTO posts (title, content) VALUES (?, ?)",
                  ('Second Post', 'Content for the second post')
                  )
      
      connection.commit()
      connection.close()
      

      Primero importe el módulo sqlite3 y luego abra una conexión con el archivo de la base de datos llamada database.db, que se creará una vez que ejecute el archivo Python. Luego utilice la función open() para abrir el archivo schema.sql. A continuación, ejecute su contenido utilizando el método executescript() que ejecuta múltiples instrucciones SQL a la vez, lo que creará la tabla posts. Crea un objeto Cursor que le permite usar su método execute() para ejecutar dos instrucciones SQL INSERT para permitir dos entradas de blog en su tabla posts. Finalmente, confirma los cambios y cierra la conexión.

      Guarde y cierre el archivo y a continuación ejecútelo en el terminal usando el comando python:

      Una vez que el archivo termine su ejecución, aparecerá un nuevo archivo llamado database.db en su directorio flask_blog. Esto significa que la configurado correctamente su base de datos.

      En el siguiente paso, recuperará las entradas que insertó en su base de datos y las mostrará en la página de inicio de su aplicación.

      Paso 5: Mostrar todas las entradas

      Ahora que ha configurado su base de datos, puede modificar la función de vista index() para mostrar todas las entradas que tiene en su base de datos.

      Abra el archivo app.py para realizar las siguientes modificaciones:

      Para su primera modificación, importará el módulo sqlite3 en la parte superior del archivo:

      flask_blog/app.py

      import sqlite3
      from flask import Flask, render_template
      
      . . .
      

      A continuación, creará una función que cree una conexión de base de datos y la devolverá. Añádala directamente tras las importaciones:

      flask_blog/app.py

      . . .
      from flask import Flask, render_template
      
      def get_db_connection():
          conn = sqlite3.connect('database.db')
          conn.row_factory = sqlite3.Row
          return conn
      
      . . .
      

      Esta función get_db_connection() abra una conexión con el archivo de base de datos database.db, y luego establece el atributo row_factory a sqlite3. Row para poder tener acceso basado en nombre a las columnas. Esto significa que la conexión con la base de datos devolverá filas que se comportan como diccionarios Python regulares. Por último, la función devuelve el objeto de conexión conn que usará para acceder a la base de datos.

      Tras definir la función get_db_connection, modifique la función index() para que tenga el siguiente aspecto:

      flask_blog/app.py

      . . .
      
      @app.route('/')
      def index():
          conn = get_db_connection()
          posts = conn.execute('SELECT * FROM posts').fetchall()
          conn.close()
          return render_template('index.html"https://www.digitalocean.com/, posts=posts)
      

      En esta nueva versión de la función index(), primero abre una conexión de base de datos usando la función get_db_connection() que definió antes. A continuación, ejecuta una consulta SQL para seleccionar todas las entradas de la tabla post. Implementa el método fetchall() para recuperar todas las filas del resultado de la consulta. Esto devolverá una lista de las entradas que insertó en la base de datos en el paso anterior.

      Cierra la conexión con la base de datos usando el método close() y devuelve el resultado de representar la plantilla index.html. También pasará el objeto posts como argumento, que contiene los resultados que obtuvo de la base de datos; esto le permitirá acceder a las entradas del blog en la plantilla index.html.

      Con estas modificaciones implementadas, guarde y cierre el archivo app.py.

      Ahora que ha pasado las entradas que recuperó de la base de datos a la plantilla index.html, puede usar un bucle for para mostrar cada entrada en su página de índice.

      Abra el archivo index.html:

      • nano templates/index.html

      A continuación, modifíquelo como sigue:

      flask_blog/templates/index.html

      {% extends 'base.html' %}
      
      {% block content %}
          <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
          {% for post in posts %}
              <a href="https://www.digitalocean.com/#">
                  <h2>{{ post['title'] }}</h2>
              </a>
              <span class="badge badge-primary">{{ post['created'] }}</span>
              <hr>
          {% endfor %}
      {% endblock %}
      

      Aquí, la sintaxis {% for post in posts %} es un bucle for Jinja, que es similar a un bucle for Python, excepto que tiene que ser cerrado posteriormente con la sintaxis {% endfor %}. Utiliza esta sintaxis para realizar un bucle sobre cada elemento en la lista posts que se pasó por la función index() en la línea return render_template('index.html', posts=posts). Dentro de este bucle for, muestra el título de la entrada en un encabezado <h2> dentro de una etiqueta <a> (más tarde utilizará esta etiqueta para vincular con cada entrada individualmente).

      Muestra el título utilizando un delimitador variable literal ({{ ... }}). Recuerde que post será un objeto similar a un diccionario, para que pueda acceder al título de la entrada con post['title']​​​. También muestra la fecha de creación de la entrada usando el mismo método.

      Una vez que haya terminado de editar el archivo, guarde y ciérrelo. Luego navegue a la página de índice en su navegador. Verá las dos entradas que añadió a la base de datos en su página.

      Página de índice con entradas mostradas

      Ahora que ha modificado la función de vista index() para mostrar todas las entradas que tiene en la base de datos en la página de inicio de su aplicación, pasará a mostrar cada entrada en una única página y permitirá que los usuarios vinculen a cada entrada individual.

      Paso 6: Mostrar una entrada única

      En este paso, creará una nueva ruta Flask con una función de vista y una nueva plantilla HTML para mostrar una entrada de blog individual por su ID.

      Al final de este paso, la URL http://127.0.0.1:5000/1 será una página que muestra la primera entrada (porque tiene el ID 1). La URL http://127.0.0.1:5000/ID mostrará la entrada con el número ID asociado si existe.

      Abra app.py para su edición:

      Ya que necesitará obtener una entrada de blog por su ID de la base de datos en múltiples ubicación más adelante en este proyecto, creará una función independiente llamada get_post(). Puede invocarla pasándole un ID y recibiendo la entrada de blog asociada con el ID proporcionado, o hacer que Flask responsa con un mensaje 404 Not Found si la entrada de blog no existe.

      Para responder con una página 404, deberá importar la función abort() desde la biblioteca Wekzeug, que se instaló junto con Flask en la parte superior del archivo:

      flask_blog/app.py

      import sqlite3
      from flask import Flask, render_template
      from werkzeug.exceptions import abort
      
      . . .
      

      A continuación, añada la función get_post() justo tras la función get_db_connection() que creó en el paso anterior:

      flask_blog/app.py

      . . .
      
      def get_db_connection():
          conn = sqlite3.connect('database.db')
          conn.row_factory = sqlite3.Row
          return conn
      
      
      def get_post(post_id):
          conn = get_db_connection()
          post = conn.execute('SELECT * FROM posts WHERE id = ?',
                              (post_id,)).fetchone()
          conn.close()
          if post is None:
              abort(404)
          return post
      
      . . .
      

      Esta nueva función tiene el argumento post_id que determina qué entrada de blog recuperar.

      Dentro de la función, utiliza la función get_db_connection() para abrir una conexión de base de datos y ejecutar una consulta SQL para obtener la entada de blog asociada con el valor post_id dado. Añade el método fetchone() para obtener el resultado y almacenarlo en la variable post. Luego, cierre la conexión. Si la variable post tiene el valor None, lo que significa que no se ha encontrado ningún resultado en la base de datos, utiliza la función abort() que importó anteriormente para responder con un código de error 404 y la función terminará la ejecución. Si, sin embargo, se encuentra una entrada, devuelve el valor de la variable post.

      A continuación, añada la siguiente función de vista al final del archivo app.py:

      flask_blog/app.py

      . . .
      
      @app.route('/<int:post_id>')
      def post(post_id):
          post = get_post(post_id)
          return render_template('post.html', post=post)
      

      En esta nueva función de vista, añade una regla de variable <int:post_id> para especificar que la parte tras la barra (/) es un entero positivo (marcado con el conversor int) que necesita para acceder en su función de vista. Flask reconoce esto y pasa su valor al argumento de palabra clave post_id de su función de vista post(). A continuación, utiliza la función get_post() para obtener la entrada de blog asociada con el ID especificado y almacenar el resultado en la variable post, que pasa por una plantilla post.html que pronto creará.

      Guarde el archivo app.py y abra un nuevo archivo de plantilla post.html para su edición:

      Escriba el siguiente código en este nuevo archivo post.html. Esto será similar al archivo index.html, excepto que solo mostrará una única entrada además de mostrar el contenido de la entrada:

      flask_blog/templates/post.html

      {% extends 'base.html' %}
      
      {% block content %}
          <h2>{% block title %} {{ post['title'] }} {% endblock %}</h2>
          <span class="badge badge-primary">{{ post['created'] }}</span>
          <p>{{ post['content'] }}</p>
      {% endblock %}
      

      Añade el bloque title que definió en la plantilla base.html para hacer que el título de la página refleje el título de la entrada que se muestra en un encabezado <h2> al mismo tiempo.

      Guarde y cierre el archivo.

      Ahora puede navegar a la siguiente URL para ver las dos entradas que tiene en su base de datos, junto con una página que indica al usuario que no se encontró la entrada del blog solicitada (ya que no hay una entrada con el número de ID 3 hasta ahora):

      http://127.0.0.1:5000/1
      http://127.0.0.1:5000/2
      http://127.0.0.1:5000/3
      

      Volviendo a la página de índice, creará cada enlace al título de la entrada a su página respectiva. Hará esto usando la función url_for(). Primero, abra la plantilla index.html para su edición:

      • nano templates/index.html

      A continuación cambie el valor del atributo href de # a {{ url_for('post', post_id=post['id']) }} de forma que el bucle for tendrá el siguiente aspecto:

      flask_blog/templates/index.html

      {% for post in posts %}
          <a href="https://www.digitalocean.com/{{ url_for('post', post_id=post['id']) }}">
              <h2>{{ post['title'] }}</h2>
          </a>
          <span class="badge badge-primary">{{ post['created'] }}</span>
          <hr>
      {% endfor %}
      

      Aquí, pasa 'post' a la función url_for() como primer argumento. Este es el nombre de la función de vista post() y ya que acepta un argumento post_id, le da el valor post['id']. La función url_for() devolverá la URL adecuada para cada entrada según su ID.

      Guarde y cierre el archivo.

      Los enlaces en la página de índice ahora funcionarán como se espera. Con esto, ha terminado de crear la parte de la aplicación responsable de mostrar las entradas de blog en su base de datos. A continuación, añadirá la capacidad de crear, editar y eliminar entradas de blog en su aplicación.

      Paso 7: Modificar entradas

      Ahora que ha terminado de mostrar las entradas de blog que están presentes en la base de datos en la aplicación web, deberá permitir a los usuarios de su aplicación escribir nuevas entradas de blog y añadirlas a la base de datos, editar las existentes y eliminar las entradas de blog innecesarias.

      Crear una nueva entrada

      Hasta este momento, tiene una aplicación que muestra las entradas en su base de datos pero no ofrece ninguna forma de añadir una nueva entrada a menos que conecte directamente con la base de datos SQLite y añada una manualmente. En esta sección, creará una página sobre la cual podrá crear una entrada proporcionando su título y contenido.

      Abra el archivo app.py para su edición:

      Primero, importará lo siguiente desde el marco Flask:

      • El objeto global request para acceder a los datos de solicitud entrantes que se enviarán a través de un formato HTML.
      • La función url_for() para generar URLs.
      • La función flash() para mostrar un mensaje cuando se procesa una solicitud.
      • La función redirect() para redirigir al cliente a una ubicación diferente.

      Añada las importaciones a su archivo de la siguiente forma:

      flask_blog/app.py

      import sqlite3
      from flask import Flask, render_template, request, url_for, flash, redirect
      from werkzeug.exceptions import abort
      
      . . .
      

      La función flash() almacena los mensajes mostrados en la sesión del navegador del cliente, lo que requiere configurar una clave secreta. Esta clave secreta se utiliza para proteger las sesiones, lo que permite a Flask recordar la información de una solicitud a la otra, como pasar desde la nueva página de entrada a la página de índice. El usuario puede acceder a la información almacenada en la sesión, pero no puede modificarla a menos que tenga la clave secreta, de forma que nunca permita que nadie acceda a la clave secreta. Consulte la documentación de Flask para sesiones para obtener más información.

      Para establecer una_ clave_ secreta, añadirá una configuración SECRET_KEY a su aplicación a través del objeto app.config. Añádala directamente siguiendo la definición app antes de definir la función de vista index():

      flask_blog/app.py

      . . .
      app = Flask(__name__)
      app.config['SECRET_KEY'] = 'your secret key'
      
      
      @app.route('/')
      def index():
          conn = get_db_connection()
          posts = conn.execute('SELECT * FROM posts').fetchall()
          conn.close()
          return render_template('index.html', posts=posts)
      
      . . .
      

      Recuerde que la clave secreta debería ser una cadena aleatoria larga.

      Tras establecer una clave secreta, creará una función de vista que mostrará una plantilla que muestra un formulario que puede completar para crear una nueva entrada de blog. Añada esta nueva función en la parte inferior del archivo:

      flask_blog/app.py

      . . .
      
      @app.route('/create', methods=('GET', 'POST'))
      def create():
          return render_template('create.html')
      

      Esto crea una ruta /create que acepta las solicitudes GET y POST. Las solicitudes GET se aceptan por defecto. También acepta las solicitudes POST que se envía el navegador cuando se envían formularios. Pasará un tuple con los tipos de solicitudes aceptadas al argumento methods del decorador @app.route().

      Guarde y cierre el archivo.

      Para crear la plantilla, abra un archivo llamado create.html dentro de su carpeta templates:

      • nano templates/create.html

      Añada el siguiente código dentro de este nuevo archivo:

      flask_blog/templates/create.html

      {% extends 'base.html' %}
      
      {% block content %}
      <h1>{% block title %} Create a New Post {% endblock %}</h1>
      
      <form method="post">
          <div class="form-group">
              <label for="title">Title</label>
              <input type="text" name="title"
                     placeholder="Post title" class="form-control"
                     value="{{ request.form['title'] }}"></input>
          </div>
      
          <div class="form-group">
              <label for="content">Content</label>
              <textarea name="content" placeholder="Post content"
                        class="form-control">{{ request.form['content'] }}</textarea>
          </div>
          <div class="form-group">
              <button type="submit" class="btn btn-primary">Submit</button>
          </div>
      </form>
      {% endblock %}
      

      La mayor parte de este código es HTML estándar. Mostrará un cuadro de entrada para el título de la entrada, un área de texto para el contenido de la entrada y un botón para enviar el formulario.

      El valor de la entrada del título de la entrada es {{ request.form['title'] }},​​​ y el área de texto tiene el valor {{ request.form['content'] }}. Esto se hace para que los datos que introduce no se pierdan si algo sale mal. Por ejemplo, si escribe una entrada larga y olvida darle un título, se mostrará un mensaje que le informa de que el título es necesario. Esto sucederá sin perder la entrada que escribió ya que se almacenará en el objeto global request al que tiene acceso en sus plantillas.

      Ahora, con el servidor de desarrollo en ejecución, utilice su navegador para navegar a la ruta /create:

      http://127.0.0.1:5000/create
      

      Verá una página Create a New Post con un cuadro para un título y contenido:

      Crear una nueva página de entrada

      Este formulario envía una solicitud POST a su función de vista create(). Sin embargo, aún no hay ningún código para gestionar una solicitud POST en la función, de forma que no sucederá nada tras completar el formulario y enviarlo.

      Gestionará la solicitud POST entrante cuando se envía un formulario. Lo hará dentro de la función de vista create(). Puede gestionar por separado la solicitud POST comprobando el valor de request.method. Cuando su valor se establece a 'POST', significa que la solicitud es una solicitud POST. Luego extraerá los datos enviados, los validará y los insertará en su base de datos.

      Abra el archivo app.py para su edición:

      Modifique la función de vista create() para que tenga exactamente el siguiente aspecto:

      flask_blog/app.py

      . . .
      
      @app.route('/create', methods=('GET', 'POST'))
      def create():
          if request.method == 'POST':
              title = request.form['title']
              content = request.form['content']
      
              if not title:
                  flash('Title is required!')
              else:
                  conn = get_db_connection()
                  conn.execute('INSERT INTO posts (title, content) VALUES (?, ?)',
                               (title, content))
                  conn.commit()
                  conn.close()
                  return redirect(url_for('index'))
      
          return render_template('create.html')
      

      En la instrucción if asegura que el código que le sigue solo se ejecuta cuando la solicitud es una solicitud POST a través de la comparativa request.method == 'POST'.

      A continuación, extrae el título enviado y el contenido desde el objeto request.form que le proporciona acceso a los datos del formulario en la solicitud. Si no se proporciona el título, la condición if not title se cumplirá, mostrando un mensaje al usuario informándole de que el título es obligatorio. Si, por otro lado, se proporciona el título, abrirá una conexión con la función get_db_connection() e insertará el título y el contenido que recibió en la tabla posts.

      Luego confirma los cambios en la base de datos y cierra la conexión. Tras añadir la entrada de blog a la base de datos, redirige al cliente a la página de índice usando la función redirect() pasándole la URL generada por la función url_for() con el valor 'index' como argumento.

      Guarde y cierre el archivo.

      Ahora, navegue a la ruta /create usando su navegador web:

      http://127.0.0.1:5000/create
      

      Complete el formulario con un título y algo de contenido. Una vez que envíe el formulario, verá la nueva entrada listada en la página de índice.

      Por último, mostrará los mensajes generados y añadirá un enlace a la barra de navegación en la plantilla base.html para tener un acceso fácil a esta nueva página. Abra el archivo de plantilla:

      Edite el archivo añadiendo una nueva etiqueta <li> tras el enlace About dentro de la etiqueta <nav>. A continuación, añada un nuevo bucle for directamente sobre el bloque content para mostrar los mensajes generados bajo la barra de navegación. Estos mensajes están disponibles en la función especial get_flashed_messages() que Flask ofrece:

      flask_blog/templates/base.html

      <nav class="navbar navbar-expand-md navbar-light bg-light">
          <a class="navbar-brand" href="https://www.digitalocean.com/{{ url_for("index')}}">FlaskBlog</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="https://www.digitalocean.com/#">About</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="https://www.digitalocean.com/{{url_for("create')}}">New Post</a>
              </li>
              </ul>
          </div>
      </nav>
      <div class="container">
          {% for message in get_flashed_messages() %}
              <div class="alert alert-danger">{{ message }}</div>
          {% endfor %}
          {% block content %} {% endblock %}
      </div>
      

      Guarde y cierre el archivo. La barra de navegación ahora tendrá un elemento New Post que enlaza a la ruta /create.

      Editar una entrada

      Para que un blog esté actualizado, deberá poder editar sus entradas existentes. Esta sección le guiará en la creación de una nueva página en su aplicación para simplificar el proceso de editar una entrada.

      Primero, añadirá una nueva ruta al archivo app.py. Su función de vista recibirá el ID de la entrada que debe ser editada, la URL estará en el formato /post_id/edit con la variable post_id siendo el ID de la entrada. Abra el archivo app.py para su edición:

      A continuación, añada la siguiente función de vista edit() al final del archivo. Editar una entrada existente es similar a crear una nueva, de forma que esta función de vista será similar a la función de vista create():

      flask_blog/app.py

      . . .
      
      @app.route('/<int:id>/edit', methods=('GET', 'POST'))
      def edit(id):
          post = get_post(id)
      
          if request.method == 'POST':
              title = request.form['title']
              content = request.form['content']
      
              if not title:
                  flash('Title is required!')
              else:
                  conn = get_db_connection()
                  conn.execute('UPDATE posts SET title = ?, content = ?'
                               ' WHERE id = ?',
                               (title, content, id))
                  conn.commit()
                  conn.close()
                  return redirect(url_for('index'))
      
          return render_template('edit.html', post=post)
      

      La entrada que edita viene determinada por la URL y Flask pasará el número de ID a la función edit() a través del argumento id. Añade este valor a la función get_post() para recuperar la entrada asociada con el ID proporcionado desde la base de datos. Los nuevos datos vendrán en una solicitud POST, que se gestiona dentro de la condición if request.method == 'POST'.

      Igual que cuando creó una nueva entrada, primero extrae los datos del objeto request.form, luego muestra un mensaje si el título tiene un valor vacío, de lo contrario, abre una conexión con la base de datos. Luego actualiza la tabla posts estableciendo un nuevo título y nuevo contenido donde el ID de la entrada en la base de datos es igual al ID que estaba en la URL.

      En el caso de una solicitud GET, representa una plantilla edit.html pasando la variable post que alberga el valor devuelto de la función get_post(). Usará esto para mostrar el título existente y el contenido en la página de edición.

      Guarde y cierre el archivo, y cree una nueva plantilla edit.html:

      Escriba el siguiente código dentro de este nuevo archivo:

      flask_blog/templates/edit.html

      {% extends 'base.html' %}
      
      {% block content %}
      <h1>{% block title %} Edit "{{ post['title'] }}" {% endblock %}</h1>
      
      <form method="post">
          <div class="form-group">
              <label for="title">Title</label>
              <input type="text" name="title" placeholder="Post title"
                     class="form-control"
                     value="{{ request.form['title'] or post['title'] }}">
              </input>
          </div>
      
          <div class="form-group">
              <label for="content">Content</label>
              <textarea name="content" placeholder="Post content"
                        class="form-control">{{ request.form['content'] or post['content'] }}</textarea>
          </div>
          <div class="form-group">
              <button type="submit" class="btn btn-primary">Submit</button>
          </div>
      </form>
      <hr>
      {% endblock %}
      

      Guarde y cierre el archivo.

      Este código sigue el mismo patrón excepto por la sintaxis {{ request.form['title'] or post['title'] }} y {{ request.form['content'] or post['content'] }}. Esto muestra los datos guardados en la solicitud si existe, de lo contrario, muestra los datos de la variable post que se pasó a la plantilla que contiene los datos actuales de la base de datos.

      Ahora, navegue a la siguiente URL para editar la primera entrada:

      http://127.0.0.1:5000/1/edit
      

      Verá una página Edit “First Post”.

      Editar la página de una entrada

      Edite la entrada y envíe el formulario, luego asegúrese de que la entrada se ha actualizado.

      Ahora necesita añadir un enlace que apunte a la página de edición para cada entrada en la página de índice. Abra el archivo de plantilla index.html:

      • nano templates/index.html

      Edite el archivo para que tenga exactamente el siguiente aspecto:

      flask_blog/templates/index.html

      {% extends 'base.html' %}
      
      {% block content %}
          <h1>{% block title %} Welcome to FlaskBlog {% endblock %}</h1>
          {% for post in posts %}
              <a href="https://www.digitalocean.com/{{ url_for("post', post_id=post['id']) }}">
                  <h2>{{ post['title'] }}</h2>
              </a>
              <span class="badge badge-primary">{{ post['created'] }}</span>
              <a href="https://www.digitalocean.com/{{ url_for("edit', id=post['id']) }}">
                  <span class="badge badge-warning">Edit</span>
              </a>
              <hr>
          {% endfor %}
      {% endblock %}
      

      Guarde y cierre el archivo.

      Aquí añade una etiqueta <a> para enlazar a la función de vista edit(), pasando el valor post['id'] al enlace para editar la página de cada entrada con el enlace Edit.

      Eliminar una entrada

      A veces, no es necesario que una entrada siga estando disponible públicamente, y por eso la funcionalidad de eliminar una entrada es crucial. En este paso, añadirá la funcionalidad de eliminación a su aplicación.

      Primero, añadirá una nueva ruta /ID/delete que acepta solicitudes POST, de forma similar a la función de vista edit(). Su nueva función de vista delete() recibirá el ID de la entrada que será eliminada de la URL. Abra el archivo app.py:

      Añada la siguiente función de vista en la parte inferior del archivo:

      flask_blog/app.py

      # ....
      
      @app.route('/<int:id>/delete', methods=('POST',))
      def delete(id):
          post = get_post(id)
          conn = get_db_connection()
          conn.execute('DELETE FROM posts WHERE id = ?', (id,))
          conn.commit()
          conn.close()
          flash('"{}" was successfully deleted!'.format(post['title']))
          return redirect(url_for('index'))
      

      Esta función de vista solo acepta solicitudes POST. Esto significa que navegar a la ruta /ID/delete en su navegador devolverá un error porque los navegadores web van de forma predeterminada a las solicitudes GET.

      Sin embargo, puede acceder a esta ruta mediante un formulario que envía una solicitud POST pasando el ID de la entrada que desea eliminar. La función recibirá el valor de ID y lo usará para obtener la entrada de la base de datos con la función get_post().

      A continuación, abrirá una conexión de base de datos y ejecutará un comando SQL DELETE FROM para eliminar la entrada. Confirma el cambio en la base de datos y cierra la conexión mientras muestra un mensaje para informar al usuario de que la entrada se eliminó correctamente y redirigirlo a la página de índice.

      Observe que no reproduce un archivo de plantilla. Esto es porque añadirá un botón Delete a la página de edición.

      Abra el archivo de plantilla edit.html:

      Luego, añada la siguiente etiqueta <form> tras la etiqueta <hr> y directamente antes de la línea {% endblock %}:

      flask_blog/templates/edit.html

      <hr>
      
      <form action="https://www.digitalocean.com/{{ url_for("delete', id=post['id']) }}" method="POST">
          <input type="submit" value="Delete Post"
                  class="btn btn-danger btn-sm"
                  onclick="return confirm('Are you sure you want to delete this post?')">
      </form>
      
      {% endblock %}
      

      Utiliza el método confirm() para mostrar un mensaje de confirmación antes de enviar la solicitud.

      Ahora, navegue de nuevo a la página de edición de una entrada de blog e intente eliminarla:

      http://127.0.0.1:5000/1/edit
      

      Al final de este paso, el código fuente de su proyecto tendrá el aspecto del código en esta página.

      Con esto, los usuarios de su aplicación pueden escribir nuevas entradas de blog y añadirlas a la base de datos, editar entradas y eliminar las entradas existentes.

      Conclusión

      Este tutorial ha introducido los conceptos esenciales del marco Flask Python. Ha aprendido a crear una pequeña aplicación web, ejecutarla en un servidor de desarrollo y a permitir al usuario proporcionar datos personalizados a través de parámetros URL y formularios web. También utilizó el motor de plantillas Jinja para reutilizar los archivos HTMP y usar lógica en ellos. Al final de este tutorial, tendrá un blog web completamente funcional que interactúa con una base de datos SQLite para crear, mostrar, editar y eliminar entradas de blog usando el lenguaje Python y las consultas SQL.

      Puede seguir desarrollando esta aplicación añadiendo autenticación del usuario de forma que solo los usuarios registrados puedan crear o modificar entradas de blog. También puede añadir comentarios y etiquetas para cada entrada de blog, y añadir subidas de archivos para dar a los usuarios la capacidad de incluir imágenes en la entrada del blog. Consulte la documentación de Flask para obtener más información.

      Flask cuenta con muchas extensiones Flask creadas por la comunidad. A continuación verá una lista de extensiones que quizá quiera considerar usar para que su proceso de desarrollo sea más fácil:

      • Flask-Login: gestiona la sesión del usuario y el inicio y cierre de sesión, además de recordar a los usuarios con sesión iniciada.
      • Flask-SQLAlchemy: simplifica el uso de Flask con SQLAlchemy, un kit de herramientas Python SQL y un Asignador relacional de objetos para interactuar con bases de datos SQL.
      • Flask-Mail: ayuda con la tarea de enviar mensajes de correo electrónico en su aplicación Flask.



      Source link

      Cómo crear un nuevo usuario habilitado para sudo en Ubuntu 18.04 [Guía de inicio rápido]


      Introducción

      El comando sudo ofrece un mecanismo para conceder privilegios de administrador; normalmente solo está disponible para el usuario root para usuarios normales. En esta guía, aprenderá a crear un nuevo usuario con acceso sudo en Ubuntu 18.04 sin necesidad de modificar el archivo /etc/sudoers de su servidor. Si desea configurar sudo para un usuario existente, proceda directamente con el paso 3.

      Paso 1: Iniciar sesión en su servidor

      Realice SSH a su servidor como el usuario root:

      • ssh root@your_server_ip_address

      Paso 2: Añadir un nuevo usuario al sistema

      Utilice el comando adduser para añadir un nuevo usuario a su sistema:

      Asegúrese de sustituir sammy con el nombre del usuario que desea crear. Se le solicitará que cree y verifique una contraseña para el usuario:

      Output

      Enter new UNIX password: Retype new UNIX password: passwd: password updated successfully

      A continuación, se le solicitará que rellene la información sobre el nuevo usuario. Servirá aceptar los valores predeterminados y dejar toda esta información en blanco:

      Output

      Changing the user information for sammy Enter the new value, or press ENTER for the default Full Name []: Room Number []: Work Phone []: Home Phone []: Other []: Is the information correct? [Y/n]

      Paso 3: Añadir el usuario al grupo sudo

      Utilice el comando usermod para agregar el usuario al grupo sudo:

      De nuevo, asegúrese de sustituir sammy con el nombre de usuario que acaba de añadir. Por defecto, en Ubuntu, todos los miembros del grupo sudo tienen privilegios sudo completos.

      Paso 4: Probar el acceso sudo

      Para verificar que los nuevos permisos sudo funcionen, primero utilice el comando su para pasar a la nueva cuenta de usuario:

      Como nuevo usuario, verifique que pueda usar sudo anteponiendo sudo al comando que desee ejecutar con privilegios de superusuario:

      Por ejemplo, puede listar el contenido del directorio /root, al que normalmente solo puede acceder el root user:

      La primera vez que utilice sudo en una sesión, se le solicitará la contraseña de la cuenta de ese usuario. Introduzca la contraseña para continuar:

      Output:

      [sudo] password for sammy:

      Nota: Aquí no se solicita la contraseña root. Introduzca la contraseña del usuario sudo no la contraseña root.

      Si su usuario está en el grupo adecuado e introdujo la contraseña correctamente, el comando que emitió con sudo se ejecutará con privilegios root.

      Conclusión

      En este tutorial de inicio rápido hemos creado una cuenta de usuario y la hemos añadido al grupo sudo para permitir acceso sudo. Para obtener información detallada sobre cómo configurar un servidor Ubuntu 18.04, lea nuestro tutorial Configuración inicial del servidor con Ubuntu 18.04.



      Source link

      Cómo crear un acortador de URL con Django y GraphQL


      El autor seleccionó Girls Who Code para recibir una donación como parte del programa Write for DOnations.

      Introducción

      GraphQL es un estándar de API de código abierto creado por Facebook como alternativa a las API REST. En vez de las API REST, GraphQL utiliza un sistema escrito para definir su estructura de datos, donde toda la información enviada y recibida debe cumplir con un Schema predefinido. También expone un endpoint individual para todas las comunicaciones en vez de múltiples URLs para diferentes recursos y resuelve el problema de overfetching devolviendo solo los datos pedidos por el cliente, generando así respuestas más pequeñas y concisas.

      En este tutorial creará un backend para un servicio acortador de URL que toma cualquier URL y genera una versión más corta y legible. Además profundizaremos en los conceptos de GraphQL, como “Query” y “Mutation”, y en las herramientas como la interfaz GraphiQL. Es posible que ya haya usado dichos servicios antes, como bit.ly.

      Ya que GraphQL es un lenguaje con tecnología agnóstica, se implemente sobre varios lenguajes y marcos. Aquí, usará el lenguaje de programación Python de uso general, el marco web Django, y la biblioteca Graphene-Django como la implementación de GraphQL Python con integraciones específicas para Django.

      Requisitos previos

      Paso 1: Configurar el proyecto Django

      En este paso, instalará todas las herramientas necesarias para la aplicación y para configurar su proyecto de Django.

      Una vez que haya creado el directorio de su proyecto e iniciado su entorno virtual, como se indica en los requisitos previos, instale los paquetes necesarios usando pip, el administrador de paquetes de Phython. Este tutorial instalará la versión 2.1.7 de Django y la versión 2.2.0 de Graphene-Django o superior.

      • pip install "django==2.1.7" "graphene-django>==2.2.0"

      Ahora tendrá todas las herramientas necesarias para trabajar. A continuación, creará un proyecto Django usando el comando django-admin. Un proyecto es la plantilla predeterminada de Django, un conjunto de carpetas y archivos con todo lo necesario para iniciar el desarrollo de una aplicación web. En este caso, llamará a su proyecto shorty y lo creará dentro de su carpeta especificando el . al final:

      • django-admin startproject shorty .

      Tras crear su proyecto, ejecutará las migraciones de Django. Estos archivos contienen código de Python generado por Django y se encargan de cambiar la estructura de la aplicación según los modelos de Django. Los cambios pueden incluir la creación de una tabla, por ejemplo. Por defecto, Django cuenta con su propio conjuntos de migraciones responsables de los subsistemas como la Autenticación de Django, de forma que es necesario ejecutarlos con el siguiente comando:

      Este comando utiliza el intérprete de Python para invocar una secuencia de comandos llamada manage.py, responsable de gestionar los diferentes aspectos de su proyecto, como crear aplicaciones o ejecutar migraciones.

      Con esto, se mostrará un resultado similar al siguiente:

      Output

      Operations 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 sessions.0001_initial... OK

      Una vez que la base de datos de Django esté lista, inicie su servidor de desarrollo local:

      • python manage.py runserver

      Esto proporcionará lo siguiente:

      Output

      Performing system checks... System check identified no issues (0 silenced). March 18, 2020 - 15:46:15 Django version 2.1.7, using settings 'shorty.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

      Este comando eliminará la instrucción en su terminal e iniciará el servidor.

      Visite la página http://127.0.0.1:8000 en su navegador local. Verá esta página:

      Página frontal del servidor local de Django

      Para detener el servidor y volver a su terminal, pulse CTRL+C. Siempre que necesite acceder al navegador, asegúrese de que se esté ejecutando el comando anterior.

      A continuación, terminará este paso habilitando la biblioteca Django-Graphene en el proyecto. Django tiene el concepto de app, una aplicación web con una responsabilidad específica. Un proyecto se compone de una o múltiples aplicaciones. Por ahora, abra el archivo shorty/settings.py​​​ en el editor de texto que prefiera. En este tutorial usaremos vim:

      El archivo settings.py gestiona todos los ajustes de su proyecto. Dentro, busque la entrada INSTALLED_APPS y añada la línea 'graphene_django':

      shorty/shorty/settings.py

      ...
      INSTALLED_APPS = [
          'django.contrib.admin',
          'django.contrib.auth',
          'django.contrib.contenttypes',
          'django.contrib.sessions',
          'django.contrib.messages',
          'django.contrib.staticfiles',
          'graphene_django',
      ]
      ...
      

      Esta adición indica a Django que usará una aplicación llamada graphene_django, que instaló en el paso 1.

      Al final del archivo, añada la siguiente variable:

      shorty/shorty/settings.py

      ...
      GRAPHENE = {
          'SCHEMA': 'shorty.schema.schema',
      }
      

      Esta última variable apunta a su esquema principal. Lo creará más tarde. En GraphQL, un Schema contiene todos los tipos de objeto, como “Resource”, “Query” y “Mutation”. Piense en ello como la documentación que representa todos los datos y funcionalidades disponibles en su sistema.

      Tras realizar las modificaciones, guarde y cierre el archivo.

      Con esto, habrá configurado el proyecto Django. En el siguiente paso, creará una aplicación Django y sus Modelos.

      Paso 2: Configurar una aplicación y modelos Django

      Una plataforma Django está normalmente compuesta de un proyecto y muchas aplicaciones o apps. Una app describe un conjunto de funciones dentro de un proyecto, y, si está bien diseñada, puede reutilizarse en varios proyectos Django.

      En este paso, creará una app llamada shortener, responsable de la función real de acortamiento de URL. Para crear su esqueleto básico, escriba el siguiente comando en su terminal:

      • python manage.py startapp shortener

      Aquí usó los parámetros startapp app_name​​​, que indican a manage.py que cree una app llamada shortener.

      Para terminar de crear la app, abra el archivo shorty/settings.py​​​.

      Añada el nombre de la app a la misma entrada INSTALLED_APPS que modificó antes:

      shorty/shorty/settings.py

      ...
      INSTALLED_APPS = [
          'django.contrib.admin',
          'django.contrib.auth',
          'django.contrib.contenttypes',
          'django.contrib.sessions',
          'django.contrib.messages',
          'django.contrib.staticfiles',
          'graphene_django'
          'shortener',
      ]
      ...
      

      Guarde y cierre el archivo.

      Una vez que se añada su shortener a shorty/settings.py, podrá proceder a crear los modelos para su proyecto. Los modelos son una de las funciones clave de Django. Se usan para representar una base de datos “al estilo de Phyton”, lo cual le permite administrar, consultar y almacenar datos usando código Python.

      Antes de abrir el archivo models.py para realizar cambios, en este tutorial se le proporcionará una descripción general de los cambios que realizará.

      Su archivo modelo, shortener/models.py, contendrá el siguiente contenido una vez que haya sustituido el código existente:

      shorty/shortener/models.py

      from hashlib import md5
      
      from django.db import models
      

      Aquí importará los paquetes requeridos que su código necesita. Añadirá la línea from hashlib import md5 encima para importar la biblioteca estándar Python que se usará para crear un hash de la URl. La línea from django.db import models es un elemento auxiliar de Django para crear modelos.

      Advertencia: Este tutorial se refiere a hash como el resultado de una función que toma una entrada y siempre devuelve el mismo resultado. Este tutorial usará la función hash MD5 con fines demostrativos.

      Observe que MD5 tiene problemas de colisión y debería evitarse en producción.

      A continuación, añadirá un modelo llamado URL con los siguientes campos:

      • full_url: la URL a acortar.
      • url_hash: un hash corto que representa la URL completa.
      • clicks: cuántas veces se accedió a la URL corta.
      • created_at: la fecha y hora en la que se creó la URL.

      shorty/shortener/models.py

      ...
      
      class URL(models.Model):
          full_url = models.URLField(unique=True)
          url_hash = models.URLField(unique=True)
          clicks = models.IntegerField(default=0)
          created_at = models.DateTimeField(auto_now_add=True)
      

      Generará la url_hash aplicando el algoritmo hash MD5 al campo full_url y usando solo los 10 primeros caracteres obtenidos durante el método save() del modelo, que se ejecuta cada vez que Django guarda una entrada en la base de datos. Adicionalmente, los acortadores de URL normalmente realizan un seguimiento de la cantidad de clics que se hacen sobre un enlace. Conseguirá esto invocando el método clicked() cuando un usuario visita una URL.

      Las operaciones mencionadas se añadirán dentro de su modelo URL con este código:

      shorty/shortener/models.py

      ...
      
          def clicked(self):
              self.clicks += 1
              self.save()
      
          def save(self, *args, **kwargs):
              if not self.id:
                  self.url_hash = md5(self.full_url.encode()).hexdigest()[:10]
      
              return super().save(*args, **kwargs)
      

      Ahora que ha revisado el código, abra el archivo shortener/models.py:

      Sustituya el código con el siguiente contenido:

      shorty/shortener/models.py

      from hashlib import md5
      
      from django.db import models
      
      
      class URL(models.Model):
          full_url = models.URLField(unique=True)
          url_hash = models.URLField(unique=True)
          clicks = models.IntegerField(default=0)
          created_at = models.DateTimeField(auto_now_add=True)
      
          def clicked(self):
              self.clicks += 1
              self.save()
      
          def save(self, *args, **kwargs):
              if not self.id:
                  self.url_hash = md5(self.full_url.encode()).hexdigest()[:10]
      
              return super().save(*args, **kwargs)
      

      Asegúrese de guardar y cerrar el archivo.

      Para aplicar estos cambios en la base de datos, deberá crear las migraciones ejecutando el siguiente comando:

      • python manage.py makemigrations

      Esto generará el siguiente resultado:

      Output

      Migrations for 'shortener': shortener/migrations/0001_initial.py - Create model URL

      Luego ejecute las migraciones:

      Verá el siguiente resultado en su terminal:

      Output

      Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions, shortener Running migrations: Applying shortener.0001_initial... OK

      Ahora que ha configurado los modelos, en el siguiente paso creará el endpoint GraphQL y una “Query”.

      Paso 3: Crear consultas

      La arquitectura REST expone diferentes recursos en diferentes extremos, cada uno con una estructura de datos bien definida. Por ejemplo, puede recuperar una lista de usuarios en /api/users, esperando siempre los mismos campos. GraphQL, por otro lado, tiene un endpoint único para todas las interacciones, y utiliza Query para acceder a los datos. La principal diferencia, y la más valiosa, es que puede usar una “Query” para recuperar todos los usuarios en una única solicitud.

      Comience creando una “Query” para recuperar todas las URL. Necesitará algunos elementos:

      • Un tipo de URL, vinculado a su modelo definido previamente.
      • Una instrucción “Query” llamada urls.
      • Un método para resolver su “Query”, lo que implica obtener todas las URL de la base de datos y devolverlas al cliente.

      Cree un nuevo archivo llamado shortener/shema.py:

      Comience añadiendo las instrucciones import de Python:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      
      from .models import URL
      

      La primera línea importa la biblioteca principal graphene, que contiene los tipos GraphQL básicos, como List. DjangoObjectType es un elemento auxiliar para crear una definición de esquema desde cualquier modelo de Django y la tercera línea importa su modelo URL creado previamente.

      Tras eso, cree un nuevo tipo de GraphQL para el modelo URL añadiendo las siguientes líneas:

      shorty/shortener/schema.py

      ...
      class URLType(DjangoObjectType):
          class Meta:
              model = URL
      

      Finalmente, añada estas líneas para crear un tipo de “Query” para el modelo URL:

      shorty/shortener/schema.py

      ...
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType)
      
          def resolve_urls(self, info, **kwargs):
              return URL.objects.all()
      

      Este código crea una clase Query con un campo llamado urls, que es una lista del URLType definido previamente. Cuando se resuelve la “Query” a través del método resolve_urls, muestra las URL almacenadas en la base de datos.

      El archivo completo shorterner/schema.py se muestra aquí:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      
      from .models import URL
      
      
      class URLType(DjangoObjectType):
          class Meta:
              model = URL
      
      
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType)
      
          def resolve_urls(self, info, **kwargs):
              return URL.objects.all()
      

      Guarde y cierre el archivo.

      Todas las “Query” deben añadirse ahora al esquema principal. Piense en él como un depósito para todos sus recursos.

      Cree un nuevo archivo en la ruta shorty/schema.py​​​ y ábralo con su editor:

      Importe los siguientes paquetes de Python añadiendo las líneas que se muestran a continuación. La primera, como se ha mencionado, contiene los tipos GraphQL básicos. La segunda línea importa el archivo de esquema creado previamente.

      shorty/shorty/schema.py

      import graphene
      
      import shortener.schema
      

      A continuación, añada la clase Query principal. Contendrá, mediante herencia, todas las “Query” para las operaciones futuras creadas:

      shorty/shorty/schema.py

      ...
      class Query(shortener.schema.Query, graphene.ObjectType):
          pass
      

      Por último, cree la variable schema:

      shorty/shorty/schema.py

      ...
      schema = graphene.Schema(query=Query)
      

      El ajuste SCHEMA que definió en el paso 2 apunta a la variable schema que acaba de crear.

      El archivo completo shorty/schema.py se muestra aquí:

      shorty/shorty/schema.py

      import graphene
      
      import shortener.schema
      
      
      class Query(shortener.schema.Query, graphene.ObjectType):
          pass
      
      schema = graphene.Schema(query=Query)
      

      Guarde y cierre el archivo.

      A continuación, habilite el extremo GraphQL y la interfaz GraphiQL, una interfaz web gráfica que se usa para interactuar con el sistema GraphQL.

      Abra el archivo shorty/urls.py:

      Con fines de aprendizaje, elimine el contenido del archivo y guárdelo, para que pueda comenzar desde cero.

      Las primeras líneas que añadirá son las instrucciones de importación de Python:

      shorty/shorty/urls.py

      from django.urls import path
      from django.views.decorators.csrf import csrf_exempt
      
      from graphene_django.views import GraphQLView
      

      Django utiliza la función path para crear una URL accesible para la interfaz GraphiQL. A continuación, importe csrf_exempt, que permite a los clientes enviar datos al servidor. Puede encontrar una explicación completa en la Documentación de Graphene. En la última línea, importó el código real responsable de la interfaz a través de GraphQLView.

      A continuación, cree una variable llamada urlpatterns.

      shorty/shorty/urls.py

      ...
      urlpatterns = [
          path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True))),
      ]
      

      Esto unirá todo el código necesario para hacer que la interfaz GraphiQL esté disponible en la ruta graphql/:

      El archivo completo shorterner/urls.py se muestra aquí:

      shorty/shorty/urls.py

      from django.urls import path
      from django.views.decorators.csrf import csrf_exempt
      
      from graphene_django.views import GraphQLView
      
      urlpatterns = [
          path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True))),
      ]
      

      Guarde el archivo y ciérrelo.

      De vuelta en el terminal, ejecute el comando python manage.py runserver (si no se está ejecutando aún):

      • python manage.py runserver

      Abra su navegador web en la dirección http://localhost:8000/graphql. Se le presentará esta pantalla:

      Interfaz GraphiQL

      GraphiQL es una interfaz donde puede ejecutar instrucciones de GraphQL y ver los resultados. Una función es la sección Docs en la parte superior derecha. Debido a que en GraphQL se debe escribir todo, obtendrá documentación gratuita sobre sus “Type”(tipo), “Query” (consulta) y “Mutation” (mutación), entre otros aspectos.

      Tras explorar la página, inserte su primera “Query” en el área de texto principal:

      query {
        urls {
          id
          fullUrl
          urlHash
          clicks
          createdAt
        }
      }
      

      Este contenido muestra cómo se estructura una “Query” de GraphQL: primero utiliza la palabra clave query para indicar al servidor que solo desea recuperar algunos de los datos. A continuación, usará el campo urls definido en el archivo shortener/schema.py dentro de la clase Query. Desde ahí, solicita explícitamente todos los campos definidos en el modelo URL usando el estilo de capitalización camel, que es el predeterminado para GraphQL.

      Ahora, haga clic en el botón de flecha de reproducción en la parte superior izquierda.

      Recibirá la siguiente respuesta, indicando que aún no tiene URLs:

      Output

      { "data": { "urls": [] } }

      Esto muestra que GraphQL está funcionando. En su terminal, pulse CTRL+C para detener su servidor.

      En este paso, logró un gran avance al crear el extremo de GraphQL, realizar una “Query” para obtener todas las URLs y habilitar la interfaz de GraphiQL. Ahora, creará “Mutation” para cambiar la base de datos.

      Paso 4: Crear mutaciones

      La mayoría de las aplicaciones tienen una forma de cambiar el estado de la base de datos añadiendo, actualizando o eliminando datos. En GraphQL, estas operaciones se denominan Mutation. Tienen el aspecto de las “Query” pero utilizan argumentos para enviar datos al servidor.

      Para crear su primera “Mutation”, abra shortener/schema.py:

      Al final del archivo, comience añadiendo una nueva clase llamada CreateURL:

      shorty/shortener/schema.py

      ...
      class CreateURL(graphene.Mutation):
          url = graphene.Field(URLType)
      

      Esta clase hereda el elemento auxiliar graphene.Mutation para tener las capacidades de una mutación GraphQL. También tiene un nombre de propiedad url, que define el contenido mostrado por el servidor tras completarse la “Mutation”. En este caso, será una estructura de datos URLType.

      A continuación añada una subclase llamada Arguments a la clase ya definida:

      shorty/shortener/schema.py

      ...
          class Arguments:
              full_url = graphene.String()
      

      Esto define qué datos serán aceptados por el servidor. Aquí está esperando un parámetro llamado full_url con un contenido String:

      Ahora añada las siguientes líneas para crear el método mutate:

      shorty/shortener/schema.py

      ...
      
          def mutate(self, info, full_url):
              url = URL(full_url=full_url)
              url.save()
      

      Este método mutate hace gran parte del trabajo al recibir los datos del cliente y guardarlos en la base de datos. Al final, muestra la clase que contiene el elemento recién creado.

      Por último, cree una clase Mutation para albertar todas las “Mutation” para su app añadiendo estas líneas:

      shorty/shortener/schema.py

      ...
      
      class Mutation(graphene.ObjectType):
          create_url = CreateURL.Field()
      

      Hasta ahora, solo tendrá una mutación llamada create_url.

      El archivo completo shorterner/schema.py se muestra aquí:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      
      from .models import URL
      
      
      class URLType(DjangoObjectType):
          class Meta:
              model = URL
      
      
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType)
      
          def resolve_urls(self, info, **kwargs):
              return URL.objects.all()
      
      
      class CreateURL(graphene.Mutation):
          url = graphene.Field(URLType)
      
          class Arguments:
              full_url = graphene.String()
      
          def mutate(self, info, full_url):
              url = URL(full_url=full_url)
              url.save()
      
              return CreateURL(url=url)
      
      
      class Mutation(graphene.ObjectType):
          create_url = CreateURL.Field()
      

      Cierre y guarde el archivo.

      Para terminar de añadir la “Mutation”, cambie el archivo shorty/schema.py:

      Altere el archivo para incluya el siguiente código resaltado:

      shorty/shorty/schema.py

      
      import graphene
      
      import shortener.schema
      
      
      class Query(shortener.schema.Query, graphene.ObjectType):
          pass
      
      
      class Mutation(shortener.schema.Mutation, graphene.ObjectType):
          pass
      
      
      schema = graphene.Schema(query=Query, mutation=Mutation)
      

      Guarde y cierre el archivo. Si no está ejecutando el servidor local, inícielo:

      • python manage.py runserver

      Navegue a http://localhost:8000/graphql en su navegador web. Ejecute su primera “Mutation” en la interfaz web GrapiQL ejecutando la siguiente instrucción:

      mutation {
        createUrl(fullUrl:"https://www.digitalocean.com/community") {
          url {
            id
            fullUrl
            urlHash
            clicks
            createdAt
          }
        }
      }
      

      Compuso la “Mutation” con el nombre createURL, el argumento fullUrl y los datos que desea en la respuesta definida dentro del campo url.

      El resultado contendrá la información de la URL que acaba de crear dentro del campo de GraphQL data, como se muestra aquí:

      Output

      { "data": { "createUrl": { "url": { "id": "1", "fullUrl": "https://www.digitalocean.com/community", "urlHash": "077880af78", "clicks": 0, "createdAt": "2020-01-30T19:15:10.820062+00:00" } } } }

      Con eso, se añadió una URL a la base de datos con su versión en hash, como puede ver en el campo urlHash. Intente ejecutar la “Query” que creó en el último paso para ver su resultado:

      query {
        urls {
          id
          fullUrl
          urlHash
          clicks
          createdAt
        }
      }
      

      El resultado mostrará la URL almacenada:

      Output

      { "data": { "urls": [ { "id": "1", "fullUrl": "https://www.digitalocean.com/community", "urlHash": "077880af78", "clicks": 0, "createdAt": "2020-03-18T21:03:24.664934+00:00" } ] } }

      También puede intentar ejecutar la misma “Query”, pero solo pidiendo los campos que desea.

      A continuación, inténtelo una vez más con una URL diferente:

      mutation {
        createUrl(fullUrl:"https://www.digitalocean.com/write-for-donations/") {
          url {
            id
            fullUrl
            urlHash
            clicks
            createdAt
          }
        }
      }
      

      El resultado será lo siguiente:

      Output

      { "data": { "createUrl": { "url": { "id": "2", "fullUrl": "https://www.digitalocean.com/write-for-donations/", "urlHash": "703562669b", "clicks": 0, "createdAt": "2020-01-30T19:31:10.820062+00:00" } } } }

      El sistema ahora puede crear URLs cortas y listarlas. En el siguiente paso, permitirá a los usuarios acceder a una URL por medio de su versión corta y los redirigirá a la página correcta.

      Paso 5: Crear el endpoint de acceso

      En este paso, usará el método Django Views, un método que toma una solicitud y devuelve una respuesta, para redirigir a cualquiera que acceda al endpoint http://localhost:8000/url_hash a su URL completa.

      Abra el archivo shortener/views.py con su editor:

      Para comenzar, importe los dos paquetes sustituyendo el contenido con las siguientes líneas:

      shorty/shortener/views.py

      from django.shortcuts import get_object_or_404, redirect
      
      from .models import URL
      

      Estas se explicarán más detenidamente más adelante.

      A continuación, creará un Django View llamado root. Añada este snippet de código responsable de View al final del archivo:

      shorty/shortener/views.py

      ...
      
      def root(request, url_hash):
          url = get_object_or_404(URL, url_hash=url_hash)
          url.clicked()
      
          return redirect(url.full_url)
      

      Esto recibe un argumento llamado url_hash desde la URL solicitada por un usuario. Dentro de la función, la primera línea intenta obtener la URL de la base de datos usando el argumento url_hash. Si no se encuentra, devuelve el error HTTP 404 al cliente, lo que significa que falta el recurso. Después, aumenta la propiedad clicked de la entrada de URL, asegurando que realiza un seguimiento de la cantidad de veces que se accede a la URL. Al final, redirige el cliente a la URL solicitada.

      El archivo completo shorterner/views.py se muestra aquí:

      shorty/shortener/views.py

      from django.shortcuts import get_object_or_404, redirect
      
      from .models import URL
      
      
      def root(request, url_hash):
          url = get_object_or_404(URL, url_hash=url_hash)
          url.clicked()
      
          return redirect(url.full_url)
      

      Guarde y cierre el archivo.

      A continuación, abra shorty/urls.py:

      Añada el siguiente código resaltado para habilitar la vista root.

      shorty/shorty/urls.py

      
      from django.urls import path
      from django.views.decorators.csrf import csrf_exempt
      
      from graphene_django.views import GraphQLView
      
      from shortener.views import root
      
      
      urlpatterns = [
          path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True))),
          path('<str:url_hash>/', root, name='root'),
      ]
      

      La vista root será accesible en la ruta / de su servidor, aceptando un url_hash como parámetro de la cadena.

      Guarde y cierre el archivo. Si no está ejecutando el servidor local, inícielo ejecutando el comando python manage.py runserver.

      Para probar su nueva adición, abra su navegador web y acceda a la URL http://localhost:8000/077880af78. Observe que la última parte de la URL es el hash creado por la “Mutation” del paso 5. Accederá a la página URL del hash; en este caso, el sitio web de la comunidad de DigitalOcean.

      Ahora que el redireccionamiento de la URL funciona, hará que la aplicación sea más segura implementando la gestión de errores cuando se ejecute la “Mutation”.

      Paso 6: Implementar la gestión de errores

      Gestionar errores es una práctica recomendada en todas las aplicaciones, ya que los desarrolladores normalmente no controlan lo que se enviará al servidor. En este caso, puede intentar prever los fallos y minimizar sus impactos. En un sistema complejo como GraphQL, pueden salir mal muchas cosas, desde que el cliente pida los datos erróneos erróneos hasta que el servidor pierda el acceso a la base de datos.

      Como sistema escrito, GraphQL puede verificar todo lo que el cliente solicite y reciba en una operación conocida como validación de esquema. Puede ver esto en acción realizando una “Query” con un campo no existente.

      Diríjase a http://localhost:8000/graphql​​​ en su navegador una vez más y ejecute la siguiente “Query” en la interfaz GraphiQL con el campo iDontExist:

      query {
        urls {
          id
          fullUrl
          urlHash
          clicks
          createdAt
          iDontExist
        }
      }
      

      Ya que no hay un campo iDontExist definido en su “Query”, GraphQL muestra un mensaje de error:

      Output

      { "errors": [ { "message": "Cannot query field "iDontExist" on type "URLType".", "locations": [ { "line": 8, "column": 5 } ] } ] }

      Esto es importante porque, en el sistema escrito de GraphQL, el objetivo es enviar y recibir solo la información ya definida en el esquema.

      La aplicación actual acepta cualquier cadena arbitraria en el campo full_url. El problema es que si alguien envía una URL mal construida, usted no redirigiría al usuario a ningún sitio al probar la información almacenada. En este caso, necesita verificar si la full_url está bien formateada antes de guardarla en la base de datos, y, si hay cualquier error, elevar la excepción GraphQLError con un mensaje personalizado.

      Vamos a implementar esta funcionalidad en dos pasos. Primero, abra el archivo shortener/models.py:

      Añada las líneas resaltadas en la sección import:

      shorty/shortener/models.py

      from hashlib import md5
      
      from django.db import models
      from django.core.validators import URLValidator
      from django.core.exceptions import ValidationError
      
      from graphql import GraphQLError
      ...
      

      El URLValidator es un ayudante de Django para validar una cadena URL y Graphene utiliza GraphQLError para elevar excepciones con un mensaje personalizado.

      A continuación, asegúrese de validar la URL recibida por el usuario antes de guardarla en la base de datos. Habilite esta operación añadiendo el código resaltado en el archivo shortener/models.py:

      shorty/shortener/models.py

      class URL(models.Model):
          full_url = models.URLField(unique=True)
          url_hash = models.URLField(unique=True)
          clicks = models.IntegerField(default=0)
          created_at = models.DateTimeField(auto_now_add=True)
      
          def clicked(self):
              self.clicks += 1
              self.save()
      
          def save(self, *args, **kwargs):
              if not self.id:
                  self.url_hash = md5(self.full_url.encode()).hexdigest()[:10]
      
              validate = URLValidator()
              try:
                  validate(self.full_url)
              except ValidationError as e:
                  raise GraphQLError('invalid url')
      
              return super().save(*args, **kwargs)
      

      Primero, este código inicia el URLValidator en la variable validate. Dentro del bloque try/except, validate() la URL recibida y eleve un GraphQLError con el mensaje personalizado invalid url si se produjo algún error.

      El archivo completo shorterner/models.py se muestra aquí:

      shorty/shortener/models.py

      from hashlib import md5
      
      from django.db import models
      from django.core.validators import URLValidator
      from django.core.exceptions import ValidationError
      
      from graphql import GraphQLError
      
      
      class URL(models.Model):
          full_url = models.URLField(unique=True)
          url_hash = models.URLField(unique=True)
          clicks = models.IntegerField(default=0)
          created_at = models.DateTimeField(auto_now_add=True)
      
          def clicked(self):
              self.clicks += 1
              self.save()
      
          def save(self, *args, **kwargs):
              if not self.id:
                  self.url_hash = md5(self.full_url.encode()).hexdigest()[:10]
      
              validate = URLValidator()
              try:
                  validate(self.full_url)
              except ValidationError as e:
                  raise GraphQLError('invalid url')
      
              return super().save(*args, **kwargs)
      

      Guarde y cierre el archivo. Si no está ejecutando el servidor local, inícielo con el comando python manage.py runserver.

      A continuación, pruebe su nueva gestión de errores en http://localhost:8000/graphql. Intente crear una nueva URL con una full_url no válida en la interfaz GraphiQL:

      mutation {
        createUrl(fullUrl:"not_valid_url"){
          url {
            id
            fullUrl
            urlHash
            clicks
            createdAt
          }
        }
      }
      

      Cuando envíe una URL no válida, su excepción se elevará con el mensaje personalizado:

      Output

      { "errors": [ { "message": "invalid url", "locations": [ { "line": 2, "column": 3 } ], "path": [ "createUrl" ] } ], "data": { "createUrl": null } }

      Si mira en su terminal donde está en ejecución el comando python manage.py runserver, aparecerá un error:

      Output

      ... graphql.error.located_error.GraphQLLocatedError: invalid url [30/Jan/2020 19:46:32] "POST /graphql/ HTTP/1.1" 200 121

      Un extremo de GraphQL siempre generará un error con un código de estado HTTP 200, lo que normalmente significa que el resultado es correcto. Recuerde que, aunque GraphQL se construye sobre HTTP, no utiliza los conceptos de los códigos de estado HTTP o los métodos HTTP como REST hace.

      Con el manejo de errores implementado, ahora puede implementar un mecanismo para filtrar sus “Query”, minimizando la información devuelta por el servidor.

      Paso 7: Implementar filtros

      Imagine que ha comenzado a usar el acortador de URL para añadir sus propios enlaces. Después de un tiempo, habrá tantas entradas que será difícil encontrar la correcta. Puede resolver este problema usando filtros.

      El filtrado es un concepto común en las API de REST; normalmente, se anexa a la URL un parámetro Query con un campo y un valor. A modo de ejemplo, para filtrar todos los usuarios llamados jojo, podría usar GET /api/users?name=jojo.

      En GraphQL, usará argumentos “Query” como filtros. Crean una interfaz perfecta y limpia.

      Puede resolver el problema “hard to find a URL” permitiendo que el cliente filtre las URL por nombre con el campo full_url. Para implementar eso, abra el archivo shortener/schema.py en su editor favorito.

      Primero, importe el método Q en la línea resaltada:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      from django.db.models import Q
      
      from .models import URL
      ...
      

      Esto se usará para filtrar la consulta de su base de datos.

      A continuación, reescriba toda la clase Query con el siguiente contenido:

      shorty/shortener/schema.py

      ...
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType, url=graphene.String())
      
          def resolve_urls(self, info, url=None, **kwargs):
              queryset = URL.objects.all()
      
              if url:
                  _filter = Q(full_url__icontains=url)
                  queryset = queryset.filter(_filter)
      
              return queryset
      ...
      

      Las modificaciones que está realizando son:

      • Añadir el parámetro de filtro url dentro de la variable urls y el método resolve_url
      • Dentro de resolve_urls, si se da un parámetro llamado url, filtrar los resultados de la base de datos para devolver solo las URLs que contienen el valor dado, usando el método Q(full_url__icontains=url).

      El archivo completo shorterner/schema.py se muestra aquí:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      from django.db.models import Q
      
      from .models import URL
      
      
      class URLType(DjangoObjectType):
          class Meta:
              model = URL
      
      
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType, url=graphene.String())
      
          def resolve_urls(self, info, url=None, **kwargs):
              queryset = URL.objects.all()
      
              if url:
                  _filter = Q(full_url__icontains=url)
                  queryset = queryset.filter(_filter)
      
              return queryset
      
      
      class CreateURL(graphene.Mutation):
          url = graphene.Field(URLType)
      
          class Arguments:
              full_url = graphene.String()
      
          def mutate(self, info, full_url)
              url = URL(full_url=full_url)
              url.save()
      
              return CreateURL(url=url)
      
      
      class Mutation(graphene.ObjectType):
          create_url = CreateURL.Field()
      

      Guarde y cierre el archivo. Si no ejecuta el servidor local, inícielo con python manage.py runserver.

      Pruebe sus últimos cambios en http://localhost:8000/graphql. En la interfaz GraphiQL, escriba la siguiente instrucción. Filtrará todas las URL con la palabra community:

      query {
        urls(url:"community") {
          id
          fullUrl
          urlHash
          clicks
          createdAt
        }
      }
      

      El resultado es solo una entrada, ya que acaba de añadir una URL con la cadena community en ella. Si añadió más URL antes, el resultado puede variar.

      Output

      { "data": { "urls": [ { "id": "1", "fullUrl": "https://www.digitalocean.com/community", "urlHash": "077880af78", "clicks": 1, "createdAt": "2020-01-30T19:27:36.243900+00:00" } ] } }

      Ahora, tiene la capacidad de buscar en sus URLs. Sin embargo, con demasiados enlaces, sus clientes pueden quejarse de que la lista de URLs devuelve más datos de los que la aplicación puede gestionar. Para resolver esto, implementará la paginación.

      Paso 8 – Implementar la paginación

      Los clientes que usen su backend pueden quejarse de que el tiempo de respuesta es demasiado largo o que el tamaño es demasiado grande si hay demasiadas entradas de URL. Incluso puede ser difícil para su base de datos reunir un conjunto tan enorme de información. Para resolver este problema, puede permitir que el cliente especifique cuántos elementos quiere dentro de cada solicitud usando una técnica llamada paginación.

      No existe una forma predeterminada de implementar esta función. Incluso en las API de REST puede verlo en los encabezados HTTP o en los parámetros de consulta, con diferentes nombres y comportamientos.

      En esta aplicación, implementará la paginación habilitando dos argumentos más en la “Query” de URL: first y skip first seleccionará el primer número de elementos variables y skip especificará cuántos elementos deben omitirse desde el principio. Por ejemplo, si usa first == 10 y skip == 5 se obtendrán las primeras 10 URL, pero se omitirán 5, con lo cual se mostrarán solo las 5 restantes.

      Implementar esta solución es similar a añadir un filtro.

      Abra el archivo shortener/schema.py:

      En el archivo, cambie la clase Query añadiendo los dos nuevos parámetros en la variable urls y el método resolve_urls, resaltados en el siguiente código:

      shorty/shortener/schema.py

      import graphene
      from graphene_django import DjangoObjectType
      from django.db.models import Q
      
      from .models import URL
      
      
      class Query(graphene.ObjectType):
          urls = graphene.List(URLType, url=graphene.String(), first=graphene.Int(), skip=graphene.Int())
      
          def resolve_urls(self, info, url=None, first=None, skip=None, **kwargs):
              queryset = URL.objects.all()
      
              if url:
                  _filter = Q(full_url__icontains=url)
                  queryset = queryset.filter(_filter)
      
              if first:
                  queryset = queryset[:first]
      
              if skip:
                  queryset = queryset[skip:]
      
              return queryset
      ...
      

      Este código utiliza los parámetros first y skip recién creados dentro del método resolve_urls para filtrar la consulta de la base de datos.

      Guarde y cierre el archivo. Si no está ejecutando el servidor local, inícielo con python manage.py runserver.

      Para probar la paginación, emita la siguiente “Query” en la interfaz GraphiQL en http://localhost:8000/graphql:

      query {
        urls(first: 2, skip: 1) {
          id
          fullUrl
          urlHash
          clicks
          createdAt
        }
      }
      

      Su acortador de URL mostrará la segunda URL creada en su base de datos:

      Output

      { "data": { "urls": [ { "id": "2", "fullUrl": "https://www.digitalocean.com/write-for-donations/", "urlHash": "703562669b", "clicks": 0, "createdAt": "2020-01-30T19:31:10.820062+00:00" } ] } }

      Esto muestra que la función de paginación funciona. Puede experimentar añadiendo más URLs y probando diferentes conjuntos de first y skip.

      Conclusión

      Todo el ecosistema de GraphQL crece día a día y una comunidad activa lo respalda. Empresas como GitHub y Facebook han demostrado que está listo para la producción, y ahora puede aplicar esta tecnología a sus propios proyectos.

      En este tutorial, creó un acortador de URL usando GraphQL, Python y Django y conceptos como “Query” y “Mutation”. Pero sobre todo, ahora comprende cómo depender de estas tecnologías para crear aplicaciones web usando el marco web Django.

      Puede explorar más sobre GraphQL y las herramientas usadas aquí en el sitio web de GraphQL y en los sitios web de documentación de Graphene. Además, DigitalOcean tiene tutoriales adicionales para Python y Django que puede usar si desea aprender más sobre esto.



      Source link