Como criar e implantar um aplicativo Nuxt?

O Nuxt.js é uma estrutura de código aberto criada com base no Vue.js, Nitro e Vite, que permite desenvolver aplicativos da Web.

Inspirado no Next.js (uma estrutura React para renderização do lado do servidor), o Nuxt.js permite que os desenvolvedores criem aplicativos da Web rápidos aplicando diferentes modos de renderização.

Lançado em 2016, o Nuxt.js ganhou ampla aceitação entre os desenvolvedores devido à sua filosofia amigável e recursos avançados.

Vantagens do Nuxt.js

O Nuxt.js oferece várias vantagens que o tornam uma opção atraente para o desenvolvimento do Vue.js:

Renderização universal

O Nuxt.js controla como o seu aplicativo Web é exibido para o usuário. Ele começa renderizando a página inicial no servidor, o que torna o carregamento muito rápido, especialmente para pessoas com conexões de Internet mais lentas.

Isso ajuda os mecanismos de pesquisa a rastrear seu site mais rapidamente, o que leva a um melhor SEO.

Em seguida, o Nuxt.js alterna suavemente para uma renderização no lado do cliente (SPA) para navegar entre as páginas do seu aplicativo. Isso mantém as coisas rápidas e responsivas, exatamente como você espera de um site moderno.

Desempenho otimizado por meio de hidratação e divisão de código

O Nuxt 3 permite a hidratação seletiva, o que significa que segmentos do estado do aplicativo são hidratados no lado do cliente para um carregamento mais rápido da primeira página e uma experiência de usuário aprimorada, o que é muito útil para um aplicativo com uma árvore de estado enorme e muitas partes.

Da mesma forma que o Next.js, o Nuxt divide os arquivos automaticamente em pacotes menores, dependendo das rotas.

Dessa forma, o navegador requer apenas o código relacionado à exibição atual do servidor, reduzindo significativamente o tempo de carregamento da página do usuário.

Isso significa que menos recursos de largura de banda estão sendo utilizados e uma melhor experiência do usuário.

Roteamento integrado

O Nuxt.js, por padrão, lida com rotas por meio de roteamento baseado em arquivos, simplificando a navegação e o gerenciamento de rotas em seu aplicativo.

Ele também permite que você opte por configurar suas rotas dinamicamente para cenários de roteamento mais complexos.

Rotas de API

O Nuxt.js permite que você deixe de configurar um servidor separado para tarefas simples! Ele tem atalhos integrados chamados rotas de API.

As rotas de API podem lidar com a busca de dados durante a renderização no lado do servidor, oferecendo suporte a APIs RESTful e GraphQL. Isso torna seu aplicativo mais ágil e ajuda os mecanismos de pesquisa a entender melhor o conteúdo do seu aplicativo.

Limitações do Nuxt.js

Embora o Nuxt.js ofereça uma experiência de desenvolvimento avançada, aqui estão algumas limitações a serem consideradas:

Curva de aprendizado

O Nuxt.js apresenta conceitos que diferem do desenvolvimento tradicional do Vue.js. Ser novo no Nuxt.js requer tempo para se adaptar à sua arquitetura e aos seus recursos específicos.

O Nuxt também oferece um vasto ecossistema de ferramentas, bibliotecas e plug-ins. Familiarizar-se com essas opções pode aumentar a curva de aprendizado inicial.

Ecossistema limitado

Ao contrário de outras estruturas importantes, como React e Angular, o Nuxt é relativamente novo. Como resultado, seu ecossistema de bibliotecas e plug-ins de terceiros ainda está crescendo.

Você precisará criar soluções personalizadas para atender a determinados requisitos em situações específicas.

Complexidade na renderização do lado do servidor

Embora a renderização no lado do servidor (SSR) seja um recurso avançado do Nuxt.js, ela pode tornar o desenvolvimento de aplicativos mais complexo. Em comparação com métodos de renderização mais diretos, a SSR tem uma curva de aprendizado mais acentuada.

Além disso, a implementação eficaz da SSR exige planejamento e gerenciamento cuidadosos da obtenção de dados e do estado do aplicativo.

Isso pode levar a possíveis erros ou inconsistências entre o conteúdo inicialmente renderizado no servidor e a versão final e interativa renderizada no cliente.

Criação e implantação de um aplicativo Nuxt.js no Back4app

