Como implantar um aplicativo Svelte?

Neste artigo, você aprenderá a criar um aplicativo da Web usando o Svelte e a implantá-lo usando os contêineres do Back4app.

Svelte é uma estrutura JavaScript para o desenvolvimento de aplicativos da Web reativos e dinâmicos. Com a estrutura Svelte, você pode criar aplicativos leves e de alto desempenho porque, ao contrário das estruturas JavaScript tradicionais, a Svelte transfere grande parte do trabalho pesado do navegador para o estágio de construção.

Visão geral do projeto: Rastreador de inventário

Este artigo apresentará um rastreador de inventário que se integra ao banco de dados em tempo real do Back4App.

O aplicativo gerenciará os dados de inventário de um usuário, permitindo que ele adicione, recupere e exclua informações de produtos conforme necessário.

O rastreador armazenará detalhes essenciais, como nome do produto, preço e quantidade no Back4App.

Ele permite que os usuários mantenham e monitorem facilmente seu inventário, garantindo informações precisas e atualizadas sobre seus produtos.

Criação do aplicativo Svelte

Nesta seção, você criará um projeto Svelte usando o Vite (uma ferramenta de criação de estrutura de front-end).

Você pode criar seu aplicativo Svelte com o Vite executando o seguinte comando em seu terminal:

npm init vite

Depois de executar esse comando, forneça um nome para o projeto, selecione a estrutura (Svelte) e escolha a variante de idioma de sua preferência para a estrutura.

Assim:

A imagem acima mostra que o nome do projeto Svelte é inventory-tracker, e a variante de linguagem é JavaScript.

Em seguida, você precisa instalar algumas dependências necessárias no projeto Svelte. Para instalar as dependências, vá para o diretório do projeto e execute o comando abaixo:

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

Esse comando instalará todas as dependências necessárias em seu projeto, e agora você pode começar a criar seu aplicativo no IDE.

Criação de um aplicativo Svelte

Nesta seção, você criará um aplicativo rastreador de inventário usando o Svelte e o backend do Back4app como um recurso de serviço.

O aplicativo terá recursos CRUD (Create, Read, Update, Delete), permitindo que você adicione, busque, edite e exclua dados.

Antes de começar a criar seu aplicativo Svelte, certifique-se de instalar a biblioteca svelte-routing.

A biblioteca svelte-routing é uma biblioteca que adiciona recursos de roteamento aos seus aplicativos Svelte, permitindo a criação de aplicativos de página única (SPAs).

Instale a biblioteca svelte-routing executando o comando abaixo:

npm i -D svelte-routing

Depois de instalado, crie um componente AddProduct e um Home no diretório src de seu projeto. No componente AddProduct, adicione as seguintes linhas 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>

O bloco de código acima renderiza um formulário que recebe detalhes do produto. O formulário contém três elementos de entrada do tipo texto(nome) e número(quantidade e preço).

Os campos de entrada contêm o nome do produto, o número de produtos disponíveis e o preço do produto.

Com o atributo bind:value nos elementos de entrada, o bloco de código vincula os valores das entradas às propriedades especificadas do objeto do produto. A seção de estilo contém estilos CSS com escopo para esse componente Svelte.

Em seguida, adicione o bloco de código abaixo ao seu 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>

O componente Home importa o componente Link da biblioteca svelte-routing. O componente Link direciona os usuários para a rota “/add-products”. Você precisará definir essa rota para garantir que o componente Link realmente funcione.

Para definir suas rotas, abra o componente App e adicione o bloco de código abaixo a ele:

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

O bloco de código acima importa os componentes Route e Router do svelte-routing juntamente com os componentes Home e AddProduct para definir suas rotas individuais.

Com o componente Route, você define as várias rotas no aplicativo. Nesse caso, as rotas Home e AddProduct.

O agrupamento da seção HTML dentro do componente Router inicializa o roteamento para os componentes incluídos.

No bloco de código acima, a renderização do aplicativo exibirá primeiro a rota Home, pois o caminho da rota é “/”.

A próxima etapa é definir os estilos globais para o aplicativo. Para isso, crie uma pasta de estilos no diretório src. Na pasta de estilos, adicione um arquivo global.css; nesse arquivo, defina os estilos globais do aplicativo.

Adicione o bloco de código abaixo ao arquivo 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;
}

Depois de definir os estilos, importe o arquivo global.css no componente App para aplicar os estilos definidos ao aplicativo. Isso pode ser feito adicionando este código à seção de script do componente App:

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

Agora, você criou seu aplicativo Svelte. Em seguida, você criará o backend do seu aplicativo usando o Back4app.

Configuração de um aplicativo Back4app

Nesta seção, você criará um aplicativo Back4app que serve como backend do seu aplicativo usando o agente Back4app AI.

Você precisa de uma conta Back4app para criar uma. Se você não tiver uma, poderá criá-la gratuitamente.

Faça login na sua conta e clique no link “AI Agent” na barra de navegação do painel da sua conta Back4app.

