Criando aplicações Vue.js com back-end "no-code"
Tags: vue, vite, javascript, tutorial
Published: 2022-10-21 01:48:13

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](https://www.deskree.com/) que será usada para a construção do nosso back-end sem código.

## O que é o Deskree ?

[Deskree](https://www.deskree.com/) é 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.

![Plataforma Deskree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c98c4qb1qrpyym9c1489.png)

## 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.


![Cadastro Deskree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3u0rzideu4lrfzugr4cc.png)

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.


![Confirmação de Conta](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0atfg7fa4lv2q4k0sj5n.png)

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.


![Add new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9q3aj0i240n670ylaaq1.png)

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:


![Preferências](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32pia9t5ezd7s9f40xjw.png)

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.


![Plano free](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsgwjwhumipxp7d7twt2.png)

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

![Funcionalidades](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thi5g4jmp8h5s9gq9u24.png)

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.

![Banco de dados](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p516e6fvawuy07qfl8d2.png)

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

![Nova tabela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4o6q4vuks3h3f97kqes.png)

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.

![Novo campo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tes3e2n62onwpga7gln.png)

![Novo campo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7t5pk0f2g5ydjscu3th.png)

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.


![Autenticação](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3xysdj6jgl49eyyr033.png)

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.


![Rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jheofnzry99xn636jnbc.png)

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.

![Integrações](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3bh9crsk5cm84njbufm.png)

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

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0pa5u5ki1uvwfbb17g7.png)

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

![Configurando ambiente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gazkmqzgjjpklvq3lu8p.png)

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

![Email confirmação](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iw2psskeoa9zgj7nkwu.png)

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](https://vuejs.org/) e conectar com a nossa API Rest que foi gerada.

## Criando aplicação Vue.js com [Quasar Framework](https://quasar.dev/)

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](https://nodejs.org/en/download/) 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.


![Quasar CLI Starter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q9117z4w7arb14y5wf3.png)

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:


![Quasar options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdnvb84jd9rn3b9xm1q4.png)

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.

![Yarn configs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efixlt7c2m6hybd80q0p.png)

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
```

![Quasar dev executando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2neqzhytawvl2lx4u3no.png)

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:

![Quasar dev browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhj5cxz45r6ylcujwp43.png)

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 [<q-button>](https://quasar.dev/vue-components/button) na toolbar, [<q-drawe>](https://quasar.dev/layout/drawer) 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:

```vue
<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.


![arquivo .env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30zrrnq3jatjq5fkllwo.png)

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:

```javascript
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 [<q-page>](https://quasar.dev/layout/page), 1 input para o usuário adicionar o título com o componente [<q-input>](https://quasar.dev/vue-components/input), e 1 área de edição com o componente [<q-editor>](https://quasar.dev/vue-components/editor) 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:

```vue
<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:

```vue
<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](https://quasar.dev/quasar-plugins/notify) 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:

```javascript
  // 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:

```javascript
 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:

![Form Quasar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxj20p1wkziwns7srapl.png)

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**:


![table notes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ozkcomel16qxryejdgo.png)

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 [<q-list>](https://quasar.dev/vue-components/list-and-list-items) e um botão flutuante com o componente [<q-page-sticker>](https://quasar.dev/layout/page-sticky). 
Modificamos então o arquivo **IndexPage.vue** dentro do diretório pages, e seu trecho HTML deve ficar desta maneira:

```vue
<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:

```vue
<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:


![List notes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3955v1jxih795f20hph.png)

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:

![Form finnally](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veb3ytx6md0vo06lt7pv.png)

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](https://www.deskree.com/)**.

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