Criaremos um aplicativo de gerenciamento de contatos para entender melhor como criar e implantar um aplicativo Nuxt com o Back4App.

Esse aplicativo permitirá que os usuários criem, visualizem e excluam suas informações de contato, mantendo a agenda de contatos da rede organizada e facilmente acessível.

Para o backend deste projeto, usaremos o banco de dados PostgreSQL integrado do Back4app para armazenar informações de contato, como nome, e-mail, números de telefone e empresa.

Esse processo será facilitado com a ajuda do agente de IA do Back4App.

Para o front-end do projeto, usaremos o Nuxt.js para criar a interface do usuário do aplicativo. Em seguida, conectaremos o front-end e o back-end usando o SDK do Parse antes de implantar o front-end do Nuxt com os contêineres do Back4App.

Vamos começar.

Criação do backend para seu aplicativo Nuxt.js

A primeira etapa para criar um aplicativo Nuxt é preparar o backend.

Para começar a criar o back-end para seu aplicativo Contatos, navegue até o site do Back4App, faça login e crie um novo aplicativo clicando em “Build New App“.

Selecione a opção “Backend as a Service“, que você verá depois de criar um novo aplicativo, conforme mostrado na imagem abaixo.

Dê um nome ao seu aplicativo e selecione a opção PostgreSQL, que usaremos para o banco de dados.

Depois de clicar no botão “CREATE“, o Back4app levará algum tempo para configurar seu aplicativo, inclusive o banco de dados.

Quando tudo estiver pronto, você será automaticamente direcionado ao seu aplicativo, conforme mostrado na imagem abaixo.

Para estruturar o design do banco de dados PostgreSQL que você usará para o aplicativo, navegue até o AI Agent do Back4app e digite o seguinte prompt.

Create database tables in my Back4app app; do you need me to provide any information?

Para configurar seu banco de dados, o AI Agent gerará uma lista de itens necessários. Essa lista incluirá detalhes como as chaves exclusivas para seu aplicativo e como seus dados são estruturados (o esquema).

Depois de fornecer ao AI Agent as chaves do seu aplicativo, informe ao AI Agent como deve ser o esquema do seu banco de dados. Ele deve ser semelhante ao que está abaixo para o aplicativo de contato que estamos criando:

1. Contact Class:
Class Name: Contact

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)

Depois de passar as informações acima para o agente, você pode confirmar navegando no banco de dados para ver se a classe de contato e os campos relacionados foram criados.

Em seguida, solicite ao agente de IA que preencha seu banco de dados com dados de teste usando o prompt abaixo.

Populate my contact database with some test data with around 10 test contacts with variations in their information.

Agora, você tem dados de teste para trabalhar.

Criação de código de nuvem

O recurso Cloud Code da Back4App permite que você execute código JavaScript personalizado diretamente nos servidores da Back4App.

Esse recurso ajuda a reduzir a carga de processamento em seu aplicativo móvel ou site. Ele também ajuda a proteger seus dados e aplicativos contra vulnerabilidades de segurança, pois o código da nuvem é executado nos servidores seguros da Back4App.

Agora que você tem um banco de dados de teste preenchido com contatos, é hora de implementar recursos para o seu sistema de gerenciamento de contatos.

Nesta seção, você aprenderá a criar código de nuvem para implementar determinados recursos no seu aplicativo, como:

• Visualização de todos os contatos
• Criação de novos contatos
• Exclusão de contatos

Você implementará esses recursos com o Back4App AI Agent. Vamos começar.

Para buscar todos os livros da biblioteca, forneça ao agente de IA do Back4App o seguinte prompt para gerar o código de nuvem necessário.

Develop a cloud code function named "getContacts" to retrieve all contacts 
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.

Em seguida, você também atribuirá ao Back4App AI Agent a tarefa de criar novos contatos, passando o seguinte prompt:

Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.

Por fim, você também fornecerá ao Back4App AI Agent o seguinte prompt para criar uma função para excluir contatos do banco de dados.

Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.

Para verificar se o agente gerou corretamente suas funções de nuvem, revise o arquivo main.js localizado no final desse caminho de navegação.

Painel de controle do Back4app → Código da nuvem → Funções e hospedagem na Web → nuvem → main.js.

