Come distribuire un’applicazione Svelte?

In questo articolo, imparerete a costruire un’applicazione web con Svelte e a distribuirla utilizzando i container Back4app.

Svelte è un framework JavaScript per lo sviluppo di applicazioni web reattive e dinamiche. Con il framework Svelte è possibile creare applicazioni leggere e ad alte prestazioni perché, a differenza dei framework JavaScript tradizionali, Svelte sposta gran parte del lavoro pesante dal browser alla fase di creazione.

Panoramica del progetto: Inventario Tracker

Questo articolo presenta un tracker di inventario che si integra con il database in tempo reale di Back4App.

L’applicazione gestirà i dati dell’inventario di un utente, consentendogli di aggiungere, recuperare e cancellare le informazioni sui prodotti secondo le necessità.

Il tracker memorizzerà su Back4App i dettagli essenziali come il nome del prodotto, il prezzo e la quantità.

Consente agli utenti di gestire e monitorare facilmente l’inventario, garantendo informazioni accurate e aggiornate sui prodotti.

Creazione dell’applicazione Svelte

In questa sezione, creerete un progetto Svelte utilizzando Vite (uno strumento di creazione di framework front-end).

È possibile creare l’applicazione Svelte con Vite eseguendo il seguente comando nel terminale:

npm init vite

Dopo aver eseguito questo comando, si deve fornire un nome al progetto, selezionare il framework (Svelte) e scegliere la variante linguistica preferita per il framework.

Così:

L’immagine precedente mostra che il nome del progetto Svelte è inventory-tracker e la variante linguistica è JavaScript.

Successivamente, è necessario installare alcune dipendenze necessarie nel progetto Svelte. Per installare le dipendenze, passare alla cartella del progetto ed eseguire il comando seguente:

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

Questo comando installerà tutte le dipendenze necessarie nel vostro progetto e potrete iniziare a costruire la vostra applicazione sul vostro IDE.

Creare un’applicazione Svelte

In questa sezione, si costruirà un’applicazione per il monitoraggio dell’inventario utilizzando Svelte e la funzione backend as a service di Back4app.

L’applicazione avrà funzionalità CRUD (Create, Read, Update, Delete), che consentono di aggiungere, recuperare, modificare e cancellare dati.

Prima di iniziare a costruire la vostra applicazione Svelte, assicuratevi di installare la libreria svelte-routing.

La libreria svelte-routing è una libreria che aggiunge funzionalità di routing alle applicazioni Svelte, consentendo di creare applicazioni a pagina singola (SPA).

Installare la libreria svelte-routing eseguendo il comando seguente:

npm i -D svelte-routing

Una volta installato, creare un componente AddProduct e un componente Home nella cartella src del progetto. Nel componente AddProduct, aggiungere le seguenti righe di codice:

<!-- AppProduct.svelte -->
<script>
	let product = {
	  name: "",
	  quantity: "",
	  price: "",
	}
</script>

<form>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
  <input type="number" placeholder="No of Products" bind:value={product.quantity}>
  <input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
		<button>Add Product</button>
	</div>
</form>

<style>
	form{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
</style>

Il blocco di codice qui sopra rende un modulo che accetta i dettagli di un prodotto. Il modulo contiene tre elementi di input di tipo text(nome) e number(quantità e prezzo).

I campi di input contengono il nome del prodotto, il numero di prodotti disponibili e il prezzo del prodotto.

Con l’attributo bind:value negli elementi di input, il blocco di codice lega i valori degli input alle proprietà dell’oggetto prodotto specificato. La sezione style contiene gli stili CSS relativi a questo componente Svelte.

Quindi, aggiungere il blocco di codice sottostante al componente Home:

<!-- Home.svelte -->
<script>
    import {Link} from "svelte-routing";
</script>

<main>
    <p>A way to manage and keep track of products in your inventory</p>
    <Link to="/add-products" class="link">Add Products here →</Link>
</main>

<style>
    main{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
</style>

Il componente Home importa il componente Link dalla libreria svelte-routing. Il componente Link indirizza gli utenti alla rotta “/add-products”. È necessario definire questa rotta per garantire che il componente Link funzioni effettivamente.

Per definire le rotte, aprire il componente App e aggiungervi il blocco di codice sottostante:

<!-- App.svelte -->
<script>
  import {Route, Router} from "svelte-routing";
  import AddProduct from './AddProduct.svelte';
  import Home from './Home.svelte';

  export let url = "";
</script>

<Router {url}>
  <h1>Inventory Tracker</h1>
  
  <div class="container">
    <Route path="/" component={Home} />
    <Route path="/add-products" component={AddProduct} /> 
  </div>
</Router>

<style>
  h1{
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin-block-start: 1rem;
    margin-block-end: 6rem;
  }
</style>

Il blocco di codice precedente importa i componenti Route e Router da svelte-routing, insieme ai componenti Home e AddProduct, per definire i loro percorsi individuali.

Con il componente Route si definiscono le varie rotte dell’applicazione. In questo caso, le rotte Home e AddProduct.

L’avvolgimento della sezione HTML all’interno del componente Router inizializza il routing per i componenti racchiusi.

Dal blocco di codice precedente, il rendering dell’applicazione visualizzerà prima il percorso Home, poiché il percorso del percorso è “/”.

Il passo successivo consiste nel definire gli stili globali dell’applicazione. Per farlo, creare una cartella styles all’interno della cartella src. Nella cartella styles, aggiungere un file global.css; in questo file, definire gli stili globali dell’applicazione.

Aggiungere il blocco di codice sottostante al file global.css:

/* global.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "Montserrat", sans-serif;
    background-color: #1F2124;
    color: #FFFFFF;
}

.container{
    inline-size: 60%;
    margin: auto;
}

.link{
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.link:hover{
    color: #99BCF6;
}

input{
    padding: 1rem;
    border-radius: 12px;
    outline: none;
    border: none;
    font-family: "Montserrat", sans-serif;
    color: #333333;
    inline-size: 100%;
}

button{
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
}

button:hover{
    background-color: #99BCF6;
}

Dopo aver definito gli stili, importare il file global.css nel componente App per applicare gli stili definiti all’applicazione. È possibile farlo aggiungendo questo codice alla sezione script del componente App:

//App.svelte
import './styles/global.css';

Ora avete costruito la vostra applicazione Svelte. Successivamente, si costruirà il backend dell’applicazione utilizzando Back4app.

Impostazione di un’applicazione Back4app

In questa sezione, si creerà un’applicazione Back4app che funge da backend dell’applicazione utilizzando l’agente Back4app AI.

Per crearne uno è necessario un account Back4app. Se non ne avete uno, potete crearlo gratuitamente.

Accedere al proprio account e fare clic sul link “Agente AI” nella barra di navigazione del cruscotto dell’account Back4app.

Una volta ottenuto l’accesso all’Agente AI, inserire un prompt che chiede all’Agente AI di creare un’applicazione.

Il prompt dovrebbe essere simile a quello riportato di seguito:

Create a new application named inventory-tracker

Come si vede nel prompt qui sopra, è necessario specificare il nome dell’applicazione. Non appena l’agente AI avrà terminato la creazione dell’applicazione, invierà una risposta di conferma della sua creazione.

La risposta dovrebbe contenere anche le credenziali dell’applicazione, come nella risposta dell’immagine seguente.

Tra le varie credenziali fornite dall’AI Agent, assicurarsi di copiare l’App ID e la chiave JavaScript. Sono necessarie per connettere l’applicazione Svelte con l’applicazione Back4app.

Quindi, creare una classe inventario nell’applicazione Back4app. In questa classe, aggiungere le colonne nome, quantità e prezzo. A tale scopo, utilizzando l’agente AI, scrivere questo prompt:

In the inventory-tracker app, create an inventory class and add a name, price, and quantity column to the class.

Si dovrebbe ottenere una risposta simile all’immagine seguente.

Ora che il backend Svelte UI Back4app è pronto, è necessario collegare l’interfaccia utente al backend.

Collegamento dell’applicazione Svelte a Back4app

In questa sezione, si collegherà l’applicazione Svelte all’applicazione Back4app. Per fare ciò, è necessario l’SDK Parse.

L’SDK di Parse è un insieme di strumenti di sviluppo che offre servizi di backend da utilizzare nelle applicazioni web.

Installare l’SDK Parse eseguendo il comando seguente:

npm install parse

Dopo aver installato l’SDK, all’interno del tag script nel file App.svelte, aggiungete il codice nel blocco di codice sottostante.

import Parse from 'parse/dist/parse.min.js';

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

Sostituire 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le credenziali copiate in precedenza. Assicurarsi di memorizzarle in modo sicuro usando le variabili ambientali.

Aggiunta di dati a Back4app

Per aggiungere dati a Back4app, si utilizzeranno i valori di input nel modulo del componente AddProduct. Si prenderanno i valori inviati dall’utente e li si aggiungerà al database di Back4app.

Nella sezione script del componente AddProduct, creare una funzione addData. Questa funzione conterrà la logica che aggiunge i dettagli del prodotto a Back4app.

Così:

// AddProduct.svelte
import Parse from 'parse/dist/parse.min.js';
import { navigate } from "svelte-routing";

let addData = (event) => {
  event.preventDefault();
  try {
    const Inventory = new Parse.Object("Inventory");
    Inventory.set("name", product.name);
    Inventory.set("quantity", +product.quantity);
    Inventory.set("price", +product.price);
    Inventory.save().then(() => {
      console.log("New Product added successfully");
      navigate("/", { replace: true });
    });
  } catch (error) {
    console.log(error);
  }
};

Nel blocco di codice precedente, la funzione addData crea un nuovo oggetto Parse Inventory per la classe Inventory.

Imposta i valori dei campi nome, quantità e prezzo ai valori corrispondenti delle proprietà del prodotto, prima di salvare l’oggetto nel database.

Si noti che c’è un operatore unario più (+) prima delle proprietà product.quantity e product.price.

L’operatore converte le proprietà nel tipo numero. Legare la funzione addData al modulo del componente AddProduct con il gestore dell’evento submit.

Questo attiverà la funzione addData ogni volta che l’utente invia il modulo.

Per legare la funzione al modulo con il gestore dell’evento submit, sostituire il modulo del componente AddProduct con il modulo seguente:

<!--AddProduct.svelte-->
<form on:submit={addData}>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
	<input type="number" placeholder="No of Products" bind:value={product.quantity}>
	<input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
	    <button>Add Product</button>
	</div>
</form>

Recuperare i dati da Back4app

Per prelevare i dati da Back4app, si accede all’oggetto Parse salvato nell’applicazione Back4app nella sezione precedente e si afferrano i valori contenuti nell’oggetto.

Prima di prelevare i dati, creare un componente Card nella directory src dell’applicazione. Questo componente determina l’aspetto dei dati recuperati da Back4app.

Nel file del componente, scrivere questo codice:

<!-- Card.svelte -->
<script>
	export let name = '';
	export let quantity = 0;
	export let price = 0;
</script>

<div class="card">
	<h3>{name}</h3>
	<div class="details">
	  <p>Price: ${price}</p>
	  <p>Quantity: {quantity == 0 ? "out of stock" : quantity}</p>
	</div>
	<div>
	  <button>Delete</button>
	</div>
</div>

<style>
	.card{
	    display: flex;
	    flex-direction: column;
	    gap: 1.9rem;
	    padding: 1rem;
	    border-radius: 12px;
	    background-color: #e2e2e2;
	    color: #1F2124;;
	    inline-size: 100%;
	}
	
	.details{
	    display: flex;
	    gap: 3rem;
	}
	
	.details p{
	    font-size: 14px;
	    font-weight: 500;
	    color: #888888;
	}
</style>

Il componente Card visualizza il nome, la quantità e il prezzo del prodotto. Ottiene questi valori dal suo componente padre, utilizzando i tre oggetti di scena del blocco di codice precedente: nome, quantità e prezzo.

Ora, nel tag script del componente Home, aggiungere il codice nel blocco di codice sottostante:

//Home.svelte
import { onMount } from "svelte";
import Parse from "parse/dist/parse.min.js";

let products = [];

const fetchProducts = async () => {
  try {
    const query = new Parse.Query("Inventory");
    const productsData = await query.find();
    products = productsData;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchProducts);

Questo codice importa la funzione del ciclo di vita onMount dal framework Svelte. Crea anche un array di prodotti, inizialmente vuoto.

Nel blocco di codice, si trova la funzione fetchProducts, che contiene la logica responsabile del recupero dei dati necessari da Back4app.

La funzione fetchProducts cerca un oggetto “Inventario” nel database dell’applicazione con il metodo Parse.Query.

Quindi restituisce un array dei risultati della query richiamando il metodo find() sulla query. Infine, assegna l’array dei risultati alla variabile product.

La funzione fetchProducts come parametro della funzione onMount assicura che l’applicazione recuperi i dati ogni volta che si esegue il rendering del componente Home.

Nella sezione HTML del componente, visualizzare i dati nell’array dei prodotti.

Così:

<!-- Home.svelte-->
<div class="products">
	{#each products as product}
		<Card name={product.get('name')} quantity={product.get('quantity')} price={product.get('price')}/>
	{/each}
</div>

Il blocco each itera sull’array di prodotti e visualizza il componente Card per ogni prodotto dell’array.

Il componente Card ottiene i valori del nome, della quantità e del prezzo del prodotto utilizzando il metodo get sul prodotto. Assegna quindi questi valori ai suoi oggetti di scena.

Per creare lo stile del tag div che avvolge ogni blocco, aggiungere gli stili definiti di seguito al tag style del componente Home.

/* Home.svelte */
.products{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	border-top: 2px solid #e2e2e2;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
}

Eliminazione dei dati da Back4app

Per aggiungere la funzionalità di cancellazione all’applicazione Svelte. È necessario modificare i componenti, a partire dal componente Card. Nel componente Card, creare un nuovo oggetto chiamato handleClick.

Creare il prop aggiungendo la riga di codice sottostante nella sezione script del componente:

//Card.svelte
export let handleClick;

Ora, legare il prop all’elemento button nella sezione HTML del componente con il gestore dell’evento click.

Così:

<!-- Card.svelte -->
<div>
	<button on:click={handleClick}>Delete</button>
</div>

Nel componente Home, si creerà una funzione deleteProduct. Questa funzione contiene la logica responsabile dell’eliminazione del prodotto selezionato.

Aggiungete le righe di codice seguenti nella sezione script del componente.

// Home.svelte
const deleteProduct = async (id) => {
  try {
    const Product = Parse.Object.extend("Inventory");
    const product = new Product();
    product.id = id;
    await product.destroy();
    const newData = products.filter((item) => item.id !== id);
    products = newData;
  } catch (error) {
    console.log(error);
  }
};

Nel blocco di codice sopra riportato, la funzione deleteProduct crea un nuovo oggetto “Product”, imposta la proprietà id dell’oggetto sul parametro id della funzione e quindi chiama il metodo asincrono destroy dell’oggetto per eliminare il prodotto con l’ID indicato.

La funzione filtra il prodotto con l’ID indicato dall’array di prodotti e crea un nuovo array senza il prodotto eliminato. La funzione assegna quindi il nuovo array ai prodotti.

Quindi, si passa la funzione al prop handleClick del componente Card. Ora, ogni volta che un utente fa clic sul pulsante del componente Card, viene attivata la funzione deleteProduct.

Così:

<!-- Home.svelte -->
<Card 
	name={product.get('name')} 
	quantity={product.get('quantity')} 
	price={product.get('price')}
	handleClick={() => deleteProduct(product.id)}
/>

Test dell’applicazione

È necessario testare l’applicazione per assicurarsi che funzioni correttamente. Per avviare l’applicazione, eseguire il comando seguente.

npm run dev

Questo comando eseguirà l’applicazione sul server di sviluppo e fornirà un link per visualizzare l’applicazione sul browser web.

Facendo clic sul link, si dovrebbe visualizzare un’applicazione simile all’immagine seguente.

Fate clic sul link “Aggiungi prodotti qui” e verrete reindirizzati a una nuova pagina che si presenta così:

Compilare il modulo e inviarlo facendo clic sul pulsante“Aggiungi prodotto“.

Questo aggiungerà i dati forniti al database di Back4app. È possibile verificarlo visitando la dashboard dell’applicazione Back4app.

Se l’applicazione aggiunge i dati con successo, Back4app aggiunge una nuova riga al database.

Così:

Dopo aver inviato il modulo, l’applicazione vi reindirizzerà alla pagina iniziale, che mostrerà il nuovo prodotto.

Per eliminare un prodotto, è sufficiente fare clic sul pulsante “Elimina” nella scheda del prodotto.

Dockerizzazione dell’applicazione Svelte

Prima di poter distribuire l’applicazione Svelte su Back4app, è necessario dockerizzarla. Per dockerizzare l’applicazione Svelte, creare un file Dockerfile e un file .dockerignore nella directory principale dell’applicazione.

Nel file Docker, scrivere le seguenti righe di codice:

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

Di seguito sono elencate alcune directory che è necessario escludere durante la creazione delle immagini Docker. Per specificare queste directory, aggiungerle al file .dockerignore.

Ad esempio:

# .dockerignore
node_modules

Il blocco di codice precedente indica a Docker di escludere la cartella node_modules dal contesto durante il processo di creazione dell’immagine. Poiché l’applicazione Svelte è stata creata con Vite, è necessario configurare Vite per supportare Docker.

Per farlo, accedere al file vite.config.js nella cartella principale dell’applicazione. Sostituire il codice del file con il blocco di codice sottostante:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [svelte()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Il blocco di codice precedente specifica la porta di ascolto del server di sviluppo e garantisce che l’applicazione non venga eseguita su porte diverse da quella specificata.

Per creare l’immagine docker, eseguire il seguente comando nel terminale:

docker build -t inventory-tracker .

Distribuzione dell’applicazione Svelte

Ora che la vostra applicazione è stata dockerizzata, il passo successivo è la distribuzione di un’applicazione Svelte. Per distribuire un’applicazione Svelte, si utilizzeranno i contenitori Back4app.

Prima di distribuire l’applicazione, è necessario inviarla a un repository GitHub, in modo che Back4app possa accedere all’applicazione utilizzando il suo repository. Per dare a Back4app l’accesso al proprio repository GitHub, utilizzare l’applicazione Back4app Github.

Dopo aver dato a Back4app l’accesso al repository dell’applicazione, è possibile distribuire l’applicazione su Back4app con l’agente AI utilizzando il prompt sottostante:

Deploy my repository <<repository-url>> on Back4app containers

Il prompt sopra riportato avvia il processo di distribuzione. Assicurarsi di sostituire < > con l’URL del repository dell’applicazione.

Quando l’installazione è andata a buon fine, l’agente AI invierà un messaggio per informare sullo stato di installazione dell’applicazione e fornire dettagli sull’installazione.

Ad esempio:

L’immagine qui sopra mostra che l’applicazione è stata distribuita con successo e che è possibile accedere all’applicazione nel browser visitando l’URL dell’applicazione specificato.

Conclusione

In questo articolo avete imparato a costruire una semplice applicazione Svelte utilizzando Back4pp. Utilizzando l’agente AI di Back4app, avete creato un backend per la vostra applicazione, con cui avete interagito utilizzando l’SDK Parse.

L’agente AI ha anche semplificato il processo di distribuzione delle app sui container Back4app.

Back4app semplifica il flusso di lavoro dello sviluppo gestendo le esigenze di backend e di distribuzione. Questo vi permette di concentrarvi sulla creazione di prodotti che gli utenti ameranno.

Il codice utilizzato in questa esercitazione è disponibile su questo repository GitHub.