Creación de una aplicación sin servidor distribuida geográficamente y de pila completa con páginas Macrometa, GatsbyJS y GitHub

En este artículo, explicamos la creación de una aplicación completa, en tiempo real y completamente sin servidor que le permite crear encuestas. Todos los bits estáticos de la aplicación (HTML, CSS, JS y medios) se alojarán y distribuirán globalmente a través de la CDN (red de entrega de contenidos) de GitHub Pages. Todos los datos y las solicitudes dinámicas de datos (es decir, el back-end) se distribuirán globalmente y tendrán estado a través de Macrometa GDN (Global Data Network).

Macrometa es una plataforma sin servidor con estado distribuido geográficamente, diseñada desde cero para ser ultrarrápida sin importar dónde se encuentre el cliente, optimizada tanto para lectura como para escritura, y elásticamente escalable. Lo usaremos como base de datos para la recopilación de datos y el mantenimiento del estado y la transmisión para suscribirnos a actualizaciones de la base de datos para acciones en tiempo real.

Usaremos Gatsby para administrar nuestra aplicación e implementarla en Github Pages. ¡Hagámoslo!

Introducción

Esta demostración utiliza Macrometa c8db-source-plugin para obtener algunos de los datos como rebajas y luego transformarlos a HTML para mostrarlos directamente en el navegador y Macrometa JSC8 SKD para mantener un socket abierto para divertirse en tiempo real y administrar el trabajo con Macrometa. API.

empezando

1. Node.js y npm deben estar instalados en su máquina.
2. Una vez hecho esto, instale Gatsby-CLInpm install -g gatsby-cli
3. Si aún no tiene una, regístrese para obtener una cuenta de desarrollador de Macrometa gratuitamente.
4. Una vez que haya iniciado sesión en Macrometa, cree un document collectionarchivo llamado markdownContent. Luego cree un documento único con campos titley contenten formato Markdown. Esto crea su modelo de datos que la aplicación utilizará para su contenido estático.

A continuación se muestra un ejemplo de cómo markdownContentdebería verse la colección:

{  "title": "## Real-Time Polling Application",  "content": "Full-Stack Geo-Distributed Serverless App Built with GatsbyJS and Macrometa!"}

contenty titlelas claves del documento están en formato de rebajas. Una vez que pasan gatsby-source-c8db, los datos titlese convierten a h2/h2y contenta p/p.

5. Ahora crea un segundo document collectionllamado polls. Aquí es donde se almacenarán los datos de la encuesta.

En la pollscolección cada encuesta se almacenará como un documento separado. A continuación se menciona un documento de muestra:

{  "pollName": "What is your spirit animal?",  "polls": [    {      "editing": false,      "id": "975e41",      "text": "dog",      "votes": 2    },    {      "editing": false,      "id": "b8aa60",      "text": "cat",      "votes": 1    },    {      "editing": false,      "id": "b8aa42",      "text": "unicorn",      "votes": 10    }  ]}

Configurando la autenticación

Sus datos de inicio de sesión de Macrometa, junto con la colección que se utilizará y las transformaciones de rebajas, deben proporcionarse en la aplicación gatsby-config.jscomo se muestra a continuación:

 {  resolve: "gatsby-source-c8db",  options: {    config: "https://gdn.paas.macrometa.io",    auth: {    email: "my-email",     password: "process.env.MM_PW"  },    geoFabric: "_system",    collection: 'markdownContent',    map: {      markdownContent: {         title: "text/markdown",        content: "text/markdown"       }    }  }}

A continuación, passwordnotará que dice process.env.MM_PW, en lugar de poner su contraseña allí, crearemos algunos .envarchivos y nos aseguraremos de que esos archivos estén enumerados en nuestro .gitignorearchivo, para no enviar accidentalmente nuestra contraseña de Macrometa a Github. En su directorio raíz cree .env.developmentarchivos .env.production.

Sólo tendrás una cosa en cada uno de esos archivos:MM_PW='your-password-here'

Ejecutando la aplicación localmente

Ya tenemos el código de interfaz, por lo que puede bifurcar el repositorio, configurar su cuenta Macrometa como se describe arriba, agregar su contraseña como se describe arriba y luego implementar. Continúe y haga eso y luego le explicaré cómo está configurada la aplicación para que pueda verificar el código.

En el terminal de su elección:

1. Bifurca este repositorio y clona tu bifurcación en tu máquina local
2. Corrernpm install
3. Una vez hecho esto, ejecute npm run developpara iniciar el servidor local. Esto iniciará el servidor de desarrollo local http://localhost:some_porty el servidor GraphQL enhttp://localhost:some_port/___graphql

Cómo implementar una aplicación (UI) en páginas de GitHub

Una vez que tenga la aplicación funcionando como se esperaba en su entorno local, ¡simplemente ejecútela npm run deploy!

Gatsby generará automáticamente el código estático para el sitio, creará una rama de llamada gh-pagesy la implementará en Github.

Ahora puedes acceder a tu sitio enyour-github-username.github.io/tutorial-jamstack-pollingapp

Si su aplicación no aparece allí por algún motivo, consulte la configuración de su repositorio y asegúrese de que Github Pages esté habilitado y configurado para ejecutarse en su gh-pagessucursal.

Caminando por el código

Primero, creamos un archivo que cargaba el controlador Macrometa JSC8, nos aseguramos de abrir un socket para Macrometa y luego definimos las diversas llamadas API que usaremos en la aplicación. A continuación, ponemos la configuración a disposición de toda la aplicación.

Después de eso, escribimos las funciones que manejan varios eventos de front-end. Aquí está el código para manejar un envío de voto:

onVote = async (onSubmitVote, getPollData, establishLiveConnection) = {  const { title } = this.state;  const { selection } = this.state;  this.setState({ loading: true }, () = {  onSubmitVote(selection)    .then(async () = {      const pollData = await getPollData();      this.setState({ loading: false, hasVoted: true, options: Object.values(pollData) }, () = {        // open socket connections for live updates        const onmessage = msg = {          const { payload } = JSON.parse(msg);          const decoded = JSON.parse(atob(payload));          this.setState({ options: decoded[title] });        }        establishLiveConnection(onmessage);      });    })    .catch(err = console.log(err))  });}

Puedes ver un ejemplo en vivo de la aplicación aquí.

Puedes crear tu propia encuesta. Para permitir que varias personas voten sobre el mismo tema, simplemente comparta la URL de votación con ellas.

Prueba Macrometa