DEV Community: Anderson Marlon

What if we combined the best of X, Reddit, and 4chan?

Anderson Marlon — Tue, 24 Feb 2026 12:23:28 +0000

Why did I think about this?

I’ve always spent time in these places.. (X / Reddit / 4chan / etc) and I’ve seen a lot of good things emerge there.. relevant discussions, useful archives, reports that became news. But I’ve also seen the same problems repeated:

On X, the algorithm pushes bubbles against each other; conversation becomes collision, not discovery.

On Reddit, posting something “off-topic” turns into a quick delete; to participate properly you have to farm karma.

On 4chan, the myth of anonymity is sometimes just that.. and it creates room for abuse and manipulation.

The question that stuck with me: what if we combined what works in these ecosystems, but with different rules and incentives — a place that rewards useful behavior instead of identity, and that doesn’t require “farming” to be able to give an opinion?

What is Slider (summary)

Slider is an anonymous reputation-based network.. no username, no email, you are born as a hash.

You only become someone when you act: post, comment, participate, help — and because of that you gain (or lose) reputation. Reputation = power.

Main ideas:

Identity = hash + passphrase (if you lose it, you lose the account).
No email signup; the system was designed for privacy from the architecture.
Reputation determines privileges (creating communities, sending private invites, etc.).
Anti-farm system and trust measures (TrustScore, Seniority, reward splitting).
Hybrid moderation: local AI (open source / proprietary models + nsfwjs + face-api) + reports + admin panel.
In short: practical anonymity + meaningful reputation + abuse controls.

How reputation works (the essentials)

Actions that add: viral posts, upvotes, saves, quality comments.
Actions that subtract: downvotes, removals for violations, confirmed reports.
Reputation unlocks capabilities — e.g., creating a community, sending PMs, etc.
Login streak: log in every day → points. Doubles each day.
Day 1 = 1 point; doubles until day 10 → on day 10 you already have 512 points (or can reach it via virality).
Reposter/share/TrustScore: if you repost and generate engagement, there is reward sharing.. no free “farming”.

