Criando um aplicativo Sticky Notes usando 8base, GraphQL e React

Veja a versão demo do programa aqui .

O gerenciamento do tempo sempre foi uma grande luta para mim, as tarefas planejadas são esquecidas, as notas são perdidas, porque são distribuídas por vários aplicativos que salvam as notas. A solução não está no aplicativo para anotações personalizadas que sugiro que você crie, embora seja provável que você a use por causa do tempo que dedicou a ela.

Para criar um aplicativo para anotações, precisamos de uma pilha simples que praticamente não exija um back-end de desenvolvimento e um aplicativo que possa ser facilmente implantado. Com base nesses requisitos, escolheremos a pilha para o aplicativo. É assim:
-React - para desenvolvimento front-end. Esta é uma biblioteca popular para a criação de interfaces com o usuário, que pode ser facilmente implantada em várias plataformas, como Now e Netlify.
-8base GraphQL - camada de banco de dados para nossa aplicação. Aqui vamos armazenar e ler solicitações em nosso aplicativo. Com o 8base, você não precisa criar e manter um back-end para o aplicativo.

Eu criei com sucesso um aplicativo simples usando essas ferramentas. Neste artigo, veremos o processo de criação deste aplicativo e configuração de um back-end em execução na plataforma 8base.



Se as capturas de tela não forem convenientes para você, você sempre poderá olhar para um aplicativo de demonstração . As notas são colocadas aleatoriamente em uma página da web e podem ser arrastadas para lugares diferentes.

Seguir as instruções requer um entendimento básico de React e Node.js. Antes de começar, verifique se você tem o Node e o npm / yarn instalados .

Também usaremos consultas GraphQL no projeto, portanto, alguma familiaridade com essa tecnologia será útil.

A plataforma 8base oferece uma ampla variedade de recursos para ajudar os desenvolvedores a criar aplicativos de maneira mais rápida e fácil. Com o 8base, você pode organizar facilmente o back-end do seu aplicativo sem escrever código. Usando a plataforma 8base, você pode criar seu back-end usando uma interface gráfica simples que permite executar ações como:

• Defina seu esquema de dados: crie tabelas / relacionamentos de tabela.
• Carregar arquivos.
• Defina direitos de acesso e funções de autorização.
• Gerencie vários projetos usando oficinas.
• Crie consultas usando o API Explorer (baseado no GraphQL).

Neste guia, veremos como usar o 8base para configurar rapidamente o lado do servidor e processar dados usando a API GraphQL. Nosso aplicativo front-end será construído usando o React e interagirá com o servidor usando o GraphQL.

Para começar a usar o 8base, siga estas etapas:

1. Crie uma conta no 8base. É grátis



2. Após a conclusão do registro, clique no botão Construtor de Dados para ir para a página Dados e clique em Nova Tabela para começar a configurar o back-end.



3. Após carregar uma nova tabela, você será direcionado para o esquema e poderá começar a definir os campos. Vamos observar algumas coisas. À esquerda, você verá Tabelas do sistema e Suas tabelas .

Cada novo espaço de trabalho do 8base vem automaticamente com várias tabelas internas. Essas tabelas são usadas para itens como Arquivos, Configurações e Permissões e são acessíveis através da API GraphQL do 8base.

4. Vá em frente e crie a tabela do Notes , que consiste nos seguintes campos:

title : tipo de campo Texto . Aqui estará o título da nota.
texto : tipo do campo Texto . Este campo conterá o corpo da nota.
Nosso esquema é bastante simples e é usado para obter as oportunidades que estamos tentando realizar.



5. Em seguida, copie o URL da API do terminal (disponível na parte inferior esquerda) - esta é a principal linha de comunicação entre as partes cliente e servidor do seu aplicativo.



6. Finalmente, para os fins deste guia, permitiremos por padrão o acesso público aos Convidados , portanto, a autenticação não é necessária. Para permitir acesso de convidado à nova tabela do Notes, vá para Configurações> Funções> Convidado e marque as caixas correspondentes na seção Notas. Todos os usuários não autorizados que acessam o terminal da API recebem a função Convidado por padrão. A autorização não é coberta neste guia. Aqui você pode aprender mais sobre como trabalhar com ele.



Agora que terminamos de configurar o back-end usando o 8base, começaremos o trabalho no lado front-end do aplicativo.

Introdução

Criei um projeto inicial para configurar e reduzir facilmente as despesas gerais, de modo que o artigo basicamente descreve como começar com o 8base e o GraphQL. O esqueleto do aplicativo já está configurado, incluindo os estilos e a estrutura do projeto. As seguintes opções estão disponíveis na ramificação inicial:

1. Um componente do formulário de nota para criar uma nota.
2. Um componente de uma nota que exibe os detalhes de uma única nota.
3. Um componente da lista de notas que exibe uma lista de notas disponíveis.

Execute o seguinte comando para clonar o repositório:

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

Abra a pasta e instale as dependências do projeto executando o seguinte comando:

 npm install 

Inicie o servidor de aplicativos React executando o npm start no terminal na pasta raiz do seu projeto.

Conecte-se ao back-end 8base usando o GraphQL

Agora que nosso front-end inicial está em funcionamento, o próximo passo é configurar o cliente para interagir com o back-end 8base usando o GraphQL. Uma biblioteca útil para ajudá-lo a se conectar é o apollo-boost ; Ele fornece um cliente para conectar-se ao back-end do GraphQL usando um URI. URI é um ponto de extremidade fornecido pelo 8base. Vamos atualizar o arquivo index.js para configurar o 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 pega um objeto com a propriedade uri como argumento; ao mesmo tempo, o cliente nos dá acesso para receber, atualizar e excluir dados usando a interface do usuário fornecida. Certifique-se de substituir o valor de <YOUR_8BASE_ENDPOINT> pelo terminal real.

Em seguida, agrupamos o aplicativo no ApolloProvider, que aceita o cliente prop. O ApolloProvider carrega o esquema da tabela 8base, que fornece acesso a todas as propriedades do modelo de dados no seu código de front-end.

Receber e exibir notas

Para obter notas do back-end, escreveremos uma consulta GraphQL para receber notas armazenadas no 8base. Vamos começar atualizando o arquivo App.js.

Adicione as seguintes importações ao local onde você encontra o comentário TODO - 1:

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

Eles serão úteis para criar consultas GraphQL e enviar adereços ao componente App para fazer anotações. Em seguida, precisamos adicionar uma solicitação para receber notas do lado do servidor. Atualize NOTE_LIST_QUERY para se parecer com o snippet abaixo:

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

Se você não tiver certeza sobre suas solicitações, sempre poderá testá-las no 8base API Explorer . Vamos verificar a consulta acima.

Se você executar esta consulta no seu explorador, provavelmente retornará uma matriz vazia, porque você não criou nenhuma anotação. Podemos criar notas facilmente usando a barra de ferramentas 8base. Siga o link de dados na barra lateral e siga as instruções nas capturas de tela abaixo:



Obteremos id , título e texto dos elementos notesList. Em seguida, prepararemos o componente App para usar as notas recebidas da solicitação. Finalmente, usaremos o graphql HOC (componente de ordem superior) para associar a consulta ao componente App . A função aceita a string de consulta e os parâmetros de configuração.
// 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); 

Substitua a linha de exportação existente no comentário TODO - 3 acima.

A função graphql retorna uma função "enhancer", que estenderá qualquer componente passado a ela com os recursos do GraphQL. Isso corresponde ao padrão de componente de alta ordem que também é usado pela função connect no response-redux.

Usando a função graphql() , podemos acessar o terminal GraphQL. Ele aceita a consulta como o primeiro parâmetro (NOTE_LIST_QUERY), o segundo como config, o valor de retorno é HOC, que deve ser executado com o componente necessário como argumento. No fragmento, passamos o valor da propriedade data.noteList novas notas da variável. Ao retornar esse valor, podemos acessá-lo dentro do componente como props.notes e o status do download como props.loading .

O método refetch será muito útil para que possamos alcançar algo próximo à atualização em tempo real. Chamaremos a função após cada mutação para garantir que os dados no aplicativo sejam sempre sincronizados com o back-end 8base.
Se você alternar para localhost: 3000, verá a nota que acabou de criar. Precisamos ser capazes de criar notas sem visitar a barra de ferramentas 8base, isso significa passar para o próximo nível do GraphQL .... Mutações!

Criar notas

Depois de concluir as configurações para receber notas do back-end, a próxima etapa lógica é adicionar a capacidade de criar notas. Os arquivos iniciais contêm o componente de formulário e precisamos atualizar o componente para permitir que a mutação salve as notas criadas no back-end 8base.

Na seção anterior, executamos a solicitação de recebimento de notas do back-end; nesta seção, executaremos mutações para salvar novas notas, a mutação é semelhante à solicitação, com a única diferença é que a mutação é chamada sempre que houver necessidade de alterar os dados. Após criar tabelas no 8base, as consultas e mutações para esta tabela são facilmente acessíveis na API do Explorer; portanto, sempre podemos chegar lá se duvidarmos de como a mutação deve ser estruturada.