Quando você tiver acesso ao AI Agent, insira um prompt solicitando que o AI Agent crie um aplicativo.

O prompt deve ser semelhante ao abaixo:

Create a new application named inventory-tracker

Como visto no prompt acima, você deve especificar o nome do aplicativo. Assim que o AI Agent terminar de criar o aplicativo, ele enviará uma resposta confirmando sua criação.

A resposta também deve conter as credenciais do aplicativo, semelhante à resposta da imagem abaixo.

Entre as várias credenciais fornecidas pelo AI Agent, certifique-se de copiar o ID do aplicativo e a chave JavaScript. Você precisará delas para conectar seu aplicativo Svelte ao aplicativo Back4app.

Em seguida, crie uma classe de inventário no aplicativo Back4app. Nessa classe, adicione as colunas de nome, quantidade e preço. Para fazer isso, usando o AI Agent, escreva este prompt:

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

Você deverá receber uma resposta semelhante à imagem abaixo.

Agora que o backend do Svelte UI Back4app está pronto, você conectará a interface do usuário ao backend.

Como conectar seu aplicativo Svelte ao Back4app

Nesta seção, você conectará seu aplicativo Svelte ao aplicativo Back4app. Para fazer isso, você precisa do SDK do Parse.

O Parse SDK é um conjunto de ferramentas de desenvolvimento que oferece serviços de back-end que você pode usar em seus aplicativos da Web.

Instale o Parse SDK executando o comando abaixo:

npm install parse

Depois de instalar o SDK, dentro da tag de script no arquivo App.svelte, adicione o código no bloco de código abaixo.

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

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

Substitua "YOUR_APPLICATION_ID" e "YOUR_CLIENT_KEY" pelas credenciais que você copiou anteriormente. Certifique-se de armazená-las de forma segura usando variáveis de ambiente.

Adicionando dados ao Back4app

Para adicionar dados ao Back4app, você usará os valores de entrada no formulário do componente AddProduct. Você pegará os valores enviados pelo usuário e os adicionará ao banco de dados do Back4app.

Na seção de script do componente AddProduct, crie uma função addData. Essa função conterá a lógica que adiciona os detalhes do produto ao Back4app.

Assim:

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

No bloco de código acima, a função addData cria um novo objeto Parse Inventory para a classe Inventory.

Ele define os valores dos campos name, quantity e price para os valores correspondentes das propriedades do produto antes de salvar o objeto no banco de dados.

Observe que há um operador unário mais (+) antes das propriedades product.quantity e product.price.

O operador converte as propriedades para o tipo de número. Vincule a função addData ao formulário no componente AddProduct com o manipulador de eventos submit.

Isso acionará a função addData sempre que o usuário enviar o formulário.

Para vincular a função ao formulário com o manipulador de eventos de envio, substitua o formulário no componente AddProduct pelo formulário abaixo:

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

Obtenção de dados do Back4app

Para obter dados do Back4app, você terá acesso ao objeto Parse salvo no aplicativo Back4app na seção anterior e obterá os valores no objeto.

Antes de buscar os dados, crie um componente Card no diretório src do aplicativo. Esse componente determina a aparência dos dados obtidos do Back4app.

No arquivo de componentes, escreva 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>

O componente Card exibe o nome, a quantidade e o preço do produto. Ele obtém esses valores de seu componente pai usando os três props no bloco de código acima: nome, quantidade e preço.

Agora, na tag script de seu componente Home, adicione o código no bloco de código abaixo:

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

Esse código importa a função de ciclo de vida onMount da estrutura Svelte. Ele também cria uma matriz de produtos que está vazia no início.

No bloco de código, você pode encontrar a função fetchProducts, que contém a lógica responsável por buscar os dados necessários do Back4app.

A função fetchProducts procura um objeto “Inventory” no banco de dados do seu aplicativo com o método Parse.Query.

Em seguida, ele retorna uma matriz dos resultados da consulta chamando o método find() na consulta. Por fim, ele atribui a matriz dos resultados à variável product.

Tornar a função fetchProducts um argumento da função onMount garante que o aplicativo busque seus dados sempre que você renderizar o componente Home.

Na seção HTML do componente, exiba os dados na matriz de produtos.

Assim:

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

O bloco each itera sobre a matriz de produtos e exibe o componente Card para cada produto na matriz.

O componente Card obtém os valores do nome, da quantidade e do preço do produto usando o método get no produto. Em seguida, ele atribui esses valores às suas props.

Estilize a tag div que envolve cada bloco adicionando os estilos definidos abaixo à tag style em seu 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;
}

Exclusão de dados do Back4app

Para adicionar a funcionalidade de exclusão ao seu aplicativo Svelte. Você precisará modificar seus componentes, começando pelo componente Card. No componente Card, crie uma nova prop chamada handleClick.

Crie o prop adicionando a linha de código abaixo na seção de script do componente:

//Card.svelte
export let handleClick;

Agora, associe a prop ao elemento do botão na seção HTML do componente com o manipulador de eventos de clique.

Assim:

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

No componente Home, você criará uma função deleteProduct. Essa função contém a lógica responsável pela exclusão do produto selecionado.

Adicione as linhas de código abaixo na seção de script do 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);
  }
};

No bloco de código acima, a função deleteProduct cria um novo objeto “Product”, define a propriedade id do objeto como o parâmetro id da função e, em seguida, chama o método assíncrono destroy do objeto para excluir o produto com o ID fornecido.

A função filtra o produto com o ID fornecido da matriz de produtos e cria uma nova matriz sem o produto excluído. Em seguida, a função atribui a nova matriz aos produtos.

Em seguida, você passa a função para a propriedade handleClick do componente Card. Agora, sempre que um usuário clicar no botão do componente Card, isso acionará a função deleteProduct.

Assim:

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

Testando seu aplicativo

Você precisará testar seu aplicativo para garantir que ele funcione corretamente. Para iniciar seu aplicativo, execute o comando abaixo.

npm run dev

Esse comando executará seu aplicativo no servidor de desenvolvimento e fornecerá um link para que você possa visualizar o aplicativo no navegador da Web.

Ao clicar no link, você verá um aplicativo parecido com a imagem abaixo.

Clique no link “Add Products here” (Adicionar produtos aqui) e você será redirecionado para uma nova página semelhante a esta:

Preencha o formulário e, em seguida, envie-o clicando no botão“Add Product” (Adicionar produto).

Isso adicionará os detalhes que você forneceu ao banco de dados do Back4app. Você pode verificar isso visitando o painel de controle do aplicativo Back4app.

Se o aplicativo adicionar os dados com êxito, o Back4app adicionará uma nova linha ao banco de dados.

Assim:

Após o envio do formulário, o aplicativo o redirecionará para a página inicial, que exibirá o novo produto.

Para excluir qualquer produto, basta clicar no botão “Excluir” no cartão do produto.

Dockerizando seu aplicativo Svelte

Você deve dockerizar seu aplicativo Svelte antes de poder implementá-lo no Back4app. Para dockerizar seu aplicativo Svelte, crie um Dockerfile e arquivos .dockerignore no diretório raiz do seu aplicativo.

No Dockerfile, escreva as seguintes linhas de código:

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

Há alguns diretórios que você precisa excluir ao criar suas imagens do Docker, listados abaixo. Para especificar esses diretórios, adicione-os ao arquivo .dockerignore.

Por exemplo:

# .dockerignore
node_modules

O bloco de código acima diz ao Docker para excluir o diretório node_modules do contexto durante o processo de criação da imagem. Como você criou seu aplicativo Svelte com o Vite, é necessário configurar o Vite para oferecer suporte ao Docker.

Para fazer isso, acesse o arquivo vite.config.js no diretório raiz do seu aplicativo. Substitua o código no arquivo pelo bloco de código abaixo:

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

O bloco de código acima especifica a porta em que o servidor de desenvolvimento escuta e garante que o aplicativo não seja executado em nenhuma outra porta que não seja a especificada.

Para criar sua imagem do docker, execute o seguinte comando em seu terminal:

docker build -t inventory-tracker .

Implementação do aplicativo Svelte

Agora que você já dockerizou seu aplicativo, a próxima etapa é como implementar um aplicativo Svelte. Para implementar um aplicativo Svelte, você utilizará os contêineres do Back4app.

Antes de implantar seu aplicativo, você deve enviá-lo para um repositório do GitHub para que o Back4app possa acessar o aplicativo usando seu repositório. Para dar ao Back4app acesso ao seu repositório do GitHub, use o aplicativo Back4app Github.

Depois de conceder ao Back4app acesso ao repositório do aplicativo, agora você pode implantar o aplicativo no Back4app com o agente de IA usando o prompt abaixo:

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

O prompt acima inicia o processo de implantação. Certifique-se de substituir o < > pelo URL do repositório do seu aplicativo.

Após a implantação bem-sucedida, o agente de IA enviará a você uma mensagem informando o status da implantação do aplicativo e fornecendo detalhes sobre a implantação.

Por exemplo:

A imagem acima mostra que o aplicativo foi implantado com êxito e que você pode acessá-lo no navegador visitando o URL do aplicativo especificado.

Conclusão

Neste artigo, você aprendeu a criar um aplicativo Svelte simples usando o Back4pp. Usando o agente de IA do Back4app, você criou um backend para seu aplicativo, com o qual interagiu usando o SDK do Parse.

O agente de IA também simplificou o processo de implementação do seu aplicativo nos contêineres do Back4app.

O Back4app simplifica seu fluxo de trabalho de desenvolvimento, gerenciando suas necessidades de back-end e implantação. Isso permite que você se concentre na criação de produtos que seus usuários vão adorar.

O código usado neste tutorial está disponível neste repositório do GitHub.