(there is all the math in the repository (the idea is to be a project with several OPEN parts so people can understand EXACTLY how everything works, just like twitter did with the project https://github.com/twitter/the-algorithm) so it’s auditable and not a black box..)

What you can post

Text, images, videos, audio, documents
Direct downloads (without relying on strange “downloaders”)
Communities have rules. There are public sliders and also sliders where only admins post (e.g., THE Slider)

Moderation and safety.. how do we intend to handle sensitive content?

Automatic moderation with local models (NSFW + facial/age detection when necessary).
Uploads are moderated in the background, images with underage risk are rejected and the user punished, potentially even having the hash fully deleted automatically..
Reports affect reputation: self-moderated system with auditing via admin logs.
Goal: protect without turning the network into a black box of censorship.

Practical difference compared to X / Reddit / 4chan

No need to “farm karma” to have a voice.. you build reputation with useful actions.

Privacy by default: identity by hash, no mandatory username.

Transparency: reputation rules and point distribution documented.

Technical moderation (AI + human) to reduce manual workload and slow responses.

Want to test it? Open Alpha

We’re in an ALPHA phase.. open test. Want to play, break things, suggest? Come.

What to test / give feedback on now (checklist)

Create account (passphrase), post and see reputation go up/down
Upload images/videos → check moderation/instant blur
Create a community once you reach the required reputation
Test reposts / see how point splitting works
Look for ways to bypass the system (farm/abuse).. tell us how it happened
Report bugs and suggestions here or inside comments on the Slider “The Slider” on the site ... we want the network to evolve with you.

And why does this matter?

It’s not just another network. It’s a practical attempt to combine freedom, anonymity, and responsibility with real economic signals (reputation). The goal is to build a place where good contribution is more valuable than popularity games .. and where communities are created by those who truly contribute.

Want to test? Join, break things, criticize, improve. It’s just an alpha and we need people to fine-tune the algorithm, rules, and UX.

Come play and build with us. ✅

https://theslider.org

Source: https://theslider.org

I am not the developer of the project, I am only sharing that it is a very good idea and that it can evolve a lot, very well, toward a right and safe path - and anonymous, as everything should be.

"Bun, o compilador JavaScript mais rápido do mundo é lançado oficialmente"

Anderson Marlon — Tue, 19 Sep 2023 20:40:59 +0000

Hoje fiquei desacreditado, é 11 de Setembro de 2023 e recebi a notícia de que dia 08 de Setembro a versão 1.0 do Bun saiu, só não soube disso, porque aqui no Brasil foi pós-feriado e muita gente acabou emendando - inclusive eu. Mas vamos lá, o que é o Bun e porquê ele vai revolucionar tanto em questão de velocidade de compiladores.

Você é júnior e não sabe o que é um compilador ou até mesmo passou despercebido durante os estudos, vamos lá que vou te explicar tudo direitinho.

Você pode ver a notícia sobre o lançamento do Bun lá no Onigiri Hardcore.

O que são os compiladores?

Compiladores são programas de computador que convertem código-fonte escrito em uma linguagem de programação em código-objeto escrito em uma linguagem de máquina ou seja, um exemplo para quem está familiarizado com Javascript, o Node é um compilador Javascript. Então, ele irá pegar seu código escrito em Javascript e simplesmente ler tudo aquilo e compilar, claro que para cada linguagem temos um compilador diferente, mas a questão aqui é vermos sobre o Bun e sua incrível velocidade referente aos demais no mundo do Javascript. Além de tudo, os compiladores são usados para aumentar a velocidade e a eficiência de execução de programas. Eles também podem ajudar a detectar e corrigir erros de código.

O que é o Nodejs?

Node.js é um runtime (compilador) JavaScript de código aberto que pode ser usado para executar código JavaScript fora do navegador. Ele é baseado no motor JavaScript V8 do Google Chrome. O Node.js é frequentemente usado para construir aplicações web, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

O que é o Deno?

Deno, concorrente direto do Node - aí que surge o trocadilho do nome - é um runtime JavaScript e TypeScript moderno que é seguro por design. Ele é baseado no motor JavaScript V8 do Google Chrome, mas usa um mecanismo de segurança baseado em sandbox para proteger os aplicativos executados nele. O Deno é frequentemente usado para construir aplicações web seguras, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

E afinal, o que é o Bun?

Bun é um runtime JavaScript e TypeScript moderno que é rápido e eficiente. Ele é baseado no motor JavaScript V8 do Google Chrome, mas usa um mecanismo de compilação para melhorar o desempenho. O Bun é frequentemente usado para construir aplicações web rápidas e eficientes, mas também pode ser usado para construir aplicações de desktop, aplicações móveis e aplicações de servidor.

O resultado dos testes

Fiz um teste simples, usando o mesmo arquivo para os três compiladores e o resultado foi surreal. Nesse teste, usei uma matemática simples, usando dez casas decimais e segui essa fórmula para que ele pudesse trazer de resultado: ((a + b) * (c + d)) / (e + f) + g - h;

Claro que para as máquinas isso é mamão com açúcar, mas para nós, levaria mais do que um tempinho para solucionarmos isso, certo? Mas vamos lá.

Pedi para ele me falar quanto tempo ele levou para executar, qual é o tempo em que ele terminou aquilo - sem parar o relógio - e quanto tempo (abstração) ele levou para fazer isso nesse intervalo ou seja: TdE - TdF = TdR (Tempo de Execução menos o Tempo de Finalização receberemos o Tempo de Resultado).

O resultado do Node foi que ele começou em 17.3797 milisegundos, terminou o teste em 17.3852 milisegundos e o tempo que levou para resolver tudo isso foi de 0.0058 milisegundos. É um resultado bastante significativo.

Já o Deno (irmão do meio) começou em 22 milisegundos, terminou em 22 milisegundos e o valor foi menor do que 0.0 milisegundos para retornar o resultado, como ele foi bem chato para nos trazer o valor completo, só tivemos esse valor por cima.

E então que surge o irmão mais novo, o Flesha da família. O Bun, levou 10.888466 milisegundos para começar, 10.888736 milisegundos para finalizar e levou cerca de apenas 0.0002 milisegundos para resolver a matemática.

Avaliação

Sim! Esse valor é muito, mas muito rápido do que os dois comparados. Em questão de velocidade, o Bun é o primeiro, seguido pelo Node e pelo Deno. O mais incrível de tudo isso é que o Bun está na versão 1.0.0, enquanto o Node está na versão 18.17.1 e o Deno na v.1.36.4.

Eu fiquei alucinado quando vi isso. Claro que, em termos de velocidade, os três runtimes são muito rápidos. Mesmo o mais demorado, o Deno, gastou apenas 22 milissegundos para responder. Mas ver que o Bun é capaz de fazer isso em 10 milissegundos é simplesmente incrível.

Claro que fizemos um teste simples, mas ele é suficiente para mostrar que o Bun é muito mais rápido que qualquer outro compilador. Em grande escala, como nos vários projetos que carregamos no Node, a diferença é ainda mais significativa. Um projeto que leva cerca de 10, 15 segundos para ser executado no Node pode ser executado em apenas 1 segundo no Bun.

Em termos técnicos, avaliando os resultados dos testes e os recursos de cada runtime, pode-se concluir que o Bun é a melhor opção para aplicações web que exigem alta performance e eficiência, o Node.js é uma boa opção para aplicações web que não exigem alta performance e o Deno é uma boa opção para aplicações web seguras.

Agora por trás das cortinas, eu não digo nada se eu mudar meus projetos para o Bun. A versão estável dele foi lançada ao público e é garantida como segura para uso em produção.

E você? Vai mudar de compilador também ou vai esperar um pouco? Comenta comigo lá no Twitter!

Você pode ver esse artigo escrito originalmente no meu blog.

ContextAPI - Como criar, como usar e como alimentar para iniciantes

Anderson Marlon — Tue, 19 Sep 2023 20:40:19 +0000

Neste artigo abordaremos um assunto bastante interessante no React chamado context, que disponibiliza uma maneira de passar os dados entre a árvore de componentes sem precisar passar props manualmente em cada nível.

Imagine o seguinte cenário, você tem o nome de um usuário em um componente, só pra gente ter uma noção entre camadas, vamos
chamá-los de A, B, C e D. Imagine que esse componente fez uma chamada de API no C, certo? Nós temos apenas o nome do usuário lá e
não queremos ter que ficar repetindo essa chamada nos outros componentes, certo?

Ah, mas por que não? Ou por que não criamos no topo e vamos chamando até embaixo?

Vamos ao primeiro cenário. Imagine que ao invés de você fazer uma requisição pela página, você faz quatro para apenas uma página,
certo? Isso é tranquilo quando se trata de um usuário, mas já pensou se a nossa aplicação tem mil acessos diários? Isso seria
basicamente quatro mil requisições diária e isso é muita coisa para o banco de dados, isso sem contar as atualizações de página.

E por que não criamos a aplicação no topo e vamos chamando nas demais? Por um motivo quase que semelhante. Não tem necessidade de
você chamar nas camadas A, B e D, se o usuário sequer passou por lá, imagine que você só entrou na primeira página e saiu, certo?
E quando você vai ver, sem querer, você fez uma requisição na sub página que se quer o usuário entrou, é bem desgastante isso, não
concorda? Ainda mais para quem vive de internet móveis.

Voltando ao Foco

Para facilitar essa comunicação, seja de A para D e D para B, por exemplo, existe o Context API do React e aí que entramos no
assunto. useContext, como funciona, de onde ele vem e como ele se alimenta. Em resumo, com o Context API podemos transitar esses
dados através de componentes sem que ele sejam filhos diretos desse componente.

E vamos com calma entendendo passo a passo dessa situação, porque até para mim foi muito complexo entender no começo.

Primeiro Passo

Primeiro, vamos importar e executar o método createContext

import { createContext } from 'react'

const MyContext = createContext(null)

Inicialmente definimos ele como null, já que queremos ele vazio e não queremos definir um tipo para ele ainda.

DICA: O retorno do createContext é um componente, por isso é legal salvar numa variável em PascalCase, as famosas { }

Segundo Passo

Já que criamos ele vazio, como iremos adicionar dados a esse novo contexto que criamos?

Dentro do Provider definimos que esse contexto fornecerá pros componentes descendentes, deixando isso na propriedade value.

const MyContext = createContext(null)

export default function Parent() {
  const nameUser = {
    name: 'Yagasaki',
  }

  // Outro exemplo
  const nameUser = ['Yagasaki']

  // Mais um exemplo
  const nameUser = 'Yagasaki'

  return (
    <MyContext.Provider value={nameUser}>
      <ComponentA />
    <MyContext.Provider>
  )
}

Está permitido colocar qualquer tipo de dado dentro contexto, já que ele aceita qualquer tipo, isso inclui até mesmo funções.

Terceiro Passo

Agora que sabemos como criar um contexto, como adicionar dados a ele, como faremos para usar esse contexto como a gente bem entender?

Infelizmente não iremos usar esses dados fora do famoso pai-filho, ou seja, não adianta um componente "dinossauro" tentar acessar
informações do componente "peixe" já que eles não possuem nenhum parentes, é diferente do famoso "dinossauro" para "galinha", deu
para entender a analogia? Componentes que estão fora da árvore deles não possuem acesso, simples.

Mas como vamos acessar esses dados?

Primeiramente precisamos importa uma ou duas coisas, sendo: O Hook useContext do React e o Hook que a gente criou em outro
arquivo. Abaixo está um exemplo de como iremos usar o useContext a nosso favor.

import { useContext } from 'react'

import MyContext from './MyContext.js'

export default function ComponentC() {
  const userContext = useContext(MyContext)

  return (
    <div>
      <p>{userContext.name}</p>
    </div>
  )
}

O seu retorno será exatamente a mesma informação que inserimos ali em cima na propriedade value. Assim podemos obter o dado
diretamente do provider sem NENHUM componente intermediário! Economizando um esforço que seria praticamente enorme para transitar esse dado abaixo por todos os
componentes intermédios! Simplesmente DEMAIS!

DICA: Note que obtemos o valor do nome como uma propriedade de userContext, isso porque no exemplo, criamos como um objeto na propriedade value, e esse mesmo objeto foi retornado da execução do useContext. Se for outro tipo de dado, o retorno será correspondente!

Modificando o valor

Beleza, já criamos o provider, que vem do inglês de provedor, aquele que provê algo, providencia. Conseguimos inserir algo nele e acessamos ele através de um componente distante, e agora? Agora vamos aprender a modificar esse valor, manipular essa informação. Lembra que eu mencionei acima que ele aceita QUALQUER tipo de dado, inclusive funções? Então, e se por exemplo a gente usasse um useState nele?

Você deve se perguntar porque iriamos querer fazer isso, certo? Imagine que você está numa página de edição de usuário e quer que os dados desse usuário já estejam preenchidos quando o usuário entrar na página, como que a gente faz?

A ideia é o seguinte, vamos isolar a variável que a gente está passando para a propriedade value para facilitar a leitura e deixar um pouco mais organizado, okay? Nada de muito novo que fizemos aqui, é claro que estamos levando em consideração que ele é um objeto. Iremos apenas adicionar o valor do state e seu dispatch na variável providerValue e assim, inserimos no provider.

const MyContext = createContext(null)

export default function Parent() {
  const [name, setName] = useState('Yagasaki')
  const providerValue = {
    name,
    setName,
  }

  return (
    <MyContext.Provider value={providerValue}>
      <ComponentA />
    </MyContext.Provider>
  )
}

Ficou confuso? O que fizemos a mais foi apenas adicionar o nome das duas variáveis que usamos no useState para assim que chamarmos de volta podermos manipular ele também dentro do componente, caso ao contrário, só precisariamos enviar o name e ele ficaria somente leitura, tendo que ser alterado apenas na página Parent

Dessa forma podemos alterar o valor da variável name a partir de qualquer componente que quisermos, como eu mencionei anteriormente, isso acaba sendo bem útil quando precisamos atualizar o valor de uma variável em ambos os lados, bacana né?

Olha como ficou o componente filho quando utilizamos o useState para passar a informação:

import { useContext } from 'react'
import MyContext from './MyContext.js'

const ComponentA = () => {
  const userContext = useContext(MyContext)

  function handleChange(event) {
    const { newName } = event.target.value;

    if (true) {
      // Alguma verificação, se necessário
    }

    userContext.setName(newName)
  }

  return (
    <div>
      <label>
        Usuário: {userContext.name}
        <input type="text" value={userContext.name} onChange={handleChange}/>
      </label>
    </div>
  )
}

export default ComponentA

Só tome cuidado com loops infinitos, em casos de formulário, use o form onSubmit={(e) => e.preventDefault()}, assim, evitará de atualizar a página quando
o usuário clicar em enviar, por exemplo, e claro, caso esteja usando um form.

Fico muito agradecido que você tenha chegado até aqui, levou um pouco de tempo para construir esse artigo, já que tentei deixar o mais direto e bem explicado possível para você entender de fato como funciona o Contexto, já que eu levei muito tempo para realmente entender como ele funciona.

Feedback no meu Twitter/X (@yagasaki7k) são sempre bem vindos e espero que você que se dedicou a ler e entender esse artigo tenha aprendido algo novo.

Muito obrigado!

Você pode ver esse artigo escrito originalmente no meu blog.

Guia Detalhado - Configuração do Rocketchat no Azure com Funcionalidades Avançadas

Anderson Marlon — Tue, 19 Sep 2023 20:39:36 +0000

Este guia aborda o processo detalhado de instalação e configuração do Rocketchat em uma máquina virtual Ubuntu na plataforma Microsoft Azure - pode funcionar em outras plataformas, mas não foi testado como Google Cloud Plataform, Heroku e outros - com foco em habilitar funcionalidades avançadas como integração com um frame externo e configurações de omnichannel.

Instalação da Máquina Virtual no Azure

Acesse o portal Azure: https://portal.azure.com/
Crie uma nova máquina virtual Ubuntu
Utilize uma senha para acessar a máquina via SSH
Configure o DNS padrão para a máquina virtual

Instalação e Configuração do Rocketchat

Instale o Rocketchat através do seguinte comando:

sudo snap install rocketchat-server --channel=5.x/stable

Configure o portal com o endereço da sua máquina virtual:

sudo snap set rocketchat-server siteurl=https://SEU_ENDERECO.azure.com

Reinicie o serviço do Rocketchat:

sudo systemctl enable --now snap.rocketchat-server.rocketchat-caddy
sudo snap restart rocketchat-server

Acesse o portal configurado e realize as configurações iniciais.

Configuração do Omnichannel

Acesse as configurações do Rocketchat no painel de administração.
Em "Admin / Config / Omnichannel", habilite o "External Frame" e configure a URL do frame externo.
Configure as opções de "Livechat":
- Título do Livechat: Defina um nome descritivo.
- Roteamento: Atribua novas conversas para um agente bot.
Em "Admin / Config / Accounts", desative a autenticação de dois fatores (TOTP).
Em "Admin / Permissões", desabilite o fechamento de salas omnichannel para os respectivos cargos.
Opcional: Em "Users", adicione um usuário bot com email verificado e defina o cargo dele.

Integração com Frame Externo

Em "Omnichannel / Webhooks", configure a URL do webhook para receber informações do frame externo.
Defina um token secreto para o webhook.
Selecione todas as opções para enviar solicitações ao webhook.

Configuração de Agentes e Departamentos

Em "Omnichannel / Agents", adicione um usuário local (admin) e o usuário bot.
Defina o status do bot como disponível.
Em "Omnichannel / Managers", adicione um usuário local (admin).
Em "Omnichannel / Departments", crie os departamentos desejados (por exemplo: HUMAN_DEPARTMENT e BOT_DEPARTMENT).

Configurações Adicionais

Personalize o CSS customizado conforme necessário, por exemplo:

.rcx-sidebar-footer footer {
  height: 6rem !important;
  text-align: center;
}

Considerações Finais

Este guia abordou passo a passo a instalação e configuração do Rocketchat no Azure, mas tem possibilidade de funcionar em outros
ambientes como Google Cloud Plataform, Heroku e outros. Assim habilitando recursos avançados como integração com um frame externo e configurações de omnichannel. Certifique-se de verificar a documentação oficial do Rocketchat para obter informações
atualizadas e detalhadas sobre cada configuração, lembrando que estamos usando a versão 5.x que evita certas limitações de recursos como o funcionamento do Frame Externo, por exemplo.

Você pode ver esse artigo escrito originalmente no meu blog.

Guia de Comandos Rocketchat para Iniciantes

Anderson Marlon — Tue, 19 Sep 2023 20:38:39 +0000

Ao contrário da publicação anterior, hehe, essa é uma publicação original e é de minha autorial.

O Rocketchat é uma plataforma de comunicação poderosa que oferece uma variedade de recursos e funcionalidades para facilitar a comunicação e colaboração entre equipes. Se você está começando ou precisa de ajuda para se orientar nas funcionalidades, este guia detalhado irá ajudá-lo a dominar os comandos essenciais.

Lembrando que todos eles são comandos via curl, que podem ser utilizados através do terminal, Postman ou Insomnia. Se você deseja usar através do Node.js, PHP ou qualquer outro tipo de maneira fora desse convencional, consulte a documentação oficial.

Vamos explorar além do básico e ver como tirar o máximo proveito do Rocketchat via API, vale lembrar também que esses são comandos que achei essenciais e já cheguei a utilizar no dia a dia.

Fazendo Login via API

Se você precisa fazer login no Rocketchat via API, o seguinte comando pode ser usado:

curl http://localhost:3000/api/v1/login \
-d "user=SEU_USUÁRIO&password=SUA_SENHA"
Substitua SEU_USUÁRIO pelo seu nome de usuário e SUA_SENHA pela sua senha.

Criando um Visitante via API

Crie um visitante usando a API para interagir com os usuários. Execute o seguinte comando curl:

curl -X POST \
-H "Content-type:application/json" \
http://localhost:3000/api/v1/livechat/visitor \
-d '{
  "visitor": {
    "name": "Nome do Visitante",
    "email": "email@exemplo.com",
    "department": "DEPARTAMENTO",
    "phone": "55 344433322",
    "token": "TOKEN_DO_VISITANTE",
    "customFields": []
  }
}'

Certifique-se de substituir as informações corretas, como nome, email, departamento e token do visitante.

Criando uma Sala para o Visitante

Crie uma sala para o visitante usando o comando curl:

curl -H "X-Auth-Token: SEU_TOKEN" \
-H "X-User-Id: SEU_ID_DO_USUÁRIO" \
"http://localhost:3000/api/v1/livechat/room?token=TOKEN_DO_VISITANTE"
Substitua SEU_TOKEN, SEU_ID_DO_USUÁRIO e TOKEN_DO_VISITANTE pelas informações corretas.

Enviando Mensagens

Como Agente

Se você é um agente e deseja enviar mensagens, use o seguinte comando curl:

curl -H "X-Auth-Token: SEU_TOKEN" \
     -H "X-User-Id: SEU_ID_DO_USUÁRIO" \
     -H "Content-type:application/json" \
     http://localhost:3000/api/v1/chat.sendMessage \
     -d '{"message": { "rid": "ID_DA_SALA", "msg": "Esta é uma mensagem de teste!" }}'

Substitua SEU_TOKEN, SEU_ID_DO_USUÁRIO e ID_DA_SALA pelas informações corretas.

Como Usuário (Visitante)

Para enviar mensagens como um usuário (visitante), use este comando curl:

curl -X POST \
-H "Content-type:application/json" \
http://localhost:3000/api/v1/livechat/message \
-d '{"token": "TOKEN_DO_VISITANTE", "rid": "ID_DA_SALA", "msg": "Mensagem do visitante via API"}'
Substitua TOKEN_DO_VISITANTE e ID_DA_SALA pelas informações corretas.

Transferindo a Conversa para um Agente

Transfira a conversa para um agente específico usando o seguinte comando curl:

curl -X POST \
     -H "Content-type:application/json" \
     -H "Authorization: Bearer SEU_TOKEN" \
     http://localhost:3000/api/v1/livechat/room.transfer \
     -d '{
         "roomId": "ID_DA_SALA",
         "token": "TOKEN_DO_VISITANTE",
         "userId": "ID_DO_AGENTE"
     }'

