Aplicaci\u00f3n Fullstack React y GraphQL<\/h2>\n
Construyamos un Fullstack Reaccione<\/a> aplicaci\u00f3n utilizando GraphQL<\/a>. Este es un tutorial accesible pero esperamos cierta familiaridad con JavaScript, React, conceptos de GraphQL y NoSQL. Tambi\u00e9n usamos Docker para aprovisionar nuestro \u00fanico nodo Couchbase Server. Nos conectaremos a Couchbase a trav\u00e9s de Express-GraphQL, construido con Node JS<\/a> y JS expr\u00e9s<\/a> utilizando express-graphql<\/a>. A continuaci\u00f3n, consultaremos la API en React utilizando el m\u00e9todo Apolo GraphQL<\/a> cliente.<\/p>\n Antes de empezar a construir esta aplicaci\u00f3n, quiero hablar de nuestra elecci\u00f3n de utilizar un API GraphQL<\/a> en lugar de un API REST<\/a>A continuaci\u00f3n, pasaremos a la configuraci\u00f3n de nuestra base de datos.<\/p>\n GraphQL es un lenguaje de consulta fuertemente tipado para APIs. Es una forma declarativa de obtener datos, que est\u00e1 siendo adoptada r\u00e1pidamente por la comunidad JavaScript y otras comunidades. Permite un control granular sobre la obtenci\u00f3n de datos y ahorra tiempo al realizar llamadas adicionales a la API. Todas las consultas y mutaciones se realizan en un \u00fanico punto final, en lugar de en varios como REST. Esto significa menos c\u00f3digo que escribir gestionando URLs en React. Tambi\u00e9n una huella m\u00e1s peque\u00f1a sobre el cable. Para m\u00e1s informaci\u00f3n sobre GraphQL vs REST, sugiero una charla de Nate Barbettini titulada: Duelo de APIs: RPC vs REST vs GraphQL<\/a>.<\/p>\n Si est\u00e1 familiarizado con JSON encontrar\u00e1 que Sintaxis de consulta de GraphQL<\/a> f\u00e1cil de usar y sus datos f\u00e1ciles de explorar con GraphiQL<\/a>un IDE en el navegador que utilizamos para probar nuestras consultas y descubrir las posibilidades de cualquier API GraphQL.<\/p>\n Este IDE GraphiQL ser\u00e1 \u00fatil m\u00e1s adelante cuando tengamos que probar nuestros propios puntos finales GraphQL. GraphiQL est\u00e1 disponible para todos los servidores GraphQL. Por ejemplo, GitHub tiene una de las APIs GraphQL p\u00fablicas m\u00e1s antiguas (siendo uno de los primeros en adoptarla). Te permite explorar ese gr\u00e1fico de datos usando la API Explorador de la API GraphQL v4 de GitHub<\/a>.<\/p>\n Nota:<\/strong> GitHub ten\u00eda una de las API RESTful p\u00fablicas m\u00e1s populares conocidas por la comunidad de desarrolladores y en 2016 cambiaron a una aplicaci\u00f3n GraphQL en lugar de REST para su versi\u00f3n 4 de la API de GitHub. Esto reduce en gran medida el esfuerzo que un desarrollador tiene que pasar para utilizar la API de GitHub y hace que la experiencia del desarrollador sea mejor. Una solicitud es simplemente texto enviado a trav\u00e9s de un HTTP POST en una sintaxis que parece un h\u00edbrido entre JSON y funciones JS. La respuesta es una respuesta ligera (s\u00f3lo lo que ped\u00ed) de la API GraphQL. Estos son s\u00f3lo algunos de los beneficios que los desarrolladores obtienen del cambio de REST a GraphQL por parte de GitHub.<\/p>\n Para empezar nuestro proyecto, necesitamos datos. Vamos a abordar este proyecto como si tuvi\u00e9ramos un cliente que ya tiene una base de datos, en concreto, est\u00e1n utilizando Servidor Couchbase<\/a> como almac\u00e9n de documentos.<\/p>\n En SDK para NodeJS de Couchbase Server<\/a> proporciona las herramientas necesarias para conectarse a trav\u00e9s de Node JS y Express a nuestro servidor Couchbase y sus datos.<\/p>\n Para su informaci\u00f3n, hay muchos otros SDK disponibles adem\u00e1s de Node JS<\/a> para Couchbase Server, incluyendo C<\/a>, .NET<\/a>, Vaya a<\/a>, Java<\/a>, PHP<\/a>, Python<\/a>y Scala<\/a>.<\/p>\n Couchbase Server aprovecha tus conocimientos de SQL mediante la aplicaci\u00f3n Lenguaje de consulta de bases de datos N1QL (SQL para JSON)<\/a> que permite consultar Couchbase, un almac\u00e9n de datos de documentos NoSQL con una sintaxis casi id\u00e9ntica a SQL.<\/p>\n Si decide descargar e instalar Couchbase localmente y no desea utilizar Docker, simplemente pase a las instrucciones de instalaci\u00f3n manual<\/a>. Para obtener ayuda sobre Docker, visite docs.docker.com<\/a>.<\/p>\n Obtener el Vamos a clonar un repositorio existente para obtener el archivo Construir una nueva imagen a partir de Ejecuta esa nueva imagen:<\/p>\n Si tienes problemas para ejecutar el \u00faltimo comando, puede ser que no tengas una red llamada \"bridge\". En este caso, ejecute En este punto, podemos visitar localhost:8091<\/a> e inicie sesi\u00f3n con el Si ha instalado con Docker puede pasar a la secci\u00f3n siguiente<\/a>.<\/p>\n El proceso de instalaci\u00f3n es muy sencillo y le cubrimos todas las necesidades. Linux<\/a>, Mac<\/a>y Windows<\/a>.<\/p>\n Una vez instalado, puede acceder a la consola web del servidor Couchbase mediante localhost:8091<\/a>.<\/p>\n Desde esta pantalla, puede hacer clic en \"Configurar un nuevo cl\u00faster<\/a>“.<\/p>\n El nombre del cluster depende de ti y representa todos tus buckets Couchbase. El usuario y contrase\u00f1a admin es una cuenta de administrador del servidor para acceder al panel de control de todo el servidor, no es un usuario y contrase\u00f1a para conectarse a un bucket espec\u00edfico desde nuestra aplicaci\u00f3n Express. Eso lo veremos m\u00e1s adelante.<\/p>\n Configur\u00e9 mi cluster con los servicios por defecto y cuotas de memoria.<\/p>\n Accedamos al Dashboard del Servidor Couchbase y hagamos click en \"Servidores\" para ver nuestro servidor creado inicialmente.<\/p>\n A continuaci\u00f3n, haga clic en \"Buckets\". A Couchbase Cubo<\/a> es una colecci\u00f3n de documentos. Puedes \"A\u00f1adir Cubo\" para crear tu propia colecci\u00f3n de documentos, o a\u00f1adir datos de muestra. Si has seguido las instrucciones del archivo Docker el El uso de esta base de datos de ejemplo nos permitir\u00e1 dar el pistoletazo de salida con nuestra aplicaci\u00f3n Fullstack React y GraphQL y empezamos con Express para construir nuestra API y esto nos facilitar\u00e1 las cosas puesto que ya tenemos datos e \u00edndices configurados.<\/p>\n Los \u00edndices se configuran autom\u00e1ticamente en este Si quieres saber m\u00e1s y crear tus propios cubos e \u00edndices, consulte este art\u00edculo<\/a>!<\/p>\n Su cubo debe ser similar al cubo de la imagen de abajo:<\/p>\n Si hacemos clic en el bot\u00f3n \"Documentos\" podemos ver algunos de los datos de nuestro Bucket:<\/p>\n Haciendo clic en \"Editar documento como JSON\" para ver el JSON del valor de esa clave espec\u00edfica e incluso podemos editar los datos desde aqu\u00ed. \u00a1Pru\u00e9balo!<\/p>\n Antes de seguir adelante, queremos hacer clic en la pesta\u00f1a \"Seguridad\" y configurar un usuario para conectarse a este cubo.<\/p>\n Una vez en la p\u00e1gina \"Seguridad\", haz clic en \"Crear usuario\". A\u00f1ade un nombre de usuario y una contrase\u00f1a espec\u00edficos para conectarte al bucket desde nuestra aplicaci\u00f3n Express. He utilizado mi propio nombre y coincidir\u00e1 con la informaci\u00f3n del c\u00f3digo fuente del proyecto. As\u00ed que recuerda usar tu nombre y actualizar el c\u00f3digo seg\u00fan sea necesario.<\/p>\n Aseg\u00farese de marcar la casilla \"Acceso a aplicaciones\" para nuestro Para esta demostraci\u00f3n, nuestros \u00edndices se generaron autom\u00e1ticamente. Si quisieras a\u00f1adir \u00edndices, puedes a\u00f1adirlos usando la pesta\u00f1a \"Query\" y ejecutar el SQL necesario para crearlos. Si est\u00e1s familiarizado con SQL, \u00a1crear \u00edndices para Couchbase ser\u00e1 intuitivo!<\/p>\n Si quieres saber m\u00e1s sobre los \u00edndices en Couchbase, echa un vistazo a un art\u00edculo reciente<\/a> que muestra c\u00f3mo utilizar el Servicio Index Advisor para Couchbase<\/a>. Se trata de una nueva herramienta proporcionada junto con nuestra \u00faltima versi\u00f3n de Couchbase Server 6.5. Otro punto de inter\u00e9s puede ser nuestra \u00cdndices secundarios globales<\/a> documentaci\u00f3n.<\/p>\n Estos son los \u00edndices de Algo m\u00e1s que mencionar sobre Couchbase Server es el lenguaje que utilizamos para consultar nuestros documentos. Couchbase Server utiliza N1QL<\/a>. N1QL es una sintaxis similar a SQL que cualquier persona con conocimientos relacionales deber\u00eda ser capaz de entender. Es especialmente \u00fatil para consultar colecciones de documentos. Cubriremos algunos aspectos b\u00e1sicos en nuestro pr\u00f3ximo art\u00edculo cuando construyamos nuestra API GraphQL.<\/p>\n Encontrar\u00e1 m\u00e1s informaci\u00f3n en N1QL<\/a> en la documentaci\u00f3n, as\u00ed como informaci\u00f3n sobre el uso del Con la configuraci\u00f3n de Couchbase ahora podemos continuar y entrar en la parte de JavaScript de la construcci\u00f3n de nuestra aplicaci\u00f3n Fullstack React y GraphQL. Vamos a pasar a la construcci\u00f3n de nuestro Servidor Express-GraphQL<\/a> a continuaci\u00f3n, y luego vamos a crear un cliente React<\/a> en el \u00faltimo segmento.<\/p>\nUna visi\u00f3n general de GraphQL<\/h3>\n
![\"GraphiQL](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlinesUK.jpg\")
<\/p>\nAlmac\u00e9n de datos Couchbase<\/h3>\n
Ponga en pr\u00e1ctica sus conocimientos de SQL en NoSQL<\/h3>\n
Instalar y ejecutar Couchbase con Docker<\/h3>\n
couchbase<\/code> imagen:<\/p>\ndocker pull couchbase<\/code><\/pre>\narchivo docker<\/code> y configuraci\u00f3n.sh<\/code> que necesitamos:<\/p>\ngit clone https:\/\/github.com\/httpJunkie\/couchbase-server && cd couchbase-server && chmod +x configure.sh<\/code><\/pre>\nDockerfile<\/code> que utiliza el couchbase<\/code> Docker como base:<\/p>\ndocker build -t couchbase-server .<\/code><\/pre>\ndocker run -d -p 8091-8094:8091-8094 -p 11210:11210 -e CB_ADMIN_USER=Administrator -e CB_ADMIN_PASS=password --network=\"bridge\" --name cbs1 couchbase-server<\/code><\/pre>\ndocker network ls<\/code> y busque el nombre de su nombre de red y controlador por defecto y util\u00edcelo en su lugar.<\/p>\nAdministrador<\/code><\/strong> & contrase\u00f1a<\/code><\/strong>.<\/p>\nInstalaci\u00f3n local de Couchbase<\/h3>\n
Explore nuestro cubo en la consola<\/h3>\n
viaje-muestra<\/code> ya deber\u00eda estar cargado y visible en esta pantalla.<\/p>\nviaje-muestra<\/code> como parte del script utilizado para instalar el bucket. Estos \u00edndices son necesarios para utilizar el lenguaje de consulta N1QL (SQL para JSON).<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-bucket.jpg\")
<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-document.jpg\")
<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-edit-document.jpg\")
<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-user.jpg\")
<\/p>\nviaje-muestra<\/code> cubo. Eso es todo lo que necesitamos. Recuerda tu nombre de usuario y contrase\u00f1a, ya que los necesitaremos para conectarnos.<\/p>\n\u00cdndices de cubos<\/h3>\n
viaje-muestra<\/code> que instalamos con Couchbase Server.<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-indexes.jpg\")
<\/p>\nMenci\u00f3n r\u00e1pida sobre las consultas N1QL<\/h3>\n
couchbase.get<\/code> de consulta, toda esta informaci\u00f3n se puede encontrar en nuestro SDK para NodeJS de Couchbase Server<\/a> docs.<\/p>\n