A equipe do Couchbase DevRel tem trabalhado com o Clube do site ruim em freeCodeCamp materiais.
O freeCodeCamp é uma organização sem fins lucrativos que consiste em uma plataforma interativa de aprendizado na Web, um fórum de comunidade on-line, salas de bate-papo, publicações on-line e organizações locais que pretendem tornar o aprendizado de desenvolvimento de software acessível a qualquer pessoa.
O Bad Website Club é uma comunidade on-line que ajuda novos alunos em sua jornada de programação.
Fizemos um streaming para mostrar aos alunos de fCC o que poderia acontecer com seus projetos em condições mais "reais". Começamos com o curso Responsive Web Design, pegamos alguns exemplos, como o formulário Survey (Pesquisa), os completamos e os colocamos em produção. Toda a série foi transmitida no YouTube, LinkedIn, Twitter e Twitch, e as gravações estão disponíveis nesta lista de reprodução do YouTube, se você quiser conferir: Novos fluxos do Couchbase: A partir de 31 de julho!
Eu estava transmitindo pessoalmente no Projeto de pesquisa. Nesta série de publicações do blog, mostrarei todas as etapas adicionais que você pode fazer: publicar o código no GitHub, implantar o Survey on-line com o Netlify e armazenar seu conteúdo no Couchbase Capella.
Etapa 1 - Criar um formulário HTML
Inspirando-me bastante no exemplo de pesquisa do FreeCodeCamp (copiar, colar e aparar), obtive o seguinte formulário HTML. Ele é um pouco mais simples do que o original.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <cabeça> <link rel="folha de estilo" href="./styles.css" /> </cabeça> <corpo> <div classe="contêiner"> <cabeçalho classe="cabeçalho"> <h1 id="título" classe="text-center">Pesquisa Formulário</h1> <p id="description" (descrição) classe="description text-center"> Agradecimentos você para tomada o tempo para ajuda nós melhorar o plataforma </p> </cabeçalho> <formulário id="survey-form"> <div classe="form-group" (grupo de formulários)> <rótulo id="name-label" para="name" (nome)>Nome</rótulo> <entrada tipo="texto" nome="name" (nome) id="name" (nome) classe="form-control" (controle de formulário) espaço reservado="Digite seu nome" necessário /> </div> <div classe="form-group" (grupo de formulários)> <rótulo id="number-label" para="número" >Idade<extensão classe="pista">(opcional)</extensão></rótulo > <entrada tipo="número" nome="idade" id="número" min="10" máximo="99" classe="form-control" (controle de formulário) espaço reservado="Idade" /> </div> <div classe="form-group" (grupo de formulários)> <p> Seria você recomendar este incrível pesquisa para a Amigo ? </p> <rótulo ><entrada nome="recomendar" valor="recomendar" tipo="caixa de seleção" classe="input-checkbox" />sim</rótulo > </div> <div classe="form-group" (grupo de formulários)> <botão tipo="submit" (enviar) id="submit" (enviar) classe="submit-button" (botão de envio)> Enviar </botão> </div> </formulário> </div> </corpo> </html> |
O styles.css é exatamente o mesmo que o original. Abra aqui para ver o formulário de pesquisa em ação. Você pode abrir o em seu navegador, clique com o botão direito do mouse na página e você verá algo como Exibir fonte da página ou inspecionar. Clique nele e isso abrirá um painel que mostra o código da página. Enquanto estiver nessa exibição, você poderá clicar em um link como style.css ou clique no ícone estilos para visualizar o CSS aplicado a determinados elementos também.
Para testar esse exemplo de código, você pode primeiro clonar esse repositório no seu computador local usando o terminal ou pode baixá-lo como um arquivo zip.)
Acesse seu navegador e, na barra superior, selecione arquivo, abertoe, em seguida, selecione a opção index.html da pasta (ou pasta zip) que foi baixada. Dê uma olhada no URL do seu navegador, que mostra um caminho para um arquivo local. E você deve ver algo como isto, que não faz nada quando você clica em enviar.
A questão então é: como implantá-lo na Internet, como fazer com que ele faça alguma coisa? Precisamos de algum código de backend para ser executado após o clique. E, em seguida, fazer com que esse código armazene o conteúdo do formulário no banco de dados.
Etapa 2 - Git, Github, Netlify
Vamos começar implantando esse formulário ao vivo na Internet. Para isso, usaremos o Netlify. A primeira coisa a fazer é verificar se temos o arquivo CLI da Netlify disponível e que estamos conectados. Se ele não estiver instalado, o caminho mais rápido é digitar em seu terminal:
|
1 |
npm instalar netlify-cli -g |
Você encontrará mais detalhes na seção Documentos de introdução à Netlify.
Digitação versão netlify em meu terminal atualmente me dá netlify-cli/15.6.0 win32-x64 node-v18.5.0. Portanto, sei que ele está instalado e pronto.
Em seguida, a próxima coisa a fazer é digitar login na netlify em seu terminal. Você será direcionado para o formulário de login do Netflify.
Agora tudo deve estar pronto para passar para a fase de implementação. Mas só para ter certeza, vamos testar as coisas localmente. Porque é isso que a maioria dos desenvolvedores faz. Para isso, digite desenvolvimento da netlify em seu terminal.
Ele deve exibir o seguinte no terminal e abrir o formulário no navegador.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
◈ Netlify Desenvolvimento ◈ ◈ Ignorado geral contexto env var: LANG (definido em processo) ◈ Não aplicativo servidor detectado. Usando simples estático servidor ◈ Não é possível para determinar público pasta para servir arquivos de. Usando atual de trabalho diretório ◈ Configuração a netlify.toml arquivo com a [dev] seção para especificar seu dev servidor configurações. ◈ Veja documentos em: https://cli.netlify.com/netlify-dev#project-detection ◈ Em execução estático servidor de "freecodecamp-survey" ◈ Configuração para cima local desenvolvimento servidor ◈ Estático servidor audição para 3999 Adição local .netlify pasta para .gitignore arquivo... ┌─────────────────────────────────────────────────┐ │ │ │ ◈ Servidor agora pronto em http://localhost:8888 │ │ │ └─────────────────────────────────────────────────┘ |
Se você der uma olhada na barra de URL do navegador novamente, verá que ela é diferente. Parece um endereço de site da Web, não um arquivo local. Parabéns, você acabou de executar seu primeiro servidor local, servindo seu arquivo HTML e CSS, usando Netlify dev! Você tem um site em execução em sua máquina. Agora vamos torná-lo acessível a todos na Internet, tanto o código-fonte quanto o próprio site.
Vá para o GitHub (ou GitLab, ou Heptapod, ou qualquer outra solução de hospedagem de código-fonte, existem outras por aí! Acesse https://github.com/new para o Github. Agora você está no assistente de criação do repositório. Eu só configurei minha organização, o nome do meu repositório e uma descrição, depois cliquei no botão Criar repositório botão.
Ele fornecerá todas as instruções necessárias para converter sua pasta de trabalho em uma pasta git e vincule-o ao seu projeto do GitHub. Foi isso que digitei no terminal (você pode copiar e colar o texto abaixo no terminal ou pressionar Enter após cada linha do texto abaixo para executá-lo. Observe que será necessário alterar a linha 6 para que seja o URL do repositório do projeto) Observe que você terá que alterar a linha 6 para que seja o URL do repositório do projeto):
|
1 2 3 4 5 6 7 |
eco "# myproject" >> LEIAME.md git inicial git adicionar LEIAME.md git comprometer -m "primeiro compromisso" git ramo -M principal git remoto adicionar origem https://github.com/ldoguin/myproject.git git empurrar -u origem principal |
Esta é a saída do terminal resultante:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
[C:\Código\Couchbase\meu projeto] $ eco "# myproject" >> LEIAME.md [C:\Código\Couchbase\meu projeto] $ ls Diretório: C:\Código\Couchbase\meu projeto Modo LastWriteTime Comprimento Nome ---- ------------- ------ ---- -a---- 8/4/2023 12:11 PM 28 LEIAME.md [C:\Código\Couchbase\meu projeto] $ git inicial dica: Usando "mestre como o nome para o inicial ramo. Isso padrão ramo nome dica: é assunto para mudança. Para configurar o inicial ramo nome para uso em todos dica: de seu novo repositórios, que vontade suprimir este aviso, chamada: dica: dica: git configuração --global inicial.defaultBranch <nome> dica: dica: Nomes comumente escolhido em vez disso de "mestre são "principal, "tronco e dica: "desenvolvimento. O apenas-criado ramo pode ser renomeado via este comando: dica: dica: git ramo -m <nome> Inicializado vazio Git repositório em C:/Usuários/Laurent Doguin/Documentos/Couchbase/meu projeto/.git/ [C:\Código\Couchbase\meu projeto] $ git configuração --global inicial.defaultBranch principal [C:\Código\Couchbase\meu projeto] $ git ramo -m principal [C:\Código\Couchbase\meu projeto] $ git adicionar .\LEIAME.md .\índice.html .\estilos.css [C:\Código\Couchbase\meu projeto] $ git comprometer -m "primeiro compromisso" [principal (raiz-comprometer) 356ece7] primeiro comprometer 3 arquivos alterado, 245 inserções(+) criar modo 100644 LEIAME.md criar modo 100644 índice.html criar modo 100644 estilos.css [C:\Código\Couchbase\meu projeto] $ git remoto adicionar origem https://github.com/ldoguin/myproject.git [C:\Código\Couchbase\meu projeto] $ git empurrar -u origem principal Enumerando objetos: 5, feito. Contagem objetos: 100% (5/5), feito. Delta compressão usando para cima para 8 fios Compressão objetos: 100% (4/4), feito. Redação objetos: 100% (5/5), 1.95 KiB | 999.00 KiB/s, feito. Total 5 (delta 0), reutilizado 0 (delta 0), pacote-reutilizado 0 Para https://github.com/ldoguin/myproject.git * [novo ramo] principal -> principal ramo "principal definir para cima para trilha 'origin/main'. [C:\Código\Couchbase\meu projeto] $ |
Agora, se eu voltar à página do Github e recarregá-la, verei o seguinte:
Parabéns, seu código agora está disponível no Github, para que todos possam ver, aprender e contribuir. Agora é hora da produção! Vamos colocar esse site no ar 💪
Vá em frente e visite https://app.netlify.com/start/deploy. Isso o levará ao novo assistente de projeto do Netify. Você verá vários botões para ajudá-lo a começar, GitHub, GitLab, Bitbucket, AzureDevops. Vamos clicar no GitHub.
Você verá algumas janelas solicitando que você vincule seu perfil do GitHub ao Netlify. Vá em frente e prossiga, e você será levado à página a seguir.
O Netlify está me dizendo que não tenho nenhum aplicativo Netlify instalado em nenhuma organização do GitHub. Clique em Configurar o Netlify no GitHubEle abrirá uma janela pop-up solicitando que você selecione a organização do GitHub na qual deseja instalar o Netlify e o repositório ao qual deseja dar acesso.
Deixo o padrão e prossigo para a próxima etapa. De agora em diante, você deverá ver todos os repositórios em sua conta do GitHub.
Deixarei o padrão e clicarei em Implementar meu projeto:
Você verá um link para seu site recém-implantado na Internet, que para mim é https://jolly-sfogliatella-3e6c07.netlify.app/. A Netlify fornece um ambiente de sandboxes sob o netlify.app para que você possa implementar coisas sem ter seu próprio nome de domínio.
Parabéns, seu site agora está no ar na Internet. Reserve um minuto para comemorar 🎉.
Agora, podemos vincular esse projeto Netlify digitando link netlify no terminal. Será oferecida uma lista de opções. Selecione a opção padrão, que deve ser Usar a origem remota atual do git (https://github.com/yourOrg/yourProject). Como você fez a implantação por meio do GitHub, o Netlify tem as informações do git do seu repositório e pode inferir qual projeto usar (e também, nesse ponto, você provavelmente tem apenas um projeto). Esta é a aparência do resultado para mim:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[C:\Código\Couchbase\meu projeto] $ netlify link netlify link vontade conectar este pasta para a local em Netlify ? Como fazer você querer para link este pasta para a local? Uso atual git remoto origem (https://github.com/ldoguin/myproject) Procurando para locais conectado para 'https://github.com/ldoguin/myproject'... Diretório Vinculado Administrador url: https://app.netlify.com/sites/jolly-sfogliatella-3e6c07 Local url: https://jolly-sfogliatella-3e6c07.netlify.app Você pode agora executar outros `netlify` cli comandos em este diretório [C:\Código\Couchbase\meu projeto] $ |
Podemos tentar algumas coisas agora. Vou adicionar um emoji 🐼 ao meu formulário, porque não. Em index.htmlEstou modificando a linha 9 a partir disso: <h1 id="”title”" class="”text-center”">Formulário de pesquisa</h1> para isso <h1 id="”title”" class="”text-center”">Formulário de pesquisa 🐼</h1>
Em seguida, salvo o arquivo e envio essas alterações para o Github. Em seguida, no terminal, digito netlify open:site:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[C:\Código\Couchbase\meu projeto] $ git adicionar .\índice.html [C:\Código\Couchbase\meu projeto] $ git comprometer -m"Panda" [principal caa6f87] Panda 1 arquivo alterado, 1 inserção(+), 1 exclusão(-) [C:\Código\Couchbase\meu projeto] $ git empurrar Enumerando objetos: 5, feito. Contagem objetos: 100% (5/5), feito. Delta compressão usando para cima para 8 fios Compressão objetos: 100% (3/3), feito. Redação objetos: 100% (3/3), 360 bytes | 180.00 KiB/s, feito. Total 3 (delta 1), reutilizado 0 (delta 0), pacote-reutilizado 0 remoto: Resolver deltas: 100% (1/1), concluído com 1 local objeto. Para https://github.com/ldoguin/myproject.git 356ece7..8a2ebe2 principal -> principal [C:\Código\Couchbase\meu projeto] $ netlify aberto:local Abertura "jolly-sfogliatella-3e6c07" local url: > https://jolly-sfogliatella-3e6c07.netlify.app |
Algo muito legal está acontecendo. Como seu repositório do GitHub está vinculado ao Netlify, uma nova implantação será feita automaticamente pelo Netlify. Portanto, ao abrir o site, você verá o Panda <3.
Nesse ponto, temos um repositório do Github que contém nosso código, que é integrado ao Netlify, que criará automaticamente uma nova implantação quando você enviar um novo código. E também temos um repositório netlify CLI em nossa pasta de trabalho. Estamos prontos para escrever o código de backend!
Etapa 3 - Backend
Neste capítulo, responderemos à seguinte pergunta: O que acontece quando alguém preenche o formulário e clica em enviar ?
A resposta neste momento é: Nada. Vamos mudar isso. Escrevendo um pouco de JavaScript. Vamos exibir um alerta pop-up quando alguém inserir informações válidas e clicar em Enviar. Em seu index.html você colocará o seguinte <script> código entre a última tag div de fechamento </div> e antes da tag de fechamento do corpo </body>.
|
1 2 3 4 5 6 7 8 9 10 |
<script> const formulário = documento.getElementById('survey-form'); <1> formulário.addEventListener('submit', handleForm); <2> assíncrono função handleForm(e) { e.preventDefault() <3> alerta("Envio de formulário!") <4> } </script> |
|
1 2 3 4 |
<1> Obter o Dom elemento representando o formulário por usando seu id <2> Cada tempo o enviar evento ocorre, executar o handleForm função <3> O natural comportamento de a formulário envio é para recarregar o página, nós do't necessidade que, portanto nós prevenir o padrão comportamento para acontecer <4> O alerta função exibição a pop-up com a mensagem |
Se você salvar seu código e recarregar a página, preencha o formulário e clique em enviarvocê verá algo parecido com isto:
Agora que temos algo acontecendo quando um usuário envia o formulário, vamos avançar um pouco mais. Queremos examinar o conteúdo do formulário e nos certificar de que podemos obter os dados corretos no JSON. Queremos uma string para o nome, um número inteiro para a idade e um booleano para a recomendação.
E acontece que a caixa de seleção HTML não está funcionando bem. O valor que ela fornece por padrão é nenhum valor e, quando marcada, fornece o conteúdo do campo de valor. Vamos adicionar outro campo de entrada, oculto, para garantir que o valor padrão seja False.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<rótulo> <entrada id="hiddenRecommend" nome="recomendar" valor="false" (falso) tipo="oculto" /> <entrada id="recomendar" nome="recomendar" valor="true" (verdadeiro) tipo="caixa de seleção" classe="input-checkbox" />sim</rótulo> |
Agora, com relação ao código JavaScript, há algumas novas linhas interessantes a serem analisadas.
|
1 2 3 4 5 6 7 8 9 10 11 |
const formulário = documento.getElementById('survey-form'); formulário.addEventListener('submit', handleForm); assíncrono função handleForm(e) { <1> e.preventDefault() const dados = novo Dados do formulário(e.alvo); <1> const valor = Objeto.fromEntries(dados.entradas()); <2> const detalhes = `nome: ${valor.nome}\nage: ${valor.idade}\nrecomendação: ${valor.recomendar}`; <3> console.registro(detalhes); <4> } |
|
1 2 3 4 |
<1> O parâmetro de o handleForm função é e objeto(e) com a campo chamado alvo. Isso alvo pode ser transformar em a Dados do formulário objeto. <2> O Dados do formulário objeto pode ser transformado em a JSON objeto. <3> Agora que nós ter a JSON objeto nós pode impressão fora o valores nós são interessados em. <4> Isso tempo em vez disso de exibindo e alerta caixa, nós são registro o detalhes string para o console. O console pode ser acessado através de seu navegador's dev ferramentas. Ele é excelente para depuração. |
Com isso resolvido, vamos levar a sério e começar a criar uma função Netlify. Entrar função netlify:create em seu terminal. Você deverá ver algo como:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[C:\Código\Couchbase\meu projeto] $ netlify função:criar ? Selecione o tipo de função você'd como para criar Sem servidor função (Nó/Ir) ◈ funções diretório não especificado em netlify.toml ou IU configurações ? Entrar o caminho, relativo para seu local's base diretório em seu repositório, onde seu funções deve ao vivo: netlify/funções ◈ atualização local configurações com netlify/funções ◈ funções diretório netlify/funções atualizado em local configurações ◈ funções diretório netlify/funções faz não existir ainda, criando ele... ◈ funções diretório netlify/funções criado ? Selecione o idioma de seu função JavaScript ? Escolha a modelo javascript-Olá-mundo ? Nome seu função: salvar formulário ◈ Criação de função salvar formulário ◈ Criado netlify\funções\salvar formulário\salvar formulário.js [C:\Código\Couchbase\meu projeto] $ |
Selecione Sem servidor deixa o padrão para a próxima pergunta sobre o caminho, mantém o JavaScript como a linguagem, mantém o padrão mundo do inferno e, em seguida, dê um nome à sua função. A minha se chama salvar formulário. Isso gerará novos arquivos na pasta netlify. Se você executar desenvolvimento da netlify agora, você verá novas linhas nos registros:
|
1 2 |
Carregado função salvar formulário http://localhost:8888/.netlify/functions/saveform. ◈ Funções servidor é audição em 62431 |
Isso significa que nosso servidor de desenvolvimento netlify também está atendendo à nossa função recém-criada. Dê uma olhada no arquivo recém-gerado ./netlify/functions/saveform/saveform.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Documentos sobre eventos e contexto https://docs.netlify.com/functions/build/#code-your-function-2 const manipulador = assíncrono (evento) => { <1> tentar { const assunto = evento.queryStringParameters.nome || "Mundo <2> retorno { statusCode: 200, corpo: JSON.stringify({ mensagem: `Olá ${assunto}` }), <3> // // mais chaves que você pode retornar: // cabeçalhos: { "headerName": "headerValue", ... }, // isBase64Encoded: true, } } captura (erro) { retorno { statusCode: 500, corpo: erro.toString() } <4> } } módulo.exportações = { manipulador } |
|
1 2 3 4 |
<1> o assinatura de o função é assíncrono (o assíncrono palavra-chave),e tem e evento parâmetro. Assíncrono significa alguns código dentro o função pode ser assíncrono e nós pode esperar para o código para ser executado com o aguardar palavra-chave, em vez disso de gerenciamento o JavaScript Promessa objeto tradicionalmente devolvido por assíncrono funções. <2> o `evento` objeto tem alguns propriedades e métodos, como `queryStringParameters` que permite nós para obter o nome consulta param <3> este função deve retorno a JSON objeto com e HTTP status código e e Objeto corpo. Se tudo trabalhado bem, nós retorno a JSON corpo contendo a mensagem campo e o código 200. Código início com 2 significa coisas foi bem. <4> Se coisas foi errado, nós retorno o status código 500. Código início com 5 significa algo foi errado em o servidor. E o corpo campo vontade conter o erro. |
Vamos testá-lo chamando essa função quando o usuário clicar em enviar. Basta adicionar o seguinte código após o último console.log ligar:
|
1 2 3 4 5 6 7 8 9 10 11 |
console.registro(detalhes); const resposta = aguardar buscar("/.netlify/functions/saveform", { <1> método: 'GET', <2> cabeçalhos: { <3> 'Content-Type': 'application/json', }, }) se (resposta.status == 200) { <4> console.registro(aguardar resposta.texto()); } |
|
1 2 3 4 |
<1> buscar é o método você pode chamada para enviar e HTTP solicitação para a servidor. Aqui nós são envio a solicitação para `/.netlify/funções/salvar formulário`. Aviso o aguardar palavra-chave que significa este método normalmente retornos a promessa. Aqui nós são apenas atribuir o resultado de o promessa para o campo resposta. <2> HTTP solicitação ter métodos, em algum momento também conhecido como HTTP verbos. Aqui nós são não modificando qualquer coisa em o servidor, nós são recuperação informações, assim nós são usando o método OBTER <3> HTTP solicitações ter [cabeçalhos](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type). Eles fornecem metadados adicionais como o Content-type, aqui definido como `application/json`. O que isso significa é que estamos manipulando JSON. `application/text` significaria que estamos manipulando qualquer forma de texto. Esses são chamados de [Mime types ou Media type] (https://developer.mozilla.org/en-US/docs/Glossary/MIME_type). <4> Nós são teste o status código devolvido por o servidor. Se ele's 200, ele significa tudo foi bem. Nós ter a mensagem para exibição em o console. |
Adicionar, confirmar e enviar. netlify open:admin
Neste ponto, você tem um frontend e um backend implantados na Internet. Mas tudo o que estamos fazendo é chamar a função padrão criada pelo assistente do Netlify. A próxima etapa é enviar o conteúdo do formulário para essa função e armazená-lo em um banco de dados.
Etapa 4 - Banco de dados
A primeira coisa a fazer é descobrir como enviar os detalhes do formulário para a função. Para isso, precisamos alterar nosso método GET para um método POST. Essas coisas são chamadas de métodos de solicitação HTTP, às vezes chamados de verbos HTTP. Você pode dar uma olhada na lista completa em MDN. Uma solicitação do método Get é usada apenas para recuperar dados. Uma solicitação de método Post é usada para criar ou alterar dados. É exatamente isso que queremos. Queremos criar uma nova entrada em nosso banco de dados quando alguém enviar um formulário. Uma solicitação HTTP tem um método, alguns cabeçalhos (metadados sobre suas solicitações, aqui estamos dizendo que a solicitação terá conteúdo JSON com o cabeçalho Content-Typ) e um corpo. O corpo da nossa solicitação será um texto JSON.
|
1 2 3 4 5 6 7 |
const resposta = aguardar buscar("/.netlify/functions/saveform", { método: 'POST', <1> cabeçalhos: { 'Content-Type': 'application/json', }, corpo: JSON.stringify(valor), <2> }) |
|
1 2 |
<1> Nós mudança o HTTP método para POST porque nós querer para mudança algo em vez disso de apenas recuperação informações. <2> A solicitação pode também ter a corpo. Aqui nós são envio a texto versão de nosso JSON objeto. |
Nossa solicitação HTTP do frontend para o backend foi alterada, agora precisamos adaptar o código do backend.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const manipulador = assíncrono (evento) => { tentar { var dados = JSON.analisar(evento.corpo); <1> retorno { statusCode: 200, corpo: JSON.stringify({ nome: dados.nome }) <2> } } captura (erro) { retorno { statusCode: 500, corpo: erro.toString() } } } módulo.exportações = { manipulador } |
|
1 2 |
<1> O evento objeto permite nós para obter o corpo de o solicitação. Ele's texto, nós pode analisar este texto em a JSON objeto e atribuir ele para o campo chamado `dados`. <2> Para fazer com certeza nós fez receber nosso JSON objeto, nós mudança o devolvido mensagem e uso o campo `dados.nome`. |
Você deverá ver uma mensagem diferente no console de desenvolvimento da Web, ou seja, deverá ver {"name": "yourName"}.
Enviamos os dados do formulário para o backend e nos certificamos disso. Agora vamos para o lado do banco de dados. Trabalhando no Couchbase, esse é o banco de dados que vou usar. Uma maneira simples de tentar, vá para https://cloud.couchbase.com/sign-upSe você criar uma conta, terá uma avaliação de 30 dias, sem necessidade de cartão de crédito.
Você pode deixar o padrão ativado ou escolher seu provedor de nuvem favorito e a região mais próxima. Clique em Implantar agora e aguarde a implantação do seu banco de dados.
Duas coisas que queremos fazer a partir daí. Garantir que possamos nos conectar a esse banco de dados a partir do nosso código de backend e garantir que possamos gravar os dados em algum lugar. Vá em frente e clique no botão Conectar guia.
No Couchbase, armazenamos dados em Buckets. Por padrão, a avaliação vem com um bucket de amostra de viagem pré-importado. Não vamos usá-lo. Em vez disso, vamos criar nosso próprio bucket. Clique em Configurações no menu de nível superior, do que em Baldes no menu à esquerda.
Agora, clique em + Criar baldedê um nome a ele e deixe o restante com as configurações padrão. Criar balde.
Temos um novo Bucket, agora precisamos criar as credenciais associadas. Clique no botão Acesso ao banco de dados do que Criar acesso ao banco de dados botão.
Certifique-se de lembrar o nome de usuário e a senha e clique em Criar banco de dados. Uma última coisa a fazer é permitir que esse banco de dados possa ser acessado publicamente. No momento, ele está oculto. Clique em Endereços IP permitidosdo que Adicionar IP permitido. Clique em Permitir acesso De qualquer lugare siga as instruções. O formulário deverá ser preenchido previamente e, em seguida, clique no botão Adicionar IP permitido botão. Você pode achar que isso é um pouco complicado. Por que ele não é o padrão?
Agora, clique no ícone Conectar guia. Você verá a guia Cadeia de conexãoselecione as credenciais do banco de dados, altere o idioma para Node e ele nos dará as instruções corretas para nos conectarmos ao banco de dados a partir do nosso código de backend.
Podemos copiar e colar isso em nosso código de função e adicionar mais algumas coisas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
const criptografia = exigir("crypto"); <1> const couchbase = exigir("couchbase"); <2> const manipulador = assíncrono (evento) => { tentar { const clusterConnStr = "couchbases://cb.ar0qqwli6cczm1u.cloud.couchbase.com"; // Substitua isso pela string de conexão const nome de usuário = "Adminstrador"; // Substitua isso pelo nome de usuário das credenciais de acesso ao banco de dados const senha = "Couch#123"; // Substitua isso pela senha das credenciais de acesso ao banco de dados // Obter uma referência ao cluster const agrupamento = aguardar couchbase.conectar(clusterConnStr, { <4> nome de usuário: nome de usuário, senha: senha, // Use o perfil pré-configurado abaixo para evitar problemas de latência em sua conexão. configProfile: "wanDevelopment", }); const balde = agrupamento.balde("surveyform"); <5> const coleção = balde.defaultCollection(); <6> var dados = JSON.analisar(evento.corpo); deixar resultado = aguardar coleção.inserir(criptografia.UUUID aleatório(), dados); <7> retorno { statusCode: 200, corpo: JSON.stringify({ nome: dados.nome }) } } captura (erro) { console.registro(erro); retorno { statusCode: 500, corpo: erro.toString() } } } módulo.exportações = { manipulador } |
|
1 2 |
<1> Você pode ver nós ter dois novo dependências para nosso projeto. O 'crypto' pacote é fornecido por nó. Ele permite nós para gerar a aleatório identificador para nosso documento <2> O 'couchbase' pacote é o Couchbase NodeJS SDK. Ele's todos bit de código você necessidade para conectar para a Couchbase banco de dados. Isso projetos são também frequentemente chamado motoristas para outros bancos de dados, ou clientes. |
Para o Couchbase, você precisa instalá-lo. Em execução npm i couchbase@4.2.4 será suficiente. No momento, a compatibilidade Netlify/Couchbase é garantida para o Couchbase versão 4.2.4 ou inferior. Isso se deve à natureza do nosso SDK. Trata-se de uma interface JavaScript sobre o nosso SDK em C. E as dependências C esperam encontrar suas dependências de sistema na versão correta. No momento, o Couchbase 4.2.5 está esperando encontrar GLIBC_29 mas ele não está disponível no sistema Ubuntu que executa nosso código de back-end do Netlify.
Agora que temos dependências, vamos ser explícitos em como criá-las. Você pode adicionar um netlify.toml na raiz do repositório com o seguinte conteúdo:
|
1 2 3 |
[construir] comando = "npm install && strip --strip-debug ./node_modules/couchbase/build/Release/couchbase_impl.node" publicar = "." |
Ele está fazendo algumas coisas. Instalar as dependências e remover a tabela de símbolos de depuração de couchbase_impl.node. Esse arquivo é a biblioteca C usada pelo nosso Node SDK. E ele é muito grande para o Netlify no momento. Portanto, estamos removendo a bagunça desnecessária proveniente do processo de compilação.
|
1 2 3 4 5 |
<3> Isso variáveis são o informações necessário para o SDK para conectar para o agrupamento. A conexões string, a nome de usuário e a senha. <4> `couchbase.conectar` leva o conexão string como primeiro parâmetro, do que a JSON objeto com nome de usuário, senha e outros opções. Aqui nós também dar o `wanDesenvolvimento` configuração perfis. Ele vontade aumentar o padrão tempo limite valores de todos Couchbase operações. Basicamente se seu conexão é lento ele ganhou't gritar com você. Do objeto Cluster, obtemos um Bucket. Um bucket é onde armazenamos escopos e coleções. Aqui temos o bucket `surveyform`. Ele já tem um escopo padrão e uma coleção padrão. No bucket, podemos obter a Collection padrão. Uma coleção é onde armazenamos documentos ou pares de chave/valor. Pense na chave como o identificador do documento e o valor como seus dados JSON. Mas pode ser qualquer outra coisa. No objeto de coleção, chamamos o método insert. Ele recebe dois parâmetros, a chave e o valor. Então, chamamos o método randomUUID() do pacote crypto para gerar um identificador aleatório. E passamos o objeto de dados como valor. Ele contém nosso JSON. Essa função é assíncrona, ela's fazendo a solicitação para o Couchbase Capela agrupamento. Nós aguardar para o agrupamento's resposta. |
Agora você poderia adicionar os novos arquivos, fazer o commit e enviar para o GitHub. Mas isso enviaria sua senha para o GitHub. Não queremos isso. Em vez disso, você pode testá-lo executando desenvolvimento da netlify. Continue e reenvie o formulário.
Se tudo correu bem, você gravou dados em seu banco de dados! Você pode verificar isso facilmente acessando a interface do usuário do Couchbase Capella. Clique em Ferramentas de dadosSelecione seu Bucket, Scope e collection, e você verá sua pesquisa no documento.
Isso é ótimo, você acabou de escrever um código para conectar seu banco de dados!
Etapa 5 - Gerenciamento de configuração
Para evitar o envio de nossas credenciais para o GitHub, usaremos variáveis de ambiente. As variáveis de ambiente são comuns a todos os sistemas operacionais e são a melhor maneira de gerenciar a configuração em diferentes ambientes (diferentes sistemas operacionais, nuvens, testes, preparação, pré-produção, produção, o que for adequado ao seu fluxo de trabalho).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.... const PONTO FINAL = processo.env.PONTO DE EXTREMIDADE DA BASE DE SOFÁ || "couchbase://localhost"; <1> const NOME DE USUÁRIO = processo.env.NOME DE USUÁRIO DO COUCHBASE || "Administrador";<1> const SENHA = processo.env.COUCHBASE_PASSWORD || "senha";<1> const BUCKET = processo.env.COUCHBASE_BUCKET || "surveyform"<1> const manipulador = assíncrono (evento) => { tentar { const clusterConnStr = PONTO FINAL; // Substitua isso por Connection String const nome de usuário = NOME DE USUÁRIO; // Substitua isso pelo nome de usuário das credenciais de acesso ao banco de dados const senha = SENHA; // Substitua isso pela senha das credenciais de acesso ao banco de dados // Obter uma referência ao cluster const agrupamento = aguardar couchbase.conectar(clusterConnStr, { usernme: nome de usuário, senha: senha, // Use o perfil pré-configurado abaixo para evitar problemas de latência em sua conexão. configProfile: "wanDevelopment", }); const balde = agrupamento.balde(BUCKET); ... |
|
1 |
<1> O processo objeto é sempre disponível com nó assim não necessidade para a específico biblioteca importação. Usando || permite para fornecer a padrão valor para cada variável se eles são não definido. |
No Mac ou Linux, você pode executar export MYVARIABLE="value" em seu terminal. No Windows, você pode executar $Env:MYVARIABLE="value"
Para defini-los no contexto da Netlify, você pode acessar a interface do usuário e fazer isso manualmente ou usar a CLI:
|
1 2 3 4 |
netlify env:definir PONTO DE EXTREMIDADE DA BASE DE SOFÁ bases de sofá://cb.ar0qqwli6cczm1u.cloud.couchbase.com netlify env:definir NOME DE USUÁRIO DO COUCHBASE Administrador netlify env:definir COUCHBASE_PASSWORD senha netlify env:definir COUCHBASE_BUCKET formulário de pesquisa |
Agora você pode adicionar seus arquivos, confirmar e enviar seu código. Parabéns, você fez o fullstack. Back-end, front-end e banco de dados. E implantou tudo ao vivo! Mas nosso trabalho ainda não terminou. Ainda há algumas coisas que podemos fazer para tornar isso mais profissional.
Etapa 6 - Feedback do usuário
No momento, não há muita coisa acontecendo quando o usuário clica no botão Enviar do nosso formulário. Precisamos alterar isso para que eles saibam que foram registrados com sucesso ou não. A primeira etapa é verificar se há um erro no lado do desenvolvimento. O código de status HTTP é bem feito, qualquer coisa igual ou superior a 400 geralmente é um erro, portanto, podemos fazer algo assim:
|
1 2 3 4 5 |
se (resposta.status >= 400) { <1> console.registro("Algo está errado"); <2> console.registro(aguardar resposta.texto()); <3> retorno falso; } |
|
1 2 3 |
<1> Status código que começa com 4 normalmente significa algo foi errado em o cliente lado. O errado dados foi enviado, o cliente faz não ter o direito permissão, o página faz não existir etc... Aqui nós teste se o código é iguais ou maior do que 400. <2> Se ele é, nós registro a mensagem em o console <3> Nós também registro o erro mensagem devolvido por o servidor |
Para testá-lo, basta cometer um erro de digitação em algum lugar da cadeia de conexão ou das credenciais do Couchbase. Você deverá ver erros no console da Web ao clicar em Enviar. Mas o console da Web é apenas para nós, precisamos adicionar uma mensagem de erro ou de sucesso adequada ao nosso usuário.
Adicionei alguns elementos HTML de extensão com mensagens de erro e sucesso logo antes do final do formulário. Observe o esconder Classe CSS que os torna invisíveis por enquanto.
|
1 2 3 4 5 6 7 8 |
... </div> <extensão id="form-error" classe="error-message hide" (esconder mensagem de erro)></extensão> <extensão id="thank-you-message" (mensagem de agradecimento) classe="esconder"> Seu participação tem foram registrado, agradecer você!. </extensão> </formulário> ... |
E aqui está o CSS correspondente. Exibindo o erro em vermelho, ocultando ou exibindo um elemento, e uma bela animação de fade-out, porque eu sou chique assim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
.contêiner .mensagem de erro { cor: vermelho; } .ocultar { exibição: nenhum; } .show { exibição: bloco; } .fade-out { animação: fadeOut facilidade 8s; -webkit-animation: fadeOut facilidade 8s; -moz-animation: fadeOut facilidade 8s; -o-animação: fadeOut facilidade 8s; -ms-animação: fadeOut facilidade 8s; }@keyframes fadeOut { 0% { opacidade:1; } 100% { opacidade:0; } } @-moz-keyframes fadeOut { 0% { opacidade:1; } 100% { opacidade:0; } } @-webkit-keyframes fadeOut { 0% { opacidade:1; } 100% { opacidade:0; } } @-o-keyframes fadeOut { 0% { opacidade:1; } 100% { opacidade:0; } } @-ms-keyframes fadeOut { 0% { opacidade:1; } 100% { opacidade:0; exibição: nenhum; } |
Agora vamos juntar tudo. As duas primeiras linhas obtêm os novos elementos de extensão que acabaram de ser adicionados. A chamada para form.reset() está limpando todos os valores do formulário quando o código de status da resposta retornada é 200. Depois, o resto é brincar com as classes CSS para fazer com que a mensagem apareça, depois desaparecer com a adição da classe fade-out, depois uma função de tempo limite de 7000 ms removerá todas as classes e ocultará o elemento novamente. É praticamente a mesma coisa quando há um erro.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const thankYouMessage = documento.getElementById('thank-you-message' (mensagem de agradecimento)); <1> const formError = documento.getElementById("form-error"); <1> se (resposta.status == 200) { formulário.redefinir(); <2> thankYouMessage.classList.adicionar('show'); <3> thankYouMessage.classList.adicionar('fade-out'); <3> setTimeout(função(){thankYouMessage.classList.remover('fade-out');thankYouMessage.classList.remover('show');}, 7000); <3> console.registro(aguardar resposta.texto()); retorno falso; } se (resposta.status >= 400) { console.registro("Algo está errado"); console.registro(aguardar resposta.texto()); formError.textContent = "Algo deu errado durante a gravação do seu contato."; <4> formError.classList.alternar('show'); <4> formError.classList.alternar('fade-out'); <4> setTimeout(função(){formError.classList.alternar('fade-out');formError.classList.alternar('show');}, 7000); <4> retorno falso; } |
|
1 2 3 4 |
<1> Nós atribuir nosso novo extensões para variáveis <2> Se coisas foi bem, nós redefinir o formulário's dados, ele shows para o usuário que ele trabalhado. <3> Nós primeiro adicionar a CSS classe que shows o erro mensagem, do que aplicar o desvanecimento-fora CSS classe, do que chamada o tempo limite função. Em 7000 ms, o desvanecimento-fora e show CSS classe vontade ser removido, escondido o sucesso mensagem novamente. <4> Nós fazer o mesmo coisa quando lá é e erro, usando o formError HTML elemento em vez disso. |
Agora você pode testar o envio de um formulário novamente e ver a mensagem de sucesso ou de erro diferente, dependendo do que você decidiu fazer. Quando estiver satisfeito, você poderá adicionar, confirmar e enviar esse código.
Parabéns, você chegou até o final deste guia! Você usou o git, o GitHub, o Netlify e o Couchbase Capella para implantar um formulário HTML na Web e certificou-se de que o conteúdo fosse armazenado em um banco de dados sempre que os usuários enviassem o formulário.
Pronto para mais?
-
- Confira Recursos para desenvolvedores do Couchbase: aplicativos de amostra, código e tutoriais.
- Participe de nossa Centro Comunitário para usar o Discord, os fóruns e muito mais.