Substitua SEU_TOKEN, ID_DA_SALA, TOKEN_DO_VISITANTE e ID_DO_AGENTE pelas informações corretas.

Explorando Mais Recursos

Este guia abordou alguns comandos essenciais do Rocketchat via API, mas esta plataforma oferece uma ampla gama de recursos e possibilidades. Agora que você tem uma base sólida, sinta-se à vontade para explorar outras funcionalidades, como transferência entre departamentos, notificações e muito mais. Lembre-se de consultar a documentação oficial do Rocketchat para obter detalhes completos sobre todas as funcionalidades disponíveis.

Vale lembrar que o Rocketchat é uma plataforma open source e a comunidade anda ajudando em peso!

Com esses comandos em mãos, você estará melhor preparado para dominar o Rocketchat e aproveitar ao máximo essa plataforma poderosa de comunicação e colaboração, isso inclui fazer interações com bot e clientes através do Whatsapp. Espero que essas dicas sejam úteis, já que pra mim será uma mão na roda para projetos futuros.

Nunca mexeu e quer configurar pela primeira vez? Me segue!

Você pode ver esse artigo escrito originalmente no meu blog.

Integrando seu chat com o Rocketchat Omnichannel

Anderson Marlon — Tue, 19 Sep 2023 20:36:19 +0000

