One place for hosting & domains

      Cómo crear componentes personalizados en React


      El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

      Introducción

      En este tutorial, aprenderá a crear componentes personalizados en React. Los componentes son elementos de funcionalidad independientes que puede reutilizar en sus aplicaciones, y son las unidades estructurales básicas de todas las aplicaciones de React. A menudo, pueden ser simples clases y funciones de JavaScript, pero se los utiliza como si fueran elementos HTML personalizados. Los botones, los menús y cualquier otro contenido de las páginas de front-end pueden crearse como componentes. Los componentes también pueden contener información de estado y mostrar marcado.

      Una vez que aprenda a crear componentes en React, podrá dividir aplicaciones complejas en pequeñas piezas más fáciles de compilar y mantener.

      En este tutorial, creará una lista de emojis que mostrarán sus nombres cuando se hace clic en ellos. Los emojis se crearán usando un componente personalizado y se los invocará desde el interior de otro componente personalizado. Al final de este tutorial, habrá creado componentes personalizados utilizando clases y funciones de JavaScript, y sabrá cómo separar código existente en elementos reutilizables y cómo almacenar los componentes en una estructura de archivos legible.

      Requisitos previos

      Paso 1: Configurar el proyecto React

      En este paso, creará una base para su proyecto usando Create React App. También modificará el proyecto predeterminado para crear su proyecto de base al asignar una lista de emojis y añadir algo de estilo.

      Primero, cree un proyecto nuevo. Abra un terminal y, luego, ejecute el siguiente comando:

      • npx create-react-app tutorial-03-component

      Una vez completado, pase al directorio del proyecto:

      Abra el código App.js en un editor de texto:

      A continuación, elimine el código de la plantilla creado por Create React App y sustituya el contenido por el nuevo código de React que muestra una lista de emojis:

      tutorial-03-component/src/App.js

      import React from 'react';
      import './App.css';
      
      const displayEmojiName = event => alert(event.target.id);
      const emojis = [
        {
          emoji: '😀',
          name: "test grinning face"
        },
        {
          emoji: '🎉',
          name: "party popper"
        },
        {
          emoji: '💃',
          name: "woman dancing"
        }
      ];
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Este código utiliza la sintaxis de JSX para hacer map() sobre la matriz de emojis y enumerarlos como elementos de la lista <li>. También adjunta eventos onClick para mostrar datos de los emojis en el navegador. Para analizar el código con mayor detenimiento, consulte Cómo crear elementos de React con JSX, que contiene una explicación detallada de JSX.

      Guarde y cierre el archivo. Ahora, puede eliminar el archivo logo.svg, dado que era parte de la plantilla y ya no está haciendo referencia a ella:

      A continuación, actualice el estilo. Abra src/App.css:

      Sustituya el contenido por el siguiente CSS para centrar los elementos y ajustar la fuente:

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Se utiliza flex para centrar la <h1> principal y enumerar los elementos. También elimina estilos de botones predeterminados y de <li> para que los emojis se alineen en una fila. Puede encontrar más detalles en Cómo crear elementos de React con JSX.

      Guarde el archivo y ciérrelo.

      Abra otra ventana de terminal en el root de su proyecto. Inicie el proyecto con el siguiente comando:

      Una vez que el comando se ejecute, verá el proyecto en ejecución en su navegador web en http://localhost:3000.

      Déjelo en ejecución todo el tiempo que esté trabajando en su proyecto. Cada vez que guarde el proyecto, el navegador se actualizará de forma automática y mostrará el código más actualizado.

      Verá la página de su proyecto con Hello, World y los tres emojis que enumeró en su archivo App.js:

      Navegador con emoji

      Ahora que configuró su código, puede comenzar a unir componentes en React.

      Paso 2: Crear un componente independiente con clases de React

      Ahora que su proyecto se está ejecutando, puede comenzar a crear su componente personalizado. En este paso, creará un componente de React independiente ampliando la clase Component de React. Creará una nueva clase, agregará métodos y usará la función de representación para mostrar datos.

      Los componentes de React son elementos autónomos que puede reutilizar en una página. Al crear pequeñas piezas de código centradas, las puede mover y reutilizar a medida que su aplicación se amplía. La clave es que son autónomas y centradas, lo que le permite separar el código en piezas lógicas. De hecho, ya ha estado trabajando con componentes que se separan de forma lógica: el archivo App.js es un componente funcional, que verá en más detalle en el paso 3.

      Hay dos tipos de componentes personalizados: basados en clases y funcionales. El primer componente que va a crear es un componente basado en clases. Creará un nuevo componente denominado Instructions que explica las instrucciones del visor de emojis.

      Nota: Los componentes basados en clases solían ser la forma más popular de crear componentes de React. Pero con la introducción de los hooks de React, muchos desarrolladores y bibliotecas están comenzando a usar componentes funcionales.

      Si bien, ahora, los componentes funcionales son la norma, a menudo, encontrará componentes de clases en código heredado. No es necesario que los use, pero sí que sepa reconocerlos. También ofrecen una introducción clara a muchos conceptos futuros, como la gestión de estados. En este tutorial, aprenderá a crear componentes funcionales y de clase.

      Para comenzar, cree un archivo nuevo. Por convención, los archivos de componentes se escriben con mayúscula:

      • touch src/Instructions.js

      Luego, abra el archivo en su editor de texto:

      Primero, importe React y la clase Component y exporte Instructions con las siguientes líneas:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      
      export default class Instructions extends Component {}
      

      La importación de React convertirá el JSX. Component es una clase de base que ampliará para crear su componente. Para ampliarlo, creó una clase que tiene el nombre de su componente (Instructions) y extendió la clase Component de base con la línea export. También está exportando esta clase como predeterminada con las palabras export default al comienzo de la declaración de clase.

      El nombre de la clase se debe escribir con mayúscula y debe coincidir con el nombre del archivo. Esto es importante cuando se utilizan herramientas de depuración, que mostrarán el nombre del componente. Si el nombre coincide con la estructura de archivos, será más fácil localizar el componente en cuestión.

      La clase Component de base tiene varios métodos que puede usar en su clase personalizada. El más importante, y el único que usará en este tutorial, es el método render(). El método render() devuelve el código JSX que desea mostrar en el navegador.

      Para comenzar, añada una pequeña explicación de la aplicación en una etiqueta <p>:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      
      export class Instructions extends Component {
      
        render() {
          return(
            <p>Click on an emoji to view the emoji short name.</p>
          )
        }
      
      }
      

      Guarde y cierre el archivo. En este momento, todavía no hay cambios en su navegador. Esto se debe a que todavía no utilizó el componente nuevo. Para usarlo, deberá añadirlo a otro componente que se conecte con el componente root. En este proyecto, <App> es el componente root en index.js. Para que aparezca en su aplicación, deberá añadirlo al componente <App>.

      Abra src/App.js en un editor de texto:

      Primero, deberá importar el componente:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions';
      
      import './App.css';
      
      ...
      
      export default App;
      

      Como es la importación predeterminada, puede importar a cualquier nombre que desee. Es mejor mantener los nombres consistentes por motivos de legibilidad: la importación debe coincidir con el nombre del componente, que, a su vez, debe coincidir con el nombre del archivo. Pero la única regla fija es que el componente debe comenzar con una letra mayúscula. Así es como React sabe que se trata de un componente de React.

      Ahora que importó el componente, añádalo al resto de su código, como si fuera un elemento HTML personalizado:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      En este código, encerró el componente entre corchetes angulares. Como este componente no tiene elementos secundarios, se puede cerrar de forma automática al terminar con />.

      Guarde el archivo. Al hacerlo, la página se actualizará y verá el componente nuevo.

      Navegador con texto de instrucción

      Ahora que tiene algo de texto, puede añadir una imagen. Descargue una imagen de emoji de wikimedia y guárdela en el directorio src como emoji.svg con el siguiente comando:

      • curl -o src/emoji.svg https://upload.wikimedia.org/wikipedia/commons/3/33/Twemoji_1f602.svg

      curl realiza la solicitud a la URL y el indicador -o le permite guardar el archivo como src/emoji.svg.

      A continuación, abra el archivo de su componente:

      Importe el emoji y añádalo a su componente personalizado con un enlace dinámico:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <>
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </>
          )
        }
      }
      

      Tenga en cuenta que debe incluir la extensión del archivo .svg al realizar la importación. Al importar, importa una ruta dinámica que crea webpack cuando se compila el código. Para obtener más información, consulte Cómo configurar un proyecto de React con Create React App.

      También deberá envolver las etiquetas <img> y <p> con etiquetas vacías para asegurarse de que se devuelva un único elemento.

      Guarde el archivo. Al volver a cargar el navegador, la imagen será muy grande en comparación con el resto del contenido:

      Ventana de navegador con una imagen de emoji grande

      Para reducir el tamaño de la imagen, deberá añadir algo de CSS y un className a su componente personalizado.

      Primero, en Instructions.js, cambie las etiquetas vacías por div y asigne un className de instructions:

      tutorial-03-component/src/Instructions.js

      import React, { Component } from 'react';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Guarde y cierre el archivo. A continuación, abra App.css:

      Cree reglas para el selector de clases .instructions:

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      ...
      
      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      Al añadir un display de estilo flex, hace que img y p se centren con flexbox. Cambió la dirección para que todo se alinee verticalmente con flex-direction: column;. La línea align-items: center; centrará los elementos en la pantalla.

      Ahora que los elementos están alineados, deberá cambiar el tamaño de la imagen. Asigne a img dentro de div un valor de width (ancho) y height (alto) de 100 px.

      tutorial-03-component/src/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      ...
      
      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      .instructions img {
          width: 100px;
          height: 100px;
      }
      

      Guarde y cierre el archivo. El navegador se volverá a cargar y verá que la imagen es mucho más pequeña:

      Ventana de navegador con una imagen más pequeña

      En este punto, creó un componente personalizado independiente y reutilizable. Para ver cómo se reutiliza, añada una segunda instancia a App.js.

      Abra App.js:

      En App.js, añada una segunda instancia del componente:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Guarde el archivo. Cuando el navegador se vuelva a cargar, verá el componente dos veces.

      Navegador con dos instancias del componente Instructions

      En este caso, no desea dos instancias de Instructions, pero puede ver que el componente se puede reutilizar de forma eficiente. Es probable que use los botones o las tablas personalizados que cree varias veces en una página, por lo que son ideales para usar como componentes personalizados.

      Por ahora, puede eliminar la etiqueta de imagen adicional. En su editor de texto, elimine el segundo <Instructions /> y guarde el archivo:

      tutorial-03-component/src/App.js

      import React from 'react';
      
      import Instructions from './Instructions.js'
      
      ...
      
      function App() {
        const greeting = "greeting";
        const displayAction = false;
        return(
          <div className="container">
            <h1 id={greeting}>Hello, World</h1>
            {displayAction && <p>I am writing JSX</p>}
            <Instructions />
            <ul>
              {
                emojis.map(emoji => (
                  <li key={emoji.name}>
                    <button
                      onClick={displayEmojiName}
                    >
                      <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
                    </button>
                  </li>
                ))
              }
            </ul>
          </div>
        )
      }
      
      export default App;
      

      Ahora, tiene un componente independiente y reutilizable que puede añadir a un componente principal varias veces. La estructura que tiene ahora funciona para un número reducido de componentes, pero hay un pequeño problema: todos los archivos están mezclados. La imagen de <Instructions> se encuentra en el mismo directorio que los recursos de <App>. También se está mezclando el código CSS de <App> con el de <Instructions>.

      En el siguiente paso, creará una estructura de archivos que le dará independencia a cada componente al agrupar sus funcionalidades, estilos y dependencias, lo que le permitirá moverlos según sea necesario.

      Paso 3: Crear una estructura de archivos legible

      En este paso, creará una estructura de archivos para organizar sus componentes y recursos, como imágenes, código CSS y otros archivos de JavaScript. Agrupará el código por componentes, no por tipo de recursos. En otras palabras, no tendrá un directorio separado para CSS, imágenes y JavaScript. En su lugar, tendrá un directorio independiente para cada componente que contendrá CSS, JavaScript e imágenes pertinentes. En los dos casos, está separando cuestiones.

      Como tiene un componente independiente, necesita una estructura de archivos que agrupe el código pertinente. En este momento, todo se encuentra en el mismo directorio. Enumere los elementos en su directorio src:

      El resultado indica que todo se está desordenando bastante:

      Output

      App.css Instructions.js index.js App.js emoji.svg serviceWorker.js App.test.js index.css setupTests.js

      Tiene el código del componente <App> (App.css, App.js y App.test.js) junto a su componente root (index.css e index.js) y su componente personalizado Instructions.js.

      React es intencionalmente independiente de la estructura de archivos. No recomienda ninguna estructura en particular y el proyecto puede funcionar con diversas jerarquías de archivos. Sin embargo, recomendamos añadir cierto orden para evitar sobrecargar el directorio root con componentes, archivos CSS e imágenes que serán difíciles de navegar. Además, usar una nomenclatura explícita puede facilitar la visualización de las piezas de su proyecto que están relacionadas.  Por ejemplo, puede no ser claro que un archivo de imagen denominado Logo.svg es parte de un componente llamado Header.js.

      Una de las estructuras más simples es la creación de un directorio components con un directorio separado para cada componente. Esto le permitirá agrupar sus componentes de forma separada del código de configuración, como serviceWorker, y, a la vez, agrupar los recursos con los componentes.

      Crear un directorio components

      Para comenzar, cree un directorio denominado components:

      A continuación, pase los siguientes componentes y código al directorio: App.css, App.js, App.test.js, Instructions.js y emoji.svg:

      • mv src/App.* src/components/
      • mv src/Instructions.js src/components/
      • mv src/emoji.svg src/components/

      Aquí, está usando un carácter comodín (*) para seleccionar todos los archivos que se comienzan con App.

      Después de trasladar el código, verá un error en su terminal que ejecuta npm start.

      Output

      Failed to compile. ./src/App.js Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/App.js'

      Recuerde que todo el código está importando usando rutas relativas. Si cambia la ruta de ciertos archivos, deberá actualizar el código.

      Para hacerlo, abra index.js.

      Luego, cambie la ruta de la importación de App para que importe desde el directorio components/.

      tutorial-03-component/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App';
      import * as serviceWorker from './serviceWorker';
      
      ...
      
      serviceWorker.unregister();
      

      Guarde y cierre el archivo. Su secuencia de comandos detectará los cambios, y el error desaparecerá.

      Ahora, tiene componentes en un directorio separado. A medida que sus aplicaciones se vuelven más complejas, es posible que tenga directorios para servicios API, almacenes de datos y funciones de utilidad. Separar el código de los componentes es el primer paso, pero todavía tiene el código CSS de Instructions mezclado en el archivo App.css.  Para crear esta separación lógica, primero, trasladará los componentes a directorios separados.

      Trasladar componentes a directorios individuales

      Primero, cree un directorio específicamente para el componente <App>:

      Luego, traslade los archivos relacionados al directorio nuevo:

      • mv src/components/App.* src/components/App

      Al hacerlo, obtendrá un error similar al de la última sección:

      Output

      Failed to compile. ./src/components/App.js Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/components/App.js'

      En este caso, deberá actualizar dos cosas. Primero, deberá actualizar la ruta en index.js.

      Abra el archivo index.js:

      Luego, actualice la ruta de importación de App para que apunte al componente App en el directorio App.

      tutorial-03-component/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      
      ...
      
      serviceWorker.unregister();
      

      Guarde y cierre el archivo. La aplicación seguirá sin ejecutarse. Verá un error como este:

      Output

      Failed to compile. ./src/components/App/App.js Module not found: Can't resolve './Instructions.js' in 'your_file_path/tutorial-03-component/src/components/App'

      Como <Instructions> no se encuentra en el mismo nivel de directorio que el componente <App>, deberá cambiar la ruta de importación. Antes de hacerlo, cree un directorio para Instructions. Cree un directorio denominado Instructions en el directorio src/components:

      • mkdir src/components/Instructions

      Luego, traslade Instructions.js y emoji.svg a ese directorio:

      • mv src/components/Instructions.js src/components/Instructions
      • mv src/components/emoji.svg src/components/Instructions

      Ahora que se creó el directorio del componente Instructions, puede terminar de actualizar las rutas de archivos para conectar su componente a su aplicación.

      Actualizar rutas de importación

      Ahora que los componentes se encuentran en directorios individuales, puede ajustar la ruta de importación en App.js.

      Abra App.js:

      • nano src/components/App/App.js

      Como la ruta es relativa, deberá subir un directorio, src/components, y, luego, ingresar al directorio Instructions de Instructions.js, pero, como se trata de un archivo JavaScript, no necesita la importación final.

      tutorial-03-component/src/components/App/App.js

      import React from 'react';
      
      import Instructions from '../Instructions/Instructions.js';
      
      import './App.css';
      
      ...
      
      export default App;
      

      Guarde y cierre el archivo. Ahora que todas sus importaciones están usando la ruta correcta, su navegador se actualizará y mostrará la aplicación.

      Ventana de navegador con una imagen más pequeña

      Nota: También puede denominar el archivo root de cada directorio index.js. Por ejemplo, en lugar de src/components/App/App.js, podría crear src/components/App/index.js. La ventaja es que, de esta manera, sus importaciones son ligeramente más pequeñas. Si la ruta apunta a un directorio, la importación buscará un archivo index.js. La importación de src/components/App/index.js en el archivo src/index.js sería import ./components/App. La desventaja de este método es que termina teniendo muchos archivos con el mismo nombre, lo que puede dificultar la lectura en algunos editores de texto. En última instancia, se trata de una decisión personal y de equipo, pero lo mejor es ser coherente.

      Separar código en archivos compartidos

      Ahora, cada componente tiene su propio directorio, pero no todo es completamente independiente. El último paso es extraer el CSS de Instructions a un archivo separado.

      Primero, cree un archivo CSS en src/components/Instructions:

      • touch src/components/Instructions/Instructions.css

      Luego, abra el archivo CSS en su editor de texto:

      • nano src/components/Instructions/Instructions.css

      Añada el CSS de instrucciones que creó en una sección anterior:

      tutorial-03-component/src/components/Instructions/Instructions.css

      .instructions {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      .instructions img {
          width: 100px;
          height: 100px;
      }
      

      Guarde y cierre el archivo. Luego, elimine el CSS de instrucciones de src/components/App/App.css.

      • nano src/components/App/App.css

      Elimine las líneas sobre .instructions. El archivo final tendrá el siguiente aspecto:

      tutorial-03-component/src/components/App/App.css

      .container {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      button {
          font-size: 2em;
          border: 0;
          padding: 0;
          background: none;
          cursor: pointer;
      }
      
      ul {
          display: flex;
          padding: 0;
      }
      
      li {
          margin: 0 20px;
          list-style: none;
          padding: 0;
      }
      

      Guarde y cierre el archivo. Por último, importe el CSS en Instructions.js:

      • nano src/components/Instructions/Instructions.js

      Importe el CSS usando la ruta relativa:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React, { Component } from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default class Instructions extends Component {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Guarde y cierre el archivo. La ventana de su navegador se verá igual que antes, excepto que, ahora, todos los recursos del archivo están agrupados en el mismo directorio.

      Ventana de navegador con una imagen más pequeña

      Ahora, observe la estructura una última vez. Primero, el directorio src/:

      Cuenta con el componente root index.js y el CSS relacionado index.css junto al directorio components/ y archivos de utilidad, como serviceWorker.js y setupTests.js:

      Output

      components serviceWorker.js index.css setupTests.js index.js

      Luego, observe el interior de components:

      Verá un directorio para cada componente:

      Output

      App Instructions

      Si observa el interior de cada componente, verá el código del componente y archivos CSS, de prueba y de imagen, si existen.

      Output

      App.css App.js App.test.js
      • ls src/components/Instructions

      Output

      Instructions.css Instructions.js emoji.svg

      En este punto, creó una estructura sólida para su proyecto. Movió mucho código, pero, ahora que tiene una estructura, se ampliará más fácilmente.

      Esta no es la única manera de crear su estructura. Algunas estructuras de archivos pueden aprovechar la división de código al especificar un directorio que se divida en varios paquetes. Otras estructuras de archivos se dividen por ruta y utilizan un directorio común para los componentes que se utilizan en todas las rutas.

      Por ahora, continúe con un enfoque menos complejo. Si surge la necesidad de tener otra estructura, siempre es más fácil pasar de lo sencillo a lo complejo. Comenzar con una estructura compleja antes de necesitarla, dificultará la refactorización.

      Ahora que creó y organizó un componente basado en clases, en el siguiente paso, creará un componente funcional.

      Paso 4: Crear un componente funcional

      En este paso, creará un componente funcional. Los componentes funcionales son los más comunes en el código de React contemporáneo. Estos componentes suelen ser más cortos y, a diferencia de los componentes basados en clases, pueden usar hooks de React, una nueva manera de gestionar estados y eventos.

      Un componente funcional es una función de JavaScript que devuelve cierto JSX. No requiere ampliar nada y no hay métodos especiales que memorizar.

      Para refactorizar <Instructions> como componente funcional, deberá cambiar la clase a una función y eliminar el método de representación de modo que solo quede la instrucción de retorno.

      Para hacerlo, primero, abra Instructions.js en un editor de texto.

      • nano src/components/Instructions/Instructions.js

      Cambie la declaración class a una declaración function:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React, { Component } from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Luego, elimine la importación de { Component }:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
      
        render() {
          return(
            <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
            </div>
          )
        }
      }
      

      Por último, elimine el método render(). En este punto, solo está devolviendo JSX.

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      export default function Instructions() {
        return(
          <div className="instructions">
              <img alt="laughing crying emoji" src={emoji} />
              <p>Click on an emoji to view the emoji short name.</p>
          </div>
        )
      }
      

      Guarde el archivo. El navegador se actualizará y verá su página como antes.

      Navegador con emoji

      También puede volver a escribir la función como función de flecha usando la devolución implícita. La principal diferencia es que pierde el cuerpo de la función. También deberá, primero, asignar la función a una variable y, luego, exportar esa variable:

      tutorial-03-component/src/components/Instructions/Instructions.js

      import React from 'react';
      import './Instructions.css';
      import emoji from './emoji.svg'
      
      const Instructions = () => (
        <div className="instructions">
          <img alt="laughing crying emoji" src={emoji} />
          <p>Click on an emoji to view the emoji short name.</p>
        </div>
      )
      
      export default Instructions;
      

      Los componentes funcionales simples y los componentes basados en clases son muy similares. Cuando tiene un componente sencillo que no almacena estados, lo mejor es usar un componente funcional. La diferencia real entre los dos tipos de componentes es la forma en que se almacenan su estado y sus propiedades de uso. Los componentes basados en clases utilizan métodos y propiedades para establecer el estado y suelen ser algo más largos. Los componentes funcionales utilizan hooks para almacenar el estado o gestionar cambios y suelen ser un poco más cortos.

      Conclusión

      Ahora, tiene una aplicación pequeña con piezas independientes. Creó componentes de los dos tipos principales: funcionales y basados en clases. Separó las partes de los componentes en directorios para poder mantener agrupadas porciones de código similares. También importó y reutilizó los componentes.

      Si comprende los componentes, puede comenzar a ver sus aplicaciones como piezas que puede desarmar y volver a armar. Los proyectos se vuelven modulares e intercambiables. La capacidad de ver aplicaciones completas como series de componentes es un paso importante para comprender React. Si desea acceder a más tutoriales de React, consulte nuestra página temática de React o regrese a la página de la serie Cómo programar con React.js.



      Source link

      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