Criando aplicações Vue.js com back-end "no-code"

Hoje iremos aprender com este tutorial mão na massa como criar uma aplicação Vue.js para web com um back-end "sem código". Isso pode soar um pouco diferente, mas é o que muitas empresas e startups vem buscando para acelerar o processo de desenvolvimento de suas aplicações web, mobiles e desktop.

Antes de tudo vamos conhecer um pouco da ferramenta Deskree que será usada para a construção do nosso back-end sem código.

O que é o Deskree ?

Deskree é uma solução de desenvolvimento de back-end sem código baseado na Web. Ele permite que pessoas criem back-ends para aplicativos em menos de 10 minutos!
Com seu painel administrador que você acessa através do seu browser permite a configuração de banco de dados, integrações com ferramentas de terceiros, permissões dde usuários, autenticação e muito mais.

Recursos disponíveis com o Deskree

Vamos analisar alguns dos recursos que você terá em mãos utilizando a plataforma Deskree:

Banco de dados e Armazenamento simplificados.
Você tem a possibilidade de criar banco de dados com tabelas e colunas praticamente ilimitadas com apenas alguns cliques.
Não há necessidade de conhecimento em SQL :)

API Rest e Graphql
Para cada tabela que você criar em seu banco de dados, será gerada APIs Json Rest e GraphQL em tempo real!

Autenticação
Em poucos cliques você tem disponível na sua aplicação autenticação por meio de email/senha ou com métodos de autenticação do facebook, github, google, etc.

Permissões
Permissões detalhadas e funções de usuário por cada endpoint, não apenas para seu banco de dados, mas também para cada integração que você ativar.

Integrações
Possibilidade de integrar com ferramentas de terceiro populares no mercado como Shopify, Stripe, Webflow, Sendgrid e muitos outros

Analytics
Veja em tempo real como suas APIs, armazenamento e muito mais que vem sendo usado em seu ambiente.

Com todos esses recursos parece ser complexo realizar essas configurações não é? Mas pode ficar tranquilo, iremos criar nossa conta, criar nosso banco de dados com algumas tabelas e conectar um front-end nas APIs que serão geradas automaticamente. Vamos lá!

Registrando-se

Bem, para iniciarmos e termos acesso ao painel do Deskree, precisamos primeiro criar nossa conta. Para isso, você pode acessar a página de registro e realizar seu cadastro. No meu caso realizei o cadastro manual preenchendo o formulário com nome, email e senha.

Em seu email cadastrado você receberá um link para realizar a confirmação de conta. Ao clicar e realizar a verificação você verá a mensagem de sucesso e já terá a possibilidade de criar seus apps.

Agora para adicionarmos o nosso primeiro projeto na plataforma basta clicar no card "Add New Project" para adicionar as informações da nossa aplicação.

Um modal será exibido para preenchermos as informações nossa aplicação. Nosso exemplo será um aplicativo de notas e lembretes chamado "My Notes". Então, no campo de nome do projeto, irei colocar "My Notes".
No campo Project ID vamos colocar my-notes.
Os campos de cor, timezone, função no projeto e objetivo da aplicação você preenche conforme suas preferências. Seguem minhas escolhas abaixo:

E agora na próxima tela, irei escolher o plano Free já que essa é uma aplicação de testes. Mas mesmo assim terei acesso a grande maioria dos recursos.

Na próxima tela será exibido as funcionalidades padrão que nosso ambiente vai ter:

Agora iremos realizar a configuração do nosso banco de dados e suas colunas. Por padrão ele já vem com a tabela users para salvar as informações de cadastro da nossa aplicação quando estiver implementada.

Adicionaremos uma nova tabela clicando em "Add New Table" e colocaremos o nome da tabela de notes.

A tabela já irá possuir algumas colunas padrões como uid*, author, createdAt e updatedAt. Iremos adicionar 2 novas colunas para salvar as informações das nossas notas. Para isso basta clicar no símbolo de + do lado direito da nossa tabela recém criada e adicionar os campos title e description, ambos com o type String conforme mostrado nas imagens abaixo.

Notem que title foi marcado como Required, pois não faz sentido cadastrarmos uma nova anotação sem nenhum título.

Agora iremos escolher os métodos de autenticação presentes em nossa aplicação. Como o foco deste primeiro projeto não é esse, iremos marcar apenas Email/Password para termos ao menos 1 método de autenticação configurado. Porém, nossas APIs serão públicas apenas para efeito de estudos.

Na próxima etapa podemos configurar algum tipo de regra para os usuários. Mas pode ser configurado posteriormente. Então apenas vamos prosseguir nesta etapa.

A próxima etapa permite a integração com outras ferramentas de diversos tipos e finalidade. Neste artigo ainda não iremos utilizá-las, então também iremos prosseguir com essa etapa.

E então chegamos ao fim da configuração de nossa aplicação. Podemos ir para o dashboard verificar se tudo ocorreu bem.

Agora é com a Deskree! Aguarde alguns minutos enquanto seu ambiente é configurado e disponibilizado suas APIs e outros recursos de forma automática.

Quando seu ambiente estiver concluído você receberá um email informando:

Agora você terá acesso a todos os recursos através do menu lateral e poderá gerenciar tudo a partir daí.

Vamos agora criar nossa aplicação Vue.js e conectar com a nossa API Rest que foi gerada.

Criando aplicação Vue.js com Quasar Framework

Para criar nossa aplicação Vue.js utilizaremos outro framework, o Quasar.
Quasar é totalmente baseado no Vue.js e entrega um CLI muito poderoso que nos permite utilizar o mesmo código base para ter simultaneamente uma Single Page Application, um Progressive Web App, aplicativos cordova ou capacitor para android e iOS, aplicações desktop com Electron e até mesmo Extensões para navegadores. Poderoso não é mesmo ?

Também podemos contar com sua variedade de componentes UI para criar interfaces robustas em poucos minutos. Esse será um grande aliado ao Deskree para você criar aplicações em tempo recorde!

Seu ambiente precisa ter o Node.js na versão 14 ou superior para utilizarmos os últimos recursos disponíveis no framework.

Para criar nosso projeto com o Quasar CLI basta utilizar um dos seguintes comando para iniciar:

yarn create quasar

#or

npm init quasar

Ao executar o comando teremos algumas opções para escolher no terminal. A primeira delas vamos escolher a opção App with Quasar CLI, let's go! para criar nosso projeto com o CLI do Quasar. Para selecionar basta pressionar enter.

Nos próximos passos teremos algumas opções para preencher como o nome da pasta do projeto, nome da aplicação, etc. Irei resumir na imagem abaixo:

Basicamente o nome do nosso projeto ficou como my-notes-deskree, e escolhemos instalar ESLint e Axios em nosso app.

Por fim, apenas pressione enter para prosseguir com a instalação utilizando yarn.

Aguarde a instalação finalizar, após finalizar acesse o repositório criado "cd my-notes-deskree" e execute o comando para iniciar o nosso ambiente de desenvolvimento:

quasar dev

Por default nosso ambiente de desenvolvimento irá executar em uma porta disponível em nosso ambiente, no meu caso a porta disponível foi 9000 então em meu navegador a aplicação já foi aberta automaticamente na url http://localhost:9000 como exibido na imagem abaixo:

Agora vamos ao código de nossa aplicação !

Nosso primeiro passo vai ser remover o menu lateral que não vamos utilizar nesta aplicação. Para isso acessamos o diretório layouts e o arquivo MainLayout.vue.

Removeremos os componentes na toolbar, e a importação do componente EssentialLink. Removeremos também toda a lógica dentro do setup pois não será mais utilizada. Nosso arquivo MainLayout.vue ficará desta maneira:

<template> 
<q-layout view="lHh Lpr lFf">
   <q-header elevated>
     <q-toolbar>

       <q-toolbar-title>
         My Notes
       </q-toolbar-title>

       <div>Quasar v{{ $q.version }}</div>
     </q-toolbar>
   </q-header>

   <q-page-container>
     <router-view />
   </q-page-container>
 </q-layout>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
 name: 'MainLayout'
})
</script>

Antes de iniciar a construção do nosso formulário, vamos configurar nossas variáveis ambiente para serem usadas nas requisições da API. Para isso iremos criar 2 novos arquivos na raiz do nosso projeto. Um chamado .env e outro .env.local.

Iremos colocar em ambos os arquivos o seguinte parâmetro:

VITE_API_BASE_URL="https://my-notes.api.deskree.com/api/v1/rest/collections/"

Observe que colocamos no início da url o ID my-notes da nossa aplicação que foi criada no painel Deskree. Para utilizarmos esse a URL base em nossas requisições precisamos agora modificar a baseURL do Axios. Para isso acessamos o diretório src/boot e o arquivo axios.js e modificamos a linha com a função axios.create() para ficar da seguinte forma:

const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL })

Desta forma estaremos utilizando a variável criada nos arquivos .env e .env.local.
E como utilizamos o Vite na hora da criação do nosso projeto, nossas variáveis ambientes são prefixadas com VITE_.

Criando o Formulário

Normalmente criar formulários é sempre uma tarefa repetitiva, mas com o Quasar conseguimos realizar isso de forma resumidamente simples e eficaz. Primeiro vamos criar um novo arquivo chamado FormNotes.vue dentro do diretório src/pages.

Dentro deste novo arquivo, iremos criar uma nova página com o componente , 1 input para o usuário adicionar o título com o componente , e 1 área de edição com o componente para colocar a descrição da nota.

Também colocaremos botões para cadastrar, deletar e voltar. E para realizar de fato as requisições criaremos 3 funções para serem utilizadas com os botões. Então nossa parte html ficará da seguinte forma:

<q-page padding>
   <q-form @submit="handleSubmit">
     <q-input
       label="Título"
       v-model="form.title"
       outlined
     />

     <q-editor
       v-model="form.description"
       min-height="5rem"
       class="q-mt-sm"
       toolbar-rounded
     />

     <div class="row justify-center">
       <q-btn
         v-if="isUpdate"
         label="Deletar"
         color="negative"
         class="q-mt-md q-mr-md"
         rounded
         @click="handleDeleteNote"
       />
       <q-btn
         label="Voltar"
         color="white"
         text-color="black"
         class="q-mt-md q-mr-md"
         :to="{ name: 'home' }"
         rounded
       />
       <q-btn
         label="Cadastrar"
         color="primary"
         class="q-mt-md"
         rounded
         type="submit"
       />
     </div>
   </q-form>
 </q-page>
</template>

E o nosso script ficará assim:

<script>
import { defineComponent, ref, onMounted, computed } from 'vue'
import { api } from 'boot/axios'
import { useRouter, useRoute } from 'vue-router'
import { useQuasar } from 'quasar'

export default defineComponent({
 name: 'FormTeams',
 setup () {
   const form = ref({
     title: '',
     description: ''
   })
   const router = useRouter()
   const route = useRoute()
   const isUpdate = computed(() => route.params.uid)
   const q = useQuasar()

   onMounted(() => {
     if (isUpdate.value) {
       handleGetNote(route.params.uid)
     }
   })

   const handleSubmit = async () => {
     try {
       if (isUpdate.value) {
         await api.patch(`notes/${route.params.uid}`, form.value)
       } else {
         await api.post('notes', form.value)
       }
       router.push({ name: 'home' })
     } catch (error) {
       console.error(error)
     }
   }

   const handleGetNote = async (uid) => {
     try {
       const { data } = await api.get(`notes/${uid}`)
       form.value = data.data
     } catch (error) {
       console.error(error)
     }
   }

   const handleDeleteNote = async () => {
     try {
       await api.delete(`notes/${route.params.uid}`)
       q.notify({
         type: 'positive',
         message: 'Nota excluída com sucesso!'
       })
       router.push({ name: 'home' })
     } catch (error) {
       console.error(error)
     }
   }

   return {
     form,
     handleSubmit,
     handleDeleteNote,
     isUpdate
   }
 }
})
</script>

Observe que importamos api do boot/axios que modificamos anteriormente, e adicionamos nas chamadas GET, PATCH E DELETE apenas a tabela que iremos lidar neste momento, que no caso é a tabela notes.

Um outro ponto de atenção é que estamos utilizando o plugin de notificação do quasar quando disparamos a função deletar. Então precisamos adicionar este plugin no arquivo quasar.conf.js que fica na raiz do projeto:

  // Quasar plugins
  plugins: [
    'Notify'
  ]

Por fim, precisamos configurar uma rota para acessar essa nova página em nossa aplicação. Então dentro do diretório router acessamos o arquivo routes.js e adicionamos uma nova rota dentro do parâmetro chidren. Também modificamos a rota existente e adicionamos um parâmetro name para facilitar o acesso:

 const routes = [
{
   path: '/',
   component: () => import('layouts/MainLayout.vue'),
   children: [
     { path: '', name: 'home', component: () => import('pages/IndexPage.vue') },
     { path: 'form/:uid?', name: 'form', component: () => import('pages/FormNotes.vue') }
   ]
 },

Observe que adicionamos no fim do nosso patch o uid, isso servirá para quando quisermos editar uma nota já existente.
Depois de salvar o arquivo se tentarmos acessar a url http://localhost:9000/#/form conseguiremos visualizar o seguinte resultado no navegador:

Perfeito! Agora vamos tentar inserir uma informação preenchendo o formulário e clicando em Cadastrar.
Caso tudo ocorra bem você será redirecionado para a página principal. E poderemos ver o resultado do cadastro no nosso painel Deskree. Basta acessar o menu Database e clicar na tabela notes:

Agora precisamos listar nossas notas na nossa página principal e criar também um botão para acessar o formulário.
Para isso iremos utilizar 1 componente de lista do Quasar chamado e um botão flutuante com o componente .
Modificamos então o arquivo IndexPage.vue dentro do diretório pages, e seu trecho HTML deve ficar desta maneira:

<template>
 <q-page padding>
   <div class="row">
     <q-list class="col-12" bordered separator>
       <q-item
         v-for="note in notes"
         :key="note.uid"
         clickable
         v-ripple:primary
         @click="handleEditNote(note.uid)"
       >
         <q-item-section>
           <q-item-label>{{ note.attributes.title }}</q-item-label>
           <q-item-label caption>
             <span v-html="limitText(note.attributes.description)"></span>
           </q-item-label>
         </q-item-section>
       </q-item>
     </q-list>
   </div>

   <q-page-sticky position="bottom-right" :offset="[18, 18]">
     <q-btn fab icon="add" color="primary" label="Novo" :to="{ name: 'form' }" />
   </q-page-sticky>

 </q-page>
</template>

E no trecho script iremos criar 1 função para buscar nossas notas na API, 1 função para nos direcionar para o formulário de edição passando o parâmetro uid, e 1 função para mostrar apenas uma parte da descrição da nossa nota. Então o trecho script deve ficar como a seguir:

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { api } from 'boot/axios'
import { useRouter } from 'vue-router'

export default defineComponent({
 name: 'IndexPage',
 setup () {
   const notes = ref([])
   const router = useRouter()

   onMounted(() => {
     handleGetNotes()
   })

   const handleGetNotes = async () => {
     try {
       const { data } = await api.get('notes')
       notes.value = data.data
     } catch (error) {
       console.error(error)
     }
   }

   const handleEditNote = (uid) => {
     router.push({ name: 'form', params: { uid } })
   }

   const limitText = (text) => {
     return text.substring(0, 80) + '...'
   }

   return {
     notes,
     handleEditNote,
     limitText
   }
 }
})
</script>

Ao salvar o arquivo o resultado em nosso browser deve ser como este:

Podemos agora acessar o formulário através do botão + Novo e também o formulário de edição clicando na nota que deseja editar. Veja também que ao clicar em uma nota existente você tem disponível o botão deletar:

Com isto temos uma aplicação que realiza um CRUD completo. E o mais interessante é que não escrevemos 1 linha de código back-end graças aos recursos da plataforma Deskree.

E claro, isso é apenas o início. Para uma aplicação que será colocada em produção precisamos realizar autenticação do usuário para que ele veja apenas as suas notas cadastradas. Mas isso veremos num próximo artigo =)

Espero que você tenha gostado do conteúdo, para dúvidas e suporte acesse as redes da Deskree e até a próxima!

Site Deskree: https://www.deskree.com/
Discord: https://discord.com/invite/xzZXQ7GwRh
Twitter: https://twitter.com/deskree_backend
Github do projeto: https://github.com/patrickmonteiro/my-notes-deskree