Site is under maintenance mode. Please wait few min!
Saltar al contenido

Cómo instalar y utilizar la concha de pescado en un VPS Ubuntu

marzo 4, 2020

 

El autor ha seleccionado la Fundación Wikimedia para recibir una donación como parte del programa de escritura de donaciones.

Introducción

En los últimos años, los marcos web de código abierto han simplificado enormemente el proceso de codificación de una aplicación. Reaccionar, por ejemplo, sólo ha añadido a la popularidad de JavaScript al hacer que el lenguaje más accesible a los nuevos desarrolladores y el aumento de la productividad de los desarrolladores experimentados. Creado por Facebook, Reaccionar permite a los desarrolladores crear rápidamente interfaces de usuario de alta calidad para aplicaciones web altamente escalables mediante el apoyo a características tales como vistas declarativos, gestión del estado y representación del lado cliente, cada uno de los cuales pueden reducir en gran medida la complejidad de la construcción de una aplicación en JavaScript.

Puede aprovechar los marcos gustaría reaccione a los datos de carga y visualización de la API digitalocean, a través del cual puede administrar sus gotas y otros productos dentro de la nube digitalocean utilizando peticiones HTTP. Aunque uno puede obtener los datos de una API con muchos otros frameworks de JavaScript, Reaccionar proporciona beneficios útiles, como los ciclos de vida y gestión local del estado que lo hacen especialmente adecuado para el trabajo. Con Reaccionar, los datos recuperados de la API se añade al estado local cuando se inicia la aplicación y pueden pasar por varios ciclos de vida como componentes de montaje y desmontar. En cualquier momento, puede recuperar los datos de su estado local y mostrarlo en consecuencia.

En este tutorial, creará una sencilla aplicación que interactúa Reaccionar con la API digitalocean v2 para realizar llamadas y recuperar información acerca de sus gotas. Su aplicación mostrará una lista que contiene sus Gotitas actuales y sus detalles, como el nombre, región y especificaciones técnicas, y que va a utilizar el marco de front-end estilo Bootstrap para su aplicación.

Una vez que haya terminado este tutorial, tendrá una interfaz básica que muestra una lista de las gotitas de digitalocean, diseñado para parecerse a lo siguiente:

Requisitos previos

Antes de empezar esta guía, se necesita un digitalocean cuenta y como mínimo una gotita configurado, además de la siguiente:

  • una instalación local de Node.js (al menos v6) y NPM (al menos v5.2). Node.js es un entorno de tiempo de ejecución de JavaScript que le permite ejecutar su código fuera del navegador. Viene con un Gestor de paquetes llamado NPM preinstalado, lo que le permite instalar y actualizar los paquetes. Para instalar estos en MacOS o Ubuntu 18.04, siga los pasos de Cómo instalar Node.js y crear un entorno de desarrollo local en MacOS o la “Instalación mediante un PPA” de Cómo instalar Ubuntu 18.04 Node.js en.
  • Un acceso personal de símbolo para la API digitalocean de sólo lectura. Asegúrese de registrar el token en un lugar seguro; lo necesitará más adelante en este tutorial.
  • La familiaridad con la combinación de HTML y JavaScript. Más información en Cómo agregar JavaScript para HTML.
  • La familiaridad con el formato de datos JSON, que se puede aprender más acerca de cómo trabajar con JSON en JavaScript.
  • La familiaridad con la fabricación de las solicitudes a las API. Para un completo tutorial sobre cómo trabajar con las API, echar un vistazo a cómo utilizar las API Web en python3. Aunque está escrito para Python, todavía le ayudará a entender los conceptos básicos de trabajar con las API.

una instalación local de Node.js (al menos v6) y NPM (al menos v5.2). Node.js es un entorno de tiempo de ejecución de JavaScript que le permite ejecutar su código fuera del navegador. Viene con un Gestor de paquetes llamado NPM preinstalado, lo que le permite instalar y actualizar los paquetes. Para instalar estos en MacOS o Ubuntu 18.04, siga los pasos de Cómo instalar Node.js y crear un entorno de desarrollo local en MacOS o la “Instalación mediante un PPA” de Cómo instalar Ubuntu 18.04 Node.js en.

Un acceso personal de símbolo para la API digitalocean de sólo lectura. Asegúrese de registrar el token en un lugar seguro; lo necesitará más adelante en este tutorial.

La familiaridad con la combinación de HTML y JavaScript. Más información en Cómo agregar JavaScript para HTML.

La familiaridad con el formato de datos JSON, que se puede aprender más acerca de cómo trabajar con JSON en JavaScript.

La familiaridad con la fabricación de las solicitudes a las API. Para un completo tutorial sobre cómo trabajar con las API, echar un vistazo a cómo utilizar las API Web en python3. Aunque está escrito para Python, todavía le ayudará a entender los conceptos básicos de trabajar con las API.

