Cómo crear una aplicación en tiempo real con suscripciones GraphQL en Postgres

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Clase magistral de tipografía, con Elliot Jay Stocks

  • Índice
    1. Desafíos de la creación de aplicaciones en tiempo real
    2. ¿Qué es GraphQL?
    3. Creación de una aplicación de votación/encuesta en tiempo real
      1. Requisitos previos
      2. Implementación de la base de datos y un backend GraphQL
      3. Modelado del esquema de la base de datos
      4. Integración de la aplicación Frontend React con el backend GraphQL
    4. Detrás de escena: GraphQL
      1. El componente de la encuesta y el gráfico de resultados agregados
      2. Integración de la API GraphQL
    5. Pensamientos finales
      1. Recursos Relacionados

    Crear aplicaciones en tiempo real es difícil. Sin embargo, GraphQL está cambiando rápidamente este status quo. Exploremos qué es GraphQL y luego pruébelo creando una aplicación de encuesta en la que los usuarios puedan votar y los resultados agregados en pantalla se actualicen en tiempo real.

     

    En este artículo, analizaremos los desafíos que implica la creación de aplicaciones en tiempo real y cómo las herramientas emergentes los abordan con soluciones elegantes sobre las que es fácil razonar. Para hacer esto, crearemos una aplicación de encuestas en tiempo real (como una encuesta de Twitter con estadísticas generales en tiempo real) simplemente usando Postgres, GraphQL, React y sin código backend.

    El enfoque principal será configurar el backend (implementar herramientas listas para usar, modelado de esquemas) y aspectos de la integración del frontend con GraphQL y menos en UI/UX del frontend (algunos conocimientos de ReactJS ayudarán). La sección del tutorial adoptará un enfoque de pintura por números, por lo que simplemente clonaremos un repositorio de GitHub para el modelado del esquema y la interfaz de usuario y lo modificaremos, en lugar de crear toda la aplicación desde cero.

     

    Todo lo relacionado con GraphQL

    ¿Sabes todo lo que necesitas saber sobre GraphQL? Si tienes dudas, Eric Baer te las cubre con una guía detallada sobre sus orígenes, sus inconvenientes y los conceptos básicos de cómo trabajar con él.Leer un artículo relacionado →

    Antes de continuar leyendo este artículo, me gustaría mencionar que es beneficioso tener conocimiento práctico de las siguientes tecnologías (o sustitutos):

    • ReactJS
      Esto se puede reemplazar con cualquier marco de interfaz, Android o IOS, siguiendo la documentación de la biblioteca del cliente.
    • Postgres
      Puedes trabajar con otras bases de datos pero con diferentes herramientas, los principios descritos en esta publicación seguirán aplicándose.

    También puedes adaptar muy fácilmente el contexto de este tutorial para otras aplicaciones en tiempo real.

    Como se ilustra en la carga útil GraphQL adjunta en la parte inferior, hay tres características principales que debemos implementar:

    1. Obtenga la pregunta de la encuesta y una lista de opciones (arriba a la izquierda).
    2. Permitir que un usuario vote por una pregunta de encuesta determinada (el botón "Votar").
    3. Obtenga los resultados de la encuesta en tiempo real y muéstrelos en un gráfico de barras (arriba a la derecha; podemos pasar por alto la función para obtener una lista de los usuarios actualmente en línea, ya que es una réplica exacta de este caso de uso).

    Desafíos de la creación de aplicaciones en tiempo real

    La creación de aplicaciones en tiempo real (especialmente como desarrollador frontend o alguien que recientemente hizo una transición para convertirse en desarrollador fullstack) es un problema de ingeniería difícil de resolver. Generalmente así es como funcionan las aplicaciones contemporáneas en tiempo real (en el contexto de nuestra aplicación de ejemplo):

    1. El frontend actualiza una base de datos con cierta información; El voto de un usuario se envía al backend, es decir, encuesta/opción e información del usuario ( user_id, option_id).
    2. La primera actualización activa otro servicio que agrega los datos de la encuesta para generar un resultado que se transmite a la aplicación en tiempo real (cada vez que alguien emite un nuevo voto; si esto se hace de manera eficiente, solo se procesan los datos de la encuesta actualizados y Sólo se actualizan aquellos clientes que se han suscrito a esta encuesta):
      • Los datos de votación son procesados ​​primero por un register_voteservicio (supongamos que aquí ocurre alguna validación) que activa un poll_resultsservicio.
      • El servicio transmite datos de encuestas agregados en tiempo real poll_resultsa la interfaz para mostrar estadísticas generales.

    Una aplicación de encuestas diseñada tradicionalmente

     

    Este modelo se deriva de un enfoque tradicional de creación de API y, en consecuencia, tiene problemas similares:

    1. Cualquiera de los pasos secuenciales podría salir mal, dejando la UX colgada y afectando otras operaciones independientes.
    2. Requiere mucho esfuerzo en la capa API, ya que es un único punto de contacto para la aplicación frontend, que interactúa con múltiples servicios. También necesita implementar una API en tiempo real basada en websockets; no existe un estándar universal para esto y, por lo tanto, el soporte para la automatización en las herramientas es limitado.
    3. Se requiere que la aplicación frontend agregue la plomería necesaria para consumir la API en tiempo real y también puede que tenga que resolver el problema de coherencia de datos que normalmente se ve en las aplicaciones en tiempo real (menos importante en nuestro ejemplo elegido, pero crítico para ordenar mensajes en un entorno real). -aplicación de chat de tiempo).
    4. Muchas implementaciones recurren al uso de bases de datos no relacionales adicionales en el lado del servidor (Firebase, etc.) para facilitar la compatibilidad con API en tiempo real.

    Echemos un vistazo a cómo GraphQL y las herramientas asociadas abordan estos desafíos.

    ¿Qué es GraphQL?

    GraphQL es una especificación para un lenguaje de consulta para API y un tiempo de ejecución del lado del servidor para ejecutar consultas. Esta especificación fue desarrollada por Facebook para acelerar el desarrollo de aplicaciones y proporcionar un formato de acceso a datos estandarizado e independiente de la base de datos. Cualquier servidor GraphQL que cumpla con las especificaciones debe admitir lo siguiente:

    1. Consultas para lecturas
      Un tipo de solicitud para solicitar datos anidados de una fuente de datos (que puede ser una base de datos o una combinación de ellas, una API REST u otro esquema/servidor GraphQL).
    2. Mutaciones para escrituras
      Un tipo de solicitud para escribir/retransmitir datos en las fuentes de datos antes mencionadas.
    3. Suscripciones para consultas en vivo
      Un tipo de solicitud para que los clientes se suscriban a actualizaciones en tiempo real.

    GraphQL también utiliza un esquema escrito. El ecosistema tiene muchas herramientas que lo ayudan a identificar errores en el momento de desarrollo/compilación, lo que resulta en menos errores de tiempo de ejecución.

    He aquí por qué GraphQL es excelente para aplicaciones en tiempo real:

    • Las consultas en vivo (suscripciones) son una parte implícita de la especificación GraphQL. Cualquier sistema GraphQL debe tener capacidades API nativas en tiempo real.
    • Una especificación estándar para consultas en tiempo real ha consolidado los esfuerzos de la comunidad en torno a las herramientas del lado del cliente, lo que ha dado como resultado una forma muy intuitiva de integración con las API GraphQL.

    GraphQL y una combinación de herramientas de código abierto para eventos de bases de datos y funciones sin servidor/en la nube ofrecen un excelente sustrato para crear aplicaciones nativas de la nube con lógica empresarial asincrónica y funciones en tiempo real que son fáciles de construir y administrar. Este nuevo paradigma también da como resultado una excelente experiencia para usuarios y desarrolladores.

     

    En el resto de este artículo, utilizaré herramientas de código abierto para crear una aplicación basada en este diagrama de arquitectura:

    Una aplicación de encuestas diseñada con GraphQL

    Creación de una aplicación de votación/encuesta en tiempo real

    Con esa introducción a GraphQL, volvamos a crear la aplicación de encuestas como se describe en la primera sección.

    Las tres características (o historias destacadas) se han elegido para demostrar los diferentes tipos de solicitudes GraphQL que realizará nuestra aplicación:

    1. Consulta
      Obtenga la pregunta de la encuesta y sus opciones.
    2. Mutación
      Permite que un usuario emita un voto.
    3. Suscripción
      Muestra un panel en tiempo real para los resultados de la encuesta.

    Tipos de solicitudes GraphQL en la aplicación de encuesta ( vista previa grande )

    Requisitos previos

    • Una cuenta Heroku (use el nivel gratuito, no se requiere tarjeta de crédito)
      Para implementar un backend GraphQL (consulte el siguiente punto a continuación) y una instancia de Postgres.
    • Hasura GraphQL Engine (gratis, de código abierto)
      Un servidor GraphQL listo para usar en Postgres.
    • Cliente Apollo (SDK gratuito y de código abierto)
      Para integrar fácilmente aplicaciones de clientes con un servidor GraphQL.
    • npm (administrador de paquetes gratuito y de código abierto)
      Para ejecutar nuestra aplicación React.

    Implementación de la base de datos y un backend GraphQL

    Implementaremos una instancia de Postgres y GraphQL Engine en el nivel gratuito de Heroku. Podemos usar un ingenioso botón Heroku para hacer esto con un solo clic.

    Nota: También puede seguir este enlace o buscar documentación sobre la implementación de Hasura GraphQL para Heroku (u otras plataformas).

    Implementación de Postgres y GraphQL Engine en el nivel gratuito de Heroku ( vista previa grande )

    No necesitará ninguna configuración adicional y simplemente puede hacer clic en el botón "Implementar aplicación". Una vez que se complete la implementación, tome nota de la URL de la aplicación:

    app-name.herokuapp.com

    Por ejemplo, en la captura de pantalla anterior, sería:

    hge-realtime-app-tutorial.herokuapp.com

    Lo que hemos hecho hasta ahora es implementar una instancia de Postgres (como un complemento en el lenguaje Heroku) y una instancia de GraphQL Engine que está configurada para usar esta instancia de Postgres. Como resultado de hacerlo, ahora tenemos una API GraphQL lista para usar pero, como no tenemos tablas ni datos en nuestra base de datos, esto aún no es útil. Entonces, abordemos esto de inmediato. Scifi books reviews

     

    Modelado del esquema de la base de datos

    El siguiente diagrama de esquema captura un esquema de base de datos relacional simple para nuestra aplicación de encuesta:

    Diseño de esquema para la aplicación de encuestas. ( Vista previa grande )

    Como puede ver, el esquema es simple y normalizado que aprovecha las restricciones de clave externa. Son estas restricciones las que el motor GraphQL interpreta como relaciones 1:1 o 1:muchos (por ejemplo, poll:optionses una relación 1:muchos, ya que cada encuesta tendrá más de 1 opción que está vinculada por la restricción de clave externa entre la idcolumna del polltabla y la poll_idcolumna de la optiontabla). Los datos relacionados se pueden modelar como un gráfico y, por lo tanto, pueden impulsar una API GraphQL. Esto es precisamente lo que hace el motor GraphQL.

    Con base en lo anterior, tendremos que crear las siguientes tablas y restricciones para modelar nuestro esquema:

    1. Poll
      Una tabla para capturar la pregunta de la encuesta.
    2. Option
      Opciones para cada encuesta.
    3. Vote
      Para registrar el voto de un usuario.
    4. Restricción de clave externa entre los siguientes campos ( table : column):
      • option : poll_id → poll : id
      • vote : poll_id → poll : id
      • vote : created_by_user_id → user : id

    Ahora que tenemos nuestro diseño de esquema, implementémoslo en nuestra base de datos Postgres. Para mostrar este esquema instantáneamente, esto es lo que haremos:

    1. Descargue la CLI del motor GraphQL.
    2. Clona este repositorio:
      $ git clone clone https://github.com/hasura/graphql-engine$ cd graphql-engine/community/examples/realtime-poll
    3. Ir hasura/y editar config.yaml:
      endpoint: https://app-name.herokuapp.com
    4. Aplique las migraciones usando la CLI, desde el directorio del proyecto (que acaba de descargar mediante clonación):
      $ hasura migrate apply

    Eso es todo para el backend. Ahora puede abrir la consola de GraphQL Engine y verificar que todas las tablas estén presentes (la consola está disponible en `https://.herokuapp.com/console`).

    Nota: También podría haber usado la consola para implementar el esquema creando tablas individuales y luego agregando restricciones usando una interfaz de usuario. Usar el soporte integrado para migraciones en GraphQL Engine es solo una opción conveniente que estaba disponible porque nuestro repositorio de muestra tiene migraciones para mostrar las tablas requeridas y configurar relaciones/restricciones (esto también es muy recomendable independientemente de si está creando un pasatiempo). proyecto o una aplicación lista para producción).

    Integración de la aplicación Frontend React con el backend GraphQL

    La interfaz de este tutorial es una aplicación sencilla que muestra la pregunta de la encuesta, la opción de votar y los resultados agregados de la encuesta en un solo lugar. Como mencioné anteriormente, primero nos centraremos en ejecutar esta aplicación para que usted obtenga la gratificación instantánea de usar nuestra API GraphQL recientemente implementada. Vea cómo los conceptos GraphQL que analizamos anteriormente en este artículo impulsan los diferentes casos de uso de dicha aplicación. y luego explore cómo funciona la integración GraphQL internamente.

     

    NOTA: Si es nuevo en ReactJS, es posible que desee consultar algunos de estos artículos . No entraremos en detalles de la parte React de la aplicación y, en cambio, nos centraremos más en los aspectos GraphQL de la aplicación. Puede consultar el código fuente en el repositorio para obtener detalles sobre cómo se creó la aplicación React .

    Configurar la aplicación frontend

    1. En el repositorio clonado en la sección anterior, edítelo HASURA_GRAPHQL_ENGINE_HOSTNAMEen el archivo src/apollo.js (dentro de la /community/examples/realtime-pollcarpeta) y configúrelo en la URL de la aplicación Heroku desde arriba:
      export const HASURA_GRAPHQL_ENGINE_HOSTNAME = 'random-string-123.herokuapp.com';
    2. Vaya a la raíz del repositorio/carpeta de aplicaciones ( /realtime-poll/) y use npm para instalar los módulos necesarios y luego ejecute la aplicación:
      $ npm install$ npm start

    Captura de pantalla de la aplicación de encuesta en vivo ( vista previa grande )

    Deberías poder jugar con la aplicación ahora. Anímate y vota tantas veces como quieras, notarás que los resultados cambian en tiempo real. De hecho, si configura otra instancia de esta interfaz de usuario y la apunta al mismo backend, podrá ver los resultados agregados en todas las instancias.

    Entonces, ¿cómo utiliza GraphQL esta aplicación? Sigue leyendo.

    Detrás de escena: GraphQL

    En esta sección, exploraremos las funciones de GraphQL que impulsan la aplicación, seguidas de una demostración de la facilidad de integración en la siguiente.

    El componente de la encuesta y el gráfico de resultados agregados

    El componente de encuesta en la parte superior izquierda que busca una encuesta con todas sus opciones y captura el voto de un usuario en la base de datos. Ambas operaciones se realizan utilizando la API GraphQL. Para obtener los detalles de una encuesta, realizamos una consulta (¿recuerdas esto de la introducción a GraphQL?):

    query { poll { id question options { id text } }}

    Usando el componente Mutación de react-apollo, podemos conectar la mutación a un formulario HTML de modo que la mutación se ejecute usando variables optionIdy userIdcuando se envíe el formulario:

    mutation vote($optionId: uuid!, $userId: uuid!) { insert_vote(objects: [{option_id: $optionId, created_by_user_id: $userId}]) { returning { id } }}

    Para mostrar los resultados de la encuesta, debemos derivar el recuento de votos por opción a partir de los datos de la tabla de votación. Podemos crear una vista de Postgres y rastrearla usando GraphQL Engine para que estos datos derivados estén disponibles en GraphQL.

    CREATE VIEW poll_results AS SELECT poll.id AS poll_id, o.option_id, count(*) AS votes FROM (( SELECT vote.option_id, option.poll_id, option.text FROM ( vote LEFT JOIN public.option ON ((option.id = vote.option_id)))) o LEFT JOIN poll ON ((poll.id = o.poll_id))) GROUP BY poll.question, o.option_id, poll.id;

    La poll_resultsvista combina datos de tablas votey pollpara proporcionar un recuento agregado del número de votos por cada opción.

     

    Al usar las suscripciones GraphQL en esta vista, reaccionar-google-charts y el componente de suscripción de react-apollo, podemos conectar un gráfico reactivo que se actualiza en tiempo real cuando ocurre una nueva votación de cualquier cliente.

    subscription getResult($pollId: uuid!) { poll_results(where: {poll_id: {_eq: $pollId}}) { option { id text } votes }}

    Integración de la API GraphQL

    Como mencioné anteriormente, utilicé Apollo Client, un SDK de código abierto para integrar una aplicación ReactJS con el backend GraphQL. Apollo Client es análogo a cualquier biblioteca de cliente HTTP, como solicitudes de Python , el módulo http estándar para JavaScript , etc. Encapsula los detalles de cómo realizar una solicitud HTTP (en este caso, solicitudes POST). Utiliza la configuración (especificada en src/apollo.js) para realizar solicitudes de consulta/mutación/suscripción (especificada en src/GraphQL.jsx con la opción de usar variables que se pueden sustituir dinámicamente en el código JavaScript de su aplicación REACT) a un punto final GraphQL. También aprovecha el esquema escrito detrás del punto final GraphQL para proporcionar validación del tiempo de compilación/desarrollo para las solicitudes antes mencionadas. Veamos qué tan fácil es para una aplicación cliente realizar una solicitud de consulta en vivo (suscripción) a la API GraphQL.

    Configurando el SDK

    El SDK del cliente Apollo debe apuntar a un servidor GraphQL, para que pueda manejar automáticamente el código repetitivo que normalmente se necesita para dicha integración. Entonces, esto es exactamente lo que hicimos cuando modificamos src/apollo.js al configurar la aplicación frontend.

    Realizar una solicitud de suscripción GraphQL (Live-Query)

    Defina la suscripción que vimos en la sección anterior en el archivo src/GraphQL.jsx :

    const SUBSCRIPTION_RESULT = `subscription getResult($pollId: uuid!) { poll_results ( order_by: option_id_desc, where: { poll_id: {_eq: $pollId} } ) { option_id option { id text } votes }}`;

    Usaremos esta definición para conectar nuestro componente React:

    export const Result = (pollId) = ( Subscription subscription={gql`${SUBSCRIPTION_RESULT}`} variables={pollId} {({ loading, error, data }) = { if (loading) return 

    Loading.../p; if (error) return

    Error :/p; return ( div div {renderChart(data)} /div /div ); }} /Subscription)

    Una cosa a tener en cuenta aquí es que la suscripción anterior también podría haber sido una consulta. Simplemente reemplazar una palabra clave por otra nos da una "consulta en vivo", y eso es todo lo que necesita el SDK del cliente Apollo para conectar esta API en tiempo real con su aplicación. Cada vez que hay un nuevo conjunto de datos de nuestra consulta en vivo, el SDK activa una nueva representación de nuestro gráfico con estos datos actualizados (mediante la renderChart(data)llamada). Eso es todo. ¡Es realmente así de simple!

     

    Pensamientos finales

    En tres sencillos pasos (crear un backend GraphQL, modelar el esquema de la aplicación e integrar el frontend con la API GraphQL), puede conectar rápidamente una aplicación en tiempo real completamente funcional, sin enredarse en detalles innecesarios como la configuración. una conexión websocket. Ahí está el poder de las herramientas comunitarias que respaldan una abstracción como GraphQL.

    Si esto le ha resultado interesante y desea explorar GraphQL más a fondo para su próximo proyecto paralelo o aplicación de producción, aquí hay algunos factores que quizás desee utilizar para crear su cadena de herramientas GraphQL:

    • Rendimiento y escalabilidad
      GraphQL está destinado a ser consumido directamente por aplicaciones frontend (no es mejor que un ORM en el backend; los beneficios reales de productividad se obtienen al hacer esto). Por lo tanto, sus herramientas deben ser inteligentes en cuanto al uso eficiente de las conexiones de bases de datos y deben poder escalarse sin esfuerzo.
    • Seguridad
      De lo anterior se deduce que se necesita un sistema maduro de control de acceso basado en roles para autorizar el acceso a los datos.
    • Automatización
      Si es nuevo en el ecosistema GraphQL, escribir a mano un esquema GraphQL e implementar un servidor GraphQL pueden parecer tareas desalentadoras. Maximice la automatización de sus herramientas para poder concentrarse en las cosas importantes, como crear funciones de interfaz centradas en el usuario.
    • Arquitectura
      Por muy triviales que parezcan los esfuerzos anteriores, la arquitectura backend de una aplicación de nivel de producción puede implicar conceptos avanzados de GraphQL como unión de esquemas, etc. Además, la capacidad de generar/consumir fácilmente API en tiempo real abre la posibilidad de construir API asincrónicas. Aplicaciones reactivas que son resistentes e inherentemente escalables. Por lo tanto, es fundamental evaluar cómo las herramientas GraphQL pueden optimizar su arquitectura.

    Recursos Relacionados

    • Puede consultar una versión en vivo de la aplicación aquí .
    • El código fuente completo está disponible en GitHub .
    • Si desea explorar el esquema de la base de datos y ejecutar consultas GraphQL de prueba, puede hacerlo aquí .

    (rb, ra, yk, il)Explora más en

    • Aplicaciones
    • javascript
    • GrafoQL





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear una aplicación en tiempo real con suscripciones GraphQL en Postgres

    Cómo crear una aplicación en tiempo real con suscripciones GraphQL en Postgres

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Clase magistral de tipografía, con Elliot Jay Stocks Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-crear-una-aplicacion-en-tiempo-real-con-suscripciones-graphql-en-postgres-959-0.jpg

    2024-05-20

     

    Cómo crear una aplicación en tiempo real con suscripciones GraphQL en Postgres
    Cómo crear una aplicación en tiempo real con suscripciones GraphQL en Postgres

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20