Svelte 3 + Firebase: Criando um CRUD com a nova ferramenta JS

Amigos developer, se você precisam de aplicações front-end de alta performance e ao mesmo tempo gerando componentes leves e pequenos, eu tenho uma novidade para você: Svelte 3.
Eu sei que vocês estão pensando 😉: “…lá vem mais um framework javascript 😞…”, mas este não é um framework e você vai ver pontos interessantes para considerar o uso do Svelte.
Acompanhem comigo o passo a passo, vamos criar um aplicação simples para o gerenciamento de tarefas. Na aplicação vamos usar alguns recursos básicos do Svelte 3.
Ao final do artigo teremos uma aplicação em Svelte 3 completa, com inserção, alteração, exclusão e consulta de dados usando um banco de dados na nuvem, então bora o/

O que é Svelte?

Criado em novembro de 2016, por Rich Harris (@rich_harris), em sua versão mais recente, Svelte 3 foi atualizado em abril de 2019.
Svelte é um compilador/builder javascript que nos apresenta uma nova abordagem para se construir interfaces e diferente dos frameworks javascript como VueJS, Angular e outros, Svelte não é um framework javascript.
Svelte não usa a técnica de Virtual DOM, por ser um compilador, ele gera código final em javascript puro (vanilla javascript), sem dependência de nenhum framework.
Rich Harris, acha que a técnica de Virtual DOM é apenas uma sobrecarga, pois existem operações adicionais a serem feitas no DOM, por exemplo, o processo de encontrar as diferenças entre Virtual DOM e o DOM real.

Mas por que usar Svelte?

Enquanto frameworks tradicionais fazem o trabalho de conciliação entre DOM virtual e DOM real no navegador, Svelte trabalha com o conceito de que mudanças devem ser diretamente injetadas no DOM, quando o estado do aplicativo é alterado.
Outra diferença do Svelte, é que o código desenvolvido pelo programador, já deve ser compatível com o navegador, antes da aplicação ser executada. Este processo de compatibilização de código é transferido para a etapa de compilação e não é realizado no momento de execução da aplicação.
Em relação a reatividade, Svelte faz com que o próprio javascript fique reativo e sem precisar usar bibliotecas complexas de gerenciamento de estado.
Outro ponto que Rich Harris chama a atenção: Svelte precisa de menos código para realizar as mesmas coisas que os outros frameworks javascript fazem.

Quais empresas usam o Svelte?

Este é o site oficial do Svelte, https://svelte.dev. Na página inicial podemos ver as principais empresas que adotaram a ferramenta, na seção “Who’s using Svelte?”.
Entre elas está o jornal The New York Times (nytimes.com) e a brasileira Stone Pagamentos (www.stone.co).
O case da Stone Pagamentos é interessante. Atualmente, são mais de 200 mil máquinas de pagamento de cartão da empresa usando o Svelte.
Esses dispositivos de pagamento são de baixo desempenho e a empresa testou vários frameworks antes de se decidir pelo Svelte. O Svelte foi a melhor solução encontrada por apresentar alto desempenho com baixo custo de processamento.
A Stone é mencionada por Rich Harris em sua palestra disponível neste vídeo. Vá para o minuto 25 do vídeo, para saber mais sobre esse case da Stone Pagamentos e o Svelte: https://www.youtube.com/watch?v=AdNJ3fydeao

Quer saber mais sobre o Svelte?

Para saber mais visite o website oficial, https://svelte.dev.
Também recomendo assistir toda a palestra do próprio Rich Harris: https://www.youtube.com/watch?v=AdNJ3fydeao

O que vamos aprender?

Vamos usar o Svelte 3 para criar uma aplicação bem simples, será uma aplicação tipo TO-DO, onde serão realizadas as operações básicas de criação, alteração, consulta e exclusão de dados de tarefas, o banco de dados estará na nuvem (FIrebase).
Apresentaremos o básico do Svelte 3, comandos javascript não serão detalhados para não perdermos o foco.

Ferramentas

Editor indicado: Visual Studio Code (https://code.visualstudio.com/download).\
Extensão “Svelte” para suporte da linguagem no Visual Studio Code.
Node.js e NPM (https://nodejs.org).
npx – Ferramenta para executar pacotes Node.js.
- Este utilitário vem junto com o NPM desde a versão 5.2. Caso você não tenha
- o npx instalado, utilize o comando abaixo:
  
  Default
  
  npm install -g npx
  
  1
  
  npm install -g npx
Bulmaguangzhou hook up – Framework Css que vai nos ajudar a criar uma página mais bonita e responsiva (usaremos via CDN)

Criando o banco de dados na nuvem com Firebase

Nossa aplicação Svelte usará um banco de dados na nuvem, abra uma conta gratuitamente no Firebase acessando free dating sites las vegas nv, crie um projeto e depois crie um banco de dados do tipo “Realtime Database” como nas imagens a baixo:

Entre no painel do Firebase, clique em Database e depois em Criar Banco de Dados

Escolha o modo de teste e mande ativar o banco de dados

Passo a passo da criação do App

1 – Criando a aplicação

1) O nome sugerido para a aplicação é “svelte-todo-app”. Para começar uma aplicação Svelte abra o console e digite os seguintes comandos:

npx degit sveltejs/template svelte-todo-app
cd svelte-todo-app

1 2	npx degit sveltejs/template svelte-todo-app cd svelte-todo-app

2) Instale as dependências. Pode ser usado o yarn no lugar do npm.