Você deverá ver as três funções que definiu no mesmo arquivo main.js para garantir que suas funções de nuvem foram criadas corretamente.

Criando o front-end do seu aplicativo

Criaremos um front-end para interagir com todas as funções de código de nuvem que criamos. Criaremos o front-end com o Nuxt.js.

Para começar a desenvolver o front-end, execute o código a seguir em série no terminal do diretório de sua preferência:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

Essas linhas de código inicializarão um aplicativo Nuxt com b4a_nuxt_app como nome e, em seguida, todos os pacotes e dependências necessários serão instalados para que seu aplicativo funcione corretamente.

Depois de executar os comandos acima em seu terminal, você instala alguns pacotes npm para ajudar a estilizar seu aplicativo. Execute os seguintes comandos npm em série em seu terminal para instalar esses pacotes:

npm install sass
npm install -D tailwindcss postcss autoprefixer

As linhas de código acima instalarão o SASS, um pré-processador CSS, e o TailwindCSS, uma estrutura CSS utilitária. Você utilizará esses pacotes para estilizar seu aplicativo rapidamente.

Em seguida, você configurará o TailwindCSS em seu aplicativo executando o seguinte comando:

npx tailwindcss init

O código acima cria um arquivo tailwind.config.js no diretório raiz do seu aplicativo Nuxt.

Esse arquivo tailwind.config.js é o ponto de configuração central para a integração do Tailwind CSS no Nuxt.js. Ele permite que você personalize vários aspectos do Tailwind CSS para atender aos requisitos específicos do seu projeto.

Abra seu aplicativo no editor de texto de sua preferência (VSCode, Eclipse, Sublime Text). Navegue até o arquivo tailwind.config.js e estruture-o de modo que se pareça com o bloco de código abaixo:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

A matriz de conteúdo no bloco de código acima contém os caminhos de arquivo que o Tailwind CSS monitorará para gerar suas classes de utilitários.

Em seguida, crie uma pasta de ativos no diretório raiz do seu aplicativo. Na pasta, crie um arquivo main.scss para adicionar estilos ao seu aplicativo. Cole o código abaixo no arquivo main.scss:

/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background-color: #f2f2f2;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

O bloco de código acima importa duas fontes diferentes do Google Fonts, integra o Tailwind CSS para estilizar elementos, define uma cor de fundo cinza-claro para seu aplicativo da Web e define classes personalizadas para aplicar com eficiência as fontes importadas.

Esse arquivo main.scss fornece uma base sólida para a criação do estilo visual de seu aplicativo Web.

No arquivo nuxt.config.ts, que contém as configurações do aplicativo Nuxt, cole o código a seguir:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  css: ["~/assets/main.scss"],
  ssr: false,
});

No seu arquivo de configuração do Nuxt, você definiu o arquivo main.scss como o único arquivo CSS que seu aplicativo Nuxt usará. Você também desativou a renderização do lado do servidor para seu aplicativo Nuxt.

Como o Nuxt lida com o roteamento automaticamente por meio do sistema de roteamento baseado em arquivos e já terminamos de configurar o aplicativo, podemos começar a criar diferentes páginas da Web.

Para criar a interface do usuário para esse aplicativo, criaremos três páginas em uma pasta de páginas na raiz do projeto. Essas páginas serão:

• index.vue: Esta é a página inicial, que apresenta o objetivo do aplicativo.
• contactForm.vue: Essa página permite que os usuários criem e salvem novos contatos no banco de dados.
• contactsList.vue: Essa página lista todos os contatos armazenados no banco de dados.

Agora, em seu arquivo index.vue, cole o seguinte código:

// index.vue
<template>
  <div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
    <h1 class="text-4xl">Welcome to {{ appName }}!</h1>
    <p class="text-[#888888] font-md text-md w-1/2">
      This application helps you manage your contacts. You can view existing
      contacts, add new ones, and keep your contact information organized.
    </p>
    <NuxtLink to="/contactForm">
      <button
        class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
      >
        Add Contact
      </button>
    </NuxtLink>
  </div>
</template>

<script setup>
const appName = "Contact Book";
</script>

<style scoped>
.welcome {
  text-align: center;
  padding: 2rem;
}
</style>

Esse bloco de código cria a página de boas-vindas do seu aplicativo de gerenciamento de contatos.