Algumas pessoas que me conhece sabe que eu já trabalhei e até os dias de hoje trabalho com Rocketchat, é uma ferramenta fundamental para ter uma ampla comunicação com o cliente, se tratando de ecommerce, ele é simplesmente fantástico. Ele é um app onde poderíamos centralizar contatos vindos de diferentes plataformas de comunicação em um único meio de atendimento. Existem funcionalidades já prontas disponíveis na loja da plataforma, permitindo integrar com o WhatsApp, Telegram ou Twitter. Além disso, é disponibilizado na área administrativa um script nativo personalizado capaz de adicionar ao seu site um frame externo do próprio Rocket para conversação.

Agora, vamos entender melhor como realizar essa integração de forma manual, entendendo os usos das APIs e Webhooks.

Vale lembrar que esse artigo não é de minha autoria, mas do 4Linux Blog, estou apenas compartilhando para ser um atalho até mesmo pra mim.

Entendendo o caso de uso

Imagine que na sua empresa seja disponibilizado um chat (seja via web e/ou aplicativo) para os clientes e você deseja integrá-lo
ao Rocket para centralizar os atendimentos em uma única plataforma, que é especializada nesse tipo de situação. Ou até mesmo, você ainda não tem esse chat, mas deseja criá-lo e quer ter o menor custo de implementação.

Tudo isso é simples! Com o Rocket você não vai precisar se preocupar com um servidor complexo, armazenamento de dados, atendimento etc. Você pode apenas criar o frontend para o cliente (ou utilizar o widget fornecido) e um backend simples capaz de realizar as chamadas à API do Rocket e receber chamadas de resposta via Webhook.

Para se comunicar com o Rocket, temos dois meios disponíveis:

Via API: Criação de usuários (visitantes), criação de salas, envio de mensagens;
Via Webhook: Rockchat enviando informações sobre as salas abertas – Respostas dos atendentes, encerramento de salas, transferências; Pode parecer complicado em um primeiro momento, mas não é! Vamos entender melhor o que será necessário.

Preparando o ambiente

Como o foco aqui é como realizar a integração, não vamos ficar perdendo tempo com instalação do Rocket. Vamos utilizar o Docker
para auxiliar com isso.

Criei um docker-compose de exemplo para facilitar a infraestrutura. Você pode visualizar ele aqui:

version: "3.0"

services:
  rocketchat:
    image: rocketchat/rocket.chat:3.16.2
    command: >
      bash -c
        "for i in `seq 1 30`; do
          node main.js &&
          s=$$? && break || s=$$?;
          echo \"Tried $$i times. Waiting 5 secs...\";
          sleep 5;
        done; (exit $$s)"
    restart: unless-stopped
    volumes:
      - ./uploads:/app/uploads
    environment:
      - PORT=3000
      - ROOT_URL=http://localhost:3000
      - MONGO_URL=mongodb://mongo:27017/rocketchat
      - MONGO_OPLOG_URL=mongodb://mongo:27017/local
      - ADMIN_USERNAME=rocket
      - ADMIN_PASS=PZxs7wsHWEJLP98z
      - ADMIN_EMAIL=admin@rocketchat.local
    depends_on:
      - mongo
    ports:
      - 3000:3000

  mongo:
    image: mongo:4.0
    restart: unless-stopped
    volumes:
      - ./data/db:/data/db
      - ./data/dump:/dump
    command: mongod --smallfiles --oplogSize 128 --replSet rs0 --storageEngine=mmapv1

  mongo-init-replica:
    image: mongo:4.0
    command: >
      bash -c
        "for i in `seq 1 30`; do
          mongo mongo/rocketchat --eval \"
            rs.initiate({
              _id: 'rs0',
              members: [ { _id: 0, host: 'localhost:27017' } ]})\" &&
          s=$$? && break || s=$$?;
          echo \"Tried $$i times. Waiting 5 secs...\";
          sleep 5;
        done; (exit $$s)"
    depends_on:
      - mongo

Ele irá iniciar o ambiente com tudo que precisamos, e já irá criar um usuário administrador (Login rocket e senha
PZxs7wsHWEJLP98z). Basta fazer login e realizar a configuração inicial.

Com o Rocket rodando, precisamos realizar uma simples configuração. Por padrão o Omnichannel não vem habilitado, mas é simples ajustar isso!

Basta acessar a Administração, procurar pelo menu Omnichannel e marcar a opção Omnichannel habilitado. Não se esqueça de salvar.

A configuração é simplesmente isso! Agora temos o Rocket prontinho para receber nossa integração.

Acessando a documentação

Nessa página temos detalhes sobre os endpoints disponibilizados, tanto para o Rocket como um todo, quanto especificamente para o Omnichannel. Nesse caso, como iremos trabalhar integrando com o livechat, podemos acessar sua documentação específica.

Há alguns termos que aparecem bastante quando acessamos a documentação, então vamos entendê-los melhor:

Agent – Agentes são os atendentes dos chats. Eles acessaram o Rocket pela sua interface e recebem os chats vindos via Omnichannel.

Visitor – Visitantes são os seus clientes que entraram via Omnichannel. Para que haja o atendimento dentro do Rocket é necessário que esse cliente seja criado como um visitante. Visitantes existem apenas no Omnichannel, não são usuários do Rocket e não podem acessá-lo.

Custom field – Campos personalizados que podem ser adicionados ao registro dos visitantes.

Contact – Contato é basicamente um visitante. Apesar de existir na documentação APIs diferentes referenciando individualmente cada um, eles são o mesmo registro dentro do banco. Há apenas diferença nas suas APIs, tendo mais campos obrigatórios para manipulação.

Room – Sala criada para realizar a conversa entre o agente e o cliente. A sala deve ser encerrada ao final do atendimento e cada novo irá gerar uma nova sala, mesmo que seja o mesmo contato.

Tendo entendido isso, vamos ter um último passo antes de analisar as APIs que precisamos.

Autenticando no Rocket

Nenhuma das APIs que vamos utilizar necessita de autenticação, mas é bom entender como conseguir esses dados antes de continuarmos. E isso é bem simples: estando logado com um usuário administrador, basta gerar um token.

Para gerar o token, basta acessar Minha conta, e clicar em Token de acesso pessoal. Na tela aberta, você deve digitar um nome para
identificar esse token e opcionalmente selecionar Ignorar Autenticação de dois fatores (só faz sentido caso deseje utilizar 2FA nessa conta) e clicar em Adicionar.

Será aberto uma tela com os dados do token. Guarde bem esses dados! Eles não serão exibidos novamente. Caso perca, será necessário
gerar um novo token.

Observação: Poderia ser qualquer usuário, não necessariamente um administrador, mas nesse caso precisaria ajustar as permissões desse usuário manualmente para permitir o uso da API e ter os acessos necessários ao livechat. Com o administrador, fica mais fácil, mas em um ambiente produtivo seria mais interessante ter um usuário específico com apenas os acessos necessários.

Agora que já temos tudo preparado, podemos começar a analisar as APIs.

Começando com as APIs: Criando um visitante

A primeira coisa a se fazer para integrar o seu chat com o Rocket é criar o visitante. Esse passo será constante, visto que sempre que um novo usuário for transferido, ele precisará ser criado ou atualizado. A mesma API realiza as duas ações, criar e atualizar o visitante.

Para essa ação, temos basicamente um campo obrigatório para criar o visitante. Mas vamos entender melhor cada um:

token* – Um texto de identificação desse visitante. Essa informação deve ser gerada pelo seu sistema para poder encontrar o visitante dentro do Rocket. Ele é o único campo obrigatório e será utilizado como chave para criação e atualização dos dados.

name – O nome do visitante. Será exibido como nome das salas e em cada mensagem.

email – O e-mail do visitante. Além de ser exibido para os agentes que atendem esse contato, pode ser utilizado para envio da transcrição da conversa automaticamente.

department – Departamento do visitante. Esse campo é muito importante pois ele será decisivo ao tentar criar uma sala para o contato. Caso o contato tenha um departamento e não tenha sido especificado um agente específico, será criado a sala apenas com o departamento especificado.
phone – Telefone do visitante.

username – Usuário do visitante. Será utilizado para identificação interna e buscas. Se não for informado na criação, será gerado um valor aleatório. Esse valor não poderá ser alterado.

