¿Cómo implementar una aplicación Svelte?

En este artículo, aprenderá cómo crear una aplicación web con Svelte e implementarla utilizando contenedores Back4app.

Svelte es un framework de JavaScript para desarrollar aplicaciones web reactivas y dinámicas.

Con el framework Svelte, puede crear aplicaciones livianas y de alto rendimiento porque, a diferencia de los frameworks de JavaScript tradicionales, Svelte traslada gran parte del trabajo pesado del navegador a la etapa de creación.

Descripción general del proyecto: Seguimiento de inventario

Este artículo presentará un rastreador de inventario que se integra con la base de datos en tiempo real de Back4App.

La aplicación administrará los datos de inventario de un usuario, permitiéndole agregar, recuperar y eliminar información del producto según sea necesario.

El rastreador almacenará detalles esenciales como el nombre del producto, el precio y la cantidad en Back4App.

Permite a los usuarios mantener y monitorear fácilmente su inventario, garantizando información precisa y actualizada sobre sus productos.

Creación de la aplicación Svelte

En esta sección, creará un proyecto Svelte utilizando Vite (una herramienta de creación de marco de interfaz).

Puede crear su aplicación Svelte con Vite ejecutando el siguiente comando en su terminal:

npm init vite

Después de ejecutar este comando, proporcione un nombre para su proyecto, seleccione el marco (Svelte) y elija su variante de idioma preferida para el marco.

Así:

La imagen de arriba muestra que el nombre del proyecto Svelte es inventory-tracker y la variante del lenguaje es JavaScript.

A continuación, debe instalar algunas dependencias necesarias en el proyecto Svelte. Para instalar las dependencias, vaya al directorio del proyecto y ejecute el siguiente comando:

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

Este comando instalará todas las dependencias necesarias en su proyecto y ahora podrá comenzar a construir su aplicación en su IDE.

Construyendo una aplicación Svelte

En esta sección, creará una aplicación de seguimiento de inventario utilizando Svelte y la función de backend como servicio de Back4app.

La aplicación tendrá capacidades CRUD (Create, Read, Update, Delete, o “Crear, Leer, Actualizar, Eliminar”), lo que le permitirá agregar, obtener, editar y eliminar datos.

Antes de comenzar a construir su aplicación Svelte, asegúrese de instalar la biblioteca svelte-routing.

La biblioteca svelte-routing es una biblioteca que agrega capacidades de enrutamiento a sus aplicaciones Svelte, permitiéndole crear aplicaciones de página única (SPA).

Instale la biblioteca svelte-routing ejecutando el siguiente comando:

npm i -D svelte-routing

Una vez instalado, crea un componente AddProduct y un componente Home en el directorio src de su proyecto. En el componente AddProduct, agregue las siguientes líneas de código:

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

El bloque de código anterior genera un formulario que contiene los detalles del producto. El formulario contiene tres elementos de entrada del tipo texto (nombre) y número (cantidad y precio).

Los campos de entrada toman el nombre del producto, la cantidad de productos disponibles y el precio del producto.

Con el atributo bind:value en los elementos de entrada, el bloque de código vincula los valores de las entradas a las propiedades del objeto de producto especificado. La sección de estilo contiene estilos CSS que afectan a este componente de Svelte.

A continuación, agregue el bloque de código siguiente a su componente Inicio:

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

El componente Inicio importa el componente Enlace de la biblioteca svelte-routing.

El componente Enlace dirige a los usuarios a la ruta “/add-products”. Deberá definir esta ruta para asegurarse de que el componente Enlace realmente funcione.

Para definir sus rutas, abra el componente Aplicación y agréguele el bloque de código que aparece a continuación:

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

El bloque de código anterior importa los componentes Route y Router de svelte-routing junto con los componentes Home y AddProduct para definir sus rutas individuales.

Con el componente Ruta se definen las distintas rutas de la aplicación. En este caso, las rutas Inicio y AñadirProducto.

Al envolver la sección HTML dentro del componente Router se inicializa el enrutamiento para los componentes incluidos.

Desde el bloque de código anterior, al renderizar la aplicación se mostrará primero la ruta de inicio, ya que la ruta de la ruta es “/”.

El siguiente paso es definir los estilos globales para la aplicación. Para ello, crea una carpeta de estilos dentro del directorio src. En la carpeta de estilos, agrega un archivo global.css; en este archivo, define los estilos globales para la aplicación.

Agregue el bloque de código a continuación al archivo 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;
}

Después de definir los estilos, importe el archivo global.css en el componente App para aplicar los estilos definidos a la aplicación. Puede hacerlo agregando este código a la sección de script del componente App:

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

Ahora ya ha creado su aplicación Svelte. A continuación, creará el backend de su aplicación con Back4app.

Configuración de una aplicación Back4app

En esta sección, creará una aplicación Back4app que sirva como backend de su aplicación utilizando el agente de inteligencia artificial de Back4app.

Necesita una cuenta de Back4app para crear una. Si no tiene una, puede crear una de forma gratuita.

Inicie sesión en su cuenta y haga clic en el enlace “Agente de IA” en la barra de navegación del panel de su cuenta de Back4app.

Una vez que tenga acceso al Agente de IA, ingrese un mensaje solicitándole que cree una aplicación.

El mensaje debería ser similar al que aparece a continuación:

Cree una nueva aplicación llamada inventory-tracker

Versión en inglés

Create a new application named inventory-tracker

Como se ve en el mensaje anterior, debe especificar el nombre de la aplicación. Tan pronto como el agente de IA termine de crear la aplicación, enviará una respuesta confirmando su creación.

La respuesta también debe contener las credenciales de la aplicación, similar a la respuesta en la imagen a continuación.

Entre las distintas credenciales que proporciona el agente de IA, asegúrese de copiar el ID de la aplicación y la clave de JavaScript. Las necesitará para conectar su aplicación Svelte con la aplicación Back4app.

A continuación, cree una clase de inventario en la aplicación Back4app. En esa clase, agregue las columnas de nombre, cantidad y precio. Para ello, utilizando el Agente de IA, escriba este mensaje:

En la aplicación de seguimiento de inventario, cree una clase de inventario y agregue una columna de nombre, precio y cantidad a la clase.

Versión en inglés

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

Debería obtener una respuesta similar a la imagen de abajo.

Ahora que el backend de Svelte UI Back4app está listo, conectará la UI al backend.

Cómo conectar su aplicación Svelte a Back4app

En esta sección, conectará su aplicación Svelte a la aplicación Back4app. Para ello, necesitará el SDK de Parse.

El Parse SDK es un conjunto de herramientas de desarrollo que ofrece servicios de backend que puede usar en sus aplicaciones web.

Instale el SDK de Parse ejecutando el siguiente comando:

npm install parse

Después de instalar el SDK, dentro de la etiqueta de script en el archivo App.svelte, agregue el código en el bloque de código a continuación.

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

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

Reemplace ‘SU_ID_DE_APLICACIÓN’ y ‘SU_CLAVE_JAVASCRIPT’ con las credenciales que copió anteriormente. Asegúrese de almacenarlas de forma segura mediante variables ambientales.

Cómo agregar datos a Back4app

Para agregar datos a Back4app, deberá utilizar los valores de entrada en el formulario del componente AddProduct. Deberá tomar los valores enviados por el usuario y luego agregarlos a la base de datos de Back4app.

En la sección de script del componente AddProduct, crea una función addData. Esta función contendrá la lógica que agrega los detalles del producto a Back4app.

Así:

// 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);
  }
};

En el bloque de código anterior, la función addData crea un nuevo objeto Parse Inventory para la clase Inventory.

Establece los valores de los campos de nombre, cantidad y precio a los valores correspondientes de las propiedades del producto antes de guardar el objeto en la base de datos.

Tenga en cuenta que hay un operador unario más (+) antes de las propiedades product.quantity y product.price.

El operador convierte las propiedades al tipo de número. Vincule la función addData al formulario en el componente AddProduct con el controlador de evento de envío.

Esto activará la función addData cada vez que el usuario envíe el formulario.

Para vincular la función al formulario con el controlador de evento de envío, reemplace el formulario en el componente AddProduct con el formulario siguiente:

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

Obtención de datos desde Back4app

Para obtener datos de Back4app, obtendrá acceso al objeto Parse guardado en su aplicación Back4app en la sección anterior y obtendrá los valores en el objeto.

Antes de obtener los datos, cree un componente de tarjeta en el directorio src de la aplicación. Este componente determina la apariencia de los datos obtenidos de Back4app.

En el archivo del componente, escriba este código:

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

El componente Tarjeta muestra el nombre, la cantidad y el precio del producto. Obtiene estos valores de su componente principal mediante las tres propiedades del bloque de código anterior: nombre, cantidad y precio.

Ahora, en la etiqueta de script de su componente Inicio, agregue el código en el bloque de código a continuación:

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

Este código importa la función de ciclo de vida onMount del marco Svelte. También crea una matriz de productos que está vacía al principio.

En el bloque de código, puede encontrar la función fetchProducts, que contiene la lógica responsable de obtener los datos necesarios de Back4app.

La función fetchProducts busca un objeto “Inventario” en la base de datos de su aplicación con el método Parse.Query.

Luego, devuelve una matriz de los resultados de la consulta llamando al método find( ) en la consulta. Por último, asigna la matriz de los resultados a la variable del producto.

Hacer que la función fetchProducts sea un argumento de la función onMount garantiza que la aplicación obtenga sus datos cada vez que represente el componente Home.

En la sección HTML del componente, muestre los datos de la matriz de productos.

Así:

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

Cada bloque itera sobre la matriz de productos y muestra el componente Tarjeta para cada producto en la matriz.

El componente Tarjeta obtiene los valores de nombre, cantidad y precio del producto mediante el método get del producto. Luego asigna esos valores a sus propiedades.

Dele estilo a la etiqueta div que envuelve cada bloque agregando los estilos definidos a continuación a la etiqueta de estilo en su componente Inicio.

/* 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;
}

Eliminar datos de Back4app

Para agregar la función de eliminación a su aplicación Svelte, deberá modificar sus componentes, comenzando por el componente Tarjeta. En el componente Tarjeta, cree una nueva propiedad llamada handleClick.

Cree la propiedad agregando la siguiente línea de código en la sección de script del componente:

//Card.svelte
export let handleClick;

Ahora, vincule la propiedad al elemento del botón en la sección HTML del componente con el controlador de evento de clic.

Así:

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

En el componente Inicio, creará una función deleteProduct. Esta función contiene la lógica responsable de eliminar el producto seleccionado.

Agregue las siguientes líneas de código en la sección de 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);
  }
};

En el bloque de código anterior, la función deleteProduct crea un nuevo objeto “Producto”, establece la propiedad id del objeto en el parámetro id de la función y luego llama al método de destrucción asincrónico del objeto para eliminar el producto con el ID dado.

La función filtra el producto con el ID indicado de la matriz de productos y crea una nueva matriz sin el producto eliminado. Luego, la función asigna la nueva matriz a los productos.

A continuación, pasa la función a la propiedad handleClick del componente Card. Ahora, cada vez que un usuario haga clic en el botón del componente Card, se activará la función deleteProduct.

Así:

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

Probando su aplicación

Necesitará probar su aplicación para asegurarse de que funciona correctamente. Para iniciar su aplicación, ejecute el siguiente comando.

npm run dev

Este comando ejecutará su aplicación en el servidor de desarrollo y le proporcionará un enlace para que pueda ver la aplicación en su navegador web.

Al hacer clic en el enlace, debería ver una aplicación parecida a la imagen de abajo.

Haga clic en el enlace “Agregar productos aquí” y será redirigido a una nueva página que se verá así:

Complete el formulario y luego envíelo haciendo clic en el botón “Agregar producto”.

Esto agregará los detalles que proporcionó a la base de datos de Back4app. Puede verificar esto visitando el panel de control de la aplicación Back4app.

Si la aplicación agrega los datos correctamente, Back4app agregará una nueva fila a la base de datos.

Así:

Al enviar el formulario, la aplicación le redireccionará a la página de inicio, donde se mostrará el nuevo producto.

Para eliminar cualquier producto, simplemente haga clic en el botón “Eliminar” en la tarjeta del producto.

Dockerización de su aplicación Svelte

Debe Dockerizar su aplicación Svelte antes de poder implementarla en Back4app. Para convertir su aplicación Svelte en Docker, cree un Dockerfile y archivos .dockerignore en el directorio raíz de su aplicación.

En el Dockerfile, escriba las siguientes líneas de código:

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

A continuación, se enumeran algunos directorios que debe excluir al crear sus imágenes de Docker. Para especificar estos directorios, agréguelos al archivo.dockerignore.

Por ejemplo:

# .dockerignore
node_modules

El bloque de código anterior le indica a Docker que excluya el directorio node_modules del contexto durante el proceso de creación de la imagen. Dado que creó su aplicación Svelte con Vite, debe configurar Vite para que sea compatible con Docker.

Para ello, acceda al archivo vite.config.js en el directorio raíz de su aplicación. Reemplace el código del archivo con el bloque de código que aparece a continuación:

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,
   },
})

El bloque de código anterior especifica el puerto en el que escucha el servidor de desarrollo y garantiza que la aplicación no pueda ejecutarse en ningún puerto que no sea el especificado.

Para crear su imagen de Docker, ejecute el siguiente comando en su terminal:

docker build -t inventory-tracker .

Implementación de su aplicación Svelte

Ahora que ha convertido su aplicación en un contenedor, el siguiente paso es implementar una aplicación Svelte. Para implementar una aplicación Svelte, utilizará los contenedores Back4app.

Antes de implementar su aplicación, debe enviarla a un repositorio de GitHub para que Back4app pueda acceder a ella mediante su repositorio. Para otorgarle a Back4app acceso a su repositorio de GitHub, utilice la aplicación Github de Back4app.

Después de otorgarle a Back4app acceso al repositorio de la aplicación, ahora puede implementar la aplicación en Back4app con el agente de IA utilizando el siguiente mensaje:

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

El mensaje anterior inicia el proceso de implementación. Asegúrese de reemplazar <<repository-url>> con la URL del repositorio de su aplicación.

Tras una implementación exitosa, el agente de IA le enviará un mensaje informándole el estado de implementación de la aplicación y brindándole detalles sobre la implementación.

Por ejemplo:

La imagen de arriba muestra que la aplicación se implementó correctamente y que puede acceder a la aplicación en su navegador visitando la URL de la aplicación especificada.

Conclusión

En este artículo, aprendiste a crear una aplicación Svelte sencilla con Back4pp. Con el agente de IA de Back4app, creaste un backend para su aplicación, con el que interactuaste mediante el SDK de Parse.

El agente de IA también agilizó el proceso de implementación de su aplicación en los contenedores Back4app.

Back4app simplifica el flujo de trabajo de desarrollo al gestionar las necesidades de implementación y backend. Esto le permite centrarse en crear productos que les encantarán a sus usuarios.

El código utilizado en este tutorial está disponible en este repositorio de GitHub.