Vamos ver como é a mutação para criar notas no API Explorer. Vá para a barra de ferramentas 8base e clique no API Explorer na barra lateral.

No API Explorer, clique no link de mutação , como mostrado acima. Isso mostrará todas as mutações disponíveis. Procure o responsável pela criação de anotações:



A captura de tela mostra que o nome da mutação é noteCreate e é necessário um argumento do tipo NoteCreateInput . NoteCreateInput - Define o tipo de corpo da solicitação necessário para criar uma nota.

Agora que sabemos o que é necessário de nós, vamos à implementação. Eu cuidei de você e criei um formulário para criar notas, então resta adicionar uma mutação ao componente usando a função graphql .

Abra src / components / note-form / index.js , adicione as seguintes importações nas quais você tem um comentário do TODO 1.:

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

Em seguida, declararemos a mutação, atualizaremos a variável NOTE_MUTATION e atribuiremos um novo valor, semelhante ao fragmento abaixo:

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

Em seguida, associamos a mutação ao componente usando a função graphql . Substitua a linha de exportação no arquivo pelo trecho abaixo:

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

Assim, a função graphql passa a função nomeada noteCreate , que será usada para executar a mutação de criação. Vamos usar a função noteCreate para criar uma nota ao enviar um formulário.

Vá para o comentário do TODO 4 e atualize a função de envio para se parecer com o trecho abaixo:
// TODO - 4

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

No trecho acima, usamos a função noteCreate para executar a mutação de criação na tabela de notas. O argumento passado para a função é um objeto que contém variáveis e um corpo de dados .

Esperamos até que a solicitação seja concluída e, em seguida, verificamos seu sucesso encontrando o ID no corpo da resposta. Em seguida, redefinimos o estado da nota e buscamos novamente. Mencionei a função refetch anteriormente neste artigo, mas deixe-me atualizar sua memória. Refetch força seu componente a repetir a consulta que você definiu na função graphql() .

Agora tudo está pronto para o teste. Vá para localhost: 3000, preencha o formulário e aproveite o resultado.

Excluir notas

Que bom é qualquer aplicativo de anotações se você não pode excluir todas as anotações e fingir que elas nunca existiram. Procedimento para excluir uma nota:

1. O usuário clica no botão excluir.
2. Uma janela de confirmação é exibida - isso reduz o número de usuários mal-intencionados, muito útil.
3. Resta cometer um ato - exclua a nota.

A configuração para excluir notas está no arquivo src / note-card / delete-button.js . Abra o arquivo e adicione as seguintes importações na parte superior do arquivo. Em particular, abaixo de onde o TODO 1 está localizado:

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

Em seguida, escreva a mutação de exclusão e atribua-a à variável DELETE_MUTATION . Isso deve se parecer com o seguinte:

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

Em seguida, associamos a mutação ao componente usando a função graphql . Substitua a linha de exportação no arquivo pelo fragmento abaixo:

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

A função graphql passa a função deleteNote denominada, que será usada para executar a mutação de exclusão. Agora podemos atualizar o manipulador de eventos click e adicionar as configurações necessárias para excluir a anotação.

Vá para a função onDeleteClick no componente, coloque o seguinte fragmento dentro da função:

 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(); } }; 

Quando você clica no botão excluir, no corpo do objeto de dados , definimos o campo id como noteId e, em seguida, mostramos ao usuário uma mensagem de confirmação, indicando inequivocamente que pretendemos excluir esta nota permanentemente. Se o usuário fizer como pretendido e decidir continuar, chamaremos a função deleteNote para alterar a exclusão. Quando isso estiver concluído, você precisará de um aplicativo.

Aqui está como deve ficar. Vá para localhost: 3000 e tente excluir a nota:


Você pode encontrar uma demonstração deste aplicativo aqui .

Conclusão

Tenho certeza de que você se divertiu ao criar esse aplicativo, vimos como escrever consultas para receber dados do lado do servidor da 8base, bem como como escrever mutações de criação e exclusão . O 8base como plataforma é relativamente fácil de navegar e oferece uma interface de usuário intuitiva. Passei a noite descobrindo. Você pode preencher o buraco ausente aprendendo a escrever mutações de atualização e adicionar a capacidade de editar notas. Estou certo de que os usuários ficarão satisfeitos. Você também pode ver a documentação oficial para obter mais informações sobre a plataforma. Você pode encontrar o código fonte do aplicativo aqui .