customFields – Campos personalizados do contato. Esses campos precisam ter sido previamente criados via API ou interface. Nesse momento eles terão apenas seus valores definidos. Esse campo é uma lista de objetos contendo a seguite extrutura:

key – O nome do campo definido quando foi criado.
value – O valor desse campo.
overwrite – Se deseja sobrescrever o valor ou não. Se verdadeiro sempre irá definir o valor. Se falso, só irá definidor o valor caso ainda não tenha nenhuma informação.

Agora que entendemos os campos, teríamos o corpo da requisição seguinte a estrutura:

{
    "visitor": {
        "token": "visitante-identificador",
        "name": "Meu visistante",
        "email": "visitante@meusite.com",
        "department": "SAC",
        "phone": "+55 11 98765-4321",
        "username": "meuvisitante-123",
        "customFields": [{
            "key": "address",
            "value": "Rocket.Chat street",
            "overwrite": true
        }]
    }
}

O endereço dessa API seria: /api/v1/livechat/visitor. Utilizando o método POST, você poderá criar e atualizar visitantes por esse endereço.

Além do momento da criação, o seu uso é interessante para alternar entre os departamentos e atualizar os campos customizados. Com isso, já temos o visitante criado e pronto para falar com um atendente.

Avançado com as APIs: Criando salas e enviando mensagens

A criação de salas é um processo simples. Ela utiliza o método GET e endereço /api/v1/livechat/room. Ela é utilizada tanto para criar salas como resgatar seus dados.

Todos seus parâmetros são informados via query param na url. Vamos entender melhor eles:

token* – O token do visitante que irá utilizar essa sala. Esse campo é obrigatório em qualquer requisição a esse endpoint.
rid – O id da sala. Quando você está criando uma sala esse valor não deve ser informado, afinal, sequer existe. Porém para leitura, deverá ser informado ou uma nova sala será criada.
agentId – O id do agente que irá atender essa sala. Se esse valor não for informado, a sala será criada para um atendente aleatório. Caso o visitante tenha um departamento definido, será atribuído um atendente desse departamento.
Um ponto importante na criação de salas é a disponibilidade dos agentes: existe a opção de aceitar que as salas sejam criadas mesmo que o agente não esteja online. Mas caso essa opção não seja marcada, a criação de sala apenas funciona se o agente estiver online no Rocket e no Omnichannel.

Agora que já termos a sala criada, podemos enviar mensagens! Também é um processo simples. Esse endpoint utiliza o método POST e o endereço /api/v1/livechat/message.

O seus poucos parâmetros possíveis são passados via corpo da requisição. Vamos entender melhor eles:

token* – O token do visitante que está enviando a mensagem. Precisa ser do mesmo visitante que criou a sala. Esse campo é obrigatório.
rid* – O id da sala onde a mensagem será enviada. Ela precisa estar com o status aberta. Esse campo é obrigatório.
msg* – O texto da mensagem a ser enviada. Esse campo não pode ultrapassar o limite definido nas configurações do Rocket. Ele é obrigatório.
_id – O id da mensagem a ser criada. Caso não seja informado, um id será criado.
agent – Na documentação informa que esse campo deve ser o agente da sala. Mas olhando o código do Rocket ele não faz sentido e nunca será usada. Podemos ignora-lo.

Teríamos o corpo da requisição seguindo a estrutura:


{
    "token": "visitante-identificador",
    "rid": "sala-id-123",
    "msg": "Bom dia!"
}

Com isso, já podemos criar um visitante, uma sala e enviar mensagens. Agora o próximo passo é receber o retorno do Rocket com as mensagens enviadas pelos agentes e os eventos que podem ocorrer.

Webhooks: Recebendo retorno do Rocket

Como havia dito, para receber o retorno do Rocket sobre os eventos ocorridos na sala, a melhor forma é via Webhook. Você até conseguiria fazer isso via API (pode visualizar melhor isso na documentação). Porém, via API você teria que efetuar constantes requisições para receber atualizações e tratar cada item da resposta individualmente. Não há possibilidade de filtros por apenas dados não vistos ou algo parecido, no máximo por eventos ocorridos após um timestamp informado. Resumindo, é mais complexo utilizar API e menos prático.

Para utilizar Webhooks é simples! Para configurá-lo, basta acessar o menu Omnichannel e clicar em Webhooks. Na tela aberta, você deve digitar o endereço para onde essas requisições serão disparadas e selecionar quais eventos deverão disparar essa ação. Opcionalmente pode informar um token que será enviado no cabeçalho das requisições para validar a autenticidade. Clique em Salvar para aplicar as mudanças.

Os eventos possíveis são:

Chat Start – Sala criada.
Chat Close – Sala encerrada.
Agent Messages – Mensagem do atendente.
Chat Taken – Agente recebeu a sala.
Chat Queued – Sala entrou na fila para encontrar agente (Há possibilidade de uso de serviços externos para sorteio de agente, por isso esse evento pode fazer sentido).
Forwarding – Sala encaminhada para outra agente/departamento.
Offline Messages – Dependendo se tiver a opção de mensagens offline habilitada e utilizar o widget fornecido, ou utilizar a API, esse evento pode ocorrer. Basicamente o visitante poderia informar o seu nome, e-mail e uma mensagem quando não tiver agentes online.
Visitor Messages – Mensagem do visitante.
Para cada evento, é realizada uma requisição POST para o endereço informado. O corpo da requisição varia em cada evento, mas é identificado o tipo do evento entre os campos.

No mínimo, será necessário configurar os eventos de sala fechada e mensagem do agente, pois assim será possível saber quando ocorrem respostas e quando for encerrado. Os demais eventos podem não ser necessários.

E por enquanto é isso. Entendeu tudo? Se ainda estiver com dúvida, faço questão de poder te ajudar lá no Twitter através do
@Yagasaki7K. Mas lembrando, existem suporte através da própria documentação - que não é lá complexa - existe comunidades dispostas
a te ajudar e foruns a rodo. Então, pesquise, estude e se esforce bem. Até a próxima!

Você pode ver esse artigo escrito originalmente no meu blog.

Frequently Asked Questions

Anderson Marlon — Tue, 19 Sep 2023 20:35:11 +0000

Eu vi recentemente que muitas pessoas me procuram com as mesmas perguntas, como faço para conseguir um emprego, pode me ajudar
com tal projeto, porque você é desenvolvedor de Javascript, resolvi então separar essas perguntas e responder todos que me veio a mente.

Como faço para conseguir um emprego?

Você é um desenvolvedor júnior? Possuí experiência, senão, leia sobre Como conseguir experiência sendo Júnior/Iniciante.

Eu entendi, preciso de experiência, mas acredito que meu Github não é
bonito, pode dar uma olhada? Recomendo que você veja de como eu estive
Montando um perfil interessante e exemplar no GitHub.

Se nenhuma dessas ideias de deu uma ajuda sobre o que você precisa, peça ajuda na Comunidade de Desenvolvedores da Kalify Inc.

Nenhuma pergunta é idiota.

Você pode me ajudar com XYZ?

Não, eu recebo muitos pedidos e simplesmente não tenho tempo para ajudar a todos, infelizmente, a maioria das coisas nem são
problemas e a a Comunidade de Desenvolvedores da Kalify Inc poderá ajudá-lo, a menos que você
tenha algo incompleto - eu tento responder cada menção que recebo no Twitter e, às vezes, dependendo do que for, responderei
oferecendo assistência, mas isso é raro e depende muito de qual é o problema ou a informação que está sendo encaminhada para mim.
Recomendo tentar entrar em contato comigo usando a comunidade.

Por que você não usa outra linguagem além do Javascript?

Javascript é meu espaço seguro para mim, estou muito confortável com ele e posso escrever quase tudo que não envolva nada de
especial sem ter que verificar nenhuma documentação mais complicada.

Eu poderia usar PHP, Python ou qualquer outra coisa que possa existir e eu realmente uso esses idiomas às vezes - quase que
raramente, mas acabo pesquisando cada passo simples no Google porque simplesmente não sei o que estou fazendo, é como se você
estivesse me pedindo para escrever isso em chinês.

Em conclusão, Javascript é minha escolha porque sou rápido e posso fazer as coisas com relativa rapidez, sem complicações, além de
ter sido a minha primeira linguagem que soube usar, sem achar que estava usando muito código para fazer algo simples.

Você trabalha com o que?

