Quick and In Sync with Svelte and Couchbase

Você está pronto para criar um aplicativo da Web reativo em tempo real?

tl;dr Não está tendo tempo para ler e trabalhar em todo este tutorial? Você está com sorte! Você pode encontrar um exemplo totalmente funcional em GitHub. Sinta-se à vontade para ir até lá, clonar o repositório e começar a explorar.

Neste tutorial, exploraremos a combinação de Svelte e Couchbase Capella para criar um aplicativo de bate-papo dinâmico e interativo. Svelte, com uma impressionante taxa de admiração de 72,8% de acordo com o Pesquisa de desenvolvedores do Stack Overflow de 2024é celebrado por vários motivos. Ele elimina com eficiência grande parte do trabalho do navegador ao compilar seus componentes em um código imperativo altamente eficiente que manipula diretamente o DOM, eliminando a necessidade de um DOM virtual e levando a atualizações mais rápidas e tamanhos menores de pacotes.

A reatividade integrada do Svelte rastreia automaticamente as alterações de estado, garantindo atualizações rápidas e eficientes sem a necessidade de bibliotecas complexas de gerenciamento de estado. Essa reatividade simplifica o processo de desenvolvimento e melhora o desempenho. Além disso, a arquitetura baseada em componentes do Svelte facilita a criação e a manutenção de interfaces de usuário complexas, oferecendo uma experiência de desenvolvimento mais direta e agradável. E, quando seu aplicativo precisa de dados adaptáveis e responsivos, o Couchbase Capella oferece uma solução simples de implementar.

O Couchbase Capella não é apenas uma plataforma de banco de dados em nuvem NoSQL; é uma plataforma de dados completa que oferece pesquisa de texto completo, pesquisa vetorial, cache de dados, análise e muito mais. Essa funcionalidade abrangente permite que você crie aplicativos robustos com diversos requisitos de dados. Juntos, o Svelte e o Couchbase Capella possibilitam aplicativos em tempo real que são incrivelmente rápidos e eficientes.

Ok, chega de conversa. Vamos começar!

Configuração do ambiente de desenvolvimento

Criando um novo projeto SvelteKit

Antes de nos aprofundarmos na configuração, vamos esclarecer a diferença entre o Svelte e o SvelteKit. O Svelte é uma estrutura de front-end que compila seu código em um código imperativo altamente eficiente que manipula diretamente o DOM. Isso resulta em atualizações mais rápidas e tamanhos de pacotes menores. Por outro lado, o SvelteKit é uma estrutura criada com base no Svelte, projetada para a criação de aplicativos da Web de pilha completa. O SvelteKit oferece recursos adicionais, como roteamento, renderização no lado do servidor e geração de sites estáticos, o que o torna uma ferramenta poderosa para o desenvolvimento de aplicativos modernos da Web.

Em seu projeto, o SvelteKit lidará com a estrutura do aplicativo, o roteamento e a renderização do lado do servidor, enquanto o Svelte gerenciará a renderização eficiente dos componentes da interface do usuário.

Para iniciar um novo projeto, você pode inicializá-lo na linha de comando:

npm create svelte@latest svelte-couchbase-real-time-chat
cd svelte-couchbase-real-time-chat

1 2	npm criar elegante@mais recente elegante-couchbase-real-tempo-bate-papo cd elegante-couchbase-real-tempo-bate-papo

A ferramenta CLI solicitará várias opções. Responda com as seguintes respostas:

- Projeto Skeleton: Selecionar sim para começar com uma estrutura básica de projeto.
- Tipografia: Selecionar não por enquanto, para manter as coisas simples.
- ESLint: Selecionar sim para incluir o linting, que ajuda a manter a qualidade do código.
- Mais bonita: Selecionar sim para formatação de código.
- Dramaturgo: Selecionar não a menos que planeje escrever testes de ponta a ponta desde o início.

Em seguida, instale as dependências executando npm install na linha de comando. Depois de executar esses comandos, você terá um novo projeto do SvelteKit configurado e pronto para ser usado!

Instalação de dependências

Em seguida, instalaremos as dependências adicionais necessárias para o nosso projeto, incluindo o Tailwind CSS para estilização, o Couchbase SDK para interações com o banco de dados e o suporte a WebSocket para comunicação em tempo real.

npm install -D tailwindcss postcss autoprefixer couchbase ws dotenv
npx tailwindcss init -p

1 2	npm instalar -D tailwindcss postcss autoprefixador couchbase ws dotenv npx tailwindcss inicial -p

O que cada uma dessas dependências está fazendo em seu aplicativo?

- TailwindCSS é uma estrutura CSS que prioriza a utilidade e torna mais simples estilizar seu aplicativo com classes predefinidas.
- O SDK do Couchbase Node.js introduz a funcionalidade para interagir com seus dados no Couchbase Capella usando métodos que abstraem grande parte do trabalho.
- ws é uma pequena biblioteca Websocket para Node.js. Você habilitará a funcionalidade de bate-papo em tempo real no aplicativo com Websockets.
- Por fim, dotenv carrega variáveis de ambiente de um .env arquivo em process.env facilitando o gerenciamento da configuração.

Configuração do TailwindCSS

Conforme mencionado acima, o TailwindCSS apresenta classes que você pode usar para definir o estilo do seu aplicativo. Isso é útil se você não for um especialista em front-end ou, mesmo que seja, se quiser encurtar o processo de criação de aplicativos com design elegante. Para usar o TailwindCSS em seu projeto Svelte, siga estas etapas:

Configurar tailwind.config.js

Atualizar o tailwind.config.cjs para especificar as fontes de conteúdo. Isso garante que o Tailwind CSS possa remover estilos não utilizados de sua compilação de produção, tornando-a mais eficiente.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */

módulo.exportações = {

conteúdo: ['./src/**/*.{html,js,svelte,ts}'],

tema: {

estender: {},

plugins: [],

}

Adicionar diretivas CSS do Tailwind

Criar ou atualizar o src/app.css para incluir as diretivas CSS do Tailwind. Essas diretivas carregam a base, os componentes e os estilos utilitários do Tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;

@vento de cauda base;

@vento de cauda componentes;

@vento de cauda serviços públicos;

Inclua o CSS em seu projeto Svelte

Abra ou crie o arquivo src/routes/+layout.svelte e importar o arquivo CSS. Isso garante que os estilos do Tailwind estejam disponíveis em todo o seu aplicativo.

<script>
  import "../app.css";
</script>

<slot />

importação "../app.css";

</script>

Agora que você concluiu essas etapas, o TailwindCSS foi inicializado com sucesso em seu aplicativo! Você está pronto para prosseguir com a configuração do Couchbase Capella e criar o backend do seu aplicativo de bate-papo.

Configuração do Couchbase Capella

Criação de um cluster

É gratuito se inscrever e experimentar o Couchbase Capella e, se você ainda não o fez, pode fazê-lo navegando até cloud.couchbase.com e criando uma conta usando suas credenciais do GitHub ou do Google, ou criando uma nova conta com uma combinação de endereço de e-mail e senha.

Depois de fazer isso, no painel do Capella, você criará seu primeiro cluster. Para fins deste passo a passo, vamos chamá-lo de SvelteChatApp.

O resumo de seu novo cluster será apresentado no lado esquerdo do painel. O Capella é multinuvem e pode funcionar com o AWS, o Google Cloud ou o Azure. Para este exemplo, você fará a implementação no AWS.

Depois de criar seu cluster, você precisa criar um balde. A balde no Couchbase é o contêiner onde os dados são armazenados. Cada item de dados, conhecido como documento, é mantido em JSON, o que torna sua sintaxe familiar para a maioria dos desenvolvedores. Você pode dar o nome que quiser ao seu bucket. No entanto, para fins deste passo a passo, vamos nomear esse bucket como svelte_chat_app_messages.

Agora que você criou o banco de dados e o bucket, está pronto para criar as credenciais de acesso ao banco de dados e obter o URL de conexão que será usado na função Lambda.

Obtenção de detalhes da conexão

Os detalhes da conexão são essenciais, pois você os usará em seu aplicativo para estabelecer uma conexão com os dados do Couchbase e para interagir com os dados. Navegue até a seção Conectar no painel do Capella e observe a seção Cadeia de conexão.

Em seguida, clique no botão Acesso ao banco de dados link na seção dois. Nessa seção, você criará credenciais - um nome de usuário e uma senha - que seu aplicativo usará para se autenticar no banco de dados. É possível definir o escopo das credenciais para o bucket específico que você criou ou conceder permissão para todos os buckets e bancos de dados da sua conta. Você precisa se certificar de que ela tenha acesso de leitura e gravação, independentemente disso.

Depois de terminar, a última etapa desta parte do processo é adicionar a nova cadeia de conexão e as credenciais de conexão ao aplicativo como variáveis de ambiente.

Configuração de variáveis de ambiente

Em um ambiente de produção, você armazenará suas credenciais e outras informações confidenciais do seu aplicativo em um formato seguro. Diferentes provedores de nuvem têm diferentes caminhos para armazenar informações confidenciais, e você deve seguir o procedimento definido pelo provedor de nuvem que estiver usando, seja ele AWS, Google Cloud, Azure, Netlify, Vercel ou qualquer outro. Para nossos propósitos, você está adicionando suas credenciais a um .env na pasta raiz do seu aplicativo. O arquivo dotenv lê essas credenciais e as carrega em seu aplicativo.

# .env
COUCHBASE_BUCKET=your_bucket_name
COUCHBASE_CONNECTION_STRING=your_connection_string
COUCHBASE_USER=your_username
COUCHBASE_PASSWORD=your_password

# .env

COUCHBASE_BUCKET=nome_do_seu_bucket

COUCHBASE_CONNECTION_STRING=sua_corda_de_conexão

USUÁRIO DA BASE DE DADOS=seu_nome_de_usuário

COUCHBASE_PASSWORD=sua senha

Pronto! Seu cluster do Couchbase está configurado e pronto para ser usado. Neste ponto, você está pronto para criar o aplicativo. Vamos começar com o servidor de backend com o Nodejs e, em seguida, passar para o frontend com o Svelte.

Criação do back-end com o Node.js

Com nosso ambiente de desenvolvimento configurado, é hora de criar o backend para nosso aplicativo de bate-papo em tempo real. Usaremos o Node.js para criar o servidor, conectar-nos ao Couchbase Capella para armazenamento de dados e configurar um servidor WebSocket para comunicação em tempo real.

Criação de servidor.cjs

Primeiro, criaremos um arquivo chamado server.cjs que servirá como ponto de entrada para nosso backend.

1. Criar servidor.cjs:
  No diretório raiz do seu projeto, crie um novo arquivo chamado servidor.cjs.
2. Configurar o Express e as dependências:
  Usaremos o Express para nossa estrutura de servidor, o Couchbase SDK para operações de banco de dados, o WebSocket para comunicação em tempo real e o dotenv para o gerenciamento de variáveis de ambiente. Adicione o seguinte código a servidor.cjs:

const express = require('express');
const couchbase = require('couchbase');
const { createServer } = require('http');
const { WebSocketServer } = require('ws');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const server = createServer(app);
const wss = new WebSocketServer({ server });

const expresso = exigir("expresso);

const couchbase = exigir('couchbase');

const { createServer } = exigir('http');

const { Servidor WebSocket } = exigir('ws');

const dotenv = exigir('dotenv');

dotenv.configuração();

const aplicativo = expresso();

const servidor = createServer(aplicativo);

const wss = novo Servidor WebSocket({ servidor });

Conexão com o Couchbase

Em seguida, configuraremos a conexão com o Couchbase Capella. Verifique se o arquivo .env contém os detalhes corretos da conexão. Adicione o seguinte código ao arquivo servidor.cjs para se conectar ao Couchbase:

let cluster, bucket, collection;

async function connectToCouchbase() {
    try {
        console.log('Connecting to Couchbase...');
        const clusterConnStr = process.env.COUCHBASE_CONNECTION_STRING;
        const username = process.env.COUCHBASE_USER;
        const password = process.env.COUCHBASE_PASSWORD;
        const bucketName = process.env.COUCHBASE_BUCKET;
      
        cluster = await couchbase.connect(clusterConnStr, {
          username: username,
          password: password,
          configProfile: 'wanDevelopment',
        });      
        bucket = cluster.bucket(bucketName);
        collection = bucket.defaultCollection();
        
        console.log('Connected to Couchbase successfully.');
    } catch (error) {
        console.error('Error connecting to Couchbase:', error);
        process.exit(1);
    }
}

connectToCouchbase();

deixar agrupamento, balde, coleção;

assíncrono função connectToCouchbase() {

tentar {

console.registro('Conectando-se ao Couchbase...');

const clusterConnStr = processo.env.COUCHBASE_CONNECTION_STRING;

const nome de usuário = processo.env.USUÁRIO DA BASE DE DADOS;

const senha = processo.env.COUCHBASE_PASSWORD;

const bucketName = processo.env.COUCHBASE_BUCKET;

agrupamento = aguardar couchbase.conectar(clusterConnStr, {

nome de usuário: nome de usuário,

senha: senha,

configProfile: 'wanDevelopment',

});

balde = agrupamento.balde(bucketName);

coleção = balde.defaultCollection();

console.registro("Conectado ao Couchbase com sucesso".);

} captura (erro) {

console.erro('Erro ao se conectar ao Couchbase:', erro);

processo.saída(1);

}

connectToCouchbase();

Essa função lida com a conexão com o Couchbase, garantindo que todos os parâmetros necessários estejam configurados corretamente. Tudo o que resta ao nosso backend é criar o servidor websocket para lidar com o envio e o recebimento de novas mensagens de bate-papo.

Configuração do servidor Websocket

A funcionalidade do servidor Websocket também foi adicionada ao servidor.cjs arquivo. O servidor transmitirá todas as novas mensagens para que o front-end do aplicativo as receba e enviará todas as mensagens recém-criadas ao Couchbase para serem salvas no bucket que você criou.

wss.on('connection', (ws) => {
    console.log('New WebSocket connection established.');
    ws.on('message', async (message) => {
        try {
            const messageString = message.toString();
            console.log('Received message:', messageString);
            // Save message to Couchbase
            const id = `message::${Date.now()}`;
            await collection.upsert(id, { text: messageString });
            console.log('Message saved to Couchbase:', id);

            // Broadcast message
            wss.clients.forEach((client) => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(messageString);
                    console.log('Broadcasted message to client:', messageString);
                }
            });
        } catch (error) {
            console.error('Error handling message:', error);
        }
    });
});

server.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

wss.em('conexão', (ws) => {

console.registro('Nova conexão WebSocket estabelecida'.);

ws.em('mensagem', assíncrono (mensagem) => {

tentar {

const messageString = mensagem.toString();

console.registro('Mensagem recebida:', messageString);

// Salvar mensagem no Couchbase

const id = `mensagem::${Data.agora()}`;

aguardar coleção.upsert(id, { texto: messageString });

console.registro('Mensagem salva no Couchbase:', id);

// Mensagem de transmissão

wss.clientes.forEach((cliente) => {

se (cliente.estado de prontidão === WebSocket.ABERTO) {

cliente.enviar(messageString);

console.registro('Broadcasted message to client:', messageString);

}

});

} captura (erro) {

console.erro('Mensagem de tratamento de erro:', erro);

}

});

servidor.ouvir(3000, () => {

console.registro('Server started on http://localhost:3000');

});

Observe que, antes de enviar a mensagem para o Couchbase, você primeiro converte a mensagem em um arquivo Cordas pois é recebido como buffers de dados binários por padrão. A conversão para Cordas é obtido chamando o formato toString() na mensagem. O recém-definido messageString agora contém os dados em formato legível para envio ao Couchbase e renderização no aplicativo.

Esse é o backend completo do seu novo aplicativo de bate-papo em tempo real. No entanto, por melhor que seja qualquer backend para um aplicativo da Web, ele precisa de um frontend para renderizá-lo para o usuário. O Svelte nos oferece o desempenho e a reatividade para fazer isso com velocidade e com uma excelente experiência de desenvolvedor.

Criação do front-end com o Svelte

Com seu backend configurado, é hora de criar o frontend do nosso aplicativo de bate-papo em tempo real usando o Svelte. Você aproveitará os pontos fortes do Svelte para criar uma interface de bate-papo ágil e dinâmica.

Criação da interface de bate-papo

Criar o componente Svelte
Em seu projeto SvelteKit, crie um novo arquivo chamado +page.svelte no src/routes diretório. Esse arquivo servirá como o principal componente da nossa interface de bate-papo.

touch src/routes/+page.svelte

1

toque src/rotas/+página.elegante

Configurar a estrutura básica
Aberto +page.svelte e configurar a estrutura HTML básica com as classes do TailwindCSS para estilização:

<script>
  import { onMount } from 'svelte';

  let messages = [];
  let newMessage = '';

  let ws;

  onMount(() => {
    ws = new WebSocket('ws://localhost:3000');

    ws.onmessage = (event) => {
      messages = [...messages, event.data];
    };

    ws.onopen = () => {
      console.log('WebSocket connection opened');
    };

    ws.onclose = () => {
      console.log('WebSocket connection closed');
    };
  });

  function sendMessage() {
    ws.send(newMessage);
    newMessage = '';
  }
</script>

<div class="container mx-auto p-4">
  <h1 class="text-2xl mb-4">Chat Application</h1>
  <div class="border p-4 mb-4 h-64 overflow-y-scroll">
    {#each messages as message}
      <div>{message}</div>
    {/each}
  </div>
  <input
    type="text"
    bind:value={newMessage}
    class="border p-2 w-full mb-2"
    placeholder="Type a message"
  />
  <button on:click={sendMessage} class="bg-blue-500 text-white p-2 w-full">Send</button>
</div>

importação { onMount } de "esbelto;

deixar mensagens = [];

deixar newMessage = '';

deixar ws;

onMount(() => {

ws = novo WebSocket('ws://localhost:3000');

ws.onmessage = (evento) => {

mensagens = [...mensagens, evento.dados];

};

ws.em aberto = () => {

console.registro('Conexão WebSocket aberta');

};

ws.fechar = () => {

console.registro('Conexão WebSocket fechada');

};

});

função sendMessage() {

ws.enviar(newMessage);

newMessage = '';

}

</script>

<h1 classe="text-2xl mb-4">Bate-papo Aplicativo</h1>

{1TP5Ensine as mensagens como mensagem}.

<div>{mensagem}</div>

{/cada}

</div>

<entrada

tipo="texto"

vincular:valor={newMessage}

classe="border p-2 w-full mb-2"

espaço reservado="Digite uma mensagem"

<botão em:clique={sendMessage} classe="bg-blue-500 text-white p-2 w-full">Enviar</botão>

</div>

O <script> do exemplo de código acima inicializa o Websocket e lida com as mensagens, tanto de envio quanto de recebimento. A seção onMount garante que a conexão Websocket seja estabelecida quando o componente for inicializado. A reatividade do Svelte atualiza automaticamente o DOM sempre que a função mensagens garantindo que as novas mensagens sejam exibidas em tempo real. Com isso, seu frontend está completo.

Você conseguiu! Criou um aplicativo de bate-papo completo que permite a comunicação em tempo real utilizando o desempenho, a flexibilidade e a adaptabilidade do Svelte e do Couchbase para proporcionar uma experiência ideal aos seus usuários. Sim, essa é uma implementação bastante simples, no entanto, ela fornece o esqueleto para que você crie aplicativos em tempo real ainda mais expansivos e complexos. O potencial é limitado apenas por sua imaginação.

Quer dar uma chance? Vamos iniciar seu aplicativo e começar a conversar.

Executar o aplicativo

Para executar seu aplicativo, você inicializará o servidor Node.js de backend e o frontend do SvelteKit. Primeiro, vamos iniciar o backend em seu terminal:

node server.cjs

1	nó servidor.cjs

Em seguida, inicie o frontend em uma nova janela do terminal:

npm run dev

1	npm executar dev

Agora, navegue em seu navegador até http://localhost:5173 e comece a conversar!

Você pode abrir várias guias do navegador para simular vários usuários ou usar um serviço como o ngrok para compartilhar o aplicativo com seus amigos e conversar com eles em tempo real.

Concluindo

Neste tutorial, você aprendeu como é possível criar rapidamente um aplicativo totalmente responsivo que funciona com dados em tempo real. O Svelte atualiza o DOM com facilidade, enquanto o Couchbase permite que você comece a criar e armazenar mensagens em poucos segundos.

Há muitos motivos pelos quais a Svelte está crescendo rapidamente em admiração e popularidade no espaço altamente competitivo da estrutura da Web. O Couchbase como backend de dados em conjunto com o Svelte aumenta muito mais o potencial do que você pode criar e alcançar. Não há necessidade de definir esquemas complicados, não há necessidade de adicionar mais dependências posteriormente se você quiser implementar recursos de pesquisa ou de armazenamento em cache de dados, tudo isso está integrado ao Couchbase e já vem pronto para uso.

A única pergunta que resta é: o que você vai construir em seguida?

Comece a usar gratuitamente Couchbase Capella.

Ben Greenberg, desenvolvedor sênior evangelista

Compartilhe este artigo

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

Rápido e sincronizado com o Svelte e o Couchbase