Crear una aplicación de notas adhesivas con 8base, GraphQL y React

Vea la versión demo del programa aquí .

En todo momento, la gestión del tiempo ha sido una gran lucha para mí, las tareas planificadas se olvidan, las notas se pierden, porque se distribuyen en varias aplicaciones que guardan notas. La solución no está en absoluto en la aplicación para notas personalizadas, que sugiero que cree, aunque es probable que la use debido al tiempo que le dedicó.

Para crear una aplicación para tomar notas, necesitamos una pila simple que prácticamente no requiera un backend de desarrollo, y una aplicación que pueda implementarse fácilmente. Según estos requisitos, elegiremos la pila para la aplicación. Se ve así:
-React - para desarrollo front-end. Esta es una biblioteca popular para crear interfaces de usuario, se puede implementar fácilmente en varias plataformas, como Now y Netlify.
-8base GraphQL - capa de base de datos para nuestra aplicación. Aquí almacenaremos y leeremos solicitudes en nuestra aplicación. Con 8base, no necesita crear y mantener un back-end para la aplicación.

He creado con éxito una aplicación simple usando estas herramientas. En este artículo, veremos el proceso de creación de esta aplicación y la configuración de un back-end que se ejecuta en la plataforma 8base.



Si las capturas de pantalla no son convenientes para usted, siempre puede ver una aplicación de demostración . Las notas se colocan al azar en una página web y se pueden arrastrar a diferentes lugares.

Seguir las instrucciones requiere una comprensión básica de React y Node.js. Antes de comenzar, asegúrese de tener instalado Node y npm / yarn .

También usaremos consultas GraphQL en el proyecto, por lo que será útil familiarizarse con esta tecnología.

La plataforma 8base ofrece una amplia gama de características para ayudar a los desarrolladores a crear aplicaciones más rápido y más fácil. Con 8base, puede organizar fácilmente el back-end de su aplicación sin escribir código. Usando la plataforma 8base, puede crear su backend usando una interfaz gráfica simple que le permite realizar acciones como:

• Defina su esquema de datos: cree tablas / relaciones de tabla.
• Subir archivos.
• Definir derechos de acceso y roles de autorización.
• Gestiona varios proyectos usando talleres.
• Diseñe consultas utilizando el API Explorer (basado en GraphQL).

En esta guía, veremos cómo usar 8base para configurar rápidamente el lado del servidor y procesar datos usando la API GraphQL. Nuestra aplicación front-end se creará con React e interactuará con el servidor con GraphQL.

Para comenzar a usar 8base, siga estos pasos:

1. Cree una cuenta en 8base. Es gratis



2. Después de completar el registro, haga clic en el botón Generador de datos para ir a la página Datos y haga clic en Nueva tabla para comenzar a configurar el back-end.



3. Después de cargar una nueva tabla, se lo dirigirá al esquema y podrá comenzar a definir los campos. Notemos un par de cosas. A la izquierda verá Tablas del sistema y Sus tablas .

Cada nuevo espacio de trabajo de 8base viene automáticamente con varias tablas integradas. Estas tablas se utilizan para cosas como archivos, configuraciones y permisos, y todas son accesibles a través de la API GraphQL de 8base.

4. Continúe y cree la tabla de Notas , que consta de los siguientes campos:

título : tipo de campo Texto . Aquí estará el título de la nota.
texto : tipo del campo de texto . Este campo contendrá el cuerpo de la nota.
Nuestro esquema es bastante simple y se utiliza para lograr las oportunidades que estamos tratando de aprovechar.



5. Luego copie la URL de la API de punto final (disponible en la parte inferior izquierda): esta es la línea principal de comunicación entre el cliente y las partes del servidor de su aplicación.



6. Finalmente, a los fines de esta guía, permitiremos de forma predeterminada el acceso público a los invitados , por lo que no se requiere autenticación. Para permitir el acceso de invitados a la nueva tabla de Notas, vaya a Configuración> Roles> Invitado y marque las casillas correspondientes en la sección Notas. A todos los usuarios no autorizados que acceden a su punto final de API se les asigna la función Invitado de forma predeterminada. La autorización no está cubierta en esta guía. Aquí puede obtener más información sobre cómo trabajar con él.



Ahora que hemos terminado de configurar el backend usando 8base, comenzaremos a trabajar en el lado frontal de la aplicación.

Empezando

Creé un proyecto inicial para configurar y reducir fácilmente los gastos generales, de modo que el artículo básicamente describa cómo comenzar con 8base y GraphQL. El esqueleto de la aplicación ya está configurado, incluidos los estilos y la estructura del proyecto. Las siguientes opciones están disponibles en la rama inicial:

1. Un componente del formulario de nota para crear una nota.
2. Un componente de una nota que muestra los detalles de una sola nota.
3. Un componente de lista de notas que muestra una lista de notas disponibles.

Ejecute el siguiente comando para clonar el repositorio:

git clone -b starter https://github.com/HackAfro/note-app.git 

Abra la carpeta e instale las dependencias del proyecto ejecutando el siguiente comando:

 npm install 

Inicie el servidor de aplicaciones React ejecutando npm start en el terminal en la carpeta raíz de su proyecto.

Conéctese al backend de 8base usando GraphQL

Ahora que nuestro frontend inicial está en funcionamiento, el siguiente paso es configurar el cliente para interactuar con el backend de 8base usando GraphQL. Una biblioteca útil para ayudarlo a conectarse es apollo-boost ; proporciona un cliente para conectarse al backend GraphQL usando un URI. URI es un punto final proporcionado por 8base. Actualicemos el archivo index.js para configurar ApolloClient.

 import React from "react"; import ReactDOM from "react-dom"; import { ApolloProvider } from "react-apollo"; import ApolloClient from "apollo-boost"; import * as serviceWorker from "./serviceWorker"; import "./index.css"; import App from "./App"; const client = new ApolloClient({ uri: "<YOUR_8BASE_ENDPOINT>" }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById("root") ); serviceWorker.unregister(); 

ApolloClient toma un objeto con la propiedad uri como argumento; Al mismo tiempo, el cliente nos da acceso para recibir, actualizar y eliminar datos utilizando la uri proporcionada. Asegúrese de reemplazar el valor de <YOUR_8BASE_ENDPOINT> con el punto final real.

Luego envolvemos la aplicación en ApolloProvider, que acepta el cliente prop. ApolloProvider carga el esquema de la tabla 8base, que le da acceso a todas las propiedades del modelo de datos en su código front-end.

Recibe y muestra notas

Para obtener notas del backend, escribiremos una consulta GraphQL para recibir notas almacenadas en 8base. Comencemos actualizando el archivo App.js.

Agregue las siguientes importaciones donde encuentre el comentario TODO - 1:

 import gql from "graphql-tag"; import { graphql } from "react-apollo"; 

Serán útiles para crear consultas GraphQL y enviar accesorios al componente de la aplicación para tomar notas. A continuación, debemos agregar una solicitud para recibir notas del lado del servidor. Actualice NOTE_LIST_QUERY para que se vea como el fragmento a continuación:

 const NOTE_LIST_QUERY = gql` query { notesList { items { id title text } } } `; 

Si no está seguro acerca de sus solicitudes, siempre puede probarlas en el explorador de API de 8base . Verifiquemos la consulta anterior.

Si ejecuta esta consulta en su explorador, lo más probable es que devuelva una matriz vacía, porque no creó ninguna nota. Podemos crear notas fácilmente usando la barra de herramientas de 8base. Siga el enlace de datos en la barra lateral y siga las instrucciones en las capturas de pantalla a continuación:



Obtendremos id , título y texto de los elementos notesList. A continuación, prepararemos el componente de la aplicación para usar las notas recibidas de la solicitud. Finalmente, usaremos el Graphql HOC (Componente de orden superior) para asociar la consulta con el componente de la aplicación . La función acepta la cadena de consulta y los parámetros de configuración.
// TODO - 3

  export default graphql(NOTE_LIST_QUERY, { props: (result) => { const { data } = result; const { loading, refetch } = data; let notes = []; if (data && data.notesList) notes = data.notesList.items; return { loading, notes, refetch, }; }, })(App); 

Reemplace la línea de exportación existente debajo del comentario TODO - 3 anterior.

La función graphql devuelve una función "potenciador", que extenderá cualquier componente que se le pase con capacidades GraphQL. Esto corresponde al patrón de componentes de alto orden que también utiliza la función de conexión en respuesta-redux.

Usando la función graphql() , podemos acceder al punto final GraphQL. Como primer parámetro, acepta la solicitud (NOTE_LIST_QUERY), la segunda configuración, el valor de retorno es HOC, que debe ejecutarse con el componente requerido como argumento. En el fragmento, pasamos el valor de la propiedad data.noteList nuevas notas variables. Al devolver este valor, podemos acceder a él dentro del componente como props.notes y al estado de descarga como props.loading .

El método de recuperación será muy útil para que podamos lograr algo cercano a la actualización en tiempo real. Llamaremos a la función después de cada mutación para asegurarnos de que los datos en la aplicación siempre estén sincronizados con el backend de 8base.
Si cambia a localhost: 3000, verá la nota que acaba de crear. Necesitamos poder crear notas sin visitar la barra de herramientas de 8base, esto significa pasar al siguiente nivel de GraphQL ... Mutaciones!

Crear notas

Después de completar la configuración para recibir notas del backend, el siguiente paso lógico es agregar la capacidad de crear notas. Los archivos iniciales contienen el componente de formulario, y necesitamos actualizar el componente para permitir que la mutación guarde las notas creadas en el backend de 8base.

En la sección anterior, ejecutamos la solicitud para recibir notas del backend, en esta sección realizaremos mutaciones para guardar nuevas notas, la mutación es similar a la solicitud, con la única diferencia de que la mutación se activa siempre que sea necesario cambiar los datos. Después de crear tablas en 8base, las consultas y mutaciones para esta tabla son fácilmente accesibles en la API de Explorer; por lo tanto, siempre podemos llegar allí si dudamos de cómo debería estructurarse la mutación.

Veamos cómo se ve la mutación para crear notas en el Explorador de API. Vaya a la barra de herramientas de 8base y haga clic en el Explorador de API en la barra lateral.

En el Explorador de API, haga clic en el enlace de mutación , como se muestra arriba. Esto mostrará todas las mutaciones disponibles. Busque lo que es responsable de crear notas:



La captura de pantalla muestra que el nombre de la mutación es noteCreate , y toma un argumento de tipo NoteCreateInput . NoteCreateInput : define el tipo de cuerpo de solicitud requerido para crear una nota.

Ahora que sabemos lo que se requiere de nosotros, comencemos con la implementación. Te cuidé y creé un formulario para crear notas, por lo que queda agregar una mutación al componente usando la función graphql .

Abra src / components / note-form / index.js , agregue las siguientes importaciones donde tenga un comentario TODO 1.:

 import gql from "graphql-tag"; import { graphql } from "react-apollo"; 

A continuación, declararemos la mutación, actualizaremos la variable NOTE_MUTATION y le asignaremos un nuevo valor, similar al fragmento a continuación:

 const NOTE_MUTATION = gql` mutation NoteCreate($data: NoteCreateInput!) { noteCreate(data: $data) { id } } `; 

A continuación, asociamos la mutación con el componente utilizando la función graphql . Reemplace la línea de exportación en el archivo con el fragmento a continuación:

 export default graphql(NOTE_MUTATION, { name: "noteCreate" })(NoteForm); 

Por lo tanto, la función graphql pasa la función nombrada noteCreate , que se utilizará para realizar la mutación de creación. Usemos la función noteCreate para crear una nota al enviar un formulario.

Vaya al comentario TODO 4 y actualice la función de envío para que se vea como el fragmento a continuación:
// TODO - 4

  const submit = async note => { const res = await noteCreate({ variables: { data: note } }); if (res.data.noteCreate.id) { setNote({ title: "", text: "" }); refetch() } }; 

En el fragmento anterior, utilizamos la función noteCreate para realizar la mutación de creación en la tabla de notas. El argumento pasado a la función es un objeto que contiene variables y un cuerpo de datos .

Esperamos hasta que se complete la solicitud, luego verificamos su éxito al encontrar la identificación en el cuerpo de la respuesta. Luego restablecemos el estado de la nota y volvemos a buscar. Mencioné la función refetch anteriormente en este artículo, pero déjame actualizar tu memoria. Refetch obliga a su componente a repetir la consulta que definió en la función graphql() .

Ahora todo está listo para probar. Vaya a localhost: 3000, complete el formulario y disfrute el resultado.

Eliminar notas

De qué sirve una aplicación para tomar notas si no puede eliminar todas sus notas y pretender que nunca existieron. Procedimiento para eliminar una nota:

1. El usuario hace clic en el botón Eliminar.
2. Aparece una ventana de confirmación: esto reduce la cantidad de usuarios malintencionados, muy útil.
3. Queda por cometer un acto: eliminar la nota.

La configuración para eliminar notas se encuentra en el archivo src / note-card / delete-button.js . Abra el archivo y agregue las siguientes importaciones en la parte superior del archivo. En particular, a continuación, donde se encuentra TODO 1:

 import gql from 'graphql-tag'; import { graphql } from 'react-apollo'; 

Luego escriba la mutación de eliminación y asígnela a la variable DELETE_MUTATION . Esto debería parecerse a lo siguiente:

 const DELETE_MUTATION = gql` mutation DeleteNote($data: NoteDeleteInput!) { noteDelete(data: $data) { success } } `; 

A continuación, asociamos la mutación con el componente utilizando la función graphql . Reemplace la línea de exportación en el archivo con el fragmento a continuación:

 export default graphql(DELETE_MUTATION, { name: 'deleteNote', })(DeleteButton); 

La función graphql luego pasa la función nombrada deleteNote , que se utilizará para realizar la mutación delete. Ahora podemos actualizar el controlador de eventos de clic y agregar las configuraciones necesarias para eliminar la nota.

Vaya a la función onDeleteClick en el componente, coloque el siguiente fragmento dentro de la función:

 const onDeleteClick = async () => { const data = { id: noteId, }; const remove = window.confirm('Are you sure you want to delete this note?'); if (remove) { await deleteNote({ variables: { data } }); refetch(); } }; 

Cuando hace clic en el botón Eliminar, en el cuerpo del objeto de datos , establecemos el campo de identificación en noteId , y luego mostramos al usuario un mensaje de confirmación, indicando inequívocamente que tenemos la intención de eliminar permanentemente esta nota. Si el usuario hace lo previsto y decide continuar, llamamos a la función deleteNote para silenciar la eliminación. Cuando se completa esto, necesita una aplicación.

Así es como debería verse. Vaya a localhost: 3000 e intente eliminar la nota:


Puede encontrar una demostración de esta aplicación aquí .

Conclusión

Estoy seguro de que lo pasaste bien creando esta aplicación, analizamos cómo escribir consultas para recibir datos del lado del servidor de 8base, así como cómo escribir mutaciones de creación y eliminación . 8base como plataforma es relativamente fácil de navegar y ofrece una interfaz de usuario intuitiva. Pasé la noche descubriéndolo. Puede completar el agujero que falta aprendiendo cómo escribir mutaciones de actualización y agregar la capacidad de editar notas. Estoy seguro de que los usuarios estarán satisfechos. También puede ver su documentación oficial para obtener más información sobre la plataforma. Puede encontrar el código fuente de la aplicación aquí .