Ele exibe um título, uma descrição da finalidade do aplicativo e um botão para navegar até a página do formulário de contato. O bloco de código também definiu classes TailWind para estilizar o aplicativo.

Além disso, no arquivo contactForm.vue, cole o seguinte código:

<template>
  <div>
    <p class="montserrat text-2xl font-medium text-center">
      Fill the form below to create a contact
    </p>
    <form
      @submit.prevent="createContact"
      class="flex flex-col gap-8 items-center mt-10"
    >
      <input
        v-model="contact.name"
        type="text"
        placeholder="Name"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.email"
        type="email"
        placeholder="Email"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.phone"
        type="tel"
        placeholder="Phone"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.address"
        type="text"
        placeholder="Address"
        required
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <input
        v-model="contact.company"
        type="text"
        placeholder="Company"
        class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
      />
      <div>
        <button
          class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          type="submit"
        >
          Submit
        </button>
      </div>
      <p v-if="message" :class="{ error: isError }">{{ message }}</p>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";

const contact = ref({
  name: "",
  email: "",
  phone: "",
  address: "",
  company: "",
});
const message = ref("");
const isError = ref(false);

</script>

<style>
.error {
  color: red;
}
</style>

O bloco de código acima define a estrutura de um formulário que os usuários do aplicativo podem usar para criar e armazenar contatos. Aqui estão os pontos principais:

Um elemento de formulário captura detalhes de contato (nome, e-mail, telefone, endereço, empresa) usando vários campos de entrada.

Cada campo de entrada está vinculado a uma propriedade no objeto de contato(v-model) e usa tipos de entrada apropriados para validação.

Um botão de envio acionará a função createContact, que será implementada na próxima seção. Uma área de mensagem também exibirá feedback (sucesso ou erro) com base nas variáveis message e isError.

O bloco de código usa o ref do Vue para criar 3 variáveis reativas:

• contato: Armazena as informações de contato inseridas.
• message (mensagem): Mantém mensagens de feedback para o usuário.
• isError: Indica se a mensagem representa um erro.

Uma regra de estilo simples define a aparência das mensagens de erro usando a classe .error no bloco de código.

Além disso, em seu arquivo contactsList.vue, cole o seguinte código:

<template>
  <div class="px-8">
    <p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
    <div class="grid grid-cols-3 gap-5 items-center justify-center">
      <div
        v-for="contact in contacts"
        :key="contact.objectId"
        class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg 
				        flex flex-col gap-3 p-3 w-11/12 items-center"
      >
        <p class="text-lg">Name: {{ contact.name }}</p>
        <p class="text-lg">Email: {{ contact.email }}</p>
        <p class="text-lg">Phone: {{ contact.phone }}</p>
        <p class="text-lg">Address: {{ contact.address }}</p>
        <p class="text-lg">Company: {{ contact.company }}</p>
        <div class="mt-5">
          <button
            @click="deleteContact(contact.objectId)"
            class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const contacts = ref([]);
</script>

O bloco de código acima exibe uma lista de contatos em seu aplicativo. Aqui estão os pontos principais:

O bloco de código cria uma seção intitulada “Your Contacts” (Seus contatos) e usa um layout de grade responsivo (3 colunas) para exibir os contatos.

Ele percorre uma matriz de contatos usando v-for e apresenta as informações de cada contato (nome, e-mail, telefone, endereço, empresa).

Cada entrada de contato tem um botão “Delete” que acionará a função deleteContact, que implementaremos posteriormente.

O bloco de código utiliza uma matriz reativa(contatos) para armazenar a lista de contatos. Isso garante que a interface do usuário seja atualizada dinamicamente à medida que os dados são alterados. A matriz de contatos armazenará os dados que você obteve do banco de dados do Back4app

Cole o código abaixo em seu arquivo app.vue no diretório raiz para incluir rotas para todas essas páginas.

<template>
  <div>
    <NuxtLayout>
      <header class="flex justify-between p-8 roboto font-light">
        <NuxtLink to="/">
          <p class="text-2xl">Contact Book</p>
        </NuxtLink>

        <nav class="flex gap-5 text-md">
          <NuxtLink to="/contactsList" class="hover:text-[#888888]"
            >Contacts</NuxtLink
          >
          <NuxtLink to="/contactForm" class="hover:text-[#888888]"
            >Add Contact</NuxtLink
          >
        </nav>
      </header>
      <main>
        <NuxtPage />
      </main>
    </NuxtLayout>
  </div>
