DEV Community: Jean Carlos Molossi

O que pode ser feito com HTML ?

Jean Carlos Molossi — Sat, 21 Jan 2023 23:18:00 +0000

O HTML (Hypertext Markup Language) é uma linguagem de marcação utilizada para criar páginas da web. Ela funciona como uma espécie de esqueleto para o conteúdo da página, fornecendo estrutura e significado para o texto, imagens, vídeos, formulários e outros elementos que compõem a página.

Por exemplo, imagine que você quer criar um site para o seu negócio. Com o HTML, você pode adicionar um título à sua página principal, como "Bem-vindo à minha loja de roupas". Além disso, você pode adicionar parágrafos descrevendo os produtos que você vende, como "Oferecemos uma ampla variedade de roupas femininas, masculinas e infantis, desde camisetas básicas até vestidos de festa".

O HTML é uma linguagem de marcação que é usada para criar páginas da web. Com ele, é possível fazer várias coisas, tais como:

Criar estrutura de página: O HTML permite adicionar títulos, parágrafos, listas, links, imagens e vídeos ao seu site, dando estrutura e significado ao conteúdo.

<h1>Título</h1>

<p>Parágrafo</p>

<ol>
    <li>Item de lista</li>
</ol>

Adicionar links: O HTML permite adicionar links para outras páginas dentro do seu site ou para outros sites na internet.

<a href="http://jeanmolossi.com.br/">Link ou Anchor</a>

Criar formulários: O HTML permite criar formulários de entrada de dados, como formulários de contato ou formulários de compra online, para que os visitantes possam interagir com o site.

<label>Digite seu e-mail</label>
<input type="text" name="email" />

Adicionar imagens e vídeos: O HTML permite adicionar imagens e vídeos ao seu site, tornando-o mais atraente e interativo.

<img src="https://jeanmolossi.com.br/kumala-la-kumala.gif?w=640&q=undefined" alt="imagem kumala" />

Criar tabelas: O HTML permite criar tabelas para exibir dados ou organizar o conteúdo em uma grade.

<table>
  <thead>
    <tr>
      <td>#</td>
      <td>E-mail</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>john@doe.com</td>
    </tr>
  </tbody>
</table>

Criar áreas de navegação: O HTML permite criar áreas de navegação para facilitar a navegação pelo site.

<nav>
  <a href="/">Início</a>
  <a href="/contato">Contato</a>
</nav>

Adicionar metadados: O HTML permite adicionar metadados à página, como o título da página, descrição e palavras-chave, que são usados pelos mecanismos de busca para indexar e classificar sua página.

<head>
  <title>Título da página</title>
</head>

Acessibilidade: O HTML também permite criar conteúdo acessível para pessoas com necessidades especiais, usando tags específicas e atributos.

<img src="dinosaur.png" aria-labelledby="dino-label">

É importante notar que o HTML é usado em conjunto com outras tecnologias da web, como o CSS (Cascading Style Sheets) e o JavaScript, para criar páginas da web dinâmicas e atraentes.

Se você está interessado em aprender HTML, existem muitos recursos disponíveis na internet, como tutoriais em vídeo, livros e cursos online. Comece com o básico e, aos poucos, vá aprofundando seus conhecimentos. Em pouco tempo, você estará criando páginas da web incríveis! Alguns recursos populares para aprender HTML incluem o W3Schools, etc.

Em resumo, o HTML é uma linguagem de marcação fundamental para a criação de páginas da web. Ele permite adicionar títulos, parágrafos, listas, links, imagens e vídeos ao seu site, além de permitir a criação de formulários para que os usuários interajam com o site. Quando usado em conjunto com o CSS e o JavaScript, o HTML permite criar sites atraentes e dinâmicos. Se você está interessado em aprender HTML, há muitos recursos disponíveis para ajudá-lo a começar.

Como criar micro serviços - Nível fácil parte 3

Jean Carlos Molossi — Wed, 29 Jun 2022 04:06:58 +0000