Paso 1 – Creación de una base Reaccionar Aplicación

En este primer paso, vamos a crear una aplicación básica Reaccionar con el paquete Crear Reaccionar Aplicación de la NGP. Este paquete instala y configura automáticamente las dependencias esenciales necesarios para ejecutar Reaccionar, al igual que el módulo constructor webpack y el compilador de JavaScript Babel. Después de la instalación, se encontrará con el paquete de la aplicación Crear Reaccionar con el corredor npx paquete, que viene pre-instalado con Node.js.

Para instalar Crear Reaccionar App y crear la primera versión de su aplicación, ejecute el siguiente comando, reemplazando mi aplicación con el nombre que desea dar a su aplicación:

npx create-react-app my-app

  • npx crear una reacción aplicación mi aplicación

Después de la instalación se haya completado, se mueven en el directorio nuevo proyecto y empezar a ejecutar la aplicación usando estos comandos:

cd my-app
npm start

  • cd mi aplicación
  • NPM comenzar

el comando anterior se inicia un servidor de desarrollo local proporcionado por Crear Reaccionar aplicación, que desactiva la línea de comando rápido en su terminal. Para continuar con el tutorial, abre una nueva ventana de terminal y volver a navegar el directorio del proyecto antes de proceder al siguiente paso.

Ahora tiene la primera versión de su aplicación Reaccionar se ejecuta en modo de desarrollo, que se puede ver mediante la apertura http: // localhost: 3000 en un navegador web. En este punto, su aplicación sólo mostrará la pantalla de bienvenida de Crear Reaccionar Aplicación:

Ahora que ha instalado y ha creado la primera versión de su aplicación Reaccionar, se puede añadir un componente de tabla para su aplicación que con el tiempo llevará a cabo los datos de la API digitalocean.

Paso 2 – Creación de un componente para mostrar los datos de la gotita

En este paso, va a crear el primer componente que muestra información acerca de sus gotas. Este componente será una tabla que enumera todas sus gotas y sus correspondientes detalles.

El digitalocean estados de documentación API que puede recuperar una lista que contiene todas las gotitas mediante el envío de una solicitud a la siguiente punto final mediante cURL: https://api.digitalocean.com/v2/droplets. Uso de la salida de esta solicitud, puede crear un componente de tabla que contiene la identificación, nombre, región de memoria, vcpus, y el disco para cada gotita. Más adelante en este tutorial, va a insertar los datos recuperados de la API en el componente de tabla.

para definir una estructura clara para su aplicación, crear un nuevo directorio llamado componentes dentro del directorio src donde almacenar todo el código que escribe. Crear un nuevo archivo llamado Table.js dentro del directorio src / componentes y abrirlo con nano o un editor de texto de su elección:

mkdir src/components
nano src/components/Table.js

  • mkdir src / componentes
  • nano src / componentes / Table.js

Definir la componente de tabla añadiendo el código siguiente en el archivo:

import React from 'react';

const Table = () => {
return (

Id

Name

Region

Memory

CPUs

Disk Size





);
}

export default Table

el bloque de código por encima de las importaciones la Reaccionar marco y define un nuevo componente llamado tabla, que consta de una mesa con un encabezamiento y un cuerpo.

Cuando se han añadido estas líneas de código, guarde y salga del archivo. Con el editor de textos nano, puede hacerlo pulsando CTRL + X, tecleando y, y pulsando ENTER.

Ahora que ha creado el componente de tabla, es el momento de incluir este componente en su aplicación. Esto lo hará mediante la importación del componente en el punto de entrada de la aplicación, que se encuentra en el archivo src / app.js. Abrir este archivo con el siguiente comando:

nano src/App.js

  • nano src / app.js

A continuación, quitar el código estándar que muestra el mensaje de bienvenida Crear Reaccionar App en src / app.js, que se destaca en el siguiente bloque de código .

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (

logo

Edit src/App.js and save to reload.


Learn React

);
}
}

export default App;

Después de la eliminación de las líneas que muestran el mensaje de bienvenida, incluye el componente de tabla dentro de este mismo archivo añadiendo las siguientes líneas resaltadas:

import React, { Component } from 'react';
import Table from './components/Table.js';

class App extends Component {
render() {
return (

);
}
}

export default App;

Si accede a http: // localhost: 3000 en su navegador web de nuevo, su aplicación se ahora mostrar una tabla básica con cabezas de mesa:

En este paso, se ha creado un componente de tabla y se incluye este componente en el punto de entrada de la solicitud. A continuación, se establecerá una conexión con el API digitalocean, que vamos a usar para recuperar los datos que esta tabla se mostrarán.

Paso 3 – Asegurar sus credenciales de API

