Come costruire e distribuire un’applicazione Nuxt?

Nuxt.js è un framework open-source realizzato sulla base di Vue.js, Nitro e Vite, che consente di sviluppare applicazioni web.

Ispirato a Next.js (un framework React per il server side rendering), Nuxt.js consente agli sviluppatori di creare applicazioni web veloci applicando diverse modalità di rendering.

Rilasciato nel 2016, Nuxt.js ha ottenuto un ampio consenso tra gli sviluppatori grazie alla sua filosofia developer-friendly e alle sue ricche funzionalità.

Vantaggi di Nuxt.js

Nuxt.js offre diversi vantaggi che lo rendono una scelta convincente per lo sviluppo di Vue.js:

Rendering universale

Nuxt.js controlla il modo in cui l’applicazione web viene visualizzata dall’utente. Inizia con il rendering della pagina iniziale sul server, rendendo il caricamento superveloce, soprattutto per le persone con connessioni Internet più lente.

Questo aiuta i motori di ricerca a scansionare più velocemente il vostro sito web, con conseguente miglioramento della SEO.

Nuxt.js passa quindi senza problemi a un rendering lato client (SPA) per la navigazione tra le pagine dell’applicazione. In questo modo le cose rimangono veloci e reattive, proprio come ci si aspetta da un sito web moderno.

Prestazioni ottimizzate grazie all’idratazione e alla suddivisione del codice

Nuxt 3 consente l’idratazione selettiva, ovvero segmenti dello stato dell’applicazione vengono idratati sul lato client per un caricamento più rapido della prima pagina e una migliore esperienza utente, molto utile per un’applicazione con un enorme albero di stato e molte parti.

Analogamente a Next.js, Nuxt divide automaticamente i file in pacchetti più piccoli a seconda dei percorsi.

In questo modo, il browser richiede al server solo il codice relativo alla vista corrente, riducendo in modo significativo il tempo di caricamento della pagina da parte dell’utente.

Ciò significa che vengono utilizzate meno risorse di banda e che l’esperienza dell’utente è migliorata.

Instradamento integrato

Nuxt.js, per impostazione predefinita, gestisce le rotte attraverso il routing basato su file, semplificando la navigazione e la gestione delle rotte all’interno dell’applicazione.

È inoltre possibile scegliere di configurare le rotte in modo dinamico per scenari di routing più complessi.

Percorsi API

Nuxt.js consente di evitare di configurare un intero server separato per semplici attività! Ha scorciatoie incorporate chiamate rotte API.

Le rotte API possono gestire il recupero dei dati durante il rendering lato server, supportando le API RESTful e GraphQL. Questo rende l’applicazione più veloce e aiuta i motori di ricerca a comprendere meglio il contenuto dell’applicazione.

Limitazioni di Nuxt.js

Sebbene Nuxt.js offra una potente esperienza di sviluppo, è necessario considerare alcune limitazioni:

Curva di apprendimento

Nuxt.js introduce concetti diversi dallo sviluppo tradizionale con Vue.js. Essere nuovi a Nuxt.js richiede tempo per adattarsi alla sua architettura e alle sue caratteristiche specifiche.

Nuxt offre anche un vasto ecosistema di strumenti, librerie e plugin. Familiarizzare con queste opzioni può aumentare la curva di apprendimento iniziale.

Ecosistema limitato

A differenza di altri framework importanti come React e Angular, Nuxt è relativamente giovane. Di conseguenza, il suo ecosistema di librerie e plugin di terze parti è ancora in crescita.

È necessario creare soluzioni personalizzate per soddisfare determinati requisiti in situazioni specifiche.

Complessità del rendering lato server

Il rendering lato server (SSR) è una potente funzionalità di Nuxt.js, ma può rendere più complesso lo sviluppo delle applicazioni. Rispetto a metodi di rendering più semplici, SSR ha una curva di apprendimento più ripida.

Inoltre, l’implementazione efficace dell’SSR richiede un’attenta pianificazione e gestione del recupero dei dati e dello stato dell’applicazione.

Questo può portare a potenziali errori o incoerenze tra il contenuto inizialmente renderizzato sul server e la versione finale e interattiva renderizzata sul client.

Creazione e distribuzione di un’applicazione Nuxt.js su Back4app

Costruiremo un’applicazione di gestione dei contatti per capire meglio come costruire e distribuire un’applicazione Nuxt con Back4App.

Questa applicazione consente agli utenti di creare, visualizzare ed eliminare le informazioni di contatto, mantenendo la rubrica di rete organizzata e facilmente accessibile.

Per il backend di questo progetto, utilizzeremo il database PostgreSQL integrato in Back4app per memorizzare le informazioni di contatto come nome, e-mail, numeri di telefono e società.

Questo processo sarà reso più semplice dall’aiuto dell’agente AI di Back4App.

Per il front-end del progetto, utilizzeremo Nuxt.js per creare l’interfaccia utente dell’applicazione. Quindi, collegheremo il front-end e il back-end utilizzando l’SDK Parse prima di distribuire il front-end Nuxt con Back4App Containers.

Cominciamo.

Creare il backend per l’applicazione Nuxt.js

Il primo passo per creare un’applicazione Nuxt è preparare il backend.

Per iniziare a creare il back-end della vostra applicazione Contatti, visitate il sito web di Back4App, effettuate il login e create una nuova applicazione facendo clic su “Build New App“.

Selezionate l’opzione “Backend as a Service“, che vedrete dopo aver creato una nuova applicazione, come mostrato nell’immagine seguente.

Assegnate un nome all’applicazione e selezionate l’opzione PostgreSQL, che utilizzeremo per il database.

Dopo aver fatto clic sul pulsante “CREA“, Back4app impiegherà un po’ di tempo per configurare l’applicazione, compreso il database.

Una volta che tutto è pronto, sarete automaticamente indirizzati alla vostra applicazione, come mostrato nell’immagine sottostante.

Per strutturare il database PostgreSQL che si utilizzerà per l’applicazione, navigare nell’Agente AI di Back4app e digitare il seguente prompt.

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

Per configurare il database, l’agente AI genera un elenco di cose di cui ha bisogno. Questo elenco include dettagli come le chiavi univoche per l’applicazione e la struttura dei dati (lo schema).

Dopo aver fornito all’AI Agent le chiavi dell’applicazione, si deve fornire all’AI Agent lo schema del database. Dovrebbe essere simile a quello qui sotto per l’applicazione di contatto che stiamo costruendo:

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)

Dopo aver trasmesso le informazioni di cui sopra all’agente, è possibile confermare la navigazione nel database per vedere se la classe di contatto e i relativi campi sono stati creati.

Successivamente, si chiederà all’agente AI di popolare il database con i dati di prova, utilizzando il seguente prompt.

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

Ora si dispone di dati di prova su cui lavorare.

Creazione di codice cloud

La funzione Cloud Code di Back4App consente di eseguire codice JavaScript personalizzato direttamente sui server di Back4App.

Questa funzione consente di ridurre il carico di elaborazione della vostra applicazione mobile o del vostro sito web. Inoltre, contribuisce a proteggere i dati e l’applicazione dalle vulnerabilità della sicurezza, poiché il codice cloud viene eseguito sui server sicuri di Back4App.

Ora che avete un database di prova popolato di contatti, è il momento di implementare le funzioni del vostro sistema di gestione dei contatti.

In questa sezione, si apprenderà come creare codice cloud per implementare alcune funzionalità dell’applicazione, come ad esempio:

• Visualizzazione di tutti i contatti
• Creazione di nuovi contatti
• Eliminazione dei contatti

Implementerete queste funzionalità con l’agente AI di Back4App. Iniziamo.

Per recuperare tutti i libri dalla biblioteca, fornire all’agente Back4App AI il seguente prompt per generare il codice cloud richiesto.

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.

Successivamente, si incaricherà l’Agente AI di Back4App di creare nuovi contatti passando il seguente prompt:

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

Infine, si fornirà all’agente AI di Back4App il seguente prompt per creare una funzione per l’eliminazione dei contatti dal database.

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.

Per verificare se l’Agente ha generato correttamente le funzioni cloud, esaminare il file main.js che si trova alla fine di questo percorso di navigazione.

Back4app dashboard → Codice Cloud → Funzioni e Web Hosting → cloud → main.js.

Si dovrebbero vedere le tre funzioni definite nello stesso file main.js, per assicurarsi che le funzioni cloud siano state create correttamente.

Costruire il front-end dell’applicazione

Creeremo un front-end per interagire con tutte le funzioni del codice cloud che abbiamo creato. Creeremo il front-end con Nuxt.js.

Per iniziare lo sviluppo del front-end, eseguite il seguente codice in serie nel terminale della vostra directory preferita:

npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install

Queste righe di codice inizializzeranno un’applicazione Nuxt con il nome b4a_nuxt_app e quindi verranno installati tutti i pacchetti e le dipendenze necessarie per il corretto funzionamento dell’applicazione.

Dopo aver eseguito i comandi di cui sopra nel terminale, si installano alcuni pacchetti npm che aiutano a creare lo stile dell’applicazione. Eseguire i seguenti comandi npm in serie nel terminale per installare questi pacchetti:

npm install sass
npm install -D tailwindcss postcss autoprefixer

Le righe di codice sopra riportate installeranno SASS, un preprocessore CSS, e TailwindCSS, un framework CSS di utilità. Questi pacchetti verranno utilizzati per creare rapidamente la vostra applicazione.

Successivamente, si configurerà TailwindCSS nella propria applicazione eseguendo il seguente comando:

npx tailwindcss init

Il codice precedente crea un file tailwind.config.js nella directory principale dell’applicazione Nuxt.

Questo file tailwind.config.js è il punto di configurazione centrale per l’integrazione di Tailwind CSS in Nuxt.js. Consente di personalizzare vari aspetti di Tailwind CSS per soddisfare i requisiti specifici del progetto.

Aprire l’applicazione nell’editor di testo preferito (VSCode, Eclipse, Sublime Text). Passare al file tailwind.config.js e strutturarlo come il blocco di codice sottostante:

// 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: [],
};

L’array di contenuti nel blocco di codice precedente contiene i percorsi dei file che Tailwind CSS controllerà per generare le sue classi di utilità.

Quindi, creare una cartella assets nella cartella principale dell’applicazione. Nella cartella, creare un file main.scss per aggiungere stili all’applicazione. Incollare il codice sottostante nel file 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;
}

Il blocco di codice qui sopra importa due diversi Google Fonts, integra il CSS di Tailwind per lo styling degli elementi, imposta un colore di sfondo grigio chiaro per l’applicazione web e definisce classi personalizzate per applicare in modo efficiente i font importati.

Questo file main.scss fornisce una solida base per costruire lo stile visivo della vostra applicazione web.

Nel file nuxt.config.ts, che contiene le configurazioni dell’applicazione Nuxt, incollare il seguente codice:

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

Nel file di configurazione di Nuxt, è stato definito il file main.scss come l’unico file CSS utilizzato dall’applicazione Nuxt. È stato inoltre disabilitato il rendering lato server per l’applicazione Nuxt.

Poiché Nuxt gestisce automaticamente l’instradamento attraverso il sistema di instradamento basato su file e abbiamo finito di configurare l’applicazione, possiamo passare alla creazione di diverse pagine web.

Per costruire l’interfaccia utente di questa applicazione, creeremo tre pagine all’interno di una cartella pages nella radice del progetto. Queste pagine saranno:

• index.vue: È la pagina iniziale, che introduce lo scopo dell’applicazione.
• contactForm.vue: Questa pagina consente agli utenti di creare e salvare nuovi contatti nel database.
• contactsList.vue: Questa pagina elenca tutti i contatti memorizzati nel database.

Ora, nel file index.vue, incollate il seguente codice:

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

Questo blocco di codice crea la pagina di benvenuto per l’applicazione di gestione dei contatti.

Mostra un titolo, una descrizione dello scopo dell’applicazione e un pulsante per navigare alla pagina del modulo di contatto. Il blocco di codice definisce anche le classi TailWind per lo stile dell’applicazione.

Inoltre, nel file contactForm.vue, incollare il seguente codice:

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

Il blocco di codice qui sopra definisce la struttura di un modulo che gli utenti dell’app possono utilizzare per creare e memorizzare i contatti. Ecco i punti chiave:

Un elemento modulo acquisisce i dati di contatto (nome, e-mail, telefono, indirizzo, azienda) utilizzando vari campi di input.

Ogni campo di input è collegato a una proprietà dell’oggetto contatto(v-model) e utilizza tipi di input appropriati per la convalida.

Un pulsante di invio attiverà la funzione createContact, che verrà implementata nella prossima sezione. Un’area di messaggio visualizzerà anche un feedback (successo o errore) basato sulle variabili message e isError.

Il blocco di codice utilizza ref di Vue per creare 3 variabili reattive:

• contatto: Memorizza le informazioni di contatto inserite.
• messaggio: Contiene i messaggi di feedback per l’utente.
• isError: Indica se il messaggio rappresenta un errore.

Una semplice regola di stile definisce l’aspetto dei messaggi di errore utilizzando la classe .error nel blocco di codice.

Inoltre, nel file contactsList.vue, incollare il seguente codice:

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

Il blocco di codice sopra riportato visualizza un elenco di contatti nell’applicazione. Ecco i punti chiave:

Il blocco di codice crea una sezione intitolata “I tuoi contatti” e utilizza un layout reattivo a griglia (3 colonne) per visualizzare i contatti.

Esegue il loop di un array di contatti utilizzando v-for e presenta le informazioni di ciascun contatto (nome, e-mail, telefono, indirizzo, azienda).

Ogni voce di contatto ha un pulsante “Elimina” che attiva la funzione deleteContact, che verrà implementata in seguito.

Il blocco di codice utilizza un array reattivo(contatti) per memorizzare l’elenco dei contatti. Questo assicura che l’interfaccia utente si aggiorni dinamicamente al variare dei dati. L’array dei contatti memorizza i dati recuperati dal database di Back4app.

Incollare il codice sottostante nel file app.vue nella cartella principale per includere i percorsi di tutte queste pagine.

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

Il blocco di codice definisce il layout complessivo dell’applicazione Nuxt con il componente componente.

Il blocco di codice presenta un menu di navigazione orizzontale con collegamenti alle pagine contactsList.vue e contactForm.vue.

Il blocco di codice include anche il componente un componente chiave di Nuxt.js che rende dinamicamente il contenuto della pagina corrente.

Ciò garantisce che l’applicazione visualizzi i contenuti appropriati in base alla navigazione dell’utente all’interno dell’applicazione.

Collegare le parti front-end e back-end dell’applicazione

Per collegare l’applicazione di contatto Nuxt al database e all’istanza backend di Back4app, è necessario installare l’SDK Parse.

L’SDK Parse fa da ponte tra la vostra applicazione front-end (interfaccia utente) e il backend di Back4App, consentendovi di interagire con i database e le funzioni cloud di Back4App.

Per installare l’SDK Parse, eseguire il seguente comando nel terminale della directory principale:

npm install parse

Dopo l’installazione, è necessario inizializzare Parse ottenendo le seguenti informazioni:

• ID applicazione
• Chiave JavaScript
• URL del server Back4app

È possibile ottenere queste informazioni navigando su Sicurezza e chiavi nella dashboard della propria applicazione Back4app. Conservate l’App ID e la JavaScript Key in modo sicuro nella vostra applicazione.

Ora, modificare il file app.vue per inizializzare Parse nell’applicazione:

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

Inoltre, modificare i file contactForm.vue e contactsList.vue per collegare le funzioni del codice cloud al front-end dell’applicazione.

Nella pagina contactForm.vue, incollare il seguente codice:

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

Il blocco di codice qui sopra collega la funzione del codice cloud per la logica di creazione di un nuovo contatto all’applicazione Nuxt.

Interagisce con il backend per memorizzare le informazioni di contatto e fornisce un feedback all’utente in base al successo o al fallimento dell’operazione.

Il blocco di codice tenta (con un blocco try-catch) di eseguire una funzione denominata createContact sul server Back4App utilizzando l’SDK Parse(await Parse.Cloud.run('createContact', {...contact.value})). Questo invia le informazioni sul contatto(contact.value) al server Back4App per la memorizzazione.

Se la memorizzazione avviene con successo, viene visualizzato il messaggio “Contatto creato con successo!” e il modulo si cancella, ripristinando l’oggetto contatto e consentendo nuovi inserimenti.

Tuttavia, se si verifica un errore, viene visualizzato un messaggio di errore informativo, che include i dettagli del server con i template letterali(${error.message}).

Incollare il seguente codice nel file 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>

Il codice qui sopra gestisce l’acquisizione e l’eliminazione dei contatti per l’applicazione. Interagisce con il backend di Back4App per gestire la memorizzazione e il recupero dei dati.

Il blocco di codice definisce due funzioni essenziali:

• fetchContatti: Questa funzione asincrona recupera l’elenco dei contatti dal backend. Utilizza Parse.Cloud.run('getContacts'), chiamando la funzione di codice cloud “getContacts” sul server di Back4App. I contatti recuperati sono memorizzati in un array reattivo denominato contatti.

• eliminaContatto: Questa funzione asincrona gestisce l’eliminazione di un contatto specifico. Prende come argomento un objectId, un identificatore univoco per il contatto all’interno del database di backend. La funzione utilizza Parse.Cloud.run('deleteContact', { objectId }) per chiamare la funzione del codice cloud denominata “deleteContact”, passando l’objectId da eliminare. In caso di successo, il codice filtra l’array dei contatti locali per rimuovere i contatti eliminati.

Dopo aver collegato il front-end e il back-end dell’applicazione, è possibile visualizzare l’anteprima dell’applicazione eseguendo il comando npm qui sotto.

npm run dev

Si noterà il caricamento del server Nuxt Nitro. Dopo il caricamento, l’applicazione dovrebbe essere disponibile all’URL http://localhost:3000/. Quando si naviga verso l’URL, dovrebbe essere visualizzata una schermata simile all’immagine seguente.

Navigando nella pagina Contatti, si dovrebbe vedere una serie di contatti. Questi contatti sono i dati fittizi creati dall’agente AI di Back4app durante la creazione del backend di Back4app.

Facendo clic sul link Aggiungi contatto, si dovrebbe visualizzare un modulo per inserire i dettagli del nuovo contatto. Ad esempio:

Facendo clic sul pulsante “Invia”, i campi dovrebbero essere ben visibili. Passando alla pagina Contatti, si vedrà il nuovo contatto creato.

Distribuzione dell’applicazione web completamente realizzata

Di seguito sono riportati i passaggi per distribuire un’applicazione Nuxt. Una volta terminata la costruzione e la verifica dell’applicazione, è possibile distribuire l’applicazione Nuxt utilizzando i contenitori Back4app per rendere pubblica l’applicazione.

Per accelerare il processo di distribuzione, richiedere all’agente AI di Back4app le seguenti istruzioni:

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

Dovreste vedere dei passaggi simili a quelli descritti di seguito.

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

Per dockerizzare l’applicazione, creare un Dockerfile e un file .dockerignore nella directory principale e incollare i seguenti script.

Nel file Docker:

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

Inoltre, nel file .dockerignore:

node_modules
.nuxt

Un file Docker contiene le istruzioni per costruire un’immagine Docker. Il file Docker include i passaggi di installazione delle dipendenze necessarie dell’applicazione.

Il file .dockerignore è un semplice file di testo che elenca schemi per istruire Docker su quali file e cartelle escludere durante la creazione dell’immagine.

Ora, per creare l’immagine docker della vostra applicazione, eseguite il seguente comando docker nel vostro terminale:

docker build -t b4a_contacts_app .

Assicurarsi di eseguire il push dell’applicazione sul proprio account GitHub prima di tentare di distribuire l’applicazione su Back4app. Una volta eseguita la push dell’applicazione, integrare l’account GitHub con Back4app.

È possibile farlo con l’applicazione Github di Back4app. Dopo aver integrato GitHub con Back4app, è possibile distribuire l’applicazione.

Andare alla pagina Contenitori dalla dashboard di Back4app.

Quindi, fare clic sul pulsante “Crea nuova applicazione” sullo schermo. Si selezionerà quindi il repository che si desidera distribuire, gli si assegnerà il nome b4a_contacts_app e si creerà l’applicazione. Dovrebbe essere necessario un po’ di tempo per terminare la distribuzione.

Dopo la distribuzione, l’applicazione live dovrebbe essere disponibile a questo URL, https://b4acontactsapp1-5990olnw.b4a.run/.

Conclusione

In questo articolo, avete imparato a costruire e distribuire un’applicazione Nuxt.js con un database PostgreSQL, il tutto all’interno dell’ecosistema Back4app.

Avete anche appreso i vantaggi e gli svantaggi della costruzione di applicazioni web con Nuxt.js.

Dalla creazione delle funzioni in cloud-code e dalla progettazione del database con l’AI Agent di Back4App alla comprensione dell’interfaccia a basso codice e facile da usare del backend di Back4App.

Avete anche distribuito l’applicazione Nuxt con Back4App Containers e avete familiarizzato con la serie di strumenti che Back4App mette a disposizione per semplificare lo sviluppo delle app.

Con questa combinazione di strumenti, siete sulla buona strada per costruire e distribuire rapidamente applicazioni web.

Per saperne di più sul funzionamento dell’AI Agent, è possibile familiarizzare con la semplificazione dello sviluppo delle app.