Como já dito nos artigos anteriores, criar um sistema baseado em micro serviços não é difícil. Vamos passo a passo e ao final dessa série, você verá que de fato é simples.

Users API

Aqui, vamos criar uma simples API Rest Http. Isso não deve ser um mistério. Ter uma Controller com as rotas, uma camada de Services, conexão com base de dados, tudo muito simples.

Domínio

Vamos iniciar pela camada de domínio. Isso vai garantir que foquemos em regras de negócio e depois nos preocupamos em implementar as rotas e regras de aplicação, que não são pertinentes ao domínio.

Primeiro vamos iniciar nosso projeto.


mkdir users-api && cd users-api

yarn init -y

Isso já deve gerar nossa pasta e iniciar o package.json. Vamos configurar o typescript agora, no terminal execute:


yarn add -D typescript && \

yarn tsc --init

Isso resolve nossa configuração inicial do typescript. Agora vamos começar com nosso domínio.


mkdir domain && touch domain/user.ts

Com isso vamos ter nossa entidade de user. Antes de começar com a construção do nosso user vamos configurar o jest como nosso runtime para testes.

Execute:


yarn add -D jest @types/jest ts-jest ts-node

Após o comando acima, teremos o jest instalado, agora vamos configurá-lo:


yarn jest --init

Com esse comando o jest inicia o processo de configuração, com isso seu terminal fará algumas perguntas. Vamos às respostas:

✔ Would you like to use Jest when running “test” script in “package.json”? (y/N)
- Pressione “n”
✔ Would you like to use Typescript for the configuration file? (y/N)
- Pressione “y”
✔ Choose the test environment that will be used for testing
- Selecione “node”
✔ Do you want Jest to add coverage reports? (y/N)
- Pressione “y”
✔ Which provider should be used to instrument code for coverage?
- Selecione “v8”
✔ Automatically clear mock calls, instances, contexts and results before every test? (y/N)
- Pressione “y”;

Agora você pode ver que foi criado um arquivo jest.config.ts. Esse é o arquivo de configuração do jest. Porém, você precisa adicionar uma última configuração:

// tsconfig.json

// ... Logo depois de export default