Configuración de una conexión a la API digitalocean consta de varias acciones, a partir de almacenar de forma segura el acceso personal de emergencia como una variable de entorno. Esto se puede hacer mediante el uso de dotenv, un paquete que le permite almacenar información confidencial en un archivo .env que la aplicación pueda acceder más tarde desde el medio ambiente.

Uso NPM para instalar el paquete dotenv:

npm install dotenv

  • NPM instalar dotenv

Después de instalar dotenv, crear un archivo de entorno llamada .env en el directorio raíz de la aplicación mediante la ejecución de este comando:

nano .env

  • nano .env

Añadir la siguiente en .env, que contiene su acceso personal de emergencia y la URL de la API digitalocean:

DO_API_URL=https://api.digitalocean.com/v2
DO_ACCESS_TOKEN=YOUR_API_KEY

para asegurar estos datos sensibles no quede comprometida a un repositorio, agregarlo a su archivo con el .gitignore siguiente comando:

echo ".env" >> .gitignore

  • echo «.env» >> .gitignore

ahora ha creado un archivo de configuración segura y simple para sus variables de entorno, que proporcionará su aplicación con la información que necesita para enviar peticiones a la digitalocean API. Para garantizar que sus credenciales de API no son visibles en el lado del cliente, lo próximo configurar un servidor proxy para reenviar las solicitudes y respuestas entre el servidor de aplicaciones y la API digitalocean.

Instalar el middleware http-proxy- middleware ejecutando el siguiente comando:

npm install http-proxy-middleware

  • NPM instalar http-proxy-middleware

Después de instalar esto, el siguiente paso es configurar el proxy. Crear el archivo setupProxy.js en el directorio src:

nano src/setupProxy.js

  • nano src / setupProxy.js

Dentro de este archivo, agregue el código siguiente para configurar el servidor proxy:

const proxy = require('http-proxy-middleware')

module.exports = function(app) {

require('dotenv').config()

const apiUrl = process.env.DO_API_URL
const apiToken = process.env.DO_ACCESS_TOKEN
const headers = {
"Content-Type": "application/json",
"Authorization": "Bearer " + apiToken
}

// define http-proxy-middleware
let DOProxy = proxy({
target: apiUrl,
changeOrigin: true,
pathRewrite: {
'^/api/' : '/'
},
headers: headers,
})

// define the route and map the proxy
app.use('/api', DOProxy)

};

En el bloque de código anterior, apiURL const = establece la dirección URL de la API digitalocean como el punto final, y const apiToken = carga de su acceso personal de emergencia en el servidor proxy. Los montajes pathRewrite opción que el servidor proxy / API en lugar de / para que no interfiera con el servidor de aplicaciones, pero sigue coincidiendo con la API digitalocean.

Ya ha creado con éxito un servidor proxy que va a enviar todas las solicitudes de API realizadas desde la aplicación reaccionar a la API digitalocean. Este servidor proxy se asegurará de que su acceso personal de emergencia, que se almacena de forma segura como una variable de entorno, no está expuesto en el lado del cliente. A continuación, creará las peticiones reales para recuperar sus datos de gota para su aplicación.

Paso 4 – Realización de llamadas a la API para digitalocean

Ahora que su componente de visualización está lista y los detalles de la conexión a digitalocean se almacenan y se asegura a través de un servidor proxy, puede comenzar a recuperar los datos de la API digitalocean. En primer lugar, añadir las siguientes líneas resaltadas de código de src / app.js justo antes y después de la aplicación se declara la clase:

import React, { Component } from 'react';
...
class App extends Component {
constructor(props) {
super(props);
this.state = {
droplets: []
}
}

render() {
...

Estas líneas de código de llamada de un método constructor en la clase componente, que a su Reaccionar inicializa el estado local, proporcionando this.state con un objeto o los objetos. En este caso, los objetos son sus gotas. Desde el bloque de código anterior, se puede ver que la matriz que contiene su Gotitas está vacía, por lo que es posible llenar con los resultados de la llamada a la API.

Con el fin de mostrar sus Gotitas actuales, tendrá a buscar esta información de la API digitalocean. Uso de la función JavaScript Fetch, se le envía una solicitud a la API digitalocean y actualizar el estado de gotitas con los datos que se recuperan. Para ello, puede utilizar el método componentDidMount añadiendo las siguientes líneas de código después del constructor:

class App extends Component {
constructor(props) {
super(props);
this.state = {
droplets: []
}
}

componentDidMount() {
fetch('http://localhost:3000/api/droplets')
.then(res => res.json())
.then(json => json.droplets)
.then(droplets => this.setState({ 'droplets': droplets }))
}
...

con sus datos de gotitas almacenado en el estado, es el momento para recuperarlo dentro de la función de procesamiento de su solicitud y enviar estos datos como una prop al componente de tabla. Agregue la siguiente instrucción resaltado a la componente de tabla en app.js:

...
class App extends Component {
render() {
return (

);
}
}
...

Ahora ha creado la funcionalidad para recuperar datos de la API, pero todavía se necesita para hacer esta información accesible a través de un navegador web. En el siguiente paso, se lograr esto mediante la visualización de los datos de gotitas en su componente de tabla.

Paso 5 – Visualización de la gotita de datos de la tabla de componentes

Ahora que ha transferido los datos de gotas para el componente de tabla, se puede repetir estos datos sobre las filas de la tabla. Pero dado que la aplicación hace la solicitud a la API después app.js está montado, el valor de la propiedad de las gotitas estará vacía al principio. Por lo tanto, también es necesario añadir código para asegurarse de que las gotas no está vacío antes de intentar mostrar los datos. Para ello, agregue las siguientes líneas resaltadas a la sección de tbody Table.js:

const Table = ({ droplets }) => {
return (

{ (droplets.length > 0) ? droplets.map( (droplet, index) => {
return (

Id

Name

Region

Memory

CPUs

Disk Size

{ droplet.id }

{ droplet.name }

{ droplet.region.slug}

{ droplet.memory }

{ droplet.vcpus }

{ droplet.disk }

)
}) :

Loading... }


);
}

Con la adición del código anterior, la aplicación mostrará un mensaje Cargando … marcador de posición cuando no hay datos de la gotita está presente. Cuando la API digitalocean no devuelve datos de las gotas, su aplicación se repetirá por encima de filas de la tabla que contiene columnas para cada tipo de datos y mostrará el resultado a su navegador web:

Nota: Si tu buscador muestra un error en http: // localhost: 3000, pulse CTRL + C en la terminal que ejecuta el servidor de desarrollo para detener su aplicación. Ejecute el siguiente comando para reiniciar la aplicación:

npm start

  • NPM comenzar

En este paso, se ha modificado el componente de tabla de la aplicación para mostrar los datos de gotitas en un navegador web y añadido un mensaje marcador de posición para cuando hay haya gotas de encontrar. A continuación, se utilizará un marco front-end web de estilo de sus datos para que sea más atractiva visualmente y fácil de leer.

Paso 6 – moldear el componente tabla mediante Bootstrap

Su mesa está llena con datos, pero la información no se muestra de la manera más atractiva. Para solucionar este problema, puede estilo de su aplicación mediante la adición de Bootstrap para su proyecto. Bootstrap es un estilo de fuente abierta y la biblioteca de componentes que le permite agregar un estilo que responde a un proyecto con plantillas CSS.

Instalar Bootstrap con NPM mediante el siguiente comando:

npm install bootstrap

  • NPM instalación de arranque

Después de Bootstrap tiene instalación acabada, importar su archivo CSS en su proyecto, añadiendo la siguiente línea resaltada a src / app.js:

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
...

ahora que ha importado el CSS, aplicar el Bootstrap peinar a su componente de tabla mediante la adición de la tabla de clase de la etiqueta

en src / componentes / Table.js.

import React from 'react';

const Table = ({ droplets }) => {
return (

...

A continuación, terminar el estilo de su aplicación mediante la colocación de un encabezado encima de la mesa con un título y el logotipo digitalocean. Haga clic en Descargar Logos en la sección Marca Activos de la página de prensa de digitalocean para descargar un conjunto de logotipos, elegir su favorito desde el directorio SVG (este tutorial utiliza DO_Logo_icon_blue.svg), y agregarlo a su proyecto mediante la copia del logotipo archivo en un directorio nuevo llamado activos dentro del directorio src de su proyecto. Después de cargar el logotipo, importarlo en la cabecera mediante la adición de las líneas resaltadas a src / app.js:

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './assets/DO_Logo_icon_blue.svg';

class App extends Component {
...
render() {
return (

);
}
}

export default App;

En el bloque de código anterior, las clases dentro de la etiqueta de navegación añade un estilo particular, de Bootstrap a su cabecera.

Ahora que ha importado Bootstrap y aplicado su estilo a su solicitud, sus datos se mostrará en su navegador web con una exhibición organizada y legible:

Conclusión

En este artículo, que ha creado un Reaccionar básica aplicación que recupera datos de la API digitalocean a través de un servidor proxy garantizado y lo muestra con Bootstrap peinado. Ahora que está familiarizado con el marco de reaccionar, se pueden aplicar los conceptos que aprendió aquí para las aplicaciones más complicadas, como la que se encuentra en cómo construir una aplicación web moderna para gestionar la información de los clientes con Django y reaccionar en Ubuntu 18.04. Si desea averiguar qué son posibles otras acciones con la API digitalocean, echar un vistazo a la documentación de la API en la página web de digitalocean.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *