Aplicativo Fullstack React e GraphQL<\/h2>\n
Vamos criar um Fullstack Reagir<\/a> aplicativo usando GraphQL<\/a>. Este \u00e9 um tutorial acess\u00edvel, mas esperamos que voc\u00ea tenha alguma familiaridade com JavaScript, React, conceitos de GraphQL e NoSQL. Tamb\u00e9m usamos o Docker para provisionar nosso servidor Couchbase de n\u00f3 \u00fanico. Vamos nos conectar ao Couchbase por meio do Express-GraphQL, criado com o Node JS<\/a> e Expressar JS<\/a> usando express-graphql<\/a>. Em seguida, consultaremos a API no React usando o Apollo GraphQL<\/a> cliente.<\/p>\n Antes de come\u00e7armos a criar esse aplicativo, quero falar sobre nossa escolha de usar um API GraphQL<\/a> em vez de um API REST<\/a>e, em seguida, vamos para a configura\u00e7\u00e3o do banco de dados.<\/p>\n GraphQL \u00e9 uma linguagem de consulta fortemente tipada para APIs. \u00c9 uma forma declarativa de buscar dados, que est\u00e1 sendo rapidamente adotada pela comunidade JavaScript e tamb\u00e9m por outras comunidades. Permite controle granular sobre a obten\u00e7\u00e3o de dados e economiza tempo ao fazer chamadas adicionais \u00e0 API. Todas as consultas e muta\u00e7\u00f5es ocorrem em um \u00fanico ponto de extremidade, em vez de v\u00e1rios pontos de extremidade como o REST. Isso significa menos c\u00f3digo para escrever gerenciando URLs no React. Al\u00e9m disso, h\u00e1 uma pegada menor na conex\u00e3o. Para obter mais informa\u00e7\u00f5es sobre GraphQL vs REST, sugiro uma palestra de Nate Barbettini intitulada: Confronto de APIs: RPC vs REST vs GraphQL<\/a>.<\/p>\n Se voc\u00ea estiver familiarizado com JSON, ver\u00e1 que Sintaxe de consulta do GraphQL<\/a> simples de usar e seus dados f\u00e1ceis de explorar GraphiQL<\/a>um IDE no navegador que usamos para testar nossas consultas e descobrir o que \u00e9 poss\u00edvel com qualquer API GraphQL.<\/p>\n Esse IDE do GraphiQL ser\u00e1 \u00fatil mais tarde, quando precisarmos testar nossos pr\u00f3prios pontos de extremidade do GraphQL. O GraphiQL est\u00e1 dispon\u00edvel para todos os servidores GraphQL. Por exemplo, o GitHub tem uma das APIs p\u00fablicas mais antigas do GraphQL (sendo um dos primeiros a adotar). Ela permite que voc\u00ea explore esse gr\u00e1fico de dados usando a API Explorador da API v4 do GraphQL do GitHub<\/a>.<\/p>\n Observa\u00e7\u00e3o:<\/strong> O GitHub tinha uma das APIs RESTful p\u00fablicas mais populares conhecidas pela comunidade de desenvolvedores e, em 2016, eles mudaram para um aplicativo GraphQL em vez de REST para sua vers\u00e3o 4 da API do GitHub. Isso reduz muito o esfor\u00e7o que um desenvolvedor tem de fazer para usar a API do GitHub e torna a experi\u00eancia do desenvolvedor melhor. Uma solicita\u00e7\u00e3o \u00e9 simplesmente um texto enviado por meio de um HTTP POST em uma sintaxe que parece um h\u00edbrido entre JSON e fun\u00e7\u00f5es JS. A resposta \u00e9 uma resposta leve (apenas o que eu pedi) da API GraphQL. Esses s\u00e3o apenas alguns dos benef\u00edcios que os desenvolvedores obt\u00eam com a mudan\u00e7a de REST para GraphQL pelo GitHub.<\/p>\n Para dar in\u00edcio ao nosso projeto, precisamos de dados. Abordaremos este projeto como se tiv\u00e9ssemos um cliente que j\u00e1 tem um banco de dados, especificamente, ele est\u00e1 usando Servidor Couchbase<\/a> como um armazenamento de documentos.<\/p>\n O SDK do NodeJS do servidor Couchbase<\/a> fornece as ferramentas necess\u00e1rias para se conectar via Node JS e Express ao nosso servidor Couchbase e seus dados.<\/p>\n Para sua informa\u00e7\u00e3o, h\u00e1 muitos outros SDKs dispon\u00edveis al\u00e9m do Node JS<\/a> para o Couchbase Server, incluindo C<\/a>, .NET<\/a>, Ir<\/a>, Java<\/a>, PHP<\/a>, Python<\/a>e Scala<\/a>.<\/p>\n O Couchbase Server aproveita suas habilidades em SQL por meio do N1QL (SQL para JSON) Linguagem de consulta de banco de dados<\/a> que permite que voc\u00ea consulte o Couchbase, um reposit\u00f3rio de dados de documentos NoSQL com uma sintaxe quase id\u00eantica \u00e0 do SQL.<\/p>\n Se voc\u00ea optar por fazer download e instalar o Couchbase localmente e n\u00e3o quiser usar o Docker, basta pule para as instru\u00e7\u00f5es de instala\u00e7\u00e3o manual<\/a>. Para obter ajuda com o pr\u00f3prio Docker, visite docs.docker.com<\/a>.<\/p>\n Obter o Vamos clonar um reposit\u00f3rio existente para obter o Criar uma nova imagem a partir de Execute essa nova imagem:<\/p>\n Se voc\u00ea tiver problemas para executar o \u00faltimo comando, pode ser que n\u00e3o tenha uma rede chamada \"bridge\". Nesse caso, execute Nesse ponto, podemos visitar localhost:8091<\/a> e fa\u00e7a login com o Se voc\u00ea instalou com o Docker, poder\u00e1 pule para a pr\u00f3xima se\u00e7\u00e3o<\/a>.<\/p>\n O processo de instala\u00e7\u00e3o \u00e9 simples e n\u00f3s o ajudamos a Linux<\/a>, Mac<\/a>e Windows<\/a>.<\/p>\n Depois de instalado, voc\u00ea pode acessar o Console da Web do Couchbase Server usando localhost:8091<\/a>.<\/p>\n Nessa tela, voc\u00ea pode clicar em \"Configurar novo cluster<\/a>“.<\/p>\n O nome do cluster fica a seu crit\u00e9rio e representa todos os seus buckets do Couchbase. O usu\u00e1rio e a senha de administrador \u00e9 uma conta de administrador do servidor para fazer login no painel de todo o servidor, n\u00e3o \u00e9 um usu\u00e1rio e uma senha para se conectar a um bucket espec\u00edfico de dentro do nosso aplicativo Express. Falaremos sobre isso mais tarde.<\/p>\n Configurei meu cluster com os servi\u00e7os padr\u00e3o e as cotas de mem\u00f3ria.<\/p>\n Vamos acessar o Couchbase Server Dashboard e clicar em \"Servers\" (Servidores) para ver nosso servidor criado inicialmente.<\/p>\n Em seguida, clique em \"Buckets\". Um Couchbase Balde<\/a> \u00e9 uma cole\u00e7\u00e3o de documentos. Voc\u00ea pode \"Add Bucket\" para criar sua pr\u00f3pria cole\u00e7\u00e3o de documentos ou adicionar dados de amostra. Se voc\u00ea seguiu as instru\u00e7\u00f5es do arquivo Docker, o O uso desse banco de dados de amostra nos permitir\u00e1 come\u00e7ar a trabalhar com nosso aplicativo Fullstack React e GraphQL, e come\u00e7aremos com o Express para criar nossa API, o que facilitar\u00e1 as coisas para n\u00f3s, pois j\u00e1 temos dados e \u00edndices configurados.<\/p>\n Os \u00edndices s\u00e3o configurados automaticamente nesse Se voc\u00ea quiser saber mais e criar seu pr\u00f3prio bucket e \u00edndices, D\u00ea uma olhada neste artigo<\/a>!<\/p>\n Seu Bucket deve ser semelhante ao bucket da imagem abaixo:<\/p>\n Se clicarmos no bot\u00e3o \"Documents\" (Documentos), poderemos ver alguns dos dados em nosso Bucket:<\/p>\n Ao clicar em \"Edit Document as JSON\", voc\u00ea ver\u00e1 o JSON do valor dessa chave espec\u00edfica e poder\u00e1 at\u00e9 mesmo editar os dados a partir daqui. Experimente!<\/p>\n Antes de prosseguir, queremos clicar na guia \"Security\" (Seguran\u00e7a) e configurar um usu\u00e1rio para se conectar a esse bucket.<\/p>\n Na p\u00e1gina \"Security\" (Seguran\u00e7a), clique em \"Create User\" (Criar usu\u00e1rio). Adicione um nome de usu\u00e1rio e uma senha espec\u00edficos para se conectar ao bucket a partir do nosso aplicativo Express. Usei meu pr\u00f3prio nome e ele corresponder\u00e1 \u00e0s informa\u00e7\u00f5es no c\u00f3digo-fonte do projeto. Portanto, lembre-se de usar seu nome e atualizar o c\u00f3digo conforme necess\u00e1rio.<\/p>\n Certifique-se de marcar a caixa de sele\u00e7\u00e3o \"Application Access\" (Acesso ao aplicativo) para o nosso Para esta demonstra\u00e7\u00e3o, nossos \u00edndices foram gerados automaticamente. Se voc\u00ea quiser adicionar \u00edndices, poder\u00e1 adicion\u00e1-los usando a guia \"Query\" (Consulta) e executar o SQL necess\u00e1rio para cri\u00e1-los. Se voc\u00ea estiver familiarizado com SQL, a cria\u00e7\u00e3o de \u00edndices para o Couchbase ser\u00e1 intuitiva!<\/p>\n Se quiser saber mais sobre \u00edndices no Couchbase, d\u00ea uma olhada em um artigo recente<\/a> mostrando como usar o Servi\u00e7o de consultoria de \u00edndice para o Couchbase<\/a>. Essa \u00e9 uma nova ferramenta fornecida junto com a vers\u00e3o mais recente do Couchbase Server 6.5. Outro ponto de interesse tamb\u00e9m pode ser o nosso \u00cdndices secund\u00e1rios globais<\/a> documenta\u00e7\u00e3o.<\/p>\n Aqui est\u00e3o os \u00edndices para o Outro aspecto a ser mencionado sobre o Couchbase Server \u00e9 a linguagem que usamos para consultar nossos documentos. O Couchbase Server usa N1QL<\/a>. N1QL \u00e9 uma sintaxe semelhante \u00e0 do SQL que qualquer pessoa com experi\u00eancia relacional deve ser capaz de entender. Ela \u00e9 especialmente \u00fatil para consultar cole\u00e7\u00f5es de documentos. Abordaremos alguns conceitos b\u00e1sicos em nosso pr\u00f3ximo artigo, quando criarmos nossa API GraphQL.<\/p>\n Voc\u00ea pode encontrar mais informa\u00e7\u00f5es em N1QL<\/a> na documenta\u00e7\u00e3o, bem como informa\u00e7\u00f5es sobre o uso do Com a configura\u00e7\u00e3o do Couchbase, agora podemos continuar e entrar na parte do JavaScript para criar nosso aplicativo Fullstack React e GraphQL. Passaremos \u00e0 cria\u00e7\u00e3o do nosso aplicativo Servidor Express-GraphQL<\/a> em seguida, e depois criar um cliente React<\/a> no \u00faltimo segmento.<\/p>\nUma vis\u00e3o geral de alto n\u00edvel do GraphQL<\/h3>\n
![\"GraphiQL](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-graphiql-airlinesUK.jpg\")
<\/p>\nO banco de dados do Couchbase<\/h3>\n
Coloque suas habilidades de SQL para trabalhar no NoSQL<\/h3>\n
Instalar e executar o Couchbase com o Docker<\/h3>\n
couchbase<\/code> imagem:<\/p>\ndocker pull couchbase<\/code><\/pre>\narquivo de encaixe<\/code> e configuration.sh<\/code> que precisamos:<\/p>\ngit clone https:\/\/github.com\/httpJunkie\/couchbase-server && cd couchbase-server && chmod +x configure.sh<\/code><\/pre>\nDockerfile<\/code> que usa o couchbase<\/code> Docker como sua base:<\/p>\ndocker build -t couchbase-server .<\/code><\/pre>\ndocker run -d -p 8091-8094:8091-8094 -p 11210:11210 -e CB_ADMIN_USER=Administrador -e CB_ADMIN_PASS=senha --network=\"bridge\" --name cbs1 couchbase-server<\/code><\/pre>\ndocker network ls<\/code> e encontre o nome de seu nome de rede e driver padr\u00e3o e use-o em seu lugar.<\/p>\nAdministrador<\/code><\/strong> & senha<\/code><\/strong>.<\/p>\nInstalando o Couchbase localmente<\/h3>\n
Explore nossa ca\u00e7amba no console<\/h3>\n
amostra de viagem<\/code> O balde j\u00e1 deve estar carregado e vis\u00edvel nessa tela.<\/p>\namostra de viagem<\/code> como parte do script usado para instalar o bucket. Esses \u00edndices s\u00e3o necess\u00e1rios para usar a linguagem 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>\namostra de viagem<\/code> balde. Isso \u00e9 tudo de que precisamos. Lembre-se de seu nome de usu\u00e1rio e senha, pois precisaremos deles para nos conectarmos.<\/p>\n\u00cdndices de balde<\/h3>\n
amostra de viagem<\/code> que instalamos com o Couchbase Server.<\/p>\n![\"couchbase](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2020\/01\/travel-sample-indexes.jpg\")
<\/p>\nUma breve men\u00e7\u00e3o sobre as consultas N1QL<\/h3>\n
couchbase.get<\/code> para consultar todas as informa\u00e7\u00f5es que podem ser encontradas em nosso SDK do NodeJS do servidor Couchbase<\/a> documentos.<\/p>\n