export default {

// ... Aqui abaixo.

  transform: {

    "^.+\\.tsx?$": "ts-jest",

  },

  // ...

Vamos criar nosso primeiro teste para saber se está tudo correto.

Crie o arquivo user.spec.ts (ou execute touch domain/user.spec.ts) junto com o arquivo user.ts

Dentro do arquivo de teste (user.spec.ts) vamos digitar o seguinte código:


// user.spec.ts

describe("Domínio de usuário", () => {
  it("deve funcionar", function () {
    expect(true).toBe(true);
  });
});

Antes de testar, vamos ajustar nosso package.json. Vamos adicionar um script. O package.json deve ficar assim:

// package.json

{
  "name": "users-api",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "devDependencies": {
    "@types/jest": "^28.1.3",
    "jest": "^28.1.1",
    "ts-jest": "^28.0.5",
    "ts-node": "^10.8.1",
    "typescript": "^4.7.4"
  }
}

Note que adicionamos uma chave scripts e nela temos dois (2) scripts. Um para iniciar a aplicação e outro para testar.

Agora no terminal, executamos:


yarn test

Esperamos que tudo dê certo. Se aparecer 1 passed em verde, significa que tudo está bem configurado.

A partir de agora, vou explicar o que faremos e o resultado.

Vamos relembrar. Nossas regras de negócio nos dizem que:

Todo usuário deve fornecer um e-mail e uma senha para poder se cadastrar.
Toda atualização do usuário registra a data em que ocorreu.
Sabendo disso, nosso teste de user deve ficar assim:

// user.spec.ts

import { User } from "./user";

describe("Domínio de usuário", () => {
    it("deve fornecer um e-mail e senha em User", function () {
        expect(
            new User(
                "id-fake",
                "email-fake",
                "password-fake",
                "created_at-fake",
                "updated_at-fake"
            )
        ).toBeTruthy();
    });

    it("deve dar erro se não fornecer e-mail ou senha em User", function () {
        expect(() => {
            new User(
                "id-fake",
                // Email vazio
                "",
                "password-fake",
                "created_at-fake",
                "updated_at-fake"
            );
        }).toThrowError("É obrigatório informar um e-mail");

        expect(() => {
            new User(
                "id-fake",
                "email-fake",
                // Senha vazia
                "",
                "created_at-fake",
                "updated_at-fake"
            );
        }).toThrowError("É obrigatório informar uma senha");
    });
});

Se você tentar executar os testes yarn test deve falhar. Mas agora vamos criar nossa classe de usuário para resolver isso.

// user.ts
export class User {
    private _user_id: string;
    private _email: string;
    private _password: string;
    private _created_at: string;
    private _updated_at: string;

    constructor(
        user_id: string,
        email: string,
        password: string,
        created_at: string,
        updated_at: string
    ) {
        this._user_id = user_id;
        this._email = email;
        this._password = password;
        this._created_at = created_at;
        this._updated_at = updated_at;

        this.validate();
    }

    private validate() {
        if (!this._email) {
            throw new Error("É obrigatório informar um e-mail");
        }

        if (!this._password) {
            throw new Error("É obrigatório informar uma senha");
        }
    }
}

A partir de agora, acompanhe por vídeo. Este artigo ficará imenso caso eu explique tudo. O essencial já está aqui. O que terá no vídeo é a prática do desenvolvimento e insigths.

Acompanhe pelo vídeo

Em breve

Como criar micro serviços - Nível fácil parte 2

Jean Carlos Molossi — Tue, 28 Jun 2022 04:34:27 +0000

Criar um sistema orientado à micro serviços, na verdade, não é tão simples. Ser algo difícil e ser algo complexo são coisas distintas.

Como comentei na parte 1, vou mostrar como pode ser fácil. Imagine que temos três (3) APIs se comunicando entre si via http em um único sistema.

Pronto, você já tem o start de um sistema baseado em micro serviços. Quando trabalhamos com micro serviços, o paradigma de desenvolvimento fica um pouco diferente, eu explico:

Atenção desviada

Nossa atenção muda de foco. Em uma API Rest padrão, focamos em padrões de projeto, código limpo, desacoplamento. Isso não é perdido de foco quando mudamos para micro serviços. Entretanto, nossa preocupação maior fica no monitoramento (ou observabilidade) de serviços e dependências.

Nossa preocupação se estende à performance e resiliência das aplicações, por exemplo.

Nem tudo são rosas

É importante comentar sobre o dia a dia de grandes sistemas. Nem tudo são rosas e serviços bem orquestrados. Na verdade, dispende-se grande esforço para manter tudo em ordem.

Nem tudo é complicado também

No final das contas o que importa é se a solução resolve o problema, seja com monólito ou com micro serviços, tanto faz.

De volta à nossa aplicação

Users API

Vamos iniciar pela API de usuários. Ela será o ponto de entrada do nosso usuário.

Nossas APIs seguirão o seguinte diagrama:

Camadas da API

Como você viu no diagrama, teremos três (3) camadas em nossas APIs (sim, todas vão seguir esse padrão). Cada camada tem sua responsabilidade, vamos a elas:

Application

Dentro da camada de application temos duas estruturas.

A estrutura de Controller vai nos fornecer os recursos da API, são eles:

Method	Route
POST	/user
GET	/user

A estrutura Factory será o ponto que acoplaremos a nossa aplicação com a camada de infraestrutura. Essa camada será o lugar onde teremos todas as junções da nossa aplicação, onde vamos conectar o nosso Controller, com nosso Service, com o Repository, etc.

Infrastructure

Essa camada de infraestrutura será onde teremos as definições de arquitetura da nossa aplicação. Isso quer dizer que, todas as dependências e auxiliares que não trabalham com as regras do negócio, ficam nessa camada.

Repository: é a estrutura responsável que cria uma interface de comunicação entre nossa aplicação e a base de dados.

Data: é a estrutura responsável por buscar dados de outros lugares que não estão na base de dados. Por exemplo, consumir as outras APIs.

Adapter: é a estrutura que vai adaptar e validar os dados de entrada e saída da nossa API com o Controller.

Error: é a estrutura que modela diferentes erros baseados no comportamento da aplicação e da regra definida.

Service: é a estrutura que mescla outras estruturas com o domínio, quase assemelha-se à Factory na camada de Application

Domain

Essa é nossa camada de domínio, onde não devemos nos preocupar se vamos utilizar um ORM, filas, Frameworks ou qualquer outra dependência.

Essa camada é responsável pela regra de negócio da nossa aplicação. Isso significa que, nos preocupamos unicamente com a lógica do negócio.

Acompanhe o vídeo

Em breve

Como criar micro serviços - Nível fácil

Jean Carlos Molossi — Tue, 28 Jun 2022 03:34:27 +0000

Criar uma API Rest e estruturar micro serviços não precisa ser algo difícil. Nesta sequência de artigos vamos entender desde a concepção de uma infraestrutura baseada em micro serviços até o desenvolvimento completo de uma aplicação.
O que vamos ter nessa aplicação?

Veja o diagrama:

Baseado no diagrama vou explicar a motivação por trás de cada item e como vamos trabalhar com ele.

É importante também que você entenda o que vamos levar em consideração como regras de negócio.

Sim, regras de negócio. Ser programador não é só sobre sair criando códigos e scripts de automatização. Você precisa resolver problemas! Nada melhor que entender como o problema surge para conseguir uma saída para resolvê-lo.

Vamos aos itens do diagrama.

CDN (Frontend Statics)

É, essencialmente, nosso frontend. Você pode entendê-lo como a aplicação em HTML e CSS, React, ou seja, lá qual o framework/lib que você queira usar (Vamos usar o React).

Containers

Esse grupo de itens corresponde às APIs que vamos criar separadamente, cada qual com suas respectivas responsabilidades.

Transactions API

Essa é nossa API de transações (ou pagamentos e recebimentos).

Essa API vai manter o histórico de transações de cada usuário e conta de usuário.

Para simplificar, associe a um banco. Como se você fosse o usuário e tivesse contas nesse banco, algo como uma conta corrente e uma poupança.

Essa API vai conter algo semelhante ao seu extrato.
Vamos às regras de negócio da Transactions API

Regra 1: Só podemos cadastrar transações, não podemos excluí-las.

Isso significa que uma devolução ou estorno deve ser uma nova transação com o valor reembolsado.

Regra 2: Toda transação deve ser diretamente relacionada a um usuário e a uma conta deste usuário.

Isso significa que uma transação deve ter um usuário e uma conta deste mesmo usuário como origem/destino.

Regra 3: Toda transação deve ter um tipo, como entrada ou saída. Além de ter o valor, em centavos, da transação, bem como o método de pagamento (Ex.: pix, débito, doc ou ted).

Users API

Essa é a nossa API de usuários.

Essa API vai manter os dados dos clientes. Aqui teremos e-mail, senha, data de criação e atualização de conta.
Serão somente esses dados apenas para fins didáticos.

Vamos às regras de negócio da Users API

Regra 1: Todo usuário deve fornecer um e-mail e uma senha para cadastro.

Isso significa que ambos campos de identificação do usuário são obrigatórios.

Regra 2: Toda atualização, adição de transação ou “abertura de conta” deste usuário deve registrar a data de atualização do usuário.

Isso significa que nosso campo updated_at sofrerá uma atualização a cada ação de escrita do usuário.

Accounts API

Essa é a API de contas de usuário.
Nela vamos manter o tipo da conta do usuário (se é corrente ou poupança), o balanço, o número e o usuário dono da conta.
Vamos às regras de negócio da Accounts API

Regra 1: Toda conta deve ter um tipo. Imagino algo como conta corrente, conta poupança.
Isso significa que não podemos permitir um usuário criar uma conta sem solicitar que seja, conta-corrente ou conta-poupança.

Regra 2: Toda conta deve ter obrigatoriamente um dono.
Isso nos diz que também não podemos permitir a criação de uma conta sem que haja um usuário envolvido.

Regra 3: O balanço da conta deve ser recalculado sempre que for recebido um evento de nova transação.

Isso significa que sempre que houver uma nova transação nossa API de contas vai “ouvir” este evento e recalcular o balanço baseado nesta nova transação.

Database

Geralmente, micro serviços consomem suas próprias bases de dados. Nesta aplicação vamos utilizar uma única base de dados separando apenas as tabelas.

Isso não é algo incomum em grandes sistemas que estão no processo de migração de um monólito. É uma etapa encontrada durante o processo de estrangulamento do sistema, mas isso é assunto para outro momento.

Cada micro serviço deve ser independente de qualquer outro. Vamos trazer isso para nosso modelo. Caso nossa API de transações cair por qualquer motivo, a API de usuários ou de contas devem se manter funcionando de forma independente.
Algo que é parcialmente verdade em nosso design atual. Caso o usuário queira saber seu saldo total não é possível se nossa API de contas venha a cair.

Para resolver isso, deveríamos “clonar” o balanço das contas do usuário dentro da base de usuários. Isso tornaria nossa aplicação independente e caso a API de contas fique fora do ar, nosso cliente ainda consegue ver seu saldo atual.

Ah! mas isso gera duplicidade de dados, né?! Correto!

Esta é outra dúvida que acontece quando falamos sobre micro serviços independentes. Se você está no início de sua startup não sei se você deveria considerar usar micro serviços, quando digo não sei, na verdade, quero dizer não aconselho usar.

Micro serviços são caros. Você deve levar em conta a utilizar micro serviços em situações específicas. Por exemplo, quando seu sistema está tão grande a ponto de ser muito custoso (em termos de desenvolvimento, não financeiro) para qualquer implementação nova.

Enfim, este é outro tema que dá um artigo completo.
Quanto às nossas bases de dados, simplesmente teremos três tabelas, usuários, transações e contas. Algo como o seguinte diagrama:

Fila e eventos

Vou te mostrar como trabalhar com fila e eventos não é um monstro de sete cabeças.

Fila, como o próprio nome já diz é uma fila! (Uau!)

Em essência, vamos adicionar um evento na fila e esquecê-lo lá. Outra parte da nossa aplicação vai ficar monitorando a fila, pegando os eventos (também conhecidos como mensagens) e processando os dados recebidos.

Para essa fila de eventos (ou mensagens) vamos utilizar RabbitMQ.

Espero que fique calmo, não é algo difícil de utilizar. Você verá que é algo extremamente simples.

É importante salientar que é diferente utilizar de implantar. RabbitMQ é algo complexo para se lidar quando se trata de infraestrutura. Porém, como desenvolvedor é algo relativamente simples.

Vamos à mão na massa na parte II. Espero você lá.

Meu primeiro post

Jean Carlos Molossi — Sat, 18 Jun 2022 06:14:55 +0000

Este é meu primeiro post de teste.

Aqui é um texto de citação

aqui um inline code

const div = document.createElement('div');
div.innerHtml = 'Aqui é um bloco de código'
document.body.appendChild(div)

import React from 'react';
import { fn } from "fn";

export const Component = () => {
    // Aqui um comentário
    return (
        <h1>Here is a title</h1>
    );
}

Aqui um link

Aqui um texto em negrito

Aqui um em itálico

Aqui
uma
lista

Aqui
outra
lista

Texto sublinhado

~~Texto com strike~~

Depois de um divisor