npm install

1	npm install

3) E com isso, execute o servidor de desenvolvimento usando este comando:

npm run dev

1	npm run dev

4) Informe em seu navegador o endereço http://localhost:5000 para acessar seu aplicativo.
Apareceu assim para você?

No console:

Your application is ready~! 🚀
- Local:      http://localhost:5000

1 2	Your application is ready~! 🚀 - Local: http://localhost:5000

No Browser:

Hello world!

Então estamos prontos para começar a usar o Svelte! 🎉

2 – Estrutura de arquivos

Ao criar o projeto, o Svelte gerou a seguinte estrutura de pastas e arquivos. Vamos detalhar alguns desses itens.

public: Esta pasta contém o código compilado da aplicação. A página da web que vemos no navegador é gerada com base nesse código compilado.
src: Esta pasta contém todo o código fonte que escrevemos para a aplicação.
App.svelte: Este é o componente raiz de uma aplicação Svelte. Todo arquivo ou módulo Svelte tem a extensão “.svelte”.
main.js: Este é o arquivo raiz que nos auxilia a injetar nossa aplicação Svelte dentro do DOM.
package.json: Arquivo de metadados que contém todas as dependências do projeto.
rollup.config.js: Svelte usa o “rollup” como javascript bundler, mas pode ser usado outro empacotador como o webpack. Ele também permite que seu navegador seja atualizado automaticamente após qualquer modificação em seu código fonte.

3 – Estrutura de um componente

Abra o arquivo App.svelte, vamos detalhar a estrutura de um componente Svelte:

<script>
  export let name;
</script>
<style>
  h1 {
    color: purple;
  }
</style>
<h1>Hello {name}!</h1>

export let name;

</script>

<style>

h1 {

color: purple;

}

</style>

<h1>Hello {name}!</h1>

Um componente Svelte é composto de três seções:

Script: Entre as tags <script> e </script> fica o código javascript. É onde escrevemos a parte lógica do componente.
Style: Dentro das tags <style> e </style> desenvolvemos o código CSS relativo ao componente.
HTML: A seção de HTML não tem tags. Ou seja, tudo que escrevemos fora das tags anteriores é código HTML.

4 – Preparando o projeto

Agora vamos criar os primeiros componentes, pastas e começar a codificar.

1) A primeira coisa a fazer é importar o Bulma para nosso projeto ficar um pouco mais bonito. 😊
Certifique-se que o servidor de desenvolvimento está funcionando. Caso precise iniciar o servidor, repita o procedimento:

npm run dev

1	npm run dev

Use este conteúdo a seguir, no arquivo index.html do projeto, dentro da pasta public.
public/index.html

<!doctype html>
<html>
  <head>
    <meta charset='utf8'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Svelte app</title>
    <link rel='icon' type='image/png' href='/favicon.png'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <link rel='stylesheet' href='/bundle.css'>
  </head>
  <body>
    <script src='/bundle.js'></script>
  </body>
</html>

<!doctype html>

<html>

<head>

<title>Svelte app</title>

</head>

<body>

</body>

</html>

2) O arquivo main.js como vimos anteriormente, é o arquivo raiz que nos auxilia a injetar nossa aplicação Svelte dentro do DOM.
Faça com que ele fique da seguinte forma:
main.js

import App from './App.svelte';
const app = new App({
  target: document.body
});
export default app;

import App from './App.svelte';

const app = new App({

target: document.body

});

export default app;

💡 Para saber mais, consulte a documentação oficial: https://onebitcode.com/best-dating-site-for-over-40/

3) O componente raiz de uma aplicação Svelte, é o arquivo App.svelte.
Para o arquivo App.svelte, use o conteúdo a seguir:
App.svelte

<script>
 // Na seção de script, declaramos duas constantes.
 // Elas serão usadas no HTML.
 const projectName = "To Do App";
 const src="https://avatars2.githubusercontent.com/u/23617963?s=40&v=4";
</script>
<section class="section">
 <div class="container">
   <figure class="image is-64x64">
     <img src={src} alt="Svelte3"/>
   </figure>
   <!-- dentro de chaves {} podemos usar javascript -->
   <h1 class="title">{projectName}</h1>
   <p class="subtitle">
     My first website made with
     <strong>Svelte!</strong>
   </p>
 </div>
</section>

// Na seção de script, declaramos duas constantes.

// Elas serão usadas no HTML.

const projectName = "To Do App";

const src="https://avatars2.githubusercontent.com/u/23617963?s=40&v=4";

</script>

</figure>

<h1 class="title">{projectName}</h1>

My first website made with

<strong>Svelte!</strong>

</p>

</div>

</section>

Na seção de HTML, dentro de chaves podemos usar qualquer expressão javascript. Experimente usar uma expressão javascript agora. Troque {projectName} por {projectName.toUpperCase()}

Assim como você pode usar chaves para controlar o texto, você pode usá-las para controlar os atributos dos elementos HTML. Por exemplo a url de uma imagem:
- <img src={src}>

Experimente usar esse “shorthand attribute”. Quando atributo e valor são os mesmos podemos usar assim:
- <img {src}>

💡 Para saber mais, consulte a documentação oficial:
over 60 dating servi cve

3) Crie uma pasta específica para conter componentes do projeto.
Dentro da pasta src crie a pasta Tasks para conter componentes específicos de nosso projeto.

mkdir src/Tasks

1	mkdir src/Tasks

4) Para finalizar essa parte, crie dois componentes.
Dentro da pasta src crie dois arquivos vazios. Nosso projeto terá dois componentes específicos para as tarefas do projeto.

touch src/Tasks/Task.svelte
touch src/Tasks/TaskGridItem.svelte

1 2	touch src/Tasks/Task.svelte touch src/Tasks/TaskGridItem.svelte

Mantenha o servidor de desenvolvimento em execução, para observarmos o resultado de nossas implementações no navegador:

$ npm run dev

1	$ npm run dev

5 – Reatividade no Componente de Tarefas

1) Antes de trabalharmos com o componente Task.svelte temos que inclui-lo para dentro do componente App.svelte.
Veja como um componente é referenciado no Svelte. Precisamos usar o comando import na seção script e uma tag na seção HTML.
src/App.svelte

<script>
 import Tasks from "./Tasks/Task.svelte"; // permite incluir um componente
 const projectName = "To Do App";
 const src = "https://avatars2.githubusercontent.com/u/23617963?s=40&v=4";
</script>
<section class="section">
 <div class="container">
   <figure class="image is-64x64">
     <img {src} alt="Svelte3" />
   </figure>
   <h1 class="title">{projectName}</h1>
   <p class="subtitle">
     My first website made with
     <strong>Svelte!</strong>
   </p>
 </div>
 <Tasks /> <!-- aqui o componente é incluido -->
</section>

import Tasks from "./Tasks/Task.svelte"; // permite incluir um componente

const projectName = "To Do App";

const src = "https://avatars2.githubusercontent.com/u/23617963?s=40&v=4";

</script>

</figure>

<h1 class="title">{projectName}</h1>

My first website made with

<strong>Svelte!</strong>

</p>

</div>

</section>

2) O componente Task.svelte irá conter o campo para entrar com a descrição da tarefa, os botões principais e a grid de tarefas.
Vamos começar apresentando o formulário e o campo da tarefa. Use este conteúdo a seguir, dentro do arquivo Task.svelte.
src/Tasks/Task.svelte

<script>
  let newDescription = "";
</script>
<div class="container">
  <div class="notification">
      <!-- form -->
      <div class="field is-horizontal">
          <div class="field-label is-normal">
              <label class="label">Task</label>
          </div>
          <div class="field-body">
              <div class="field">
                  <p class="control is-expanded has-icons-left">
                      <input id="newDescriptionId" bind:value={newDescription} class="input" type="text" placeholder="Enter new task..." />
                      <span class="icon is-small is-left">
                          <i class="fas fa-tasks" />
                      </span>
                  </p>
              </div>
              <!-- Buttons -->
          </div>
      </div>
      <!-- Binding -->
  </div>
</div>

let newDescription = "";

</script>

</div>

</span>

</p>

</div>

</div>

</div>

Binding – bind:value={newDescription}

- Você pode usar a diretiva bind:value para fazer a vinculação de dados. No exemplo anterior, sempre que você alterar o valor do campo da tag input, ele atualizará a variável newDescription imediatamente.
Para ver esse efeito, insira o código a seguir, após o comentário “<!– Binding –>”

  <!-- Binding -->   
  <div class="field is-horizontal adding-record">
     <div class="field-label">New record:</div>
     <div class="field-body">
       <div class="field">
         <div class="control">{newDescription}</div>
       </div>
     </div>
   </div>

<div class="field-label">New record:</div>

<div class="control">{newDescription}</div>

</div>

💡 Para saber mais, consulte a documentação oficial:
casual dating vs serious dating

3) Implementando uma declaração reativa.
Svelte automaticamente atualiza o DOM quando o estado de algum componente muda. Frequentemente, alguma parte de um componente precisa ser recalculado (atualizado) com base em outras partes. Para isso temos as declarações reativas.
Neste caso, vamos implementar uma declaração reativa para habilitar o botão salvar apenas quando a descrição da tarefa for maior ou igual a cinco caracteres.

Na seção de scripts inclua uma variável booleana. Ela representa se o tamanho da descrição da tarefa é válida.
Em seguida, insira a declaração reativa que atribui falso ou verdadeiro à nova variável dependendo do tamanho da descrição da tarefa.
Sua seção script deve ficar assim:

<script>
   let newDescription = "";
   let validDescription = false;
   $: validDescription = newDescription.trim().length >= 5; // declaração reativa
</script>

let newDescription = "";

let validDescription = false;

$: validDescription = newDescription.trim().length >= 5; // declaração reativa

</script>

Pode não parecer, mas essa expressão reativa é um javascript válido porém incomum.
É assim que funciona uma declaração reativa no Svelte: quando newDescription sofre qualquer mudança de valor, a expressão à direita do sinal de igual será reavaliada e seu resultado atribuído a variável que está ao lado esquerdo do sinal de igual, neste caso a variável validDescription.
Resumindo, o Svelte interpreta assim uma declaração reativa: “re-execute este código assim que mudar qualquer valor referenciado”.

Agora falta usar a expressão reativa.
Inclua o trecho abaixo após o comentário “<!– Buttons –>”

<!-- Buttons --> 
<div class="field is-grouped">   
  <div class="control">      
    <button
      class="button is-normal">New</button>   
    </div>   
    <div class="control">     
      <button class="button is-info" disabled={!validDescription}>
      <span class="icon is-small">       
        <i class="fas fa-check" />      
      </span>      
      <span>Save</span>    
    </button>  
  </div>
</div>

<button

class="button is-normal">New</button>

</div>

</span>

</button>

</div>

Agora temos dois botões. O botão “New” que usaremos posteriormente e botão “Save”.
O botão “Save” será habilitado caso a descrição da tarefa tenha tamanho válido.

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/reactive-declarations

Check Point

Para conferir o andamento, certifique-se que seu componente está assim:

src/Tasks/Task.svelte

<script>
    let newDescription = "";
    let validDescription = false;
    $: validDescription = newDescription.trim().length >= 5; // declaração reativa
</script>
<div class="container">
	<div class="notification">
		<!-- form -->
		<div class="field is-horizontal">
			<div class="field-label is-normal">
				<label class="label">Task</label>
			</div>
			<div class="field-body">
				<div class="field">
					<p class="control is-expanded has-icons-left">
						<input id="newDescriptionId" bind:value={newDescription} class="input" type="text" placeholder="Enter new task..." />
						<span class="icon is-small is-left">
							<i class="fas fa-tasks" />
						</span>
					</p>
				</div>
				<!-- Buttons -->
				<div class="field is-grouped">
					<div class="control">
						<button class="button is-normal">New</button>
					</div>
					<div class="control">
						<button class="button is-info" disabled={!validDescription}>
							<span class="icon is-small">
								<i class="fas fa-check" />
							</span>
							<span>Save</span>
						</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Binding -->
		<div class="field is-horizontal">
			<div class="field-label">New record:</div>
			<div class="field-body">
				<div class="field">
					<div class="control">{newDescription}</div>
				</div>
			</div>
		</div>
	</div>
</div>

let newDescription = "";

let validDescription = false;

$: validDescription = newDescription.trim().length >= 5; // declaração reativa

</script>

</div>

</span>

</p>

</div>

</div>

</span>

</button>

</div>

<div class="field-label">New record:</div>

<div class="control">{newDescription}</div>

</div>

Se tudo está indo bem, a tela até o momento estará assim:

6 – Event Listeners: Lidando com eventos.

Com Svelte podemos ouvir qualquer evento em um elemento HTML com a diretiva “on”.
Vamos implementar um comportamento no botão “New” usando a diretiva “on” do Svelte.
Queremos limpar o campo de descrição de tarefas e deixar o cursor posicionado para que o usuário comece a entrar com uma nova descrição.
Assim que o usuário der click no botão “New”, o botão irá acionar uma function associada.
Continuando em src/Tasks/Task.svelte, na seção de HTML seu botão “New” ficará assim agora:

<div class="control">
  <button class="button is-normal" on:click={newTask}>New</button>
</div>

</div>

Na seção script teremos agora a function que está sendo chamada na diretiva “on:click={newTask}”

<script>
   let newDescription = "";
   let id = null;
   let validDescription = false;
   $: validDescription = newDescription.trim().length >= 5; // declaração reativa
   function newTask() {
     id = null;
     newDescription = "";
     document.getElementById("newDescriptionId").focus();
   }
</script>

let newDescription = "";

let id = null;

let validDescription = false;

$: validDescription = newDescription.trim().length >= 5; // declaração reativa

function newTask() {

id = null;

newDescription = "";

document.getElementById("newDescriptionId").focus();

}

</script>

💡 Para saber mais, consulte a documentação oficial: https://svelte.dev/tutorial/dom-events

7 – Reatividade acionada por atribuição.

Por conta da reatividade do Svelte ser acionada por atribuições, usar métodos de array como “push” ou “splice” não resulta em atualizações automaticamente.
No Svelte vamos usar uma atribuição simples em um array, para atualizar dados de tarefas que estão no banco de dados.
Lembra do banco de dados da nuvem que criamos anteriormente? Agora vamos começar a manipular dados de tarefas usando este banco.
Para isto, crie um array na seção script. Vamos armazenar tarefas neste array para apresenta-las posteriormente na tela.

src/Tasks/Task.svelte

<script>
 let tasks = []; // array para armazenar dados de tarefas
 let newDescription = "";
 let id = null;
 let validDescription = false;
 $: validDescription = newDescription.trim().length >= 5;  // declaração reativa
 function newTask() {
   id = null;
   newDescription = "";
   document.getElementById("newDescriptionId").focus();
 }
</script>

let tasks = []; // array para armazenar dados de tarefas

let newDescription = "";

let id = null;

let validDescription = false;

$: validDescription = newDescription.trim().length >= 5; // declaração reativa

function newTask() {

id = null;

newDescription = "";

document.getElementById("newDescriptionId").focus();

}

</script>

Ainda na seção script, inclua a function “submitTask” e a function “insertTask”, que efetivamente registra dados de tarefas no banco de dados da nuvem e atualiza o array de tarefas.

Atenção. Informe no comando “fetch” a URL de seu banco de dados (ela está no seu painel do firebase em Databases -> Realtime Database).

// ... continuação 
 function submitTask() {
   insertTask(); // insere tarefas no banco de dados.
 }
function insertTask() {
   const taskData = { description: newDescription };
   fetch("https://sua-url-aqui.firebaseio.com/tasks.json", {
     method: "POST",
     body: JSON.stringify(taskData),
     headers: { "Content-Type": "application/json" }
   })
     .then(response => {
       if (!response.ok) {
         throw new error("An error occurred, please try again!");
       }
       return response.json();
     })
     .then(data => {
       // Reatividade acionada por atribuição.
       tasks = [...tasks, { id: data.name, description: newDescription }];
       // data.name é como o Firebase armazena o ID do registro.
       newTask();
     })
     .catch(error => console.log(error));
 }
</script>

// ... continuação

function submitTask() {

insertTask(); // insere tarefas no banco de dados.

}

function insertTask() {

const taskData = { description: newDescription };

fetch("https://sua-url-aqui.firebaseio.com/tasks.json", {

method: "POST",

body: JSON.stringify(taskData),

headers: { "Content-Type": "application/json" }

})

.then(response => {

if (!response.ok) {

throw new error("An error occurred, please try again!");

}

return response.json();

})

.then(data => {

// Reatividade acionada por atribuição.

tasks = [...tasks, { id: data.name, description: newDescription }];

// data.name é como o Firebase armazena o ID do registro.

newTask();

})

.catch(error => console.log(error));

}

</script>

Continuando em src/Tasks/Task.svelte, na seção de HTML seu botão “Save” ficará assim agora:

<button
  class="button is-info"
  on:click={submitTask}
  disabled={!validDescription}>
  <span class="icon is-small">
  <i class="fas fa-check" />
  </span>
  <span>Save</span>
</button>

<button

class="button is-info"

on:click={submitTask}

disabled={!validDescription}>

</span>

</button>

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/updating-arrays-and-objects

Check Point

Para conferir o andamento, insira algumas tarefas e verifique no banco do Firebase se as mesmas foram incluídas.

8 – Lifecycle: Ciclo de vida de componente.

Cada componente tem um ciclo de vida que começa quando ele é criado, e termina quando é destruído.
Há várias funções que permitem executar códigos em momentos importantes durante esse ciclo de vida.
O que se usa com mais frequência é o “onMount”, que é executado depois que o componente é renderizado pela primeira vez no DOM.
No nosso caso, vamos usar a function “onMount” para carregar os dados de tarefas. Assim que o componente iniciar, “onMount” será acionada e carregará a função “getTasks()” do nosso projeto. “getTasks()” carregará dados de tarefas da nuvem para o array “tasks”.

Para que isto aconteça, vamos implementar a função “onMount” e “getTasks()” na seção script.
src/Tasks/Task.svelte

<script>
 import { onMount } from "svelte"; // importar onMount.
 ...
 ..
 $: validDescription = newDescription.trim().length >= 5; // declaração reativa
 onMount(() => {
   // função Lifecycle: acionada no início do componente.
   getTasks();
 });
 function getTasks() {
   fetch("https://sua-url-aqui.firebaseio.com/tasks.json")
     .then(response => {
       if (!response.ok) {
         throw new error("An error occurred, please try again!");
       }
       return response.json();
     })
     .then(data => {
       for (const key in data) {
         // Reatividade acionada por atribuição.
         tasks = [...tasks, { id: key, description: data[key].description }];
        console.table(tasks); // verifique no browser, se as tarefas estão neste array.
       }
     })
     .catch(error => console.log(error));
 }
...
... 
...

import { onMount } from "svelte"; // importar onMount.

...

$: validDescription = newDescription.trim().length >= 5; // declaração reativa

onMount(() => {

// função Lifecycle: acionada no início do componente.

getTasks();

});

function getTasks() {

fetch("https://sua-url-aqui.firebaseio.com/tasks.json")

.then(response => {

if (!response.ok) {

throw new error("An error occurred, please try again!");

}

return response.json();

})

.then(data => {

for (const key in data) {

// Reatividade acionada por atribuição.

tasks = [...tasks, { id: key, description: data[key].description }];

console.table(tasks); // verifique no browser, se as tarefas estão neste array.

}

})

.catch(error => console.log(error));

}

...

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/onmount

9 – Blocks: lógica no HTML.

O HTML não tem uma maneira de expressar lógica, como condicionais e loops. O Svelte tem.
Vamos precisar mostrar os itens que estão dentro do array tasks. Para isto usaremos um “each” que será implementado na grid de itens que faremos agora.
Podemos usar um “else” no “each” do Svelte. Caso nosso array de tarefas esteja vazio, o fluxo de controle desviará para o “else” e mostraremos uma mensagem “No tasks” ao usuário.

Acrescente este trecho de HTML no final do arquivo, ou seja, após a última linha do arquivo.
src/Tasks/Task.svelte

<!-- grid -->
<div class="container">
 <h4 class="title is-4">Tasks</h4>
 <table class="table is-bordered is-striped is-hoverable">
   <thead>
     <tr>
       <th>Task Description</th>
       <th>Edit</th>
       <th>Delete</th>
     </tr>
   </thead>
   <tbody>
     {#each tasks as task}
       <tr>
         <td>{task.description}</td>
       </tr>
     {:else}
       <tr>
         <td>
           No tasks.
           <i class="fas fa-sad-tear" />
         </td>
         <td />
         <td />
       </tr>
     {/each}
   </tbody>
 </table>
</div>

<h4 class="title is-4">Tasks</h4>

<thead>

<tr>

<th>Task Description</th>

<th>Delete</th>

</tr>

</thead>

<tbody>

{#each tasks as task}

<tr>

<td>{task.description}</td>

</tr>

{:else}

<tr>

<td>

No tasks.

</td>

<td />

</tr>

{/each}

</tbody>

</table>

</div>

Check Point

Para conferir o andamento, verifique na tela “Grid” que acabamos de criar, se as tarefas aparecem.
Se tudo está indo bem, a imagem a seguir deve estar aparecendo.

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/each-blocks

10 – Props: passando dados entre componentes.

Em qualquer aplicativo, comumente precisamos passar dados de um componente para um componente filho.
Para fazer isso, precisamos declarar propriedades. No Svelte, fazemos isso com a palavra-chave “export”.

Vamos começar a trabalhar com o componente TaskGridItem.svelte. Ele vai mostrar detalhes das tarefas.
Para isto, use o seguinte conteúdo:
src/Tasks/TaskGridItem.svelte

<script>
 // props recebem valores do componente superior
 export let id; 
 export let description;
</script>
<tr>
 <td>{description}</td>
 <td>
   <i class="fas fa-edit" />
 </td>
 <td>
   <i class="fas fa-trash" />
 </td>
</tr>

// props recebem valores do componente superior

export let id;

export let description;

</script>

<tr>

<td>{description}</td>

<td>

</td>

<td>

</td>

</tr>

O componente superior é Task.svelte. Modifique o seguinte trecho para que ele envie dados das tasks para o componente filho TaskGridItem.svelte.
src/Tasks/Task.svelte

{#each tasks as task}
  <!-- O componente é usado aqui -->
  <TaskGridItem id={task.id} description={task.description} />
  {:else}
    <tr>
      <td>
        No tasks.
        <i class="fas fa-sad-tear" />
      </td>
      <td />
      <td />
    </tr>
{/each}

{#each tasks as task}

{:else}

<tr>

<td>

No tasks.

</td>

<td />

</tr>

{/each}

O componente TaskGridItem.svelte, precisa estar disponível. Então acrescente esta linha na seção script de Task.svelte.
src/Tasks/Task.svelte

<script>
 // importar componente para exibir itens da grid (tarefas)
 import TaskGridItem from "./TaskGridItem.svelte";
. . . 
. . .

// importar componente para exibir itens da grid (tarefas)

import TaskGridItem from "./TaskGridItem.svelte";

. . .

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/declaring-props

11 – Event Dispatcher: componentes enviando eventos.

Componentes também podem enviar eventos. Para fazer isso, eles devem criar um “event dispatcher”.

No nosso contexto, temos os botões de alterar e excluir tarefas dentro do componente TaskGridItem.svelte. Quando o usuário acionar o click nesses botões, precisamos que esses eventos sejam enviados para o componente superior.
Existe uma necessidade a mais nesse caso. Temos que enviar ao componente superior, Task.svelte, os dados da tarefa a qual o botão acionado se refere.

Vamos implementar isso em Svelte.
src/Tasks/TaskGridItem.svelte

<script>
 // props recebem valores do componente superior
 export let id; 
 export let description;
 // permite utilizar o dispatch
 import { createEventDispatcher } from "svelte";
 const dispatch = createEventDispatcher();
</script>
<tr>
 <td>{description}</td>
 <!-- event dispatch: enviando eventos com dados para o componente superior -->
 <td on:click={() => dispatch('edit', { id: id, description: description })}>
   <i class="fas fa-edit" />
 </td>
 <td on:click={() => dispatch('delete', { id: id })}>
   <i class="fas fa-trash" />
 </td>
</tr>

// props recebem valores do componente superior

export let id;

export let description;

// permite utilizar o dispatch

import { createEventDispatcher } from "svelte";

const dispatch = createEventDispatcher();

</script>

<tr>

<td>{description}</td>

<td on:click={() => dispatch('edit', { id: id, description: description })}>

</td>

<td on:click={() => dispatch('delete', { id: id })}>

</td>

</tr>

Repare que estamos enviando também os parámetros “edit” e “delete”. Eles servem como uma identificação que indicará quais functions serão executadas no componente superior.
Essas functions vão utilizar dados enviados (id, description) para realizar as ações desejadas. “Edit” e “Delete” para editar tarefas e excluir tarefas respectivamente.
A seguir está o componente superior recebendo dados enviados de TaskGridItem.svelte. Implemente conforme este trecho de código em Task.svelte.

Repare que “edit” corresponde a function “editTask” e “delete” corresponde a “deleteTask”, mas poderiam ser nomes iguais.
src/Tasks/Task.svelte

{#each tasks as task (task.id)}
<TaskGridItem
  id={task.id}
  description={task.description}
  on:edit={editTask}
  on:delete={deleteTask} />
{:else}
  <tr>
    <td>No tasks.<i class="fas fa-sad-tear" /></td>
    <td />
    <td />
  </tr>
{/each}

{#each tasks as task (task.id)}

<TaskGridItem

id={task.id}

description={task.description}

on:edit={editTask}

on:delete={deleteTask} />

{:else}

<tr>

<td>No tasks.<i class="fas fa-sad-tear" /></td>

<td />

</tr>

{/each}

Ainda no componente superior Task.svelte, seção script, vamos implementar as ações de editar e excluir tarefas.
src/Tasks/Task.svelte

...
..
function updateTask() {
   const taskData = { description: newDescription };
   fetch(`https://sua-url-aqui.firebaseio.com/tasks/${id}.json`, {
     method: "PATCH",
     body: JSON.stringify(taskData),
     headers: { "Content-Type": "application/json" }
   })
     .then(response => {
       if (!response.ok) {
         throw new error("An error occurred, please try again!");
       }
       const index = tasks.findIndex(task => task.id === id);
       tasks[index] = { id: id, description: newDescription };
       newTask();
     })
     .catch(error => console.log(error));
 } 
function editTask(event) {
   // pelo event recebemos dados enviados pelo componente filho.
   id = event.detail.id;
   newDescription = event.detail.description;
 }
 function deleteTask(event) {
   // pelo event recebemos dados enviados pelo componente filho.
   id = event.detail.id;
   fetch(`https://sua-url-aqui.firebaseio.com/tasks/${id}.json`, {
     method: "DELETE"
   })
     .then(response => {
       if (!response.ok) {
         throw new error("An error occurred, please try again!");
       }
       tasks = tasks.filter(task => task.id !== event.detail.id);
       newTask();
     })
     .catch(error => console.log(error));
 } 
</script>

...

function updateTask() {

const taskData = { description: newDescription };

fetch(`https://sua-url-aqui.firebaseio.com/tasks/${id}.json`, {

method: "PATCH",

body: JSON.stringify(taskData),

headers: { "Content-Type": "application/json" }

})

.then(response => {

if (!response.ok) {

throw new error("An error occurred, please try again!");

}

const index = tasks.findIndex(task => task.id === id);

tasks[index] = { id: id, description: newDescription };

newTask();

})

.catch(error => console.log(error));

}

function editTask(event) {

// pelo event recebemos dados enviados pelo componente filho.

id = event.detail.id;

newDescription = event.detail.description;

}

function deleteTask(event) {

// pelo event recebemos dados enviados pelo componente filho.

id = event.detail.id;

fetch(`https://sua-url-aqui.firebaseio.com/tasks/${id}.json`, {

method: "DELETE"

})

.then(response => {

if (!response.ok) {

throw new error("An error occurred, please try again!");

}

tasks = tasks.filter(task => task.id !== event.detail.id);

newTask();

})

.catch(error => console.log(error));

}

</script>

💡 Para saber mais, consulte a documentação oficial:
https://svelte.dev/tutorial/component-events

12 – Finalizando a aplicação.

Falta pouco para terminar.

Na seção script, modifique a function “submitTask” para diferenciar entre uma alteração e uma inserção de dados.
src/Tasks/Task.svelte

...
...
 function submitTask() {
   // altera ou insere tarefas no banco de dados.
   id ? updateTask() : insertTask();
 }
...
...

...

function submitTask() {

// altera ou insere tarefas no banco de dados.

id ? updateTask() : insertTask();

}

...

E para melhorar a visualização, implemente este estilo usando CSS. Serve atribuir cores a alguns avisos da tela e para aumentarmos o espaço superior do título da grid de tarefas. Para isso use a seção style, conforme está a seguir.
src/Tasks/Task.svelte

...
...
</script>
<style>
 h4 {
   margin-top: 1em;
 }
 .adding-record {
   color: darkblue;
 }
</style>
...
...

...

</script>

<style>

h4 {

margin-top: 1em;

}

.adding-record {

color: darkblue;

}

</style>

...

Ficou assim sua tela? 😀

13 – Gerando build para o ambiente de produção.
Se você seguiu todos os passos, seu projeto está pronto para ser enviado e utilizado em produção.
Execute o seguinte comando para criar uma versão otimizada para essa finalidade:

npm run build

1	npm run build

A saída do build de produção pode ser encontrada na pasta “public” do diretório do seu projeto. O conteúdo pode ser enviado para o seu serviço de hospedagem diretamente.

Para mim aqui, o conteúdo da pasta public têm um tamanho total de 96K.

14 – Acessando a aplicação na nuvem.
Eu fiz o deploy usando a plataforma Netlify. Se quiser utilizar esta aplicação na nuvem, click aqui.

Experimente fazer o deploy de sua aplicação. Compartilhe com conosco. 😊

Deixo um desafio para você.

Observem que a aplicação que eu fiz o deploy, faz algo a mais do que vimos até agora: ela “sabe” informar se está acontecendo inclusão ou alteração de registros.
Em outras palavras, a aplicação que está funcionando na nuvem, informa uma mensagem na cor azul dizendo que o usuário está incluindo um registro e na cor vermelha informa que o usuário está alterando uma tarefa.
Este é um desafio para você 💪: Implemente este novo comportamento usando Svelte!

Conclusão

Parabéns! Você fez todo o passo a passo e agora você tem uma aplicação em Svelte 3 funcional e completa, com inserção, alteração, exclusão e consulta de dados usando um banco de dados na nuvem.
Este artigo mostrou alguns recursos básicos do Svelte 3, mas outros recursos não foram abordados como Stores, Transitions, Component Composition (Slots), Debugging e outros.
Ou seja, tem muito mais para mostrar!!!
Espero que tenham gostado deste artigo para que eu possa continuar falando sobre o Svelte 3.

Até o próximo post. 😎

Referências

Svelte https://svelte.dev/
Svelte Tutorial https://svelte.dev/tutorial/basics
Rethinking reactivity: https://www.youtube.com/watch?v=AdNJ3fydeao
Svelte 3 – Compile-time framework
https://medium.com/code-to-express/svelte-3-compile-time-framework-ed8f6f158001
What’s All The Buzz About SvelteJS?
https://www.youtube.com/watch?v=NSA3_UgWwik&feature=youtu.be
Why you may need to consider svelte.js over React,Vue or Angular
https://dev.to/ganeshmani/why-you-may-need-to-consider-svelte-js-over-react-vue-or-angular-24io

Quer se tornar um Programador Full Stack Javascript em 8 semanas? 😀

Nós desenvolvemos um treinamento completo onde você vai aprender desde a base da Web (HTML5, CSS, Bulma, Javascript e Es6+) até React e ExpressJs totalmente do zero!

Nele você também vai desenvolver um projeto do inicio até o Deploy (clone do Evernote) e irá aprender como conseguir as melhores vagas no módulo carreira de Programador.

Se você não quer mais perder oportunidades, clique aqui e saiba mais 💪

0 0 votes

Article Rating

janeiro 17, 2020

Posts | Cursos

Sergio Lima

Analista de Desenvolvimento de Sistemas numa empresa de serviços financeiros, trabalha com tecnologias diversas principalmente back-end e entre elas Ruby On Rails. Dedica-se a praticar corridas de rua e artes marciais. Nos fins de semana gosta de ler, assistir filmes, preparar palestras e escrever para blogs ツ

Website : https://github.com/sergiosouzalima

17 Comentários

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

FELIPE MACHADO DE OLIVEIRA MOREIRA

3 anos atrás

Tive problemas na parte onde pela 1 vez pede para verificar se os dadso estao salvando no banco. Minha aplicação roda sem erro.
Fiquei com úvida sobre a url no feth do meu firebise encontrada dentro de realtime database
minha duvida é a seguinte:
Devo manter ou tirar o nome /tasks.json?
Sera isso que pode nao permitir meus dados serem salvos no banco ?
meu codigo fetch ficou assim
fetch(“https://todolist12457893.firebaseio.com/tasks.json”, {
     method: “POST”,
     body: JSON.stringify(taskData),
     headers: { “Content-Type”: “application/json” }
   })

Responder

Sergio Lima

3 anos atrás

Reply to FELIPE MACHADO DE OLIVEIRA MOREIRA

Olá Felipe, Vc deve manter o “/tasks.json” se é um POST. A seguir, eu copiei e colei o meu código do jeito que está implementado. Só mudei um digito da minha URL original. Confira com sua implementação. E no console do browser vc já verificou se há erros? function insertTask() { const taskData = { description: newDescription }; fetch(“https://svelte-5d1e4.firebaseio.com/tasks.json”, { method: “POST”, body: JSON.stringify(taskData), headers: { “Content-Type”: “application/json” } }) .then(response => { if (!response.ok) { throw new error(“An error occurred, please try again!”); } return response.json(); }) .then(data => { // Reatividade acionada por atribuição. tasks = […tasks, {… Read more »

Responder

FELIPE MACHADO DE OLIVEIRA MOREIRA

3 anos atrás

Reply to Sergio Lima

Boa noite! Não ha erros, vou dar uma repassada no codigo e aviso se funcionar. Obrigado por hora!
Abraços!

Responder

FELIPE MACHADO DE OLIVEIRA MOREIRA

3 anos atrás

Reply to Sergio Lima

Ontem consegui Implementar todo o Todo proposto. Ficou muito legal! VAlew

Responder

Sergio Lima

3 anos atrás

Reply to FELIPE MACHADO DE OLIVEIRA MOREIRA

Que ótima notícia, Felipe. Parabéns! Compartilhe a URL com a gente. 😀

Responder

LEANDRO SOARES COSTA

3 anos atrás

Reply to FELIPE MACHADO DE OLIVEIRA MOREIRA

Boa tarde,
Voce teria esse codigo completo no github ou algo similar ?

Responder

Sergio Lima

3 anos atrás

Reply to LEANDRO SOARES COSTA

Olá Leandro, tenho sim 😉 . Aí vai o link: https://github.com/sergiosouzalima/svelte-todo-app

Responder

CRISTIANO SANTOS GONCALVES

3 anos atrás

Parabéns pelo ótimo tutorial!!

Responder

Sergio Lima

3 anos atrás

Reply to CRISTIANO SANTOS GONCALVES

Valeu pelo apoio Cristiano. Se conseguiu reproduzir este tutorial compartilhe com a gente! 😉 Obrigado.

Responder

DEmys

3 anos atrás

Temos uma comunidade Svelte Brasil no telegram para quem se interessar.
@sveltebrasil

Responder

Sergio Lima

3 anos atrás

Reply to DEmys

Olá DEmys, foi uma ótima iniciativa criar a comunidade Svelte Brasil no Telegram! Eu fui um dos primeiros a entrar 😀

Responder

mellunar

1 ano atrás

As imagens não estão carregando

Responder

Autor

Sergio Lima

1 ano atrás

Reply to mellunar

Olá mellunar! Recebi a informação que o site está em reconstrução, está sendo reformulado. Então este artigo também entrará nesse processo de melhoria.

Obrigado por ler o artigo!

Responder

Fábio

1 ano atrás

Bom o artigo e a ideia mas não além dos screenshots não estarem mais aparecendo, o codigo não está funcionando mais. Copiado do github inclusive. Poderia testar na sua maquina para ver se roda ? grt.

Responder

Autor

Sergio Lima

1 ano atrás

Reply to Fábio

Olá Fábio! Recebi a informação que o site está em reconstrução, está sendo reformulado. Então este artigo também entrará nesse processo de melhoria.

Obrigado por ler o artigo!

Responder

Fábio

1 ano atrás

Consegui resolver com esse código aqui: https://github.com/jeferson0993/crud-svelte-firebase

Responder

Autor

Sergio Lima

1 ano atrás

Reply to Fábio

Olá Fábio. Obrigado pela contribuição!

Responder