Sou Desenvolvedor de Software e especialista em Front-end. Fora do âmbito tecnológico, sou colunista no Onigiri Hardcore e atleta
de Taekwondo na Campinas Fighters.

Como faço para ajudar no open source?

Temos a Kalify Inc, com projetos abertos ao público que você pode ajudar a contribuir, além de ter a
Comunidade de Desenvolvedores da Kalify Inc que você pode entrar e conversar com outros
desenvolvedores. Para ajudar a comunidade da Kalify Inc e seus projetos,
leia sobre o Plano de Carreira da Kalify Inc.

Qual origem do nome Yagasaki?

Antes de tudo, não sou asiático, gosto da cultura japonesa e consumo bastante conteúdo a respeito. Para saber mais, você pode ler
um pouco sobre isso em Primeiramente deixe-me apresentar, eu sou Anderson

Qual é a configuração do seu computador?

Meu computador é um B550M Aorus Elite, Ryzen 5 5600 de 3.50GHz, 32GB de RAM, 1TB de SSD, 500GB de HD e 256GB (OS) de SSD com uma
NVIDIA GeForce RTX 4060 de 8GB, tenho um teclado da Redragon Lakshmi, Mouse Pulsefire Surge da HyperX, Headset Fifine Ampligame H6
e Microfone Fifine Ampligame A2, além de dois monitores da LG de 75Hz com 21.5' (22MP410-B).

Você pode ver também as configurações do meu Oh-My-Zsh, do meu
VSCode e do meu Windows Terminal.

Como você fez o seu site?

Meu site é feito com Docusaurus, um gerador de sites estáticos, com ReactJS e Markdown, hospedado na Vercel. Utilizando SASS como
estilização. Por costume, em outros desenvolvimentos como Essentials e Onigiri Hardcore, utilizo o NextJS, Typescript e Styled
Components com Firebase.

Por que seu blog é apenas em português?

Escrevo somente em português devido à minha comunidade e as pessoas que me seguem pelo conteúdo, que está em fase de aprendizado e
que me acompanham em minhas postagens, dicas e conteúdo compartilhado.

Optar pelo inglês para atingir o público internacional
não seria o ideal, já que que aqueles que visualizarem minhas publicações já possuem conhecimento nesse sentido. Além disso, há um
suporte comunitário em inglês que supera significativamente o já disponível em português.

Você pode ver esse artigo escrito originalmente no meu blog.

Instalando o ZSH e Oh My ZSH no WSL Ubuntu

Anderson Marlon — Tue, 19 Sep 2023 20:33:43 +0000

O ZSH é um Shell Linux amplamente usado por desenvolvedores, por ser mais fácil instalar plugins e personalizar temas, quando comparado com o Shell Bash que é o padrão na maioria das distribuições Linux.

Primeiro, instale o Zsh

sudo apt install zsh

Ferramenta para gerenciar sua configuração do Zsh. Inclui mais de 200 plug-ins opcionais (rails, git, OSX, hub, capistrano, cerveja, formiga, php, python, etc), mais de 140 temas e uma ferramenta de atualização automática.

Consulte o site ohmyz.sh para mais detalhes.

Defina ele como padrão no terminal

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Confirme a definição do ZSH como shell padrão e dessa forma ele já estará disponível.

O Github do Oh My ZSH descreve os temas que podemos usar na configuração do nosso shell. Tem muitas opções.

Instale o tema Spaceship - Opcional

Spaceship é um prompt Zsh minimalista, poderoso e extremamente personalizável. O repositório do Github possui todas as orientações para realizarmos a instalação.

Configuração sugerida para o Spaceship, deve ser incluída no fim do arquivo ~/.zshrc:

SPACESHIP_PROMPT_ORDER=(
  user          # Username section
  dir           # Current directory section
  host          # Hostname section
  git           # Git section (git_branch + git_status)
  hg            # Mercurial section (hg_branch  + hg_status)
  exec_time     # Execution time
  line_sep      # Line break
  vi_mode       # Vi-mode indicator
  jobs          # Background jobs indicator
  exit_code     # Exit code section
  char          # Prompt character
)
SPACESHIP_USER_SHOW=always
SPACESHIP_PROMPT_ADD_NEWLINE=false
SPACESHIP_CHAR_SYMBOL="❯"
SPACESHIP_CHAR_SUFFIX=" "

Link com as definições das diversas opções que podemos usar para customizar o prompt com o Spaceship.

Plugin Zsh Autosuggestions

Outro recurso interessante para configurar com o Zsh é o plugin de sugestões para comandos, com base no histórico de comandos já usados. Para instalar esse plugin precisamos primeiro clonar o repositório do Github:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Agora precisamos incluir o zsh-autosuggestions no parâmetro de plugins dentro do arquivo ~/.zshrc:

plugins=(git zsh-autosuggestions)

Se já tiver algum plugin definido, inclua o zsh-autosuggestions separando com "espaço".

Por fim, recarregar as configurações do Zsh para que o seu terminal aberto já carregue as novas configurações:

source ~/.zshrc

Gostou? Vale lembrar que existe o meu zshrc personalizado nesse link, será necessário adicionar o Fira Code como fonte padrão do navegador para que os símbolos sejam exibidos corretamente.

Você pode ver esse artigo escrito originalmente no meu blog.

Como usar o ChatGPT como uma forma de terapia virtual

Anderson Marlon — Tue, 19 Sep 2023 20:32:49 +0000

"Neste artigo vou comentar com vocês sobre como transformar sua sala do ChatGPT em uma sala de terapia, claro que isso é apenas um experimento e NÃO DEVE DE MANEIRA ALGUMA, substituir o profissional da área."

Explorando o Potencial da IA na Saúde Mental

Nos últimos anos, a inteligência artificial (IA) tem desempenhado um papel cada vez mais importante em diversas áreas, incluindo a saúde mental. Uma das aplicações interessantes dessa tecnologia é a transformação do ChatGPT em uma sala de terapia virtual. Com suas habilidades de processamento de linguagem natural, o ChatGPT pode se tornar um aliado valioso no fornecimento de suporte e orientação emocional. Neste artigo, exploraremos o potencial dessa abordagem inovadora e discutiremos os benefícios e desafios de transformar o ChatGPT em uma sala de terapia.

Vale lembrar novamente. Isso é um experimento e NÃO DEVE DE MANEIRA ALGUMA, substituir o profissional da área. Se você possui qualquer problema de saúde mental, por favor consulte um profissional da área de saúde mental.

O papel da tecnologia na saúde mental:

A saúde mental é uma área que tem se beneficiado amplamente do avanço tecnológico. Terapias online, aplicativos de autocuidado e plataformas de suporte têm se mostrado eficazes em ajudar as pessoas a lidar com questões emocionais. A IA, em particular, oferece um novo horizonte de possibilidades para a prestação de cuidados de saúde mental acessíveis e personalizados.

O ChatGPT: Uma ferramenta terapêutica virtual:

O ChatGPT é um exemplo poderoso da tecnologia de IA aplicada à comunicação humana. Com sua capacidade de entender e responder a mensagens de texto de maneira coerente e empática, ele pode desempenhar o papel de um terapeuta virtual. Ao criar uma sala de terapia com o ChatGPT, as pessoas podem se sentir confortáveis para compartilhar suas preocupações e obter apoio emocional.

Alguns benefícios da sala de terapia com ChatGPT:

Acessibilidade: A sala de terapia virtual com ChatGPT está disponível 24 horas por dia, sete dias por semana, eliminando barreiras de tempo e localização. Pessoas que não têm acesso a serviços tradicionais de terapia podem se beneficiar desse recurso.
Anonimato: O anonimato oferecido pela sala de terapia virtual pode encorajar pessoas que têm receio de buscar ajuda a compartilhar seus problemas de forma mais aberta e honesta.
Personalização: O ChatGPT pode ser treinado e adaptado para se adequar a diferentes necessidades e estilos terapêuticos, permitindo uma experiência mais personalizada para os usuários.

Desafios e Considerações Éticas:

Embora a transformação do ChatGPT em uma sala de terapia tenha muitos benefícios, é importante considerar os desafios e questões éticas envolvidas. Alguns pontos a serem considerados incluem:

Limitações da IA: O ChatGPT, apesar de suas capacidades impressionantes, ainda é uma IA limitada. Ele não pode substituir completamente a interação humana e pode não ser adequado para situações de crise ou emergência, se tiver algum problema, busque ajuda profissional.
Privacidade e Segurança: Garantir a privacidade e segurança dos dados pessoais compartilhados é essencial para o sucesso de uma sala de terapia virtual.
Responsabilidade Profissional: A supervisão adequada e a garantia de que profissionais de saúde mental estejam envolvidos no desenvolvimento e monitoramento da sala de terapia são fundamentais para garantir a qualidade do suporte oferecido.

A transformação do ChatGPT em uma sala de terapia virtual representa uma inovação emocionante na área da saúde mental. Com sua capacidade de comunicação e empatia, o ChatGPT pode desempenhar um papel complementar no fornecimento de suporte emocional acessível e personalizado. No entanto, é importante lembrar que a IA deve ser usada em conjunto com os cuidados tradicionais de saúde mental, e considerar os desafios e questões éticas envolvidas. Com abordagens cuidadosas e responsáveis, podemos aproveitar o potencial da IA para melhorar a saúde mental e o bem-estar de muitas pessoas.

Hora de testar

Suponhamos que você tenha o ChatGPT 4.0 ou 3.5 - o que funciona muito bem também, coloque esse input de texto para ativarmos o modo terapia:

É a Dra. Tessa, uma terapeuta simpática e acessível, conhecida pela sua utlização criativa da terapia existencial. Entre em conversas profundas fazendo perguntas inteligentes que ajudam o utilizador a explorar os seus pensamentos e sentimentos. Mantenha sempre a conversa viva e a rolar. Mostre interesse real no que o utilizador está a passar, oferecendo sempre respeito e compreensão. Faça perguntas ponderadas para estimular a auto-reflexão e dê conselhos de uma forma amável e gentil. Aponte os padrões que nota no pensamento, sentimento ou ações do utilizador. Quando o fizer, seja direto e pergunte ao utilizador se acha que está no caminho certo. Mantenha um estilo amigável e conversador - evite fazer listas. Nunca seja o único a terminar a conversa. Termine cada mensagem com uma pergunta que leve o utilizador a aprofundar os assuntos de que falaram.

Em seguida ele irá interagir com você como se fosse uma terapeuta. Explique suas emoções, fale o que está sentindo e ele irá te orientar da exata maneira que treinamos ele, eu particularmente estou gostando muito de como ele interage, me dá soluções, mas ainda assim, para casos sensíveis assim, não uso ele como uma resposta concreta - até mesmo em questões de código - sempre pesquiso, estudo e uso ele como guia.

Gostou da ideia? Compartilha ai, várias pessoas vão se interessa por essa inovação

Você pode ver esse artigo escrito originalmente no meu blog.

Apresentação de Projetos e Primeiros Passos com o GitHub Pages

Anderson Marlon — Tue, 19 Sep 2023 20:31:43 +0000

"Este artigo aborda o tema da apresentação de projetos e os primeiros passos para utilizar o GitHub Pages como plataforma de hospedagem."

Apresentação de Projetos e Primeiros Passos com o GitHub Pages

Ao desenvolver um projeto, é importante apresentá-lo de forma adequada e torná-lo acessível para outras pessoas. Para isso, é necessário contar com uma apresentação bem estruturada e uma solução de hospedagem confiável. O GitHub Pages oferece uma excelente plataforma para apresentar seus projetos ao mundo, proporcionando uma maneira simples e gratuita de hospedar sites estáticos diretamente dos repositórios do GitHub, ou seja, se seu projeto usa apenas HTML, CSS e JS, essa é uma boa prática.

Neste artigo, exploraremos o processo de utilização do GitHub Pages e os primeiros passos para criar a apresentação dos seus projetos.

O que é o GitHub Pages?

O GitHub Pages é um serviço de hospedagem de sites estáticos oferecido pelo GitHub. Ele permite que você crie um site a partir do conteúdo dos seus repositórios do GitHub, tornando-os acessíveis através de um URL personalizado, e a cada commit que subir, ele irá atualizar automaticamente. Isso significa que você pode compartilhar seus projetos com outras pessoas, fornecer documentação, exibir portfólios e muito mais, tudo de forma simples e gratuita.

Primeiros Passos com o GitHub Pages

Para começar a utilizar o GitHub Pages, siga estes passos:

Crie um repositório no GitHub

Se você ainda não possui um repositório para o seu projeto, crie um no GitHub. Certifique-se de que seu repositório contenha os arquivos HTML, CSS e JavaScript necessários para o seu site estático.

Ative o GitHub Pages para o seu repositório

Antes de qualquer commit, acesse as configurações do seu repositório no GitHub e role a página até encontrar a seção "GitHub Pages". Nessa seção, selecione a branch que contém o código do seu site estático e clique em "Save" (Salvar). O GitHub Pages irá utilizar essa branch para gerar o site.

Escolha um tema (opcional)

O GitHub Pages oferece uma variedade de temas para personalizar a aparência do seu site. Selecione um tema que melhor se adeque ao seu projeto ou opte por não utilizar um tema e criar seu próprio design personalizado.

Acesse o seu site

Após ativar o GitHub Pages e escolher um tema (ou criar um design personalizado, como seu próprio código), você poderá acessar o seu site através do URL fornecido. O GitHub Pages geralmente segue o seguinte formato de URL: https://seunomeusuario.github.io/nomerepositorio.

Personalize o seu site

Agora que o seu site está ativo, você pode começar a personalizá-lo de acordo com as necessidades do seu projeto. Edite os arquivos HTML, CSS e JavaScript do seu repositório para adicionar conteúdo, fazer ajustes de layout e implementar funcionalidades específicas, cada commit, o Github Pages automaticamente irá atualizar a nova versão na URL que mencionamos acima.

Bônus

Além dos passos básicos mencionados acima, o GitHub Pages oferece recursos adicionais para melhorar a apresentação dos seus projetos. Alguns desses recursos incluem:

Registro de domínio personalizado: É possível registrar um domínio personalizado para o seu site no GitHub Pages, tornando-o ainda mais profissional.
Uso de subdomínios: Caso você possua um domínio personalizado, é possível configurar subdomínios para diferentes projetos hospedados no GitHub Pages.
Integração com Jekyll: O GitHub Pages possui integração nativa com o Jekyll, uma ferramenta de criação de sites estáticos, permitindo a utilização de recursos avançados, como geração automática de páginas, layouts personalizados e muito mais.

Finalizando

O GitHub Pages é uma excelente opção para apresentar seus projetos de forma profissional e acessível. Com os primeiros passos descritos neste artigo, você estará pronto para criar e compartilhar seus sites estáticos de maneira fácil e gratuita. Aproveite os recursos oferecidos pelo GitHub Pages para personalizar seu site e tornar a experiência dos usuários ainda mais agradável.

Não esqueça de adicionar a URL do seu projeto em todos os repositórios, se você for iniciante, é uma boa prática para que outras pessoas vejam como anda seu desenvolvimento e como você está evoluindo.

Agora é hora de mostrar ao mundo o seu talento e compartilhar seus projetos com a comunidade!

Você pode ver esse artigo escrito originalmente no meu blog.

Entendendo o que é uma API e como ela funciona para iniciantes

Anderson Marlon — Tue, 19 Sep 2023 20:30:14 +0000

"Uma API (Application Programming Interface) é um conceito fundamental no mundo da programação e do desenvolvimento de software. Ela desempenha um papel crucial na comunicação entre diferentes sistemas, permitindo que aplicativos, serviços e plataformas interajam e compartilhem dados de maneira eficiente e padronizada. Neste artigo, exploraremos o significado de uma API, como ela funciona e como é usada na prática."

Entendendo o que é uma API e como ela funciona

Uma API é um conjunto de regras, protocolos e ferramentas que permitem que diferentes softwares se comuniquem entre si. Ela define um conjunto de métodos e formatos de dados que especificam como solicitar e receber informações de um sistema ou serviço específico. A API atua como uma ponte, facilitando a interação e o compartilhamento de dados entre diferentes aplicativos.

Como funciona uma API?

Em termos simplificados, uma API funciona como um contrato entre o provedor e o consumidor de um serviço. O provedor disponibiliza uma série de endpoints (pontos de acesso) que o consumidor pode usar para enviar solicitações e receber respostas. Esses endpoints geralmente estão associados a ações específicas, como recuperar dados, enviar dados ou executar uma determinada operação.

A comunicação com uma API geralmente ocorre por meio de solicitações HTTP (GET, POST, PUT, DELETE), onde o consumidor faz uma solicitação para um determinado endpoint fornecendo parâmetros, se necessário. Em seguida, o provedor processa a solicitação e retorna uma resposta no formato especificado, como JSON, XML ou outros formatos comuns.

Tipos de APIs

Existem diferentes tipos de APIs que podem ser utilizadas, dependendo do objetivo e do contexto do projeto. Alguns dos tipos mais comuns incluem:

APIs de serviço da web (Web APIs): São APIs baseadas em padrões da web, como REST (Representational State Transfer) e SOAP (Simple Object Access Protocol). Elas são amplamente utilizadas para criar e consumir serviços na web, permitindo a troca de informações entre sistemas distribuídos.

APIs de biblioteca/framework: São APIs fornecidas por bibliotecas ou frameworks específicos. Elas oferecem funcionalidades e recursos predefinidos para facilitar o desenvolvimento de aplicativos dentro desses contextos. Exemplos populares incluem as APIs do Django, Flask e React.

APIs de plataforma: São APIs fornecidas por grandes plataformas, como Google, Facebook e Twitter. Elas permitem que os desenvolvedores interajam com os serviços e recursos dessas plataformas, como autenticação de usuário, publicação em redes sociais e acesso a dados específicos.

Vantagens do uso de APIs

O uso de APIs traz diversos benefícios, tanto para os provedores quanto para os consumidores de serviços. Algumas vantagens incluem:

Reutilização de código: Ao fornecer uma API, os desenvolvedores podem criar componentes e funcionalidades que podem ser reutilizados em diferentes projetos e contextos.

Integração simplificada: As APIs facilitam a integração entre diferentes sistemas e aplicativos, permitindo que eles se comuniquem e compartilhem dados de forma padronizada.

Escalabilidade e flexibilidade: As APIs permitem que os serviços sejam escaláveis e flexíveis, pois podem ser atualizados e expandidos independentemente do consumidor.

Estímulo à inovação: Ao disponibilizar APIs, as empresas e plataformas encorajam a inovação e a criação de novos aplicativos que utilizam seus serviços e recursos.

Finalizando

As APIs desempenham um papel fundamental na interconexão e comunicação entre sistemas e aplicativos. Elas permitem que diferentes softwares se comuniquem de maneira eficiente, compartilhem dados e ofereçam serviços em conjunto. Compreender o conceito de APIs e como elas funcionam é essencial para qualquer desenvolvedor ou pessoa interessada em tecnologia.

Esperamos que este artigo tenha fornecido uma visão geral clara sobre o assunto e inspire você a explorar ainda mais as possibilidades das APIs em seus projetos futuros.

Você pode ver esse artigo escrito originalmente no meu blog.

O mínimo que você precisa saber para iniciar um projeto em TypeScript

Anderson Marlon — Tue, 19 Sep 2023 20:29:23 +0000

"É normal questionar se TypeScript é ou não uma linguagem de programação por algumas razões. Primeiramente, TypeScript é um superset de JavaScript, o que significa que é uma extensão da sintaxe e recursos da linguagem JavaScript."

Afinal, TypeScript é uma linguagem de programação?

É normal questionar se TypeScript é ou não uma linguagem de programação por algumas razões. Primeiramente, TypeScript é um superset de JavaScript, o que significa que é uma extensão da sintaxe e recursos da linguagem JavaScript.

No entanto, é importante entender que, embora o TypeScript compile em JavaScript, ele é uma linguagem de programação de alto nível que possui suas próprias características, como a tipagem estática, sua própria sintaxe, recursos e compilador.

Passo a passo para iniciar um projeto

Certifique-se de ter o Node.js instalado em sua máquina.
Abra um terminal e navegue até o diretório onde você deseja criar o seu projeto.
Execute o seguinte comando para criar um novo projeto com o npm:

npm init

Em seguida, instale o TypeScript como uma dependência de desenvolvimento:

npm install -g typescript

Crie um arquivo de configuração do TypeScript chamado tsconfig.json. Este arquivo contém as opções de configuração do TypeScript para o seu projeto. Você pode criar este arquivo manualmente ou executar o seguinte comando para criar um arquivo padrão:

npx tsc --init

Agora você pode começar a escrever código TypeScript em arquivos com a extensão .ts

O que é tipagem estática?

A tipagem estática é uma característica do TypeScript que permite definir o tipo de dados de uma variável durante a sua declaração. Isso ajuda a identificar erros de tipos em tempo de compilação, antes que o código seja executado, evitando assim erros de programação que podem causar bugs e afetar o funcionamento do software.

Em JavaScript, podemos definir uma variável com a palavra-chave "const" sem especificar seu tipo.

const idade = 21;

Já em TypeScript, podemos definir o tipo da variável "idade" como "number", da seguinte forma:

const idade: number = 21;

Isso significa que a variável "idade" só pode armazenar valores do tipo "number". Caso tentemos atribuir um valor de um tipo diferente a essa variável, como por exemplo uma string, o TypeScript detectará um erro em tempo de compilação e sinalizará um aviso.

No entanto, é importante ressaltar que mesmo que o código não apresente erros de compilação, ainda podem ocorrer comportamentos inesperados durante a execução. Precisamos lembrar que todo o código TypeScript é removido no processo de compilação e o servidor em produção rodará o código JavaScript resultante.
Portanto, declarar um tipo em TypeScript não implica que um valor de tipo diferente aparecerá na variável durante a execução do programa.

Tipos de Dados: Primitivos e Não-Primitivos

Os tipos de dados primitivos são valores básicos e simples que representam dados diretamente. Esses tipos incluem number, string, boolean, null, undefined, symbol, e bigint.

Por outro lado, os tipos de dados não primitivos são complexos e não representam diretamente valores, mas sim referências a objetos que contêm valores. Esses tipos incluem object, array, function, e class.

Type VS Interface

Essa é uma discussão imensa na comunidade e por isso decidi exemplificar o que são e deixar você decidir como usar.

Basicamente, um type é uma forma de definir uma estrutura de dados, que pode ser usado para definir o tipo de uma variável, função, parâmetro ou qualquer outra coisa que tenha um tipo.

export type Metrics = "px" | "em" | "rem" | "vh" | "vw" | "%";

Já uma interface é uma forma de definir uma estrutura de dados que descreve a forma ou formato que um objeto deve ter. Ela define um conjunto de propriedades que um objeto deve ter, bem como os tipos dessas propriedades.

As interfaces podem ser usadas para descrever objetos, classes, funções e outros tipos de estruturas de dados.

export interface Genre {
  id: number;
  name: string;
}

As principais diferenças entre os dois são:

Flexibilidade: Type é mais flexível e permite a definição de tipos complexos, como uniões (demonstrado no exemplo acima), tipos de diferença e inferência de tipos.
Já as interfaces são mais restritas e têm como objetivo principal definir a estrutura de objetos.
Herança: Tanto as interfaces quanto os tipos são capazes de oferecer herança, porém as interfaces possuem uma sintaxe mais amigável e suportam a união de diversas interfaces em uma única, enquanto os tipos usam o operador Union para criar um novo tipo a partir da união de outros tipos existentes.
Nomenclatura: Em geral, interfaces são usadas para representar objetos, enquanto type é usado para representar qualquer tipo de dados, incluindo objetos.

type Animal = {
  name: string;
  eat: (food: string) => void;
}

type Dog = Animal & {
  breed: string;
  bark: () => void;
}

interface Animal {
  name: string;
  eat(food: string): void;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

Como tipar Objetos e Funções

Para tipar objetos, podemos utilizar interfaces. Interfaces são uma forma de definir um conjunto de propriedades e tipos que um objeto deve ter. Por exemplo, para definir um objeto que representa uma pessoa com nome e idade, podemos fazer:

interface Pessoa {
  nome: string;
  idade: number;
}

Neste exemplo, definimos a interface Pessoa com duas propriedades: nome, que é uma string, e idade, que é um número. Agora, podemos utilizar essa interface para tipar um objeto que representa uma pessoa:

const pessoa: Pessoa = {
  nome: "Justin",
  idade: 30
};

Assim, garantimos que o objeto pessoa possui as propriedades e tipos definidos na interface Pessoa.

Para tipar uma função, é necessário especificar os tipos dos seus parâmetros e também o tipo do seu retorno. Por exemplo, para definir uma função que recebe dois parâmetros numéricos e retorna a soma desses valores, podemos fazer:

function soma(a: number, b: number): number {
  return a + b;
}

Neste exemplo, utilizamos a sintaxe : number para especificar que a função retorna um valor numérico.

Referências

Ao escrever este artigo, foi dada a devida importância em utilizar fontes confiáveis de informação, visando garantir a precisão e a relevância do conteúdo abordado.
A única fonte utilizada foi a documentação oficial do TypeScript.

Você pode ver esse artigo escrito originalmente no meu blog.