</template>

O bloco de código define o layout geral do aplicativo Nuxt com o componente componente.

O bloco de código apresenta um menu de navegação horizontal com links para a página contactsList.vue e a página contactForm.vue.

O bloco de código também inclui o componente um componente-chave do Nuxt.js que renderiza dinamicamente o conteúdo da página atual.

Isso garante que seu aplicativo exiba o conteúdo apropriado com base na navegação do usuário dentro do aplicativo.

Conectando os bits de front-end e back-end de seu aplicativo

Para conectar o aplicativo de contato Nuxt ao banco de dados e à instância de back-end do Back4app, será necessário instalar o Parse SDK.

O Parse SDK faz a ponte entre o seu aplicativo front-end (interface do usuário) e o back-end do Back4App, permitindo que você interaja com os bancos de dados e as funções de nuvem do Back4App.

Para instalar o Parse SDK, execute o seguinte comando no terminal de seu diretório raiz:

npm install parse

Após a instalação, você precisa inicializar o Parse obtendo as seguintes informações:

• ID do aplicativo
• Chave JavaScript
• URL do servidor Back4app

Você pode obter essas informações navegando até Security & Keys (Segurança e chaves ) no painel do seu aplicativo Back4app. Mantenha seu App ID e sua chave JavaScript em segurança em seu aplicativo.

Agora, modifique o arquivo app.vue para inicializar o Parse em seu aplicativo:

<template>
<!--   Previous Content -->
</template>

<script setup>
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>

Além disso, modifique os arquivos contactForm.vue e contactsList.vue para conectar as funções do código de nuvem ao front-end do aplicativo.

Na sua página contactForm.vue, cole o seguinte código:

<template>
<!--   Previous Content -->
</template>

<script setup>
import { ref } from 'vue';
import Parse from 'parse';

const contact = ref({
  name: '',
  email: '',
  phone: '',
  address: '',
  company: '',
});
const message = ref('');
const isError = ref(false);

const createContact = async () => {
  try {
    await Parse.Cloud.run('createContact', { ...contact.value });
    message.value = 'Contact created successfully!';
    isError.value = false;
    
    contact.value = { name: '', email: '', phone: '', address: '', company: '' };
  } catch (error) {
    message.value = `Error: ${error.message}`;
    isError.value = true;
  }
};
</script>

<style>
.error {
  color: red;
}
</style>

O bloco de código acima conecta sua função de código de nuvem para a lógica por trás da criação de um novo contato ao seu aplicativo Nuxt.

Ele interage com o back-end para armazenar as informações de contato e fornece feedback ao usuário com base no sucesso ou na falha da operação.

O bloco de código tenta (com um bloco try-catch) executar uma função chamada createContact no servidor Back4App usando o SDK do Parse(await Parse.Cloud.run('createContact', {...contact.value})). Isso envia as informações de contato(contact.value) para o servidor Back4App para armazenamento.

Após o armazenamento bem-sucedido, é exibida a mensagem “Contact created successfully!” (Contato criado com sucesso!) e o formulário é limpo, redefinindo o objeto de contato e permitindo novas entradas.

No entanto, se ocorrer um erro, será exibida uma mensagem de erro informativa, incluindo detalhes do servidor com literais de modelo(${error.message}).

Cole o código a seguir em seu arquivo contactsList.vue:

<template>
  <!--   Previous Content -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";

const contacts = ref([]);

const fetchContacts = async () => {
  try {
    contacts.value = await Parse.Cloud.run("getContacts");
  } catch (error) {
    console.error("Failed to fetch contacts", error);
  }
};

const deleteContact = async (objectId) => {
  try {
    await Parse.Cloud.run("deleteContact", { objectId });
    contacts.value = contacts.value.filter(
      (contact) => contact.objectId !== objectId,
    );
  } catch (error) {
    console.error("Failed to delete contact", error);
  }
};

onMounted(fetchContacts);
</script>

O código acima gerencia a busca e a exclusão de contatos para o seu aplicativo. Ele interage com o Back4App Backend para lidar com o armazenamento e a recuperação de dados.

O bloco de código define duas funções essenciais:

• fetchContacts: Essa função assíncrona recupera a lista de contatos do backend. Ela usa Parse.Cloud.run('getContacts'), chamando a função de código de nuvem “getContacts” em seu servidor Back4App. Os contatos recuperados são armazenados em uma matriz reativa denominada contacts.

• deleteContact: Essa função assíncrona lida com a exclusão de um contato específico. Ela recebe um objectId como argumento, um identificador exclusivo para o contato no banco de dados de backend. A função usa Parse.Cloud.run('deleteContact', { objectId }) para chamar a função de código de nuvem chamada “deleteContact”, passando o objectId a ser excluído. Quando bem-sucedido, o código filtra a matriz de contatos locais para remover os contatos excluídos.

Agora que você terminou de conectar o front-end e o back-end do aplicativo, pode visualizar o aplicativo executando o comando npm abaixo.

npm run dev

Você perceberá o carregamento do servidor Nuxt Nitro. Após o carregamento, o aplicativo deverá estar disponível no URL http://localhost:3000/. Você deverá ver uma tela semelhante à imagem abaixo ao navegar para o URL.

Navegando até a página Contatos, você verá uma matriz de contatos. Esses contatos são os dados fictícios que o Back4app AI Agent criou para você durante a criação do backend do Back4app.

Ao clicar no link Add Contact (Adicionar contato), você verá um formulário para inserir os detalhes do novo contato. Por exemplo:

Você deve notar os campos claramente ao clicar no botão “Submit” (Enviar). Navegando até a página Contatos, você verá o contato recém-criado.

Implementação do aplicativo da Web totalmente desenvolvido

Abaixo estão as etapas para implantar um aplicativo Nuxt. Agora que você terminou de criar e testar o aplicativo, pode implantar o aplicativo Nuxt usando contêineres do Back4app para torná-lo público.

Para acelerar o processo de implantação, solicite ao Back4app AI Agent as seguintes instruções:

Give me simplified steps to deploy my Nuxt application with Back4app containers

Você deverá ver etapas semelhantes às descritas abaixo.

Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container

Para dockerizar seu aplicativo, crie um Dockerfile e um arquivo .dockerignore no diretório raiz e cole os seguintes scripts abaixo.

No Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]

Além disso, no arquivo .dockerignore:

node_modules
.nuxt

Um Dockerfile contém instruções para criar uma imagem do Docker. O Dockerfile inclui etapas de instalação para as dependências de aplicativos necessárias.

O arquivo .dockerignore é um arquivo de texto simples que lista padrões para instruir o Docker sobre quais arquivos e pastas devem ser excluídos durante a criação da imagem.

Agora, para criar a imagem do docker do seu aplicativo, execute o seguinte comando do docker em seu terminal:

docker build -t b4a_contacts_app .

Certifique-se de enviar o aplicativo para a sua conta do GitHub antes de tentar implantá-lo no Back4app. Depois de enviar o aplicativo, integre sua conta do GitHub ao Back4app.

Você pode fazer isso com o aplicativo Back4app Github. Depois de integrar seu GitHub com o Back4app, você pode implantar seu aplicativo.

Navegue até a página Contêineres no painel do Back4app.

Em seguida, clique no botão “Create New App” na tela. Em seguida, você selecionará o repositório que deseja implantar, dará a ele o nome b4a_contacts_app e criará o aplicativo. Deve levar algum tempo para concluir a implantação.

Após a implantação, seu aplicativo ativo deverá estar disponível neste URL, https://b4acontactsapp1-5990olnw.b4a.run/.

Conclusão

Neste artigo, você aprendeu a criar e implantar um aplicativo Nuxt.js com um banco de dados PostgreSQL, tudo dentro do ecossistema do Back4app.

Você também aprendeu as vantagens e desvantagens de criar aplicativos Web com o Nuxt.js.

Desde a criação das funções de código em nuvem e o projeto do banco de dados com o AI Agent do Back4App até a compreensão da interface amigável e de baixo código do backend do Back4App.

Você também implantou o aplicativo Nuxt com o Back4App Containers e se familiarizou com a variedade de ferramentas que o Back4App oferece para simplificar o desenvolvimento de aplicativos.

Com essa combinação de ferramentas, você está no caminho certo para criar e implantar aplicativos Web rapidamente.

Você pode saber mais sobre como o AI Agent funciona para se familiarizar com a simplificação do desenvolvimento de aplicativos.