DEV Community: Flávia Correia

HTML e CSS em 10 minutos

Flávia Correia — Thu, 08 Jun 2023 14:30:55 +0000

Fala pessoal! Tudo bem?

Esse post é para você iniciante e que tem dificuldade em entender o que é HTML e CSS. Mas será que dá mesmo pra entender sobre esse assunto em 10 minutos? Essa resposta é...

O HTML

O que é?

HyperText Markup Language, no português brasileiro Linguagem de Marcação de Hipertextos, é uma linguagem de marcação, usada para definir a estrutura do conteúdo, o HTML é um padrão para estruturar um site, e ele possui sintaxe e semântica.

O conteúdo de um documento HTML é formado por diversos tipos de elementos, então, um parágrafo, uma imagem ou uma tabela é um elemento no HTML.

Um elemento HTML

Para inserir um elemento no documento HTML, é necessário uma tag (marcação), essa tag possui abertura, mas nem sempre possui fechamento, além disso, cada tag no HTML possui um nome, outra coisa necessária no elemento é o seu conteúdo (imagem,texto, vídeo, áudio, etc).

A estrutura da tag de abertura é:

Sinal do menor que (<)
Nome da tag
Sinal do maior que (>)
ex. <h1>

A estrutura da tag de fechamento é:

Sinal do menor que (<)
Barra (/)
Nome da tag
Sinal do maior que (>)
ex. </h1>

A estrutura de um elemento título:

<h1> Olá Mundo! </h1>

Sintaxe de um documento .html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olá Mundo!</title>
  </head>
  <body>
    <h1> Olá Mundo! </h1>
    <p> Esse é um parágrafo. </p>
    </body>
</html>

a. O DOCTYPE é uma declaração para informar ao navegador como o documento deve se comportar.

b. O elemento html é um elemento que envolve todo o conteúdo da página, pode ser conhecido como o elemento raiz.

c. O elemento head é um elemento que envolve todo conteúdo importante para a página HTML, mas que não é relevante ao usuário sua visibilidade.

o elemento meta define qualquer informação de metadados que não pode ser definida por outro elemento.
o charset define a codificação de caracteres usada na página, nesse caso o UTF-8.
o elemento title define o título do documento mostrado na aba da página do navegador.

d. O elemento body é um elemento que envolve todo o conteúdo da página e esse sim, fica visível ao usuário.

o elemento h1 define um título principal na página, existem elementos de título do h1 ao h6, eles agem de forma hierárquica como capítulos e subcapítulos de um livro.
o elemento p define um parágrafo no documento HTML.

Atributos

Um elemento pode possuir atributos, como o atributo class ou o id (identificador). O atributo class e id são utilizados tanto no CSS quanto no JavaScript para selecionar o elemento e estilizá-lo ou modificá-lo através de funções ou da DOM.

ex1.

<h1 class="title"> Olá Mundo! </h1>

ex2.

<div id="containerTitle"> 
   <h1 class="title"> Olá Mundo! </h1>
</div>

ex3.

<meta charset="utf-8">

Para conhecer mais sobre elementos e atributos HTML, clique aqui.

O CSS

O que é?

CSS ( Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de estilo usada para descrever a apresentação de um documento escrito em HTML ou em XML. Ele é definido seguindo algumas regras.

Sintaxe

a. A regra é aberta com um seletor.

o seletor pode ser: o nome de uma tag, uma classe ou um id
tag: h1;
classe: .title;
id: #containerTitle.

b. em seguida, a abertura de chaves ( { );

c. a propriedade a ser modificada, dois pontos ( : ), o valor e ponto e vírgula ( ; )

ex. color : purple;

d. por fim, o fechamento de chaves ( } );

O resultado é o seguinte:

ex1.

h1{
  color: purple;
}

ex2.

.title{
  color: green;
}

ex3.

#containerTitle{
  background-color: #dfdfdf;
}

Formas inserir no HTML

Existem 3 formas simples de se utilizar o CSS no HTML

1a

Essa primeira é inserindo diretamente no elemento utilizando o atributo style:

ex.

<h1 style="font-size: 30px;">Olá Mundo!</h1>

Perceba que a inserção da propriedade e valor seguem o padrão mencionado na seção anterior (propriedade:valor;)

2a

A segunda forma de estilizar um documento HTML é utilizando o elemento style dentro do elemento head:

<style>
   p{
       color:darkblue;
       font-size: 15px;
    }
</style>

Assim como temos um atributo style dentro de uma tag, temos o elemento style para estilizar, esse segundo segue o padrão de sintaxe citado na seção anterior:

seletor
abertura de chaves
propriedade:valor;
fechamento de chaves

3a

Essa terceira forma é a mais indicada para se trabalhar com o CSS. Ela consiste em:

criar um documento .css e adicionam-se os seletores e as modificações desejadas: ex.

.title{
  color: green;
}

p{
  color:darkblue;
  font-size: 15px;
}

chamar esse documento .css no .html com o elemento link:

<link rel="stylesheet" href="css/styles.css">

a. o link é um elemento utilizado para linkar, fazer uma ligação com outro documento ou arquivo que não se encontra dentro do documento HTML.
b. O atributo rel define a relação entre o que está sendo importado e o documento atual. Nesse caso, é uma relação de estilização.
o atributo href define o caminho a ser percorrido para importação. Nesse caso, o documento .css está na pasta css.

Para conhecer mais sobre estilização, clique aqui.

E ai, deu para aprender em 10 minutos?

Depende do seu nível de abstração, se a minha escrita foi coerente e coesa, se foi preciso ler mais de uma vez.

Aprender em 10 minutos não acontece, nem em 1 mês. Fica ai o conselho: para aprender é necessário constância, pratique todos os dias, desafie a si mesmo, porque conhecimento não aplicado de nada adianta. Ele se perde, se esquece.

Esse conteúdo exposto aqui é um pouquinho do mundo das linguagens de marcação e estilos. Tem muito mais.

Seja curioso, pesquise e aplique.

Valeu por estar até aqui.

Até a próxima!

Qual a melhor linguagem de programação?

Flávia Correia — Tue, 16 May 2023 01:14:08 +0000

Fala pessoal, tudo bem?

Pra você, qual a melhor linguagem de programação (LP)?

A resposta correta é... Depende!

Lá vem o depende...

Pois é, isso mesmo. Saber qual a melhor LP depende do contexto, da aplicação, do problema, do que precisa na aplicação, a arquitetura do cliente. E esse contexto precisa ser analisado de modo que essa escolha seja a melhor para a situação problema e não porque o colega A prefere a LP X ou Y.

Vamos por partes:

Antes de tudo: O que é uma LP?

Esse conceito peguei daqui.

É uma linguagem formal que, através de uma série de instruções, permite que um programador escreva um conjunto de ordens, ações consecutivas, dados e algoritmos para criar programas que controlam o comportamento físico e lógico de uma máquina.

1. LPs de baixo nível
a. Linguagem de máquina: coleção de binários que o computador lê e interpreta.
b. Linguagem Assembly: primeira tentativa para uma linguagem próxima da usada por seres humanos.

2. LPs de alto nível
Essas usam tradutores (a) ou compiladores (b):
a. os códigos são executados à medida que são traduzidos.
b. os códigos são traduzidos de uma só vez.

O que se leva em consideração em um projeto de LP

É importante ter alguns pontos que devemos levar em consideração quando vamos escolher uma LP para um projeto, como nos trás Sebesta (2011):

A legibilidade diz respeito à facilidade com a qual os programas podem ser lidos e entendidos;
A facilidade de escrita é a medida da facilidade que uma linguagem pode ser usada para criar programas;
A confiabilidade diz respeito ao quanto um programa está de acordo com suas especificações em todas as condições;
O custo diz respeito a treinar programadores para usar a LP, escrever programas na linguagem, compilar programas na linguagem, executar programas escritos em uma linguagem, sistema de implementação da linguagem, a confiabilidade baixa e manter programas (correções + modificações).

Algumas características que devem ser levadas em consideração:
a. simplicidade geral (construções básicas e multiplicidade de recursos);

b. ortogonalidade ( um conjunto construções primitivas pode ser combinado a um número de formas para construir as estruturas de controle e de dados da linguagem);

c. tipos de dados (presença de mecanismos adequados para definir tipos e estruturas de dados);

d. projeto de sintaxe (tem a ver com o formato dos identificadores, as palavras especiais e a forma e semântica);

e. suporte à abstração (habilidade de definir estruturas em que muitos dos detalhes sejam ignorados);

f. expressividade (existência de operadores que permitem muitas computações com um programa muito pequeno);

g. verificação de tipos (execução de testes para detectar erros de tipos em um programa);

h. tratamento de exceções (habilidade de um programa de interceptar erros em tempo de execução);

i. restrição de apelidos (permitidos quando é possível ter um ou mais nomes para acessar a mesma célula de memória);

j. portabilidade (a facilidade com a qual os programas podem ser movidos de uma implementação para outra);

k. reusabilidade (diminuir a necessidade de criar diferentes subprogramas que implementam o mesmo algoritmo em diferentes tipos de dados);

l. generalidade (a aplicabilidade da LP a uma ampla faixa de aplicações);

Programação procedural X Computação paralela

Na programação procedural, o programador descreve de forma detalhada o que a máquina deve fazer.

Já na computação paralela, resolvem-se os problemas com vários computadores trabalhando ao mesmo tempo, isso com o foco em um único alvo.

Os paradigmas

Dando um gugôu você encontra qual o significado do que é um paradigma: um exemplo que serve como modelo ou padrão.

Na programação, temos diversos paradigmas, diversos modelos e padrões para resolver diversos problemas:
1. Imperativo: o foco da solução está em como o problema deve ser resolvido pela máquina (procedural). Usado quando a aplicação requer manutenção e mudanças a longo prazo. Linguagens como Pascal e Fortran usam esse tipo de paradigma.

2. Orientado a Objetos: os atributos e comportamentos estão contidos dentro de um único objeto, geralmente usam classes para definir esses objetos. Além disso, as aplicações são desenvolvidas e interpretadas por diferentes plataformas. C++, Java, JavaScript e Python são exemplos de projetos de LP orientados a objetos.

3. Orientado a Eventos: aqueles que definem a execução de determinadas funções conforme os eventos são disparados pelo usuário. Visual Basic e Delphi são exemplos que usam esse paradigma.

4. Funcional: indicado quando a resolução do problema querer, majoritariamente, de uma base matemática. Aqui se destaca o uso das funções e, na hora de resolver um problema, o divide em blocos onde são implementadas funções. Linguagens que usam esse paradigma são LISP e Haskell.

5. Declarativo: foca em o que deve ser resolvido, nesse paradigma são utilizadas verdades lógicas imutáveis, possuindo nível de abstração maior que os outros paradigmas, XML e HTML são exemplos de linguagens de marcação que usam esse paradigma.

6. Lógico: ou restritivo é o uso de uma notação lógica formal para comunicar processos computacionais para um computador, sendo muito utilizado para resolver problemas na área de Inteligência Artificial, baseando-se em análises lógicas e matemáticas, além disso são usados fatos, regras de inferências e busca. A Prolog é uma LP que faz uso desse paradigma.

Muita coisa pra processar? É assim mesmo! Consegue perceber agora que não existe LP perfeita para todas as situações? Depois entro mais a fundo nesse tema de Conceitos de LPs. Recomendo a leitura do livro Conceitos de Linguagens de Programação do Robert W. Sebesta, nesse post usei a 9ª edição como base.

Um Projeto Spring Boot - P5.3

Flávia Correia — Thu, 12 Jan 2023 20:36:54 +0000

Fala pessoal!

Mais um tutorial sobre Rest API em Java com Spring Boot chegando. E hoje vou falar um pouco sobre validações e tratamento de exceções.

Adicionando validação nos campos

Algo que não queremos são erros de exceção gerados no banco de dados por causa de valores que foram enviados de forma incorreta (p.e. null, "" ou email inválido) ou que excedem o tamanho máximo da coluna.

Então, antes desses dados serem salvos no banco, é preciso validá-los e ai para iniciarmos as validações vamos instalar o Validation:

<dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-validation</artifactId>
</dependency>

A segunda coisa a se fazer é adicionar anotações pertinentes aos campos da classe de editora como @NotBlank nos itens que não podem ser nulos e nem vazios e @Size (max = value) para validar se o item possui tamanho equivalente a column no banco de dados.

A documentação do Bean Validation possui diversas anotações úteis, como por exemplo de e-mail, vale à pena dar uma conferida.

A classe de Editora ficou assim:

Já o último passo é inserir a anotação @Valid nos métodos de POST e PUT lá no controlador:

E pronto, a validação de Editora está pronta.

Testando a aplicação, quando é enviado um request com todos os dados corretos temos:

retorno do que foi cadastrado + id;
status = 201

Já quando algum item não foi enviado corretamente, temos um response gigante com várias informações:

O principal (o que considero) nessa mensagem é:

status = 400;
um defaultMessage com o motivo do erro;
um field com o nome do campo de erro;
a data e hora que ocorreu o erro.

BÔNUS: Formatando o retorno das exceções

Um bônus para você sobre como formatar o retorno das exceções ao endpoint:

P1

criar uma classe para o tratamento de exceções e extender a classe ResponseEntityExceptionHandler
a minha classe se chama ApiExceptionsHandler e está no pacote library.api.exception
utilizar a anotação @ControllerAdvice que, de forma simples, passa a ideia de que a classe é um componente Spring com o objetivo de tratar exceções globalmente.
puxar o método handleMethodArgumentNotValid
esse método é chamado quando ocorre algum erro que precisa ser retornado ao endpoint. Ele recebe 4 parâmetros:

a exceção
o cabeçalho
o status e
o que foi recebido pela API

com relação ao retorno do método escolhi o handleExceptionInternal porque ele permite retornar um objeto do tipo Object e ai esse objeto é que será a mensagem de retorno da API.

P2

criar uma classe Field dentro do pacote library.api.exception com atributos field (String) e mensage (String)
adicionar as anotações do Lombok @AllArgsConstructor e @Getter

criar a classe Error dentro do pacote library.api.exception
e adicionar os objetos status (int), dateTime (LocalDateTime), title (String), listFields ()
adicionar as anotações Lombok @Getter e @Setter

P3

instanciar um array list do tipo Field na classe ApiExceptionHandler.

É preciso percorrer o objeto ex e para cada erro apontado pela API, pegar qual o campo que está com o erro e qual foi a defaultMessage dele. Cada item da lista de exceptions é um ObjectError e pra conseguir pegar o field é preciso do cast do tipo FieldError. Com isso, uma das possibilidades dese fazer isso é com o seguinte código:

for (ObjectError error : ex.getBindingResult().getAllErrors()) {
    String field = ((FieldError) error).getField();
    String message = error.getDefaultMessage();

    fields.add(new Field(field, message));
}

na classe ApiExceptionHandler instanciar um objeto Error e setar os valores

a. status = status.value();
b. dateTime = LocalDateTime.now();
c. title = "Um ou mais campos com preenchimento inválido.";
d. listFields = o array populado anteriormente.

retornar o erro formatado: return handleExceptionInternal(ex, error, headers, status, request);

Com isso temos o resultado:

1 erro:
mais de 1 erro:

Por hoje é isso!

O link do repositório no GH: clica aqui

Espero que tenha gostado, curte, compartilha e deixa ttua opinião.

Até mais!

Um Projeto Spring Boot - P5.2

Flávia Correia — Thu, 05 Jan 2023 18:54:57 +0000

Faala pessoal! Tudo bem?

Estou de volta para mais um post sobre o projeto Rest API e para relembrar sobre o que já foi mostrado, deixo essa lista dos articles já publicados:

Continuando com o tutorial do último post:

Adicionando anotação para URI

Para deixar o código mais organizado, adicionei uma anotação chamada RequestMapping e passei por parâmetro a URI da classe de controle e removi a anotação GetMapping do GET ALL editoras:

Isso é bom porque ajuda a fazer uma manutenção mais fácil, por exemplo, se a classe de controle de usuários tivesse 100 métodos de manipulação e a URI fosse "users_controller", caso decidisse mudar para apenas "users", ou sairia removendo o "-controller" nos 100 métodos, ou daria um "Localizar + Substituir" correndo o risco de alterar alguma informação no código.

GET ONE

O método para buscar todas as editoras já está pronto. Agora, podemos fazer um método que retorne uma editora em específico de acordo com o ID dessa editora.

Aqui nesse ponto, podemos usar Response Entity que nos dá a possibilidade de manipular o cabeçalho, outras coisas, e o que será usado aqui será a modificação do status, sendo alguns deles que mais usarei:

200 OK
404 Not Found
201 Created
204 No Content

Aqui você pode ver mais sobre os códigos de status de respostas HTTP.

O código mais enxuto de retorno de uma editora pode ser escritode 2 formas:

Esse é um método que recebe um id pela URI (por isso a anotação @PathVariable) e que, faz a busca pelo id, mapeia a editora e retorna com status OK(200) incluindo a editora encontrada. Caso não encontre, cai no orElse e retorna a construção de um Not Found (404).

Já nessa segunda versão, o map desse método atua da mesma forma que o primeiro, porém a construção é mais enxuta

Uma terceira versão, menos enxuta, pode ser construída da seguinte forma:

GET BY NAME

Uma terceira forma de consulta é pelo nome, por exemplo.

Um modo simples é usando o Query Methods do JPA, então na Interface repository de editora. Utilizando esse tipo de Query, tem que seguir algumas regras:

iniciar o método com find ou query
utilizar o By
se for a busca por propriedade, colocar o nome na classe Model da propriedade: por exemplo, na Model de Users tem um atributo chamado nome, na Interface ficaria:

List<Users> findByNome(String nome)

Uma outra palavra reservada que pode ser utilizada é o Containing no final do nome do método na Interface, que faz a busca em todas as linhas do banco que contém o conjunto de caracteres passados, ele equivale ao Like em query de DB SQL.

List<Users> findByNomeContaining(String nome)

OBS.: O JPA implementa esses métodos em tempo de execução, então não precisa implementá-los.

A passagem do dado a ser buscado pode ser:

pela URI, como o id e ai usa a anotação @PathVariable;
pelo corpo da requisição e ai usa a anotação @RequestBody como é usado na criação e edição.

POST

Na imagem abaixo, temos o método para salvar uma nova editora no banco de dados:

A anotação @PostMapping indica que aquele método deve ser usado quando uma requisição do tipo POST é iniciada;
A anotação @RequestBody com o status CREATED modifica o status de resposta para 201,
Esse método retorna os dados da editora cadastrados juntamente com o ID.

Essa é apenas uma opção, poderia retornar apenas o id com: pCompanyRepository.save(pCompany).getId()

Poderia retornar uma mensagem de sucesso, ou apenas o status. Por ora vamos deixar assim.

PUT

O método de edição é muito parecido com a criação, apenas com alguns detalhes a mais, como na imagem, na ediçção primeiro verifiquei se aquela editora está cadastrada no banco de dados, caso não esteja, retorna o erro 404.

Caso exista:

seta o ID no objeto editora que veio na requisição;
quando chama o save, pelo fato do atributo ID não estar vazio, o JPA vai entender que precisa editar ao invés de salvar uma nova linha no banco.
no final, há o retorno da editora editada com status 200.

DELETE

A deleção é bem simples também, há verificação de existência de editora, em seguida remove a editora através do ID e retorna o corpo da requisição vazio com o status 204.

Bom pessoal, por hoje é isso, o repositório no GitHub pode ser acessado por aqui.

Até a próxima!

Um Projeto Spring Boot - P5.1

Flávia Correia — Tue, 20 Dec 2022 15:53:55 +0000

Faala pessoal! Tudo bem?

Estou de volta para mais um post sobre o projeto Rest API e para relembrar sobre o que já foi mostrado, deixo essa lista dos articles já publicados:

Ferramentas utilizadas

Para o post de hoje, irei falar com vocês sobre persistência de dados, nessa situação estarei utilizando o Jakarta Persistence API, Spring Data JPA e FlyWay (FW). É nesse ponto que iremos utilizar o banco de dados relacional MySQL, mas fica a seu critério se adaptar e utilizar o seu DB preferido.

Adicione o Spring Data JPA, FlyWay Migration e o MySQL Driver ao projeto; nesse ponto aqui, eu tive um problema com o drive do MySQL, então no pom.xml alterei a dependência do driver para:

<dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency>

Configurando a conexão com o banco de dados

Adicione as informações do banco de dados no arquivo application.properties que está dentro do pacote resources:

Como gerar migrations

Crie dentro de src/main/resources uma pasta 'db' e uma subpasta 'migration'.

É nelas que estarão todos os arquivos referentes ao banco de dados, como os scripts de criação/alteração/deleção de tabelas, colunas, etc..

Por padrão, o FW só lê os scripts com nome em determinado padrão, por padrão o FW percebe:

arquivos iniciados com 'V', maiúsculo mesmo, e ai a identificação do arquivo fica a seu critério, com índice (V0001) ou data e hora (V20221213213045 - meu formato aqui está YYYY/MM/DD-HH:MM:SS)(eu vou seguir com a primeira opção);
é inserido 2 underscore (__) após a versão do arquivo;
é inserido a descrição do arquivo junto com a extensão .sql (p.e. create-table-books.sql)

Então no final fica:

V0001__create-table-books.sql

V20221213213045__create-table-books.sql

OBS.: Se o projeto estiver rodando, quando criar o arquivo com a extensão .sql o devtools vai fazer o seu papel de reiniciar o servidor e o FW vai rodar o script vazio e isso vai gerar uma mudança no DB e ficar registrado na tabela referente ao FW que foi criada, a com nome flyway_schema_history.

É nessa tabela que são guardadas as infos referentes ao banco, como por exemplo quais os schemas rodados.

Então, eu recomendo que, com o servidor inativo, crie os arquivos com a versão e extensão e, só depois de tudo certo, com o DDL inserido no arquivo, inicie o servidor.

Você pode também fazer isso com o servidor ativo, ai pode criar o arquivo com o nome (ex. create-table-books.sql) e só depois alterar o nome do arquivo para o padrão.

Modificando a Model de Editora e criando a migration

Como iniciei com o Model de Editora, vou criar o DDL de editora da seguinte forma:

criei o arquivo V0001__create-table-publishing-companies.sql
adicionei o schema:

CREATE TABLE IF NOT EXISTS publishing_companies( id BIGINT NOT NULL AUTO_INCREMENT, name VARCHAR(200) NOT NULL, city VARCHAR(50) NOT NULL, state VARCHAR(5) NOT NULL, country VARCHAR(100) NOT NULL, PRIMARY KEY (id) )

alterei a model de editora para garantir a persistência de dados e indicar que é uma table do banco:

a. nas linhas 13 e 20 eu chamei mais uma funcionalidade do Lombok que é a geração de hash code e equals, se não tivesse o código iria fica muito poluído:

b. a linha 16 está indicando que a classe é uma entidade no banco de dados e na linha 17 referencio a tabela do DB com o nome "publishing_companies", caso o nome da tabela fosse equivalente ao do Model, então não precisaria utilizar o Table(name = "name_table_reference")

c. na linha 21 estou indicando que o atributo "id" é referencia à coluna ID da tabela;

d. na linha 22 estou indicando que o ID da tabela será gerado a partir do padrão do banco, por isso a passagem do strategy por parâmetro.

e. repare que nos atributos seguintes não coloquei nenhuma anotação para identificar que são colunas na tabela publishing_companies, isso acaba se tornando opcional, nesse caso, porque o nome é igual. Caso não fosse esse o caso, passaria a anotação @column(name = "nome_column")

f. se deseja entender melhor sobre @entity e @Table, tem uma disussão no Stack Overflow sobre esse assunto aqui.

Modificando o controlador

modifiquei o GET de editora para fazer uma busca no banco de dados:

a. criei um atributo do tipo EntityManager para gerenciar o banco

b. a partir dele, chamei o método para criar uma query e a busca foi feita usando JPQL com o formato da classe de editora.

c. o resultado é convertido em uma lista do tipo do model de editora e retornado para quem solicitou a busca.

Como resultado, após iniciar o servidor, tive:

1 resultado no DB:

a. duas tables criadas

b. a table do Flyway com 1 resultado e a column success = 1

c. a table de editora criada com o nome: publishing_companies e todos os atributos passados no DDL

2 resultado no Postman:

Bom pessoal, por enquanto é isso.

Na próxima publicação, vou trazer um tutorial sobre salvamento, deleção e alteração de dados.

Se tiver alguma dúvida, deixa nos comentários, críticas e sugestões também são bem vindas.

Até mais!

Um projeto Spring Boot - P4

Flávia Correia — Sat, 01 Oct 2022 18:44:50 +0000

Faala pessoal, tudo bom? Vamos codar um pouco?

Expandindo a pasta raiz do projeto, temos:

O src/main/java é uma estrutura padrão do Maven, nesse caminho é onde o código Java com destino à produção fica.
O src/main/resources é onde os arquivos estáticos ficam, como exemplo, aqueles arquivos de configuração.

A PublishingCompany (Editora)

Com o botão direito, clique no pacote com.projects.library > New > Class

Edite os seguites campos:

Package: com.projects.library.api.controller
Name: PublishingCompanyController e clique em Finish.

Para ver se está tudo certo, vamos criar um método que retorna uma string.

A linha 6 indica para o Spring que a classe é um componente Spring que trata requisições HTTP e que pode retornar respostas.
Alinha 9 é uma anotação que mapeia requisições do verbo Get e toda vez que solicitar no endereço com "/publishing-companies" retorna o "Hello World" do método getPublishingCompanies.

Rodando o projeto e testando a requisição no Postman

Na aba Boot Dashboard, expandindo a seção "local" teremos a library-api[devtools], ela é a que utilizamos para rodar o projeto

No Postman, criei uma nova Collection, selecionei o verbo HTTP GET, adicionei a URL:PORT/URI criada no Controller. (no caso localhost:8080/publishing-companies) e dei um Send. O resultado está logo abaixo.

Criando uma Model Publishing Company
Antes de iniciar a construção da Model, vamos configurar o Lombok, uma biblioteca que gera os Getters, Setters, Equals e HashCodes das Models, o que deixa o código mais limpo.

Caso não ache necessário, pode partir para o tópico 6.

Prepare sua IDE por aqui;
Clique com o botão direito sobre o projeto;
Vá para: Spring > Add starters;
Selecione Lombok;
Clique em Next > Selecione pom.xml > Clique em Finish;
Clique com o botão direito sobre o projeto;
Vá para New > Class;
Em package edite: com.projects.library.domain.model;
Em Name adicione: PublishingCompanyModel e clique em Finish;
Adicione os seguintes atributos:

Note que, existem alguns Warnings na classe pela falta de Getters e Setters, para sanar isso, como já falei antes, usaremos o Lombok, então, nas linhas 3 e 4 adiciono:
import lombok.Getter; import lombok.Setter;

Assim, temos uma classe mais "enxuta" com os métodos necessários.

Caso não tenha optado pelo Lombok, gere os Getters e Setters.

Modificando o Controller de Publishing Companies

Na linha 15, modifiquei para que o método retornasse uma lista de Editoras
Nas linhas 17 a 29 são criados 2 objetos instanciados do tipo da Model de Editora;
Na linha 31, através do método asList da biblioteca Arrays, é retornado uma lista com os objetos.

O resultado é esse aqui:

Gerando um .jar do projeto

botão direito do mouse sobre o projeto
Run As > Maven build... (o 5)
Goals: clean package
Run

O arquivo .jar estará na pasta target
Para rodar no terminal:

abra a parta target no terminal
java -jar nome_projeto-0.0.1-SNAPSHOT.jar

Com isso, podemos rodar o projeto sem precisar abrir a IDE, uma boa pra quando tiver toda a API pronta e quiser testar algum módulo.

Chegamos ao fim de mais uma publicação, você pode acompanhar os posts anteriores aqui:

O link do projeto no GitHub você acessa aqui.

Até mais!

Um projeto Spring Boot - P3

Flávia Correia — Sat, 01 Oct 2022 12:44:17 +0000

Faala pessoal, tudo bom?

Dando continuidade às publicações sobre REST API's, nessa publicação falo sobre como criar um novo projeto Spring. Simbora?

Gerando um novo projeto

Com o Spring Tools Suite 4 aberto, vá em File > New > Spring Starter Project e modifique os seguintes campos:
Nome : library-api;
Type : Maven Project;
Java Version : 11;
Group : com.projects.library
esse é o identificador do projeto do Maven.
Artifact : library-api
um projeto pode conter vários artefatos
Description (esse é opcional) : o meu: API de Biblioteca
Package : com.projects.library

Adicionando dependências ao projeto

Clicando em Next, a próxima tela será para incluir as dependências do projeto.
A versão do Spring Boot mantenho a 2.7.4.
Adiciono, inicialmente, as dependências:
a. Spring Web:
É um inicializador, ele serve pra adicionar um conjunto de dependências que evitam do dev inserir dependências isoladas manualmente, podendo ocorrer conflitos. Resumindo, serve pra otimizar o tempo na configuração de um novo projeto.
b. Spring Boot DevTools:
é uma ferramenta que, por exemplo, toda vez em que ocorrem modificações no projeto, ele já reinicia o servidor da aplicação.

Finalizando a criação

Clica em Next > Finish. Um fato interessante, o SSP gera o projeto na nuvem através do Base Url e os parâmetros de configuração estão no Full Url, então o processo é:

-> Selecionamos nossas configs
-> O SSP manda pra nuvem essas configurações
-> Na nuvem o projeto é gerado e baixado como .zip
-> O Spring descompacta o .zip no workspace.
-> Seu projeto localmente é concluido.

OBS 1
Uma segunda possibilidade é gerar o .zip no site do initializr

OBS 2
Caso o projeto apresente algum erro siga esses passos:

Clique com o botão direito sobre o projeto;
Selecione Maven > Update Project... ;
Selecione "Force Update of Snapshots/Releases";
Clique em OK e aguarde;

Seguindo esses passos é bem provável que o projeto já esteja configurado corretamente.

Chegamos ao fim de mais uma publicação, você pode acompanhar os posts anteriores aqui:

O link do projeto no GitHub você acessa aqui.

Até mais!

Configurando o ambiente de desenvolvimento - P2

Flávia Correia — Sun, 11 Sep 2022 00:05:22 +0000

Faala pessoal, tudo bom?

Dando continuidade ao meu primeiro post sobre REST API's , vim comentar um pouco sobre como configurei meu ambiente de desenvolvimento para fazer esse projeto.

Sobre o projeto

A ideia é fazer um sistema simples de biblioteca, com CRUD de livros e usuários (leitores e administrador).

As tabelas no banco são:
Livro; Categoria; Editora; Escritor; Empréstimo; Reserva; Usuário; etc.

Nossas regras de negócio:

Livro possui autor, categoria, título, ano da publicação, quantidade de exemplares disponíveis, ele pode ser reservado, emprestado e devolvido.
O Leitor possui um usuário e ele pode visualizar os livros disponíveis, pode fazer uma reserva e empréstimo.
O administrador faz o gerenciamento dos empréstimos, das reservas e devoluções. Além disso ele também possui usuário.

Com essa ideia, criei esse modelo de banco de dados relacional no MySQL Workbenck:

As tecnologias que irei utilizar

Linguagem de programação: Java
JRE/JDK: 11 (estou utilizando o OpenJDK)
Framework: Spring Tools Suite 4
Banco de dados: MySQL
Servidor do DB e PHPMyAdmin: Docker (você pode utilizar o MyQSQL Server e MySQL Workbenck)
Realizar as requisições: Postman (você pode utilizar o Insomnia ou algum similar)

Um adendo: eu utilizo o Linux, então recomendo que utilize o WSL para rodar o Docker, caso seu SO seja Windows ou utilize as opções que citei acima.

Minhas configurações do Docker

No estágio que faço na Fábrica de Software (CPDS-UESB) utilizamos o Laravel para desenvolver sistemas web, e por precisar rodar o Apache, o servidor de DB e a interface para acessar o banco utilizamos o Docker.

Os containers foram configurados pelo Gêneses Lopes, junto com o Tulio Calil e Reinaldo Bispo, eles deixaram tudo bonitinho, então como já tenho instalado na minha máquina preferi usá-lo.

O repositório do projeto você acessa aqui com todas as infos de instalação e configuração.Faça alterações de portas no .env, eu fiz para o utilizar o PhpMyAdmin porque está configurado por padrão na porta 8080 e o Tomcat do Spring utiliza também a porta 8080, então modificando não terá conflito de portas.

Os contêineres utilizados: phpmyadmin e mysql

Para iniciar o Docker

No terminal:
sudo systemctl start docker

Para rodar os containers
Normalmente, quando o Docker é iniciado o PHPMyAdmin e MySQL já estão rodando, caso não, no terminal insira o comando:

docker container start mysql

docker container start phpmyadmin

Alternativa ao terminal
Uma outra opção é utilizar a extensão do Docker no VS Code, lá é possível ver os containers rodando, iniciá-los, pará-los, reiniciá-los, excluir as imagens, enfim.

Para acessar o PhpMyAdmin
http://localhost:[suaporta] (a minha coloquei 9090)

servidor: mysql;
usuário e senha: root;

Bom, é isso.
Qualquer dúvida ou sugestão, deixe nos comentários!

Fique na paz e até mais! :D

Um projeto Rest API - P1

Flávia Correia — Sun, 04 Sep 2022 13:13:31 +0000

Fala pessoal! Tudo bem?

Hoje vim falar um pouco com vocês sobre Rest API's. Um assunto bem comentado e muito necessário no aprendizado do dev backend, até porque saber desenvolver aplicações baseadas em Rest se tornou um dos pré-requisitos para conquistar aquele primeiro emprego.

Se você é alguém que está buscando novos conhecimentos, querendo se aprofundar um pouco nesse mundo de Rest ou até mesmo relembrar conceitos básicos, mas necessários, continue aqui nesse post.

Boa leitura e espero que goste! :D

O que é REST?

REpresentational State Transfer significa, de forma literal, Transferência de Estado Representacional, Rest não é um framework, uma linguagem, aplicação, nem nada disso.

É um modelo para desenvolvimento de arquiteturas que traz em seu escopo diretrizes/padrões de comunicação para serem utilizadas na definição bem as interfaces de projetos e as mesmas devem ser muito bem delimitadas. Esse modelo possibilita a produção de sistemas distribuídos mais eficientes e confiáveis.

Na internet, a REST é um estilo, e o HTTP é um padrão.

As constraints REST

As mesmas que são determinadas pela arquitetura Rest são:

1. Cliente-Servidor: ambos separados e independentes;

2. Stateless: a comunicação entre o cliente e o servidor deve ser sem estado (No escopo da requisição deve conter tudo o que é necessário para que seja processada da forma correta);

3. Cache: as respostas devem informar de modo claro se devem ser armazenadas em cache ou não;

4. Interface uniforme: todos os provedores e consumidores devem compartilhar uma única interface do usuário para todas as operações (Dá possibilidade para que as partes envolvidas evoluam de forma independente);

5. Sistema em camadas: habilidade de adicionar ou remover intermediários em tempo de execução sem que haja a interrupção do sistema;

6. Codificação sob demanda (opcional): a lógica em clientes pode ser atualizada independentemente da lógica do servidor usando código executável fornecido de provedores no lado cliente.

Lembrando que, aplicações que implementam a arquitetura RESTful, são aquelas que implementam todas as restrições citadas acima.

Uma das vantagens é que aplicações REST são independentes de linguagens,por exemplo, o backend pode ser em Java e o frontend em React.

Mas, e API?

As API's (Application Programming Interface) são um conjunto de requisições que permite a comunicação de dados entre as aplicações. Como no exemplo citado acima, o Cliente-Servidor.

As API's utilizam-se das requisições HTTP que são responsáveis pela manipulação de dados, ou seja solicitar o CRUD em um dado armazenado, aquele a gente vê em Banco de Dados (Create Read, Update e Delete), aqui são responsáveis por isso os verbos POST, GET, PUT, DELETE, PATCH, OPTIONS, HEAD, e mais uma infinidade deles.

E agora?

Nas próximas publicações pretendo trazer a produção de uma Rest API usando o Spring Tools Suite 4, além do Docker para rodar o MySQL e o PHPMyAdmin, Jakarta EE, Lombok, FlyWay, e, por enquanto, vamos ver os resultados através do Postman. Futuramente, vou estar publicando um projeto frontend utilizando React.

Aguardem!
Fique na Paz e até mais!

.
.
.
(viu algum erro ou discrepância? manda uma mensagem :D)

CARREIRA DEV: por onde começar?

Flávia Correia — Sun, 04 Sep 2022 00:55:06 +0000

Faaala! Tudo bom?

Pra dar início às minhas publicações aqui na comunidade, vim trazer pra vocês um artigo que publiquei alguns meses atrás sobre como começar na carreira dev.

O artigo no Linkedin!

Por onde eu começo?

É muito comum, em um mar de conhecimento, a gente ficar perdido sobre qual caminho seguir, o que estudar, no que focar, se a nossa aptidão está mais em desenvolvimento, planejamento, gestão ou alguma outra função. E não é diferente na área de TI.

Eu indico você a ler esse artigo bem bacana do Tulio Calil:
"Desenvolvimento talvez não seja pra você", porque é super importante nesse ponto inicial você compreender em que localização você está, se essa área de desenvolvimento se encaixa no seu perfil.

Pra você que se interessa na carreira de desenvolvedor, seja em qualquer nicho, é importante analisar qual é o atual panorama desse ambiente, além das reais possibilidades, e saiba que tem muita vaga pra diversas subáreas e falta profissional qualificado.

Fiz a análise, e agora?

Analisou? Conseguiu se encontrar nessa rede gigante?
Busque uma direção, exemplo, quero ser dev mobile, então escolho com quais tecs quero quer trabalhar, iOS ou Android? Se quero realizar desenvolvimento nativo com Swift ou Java, ou se prefiro trabalhar com desenvolvimento híbrido com Flutter ou React Native, tem também a Xamarin e Web Apps.

É nesse momento que você consegue ver que a linha de pesquisa se afunila, busque entender o que você passará e o que será preciso aprender como dev dessa tecnologia. É aqui que se busca o desenvolvimento das habilidades, é preciso persistência e disciplina.

Faça um roadmap (um site muito bom https://roadmap.sh/), aprenda sobre a sua stack:

procure um bom curso de lógica de programação, aprenda a teoria por trás dos algoritmos, as diferentes estruturas de dados;
veja quais são os fundamentos da sua stack;
leia sobre layouts, a componentização de uma UI;
procure sobre responsividade.
compreenda sobre como é utilizada a memória, como otimizar e como gerenciar;
compreenda sobre processamento, multithreading e gestão das filas;
como realizar o gerenciamento de dependências;
coloque em prática as boas práticas de arquitetura e design patterns
faça testes, sempre!
leia sobre CI e CD

Tenha em mente o processo de melhoria contínua, principalmente no que diz respeito à qualidade do seu código, siga as convenções e padrões, nada de colocar nomes de variáveis e de funções que não são legíveis, responsabilidades bem definidas e separadas também são importantes.

Os diferenciais que posso ter

Busque colocar em prática alguns princípios e metodologias como o TDD, KISS e SOLID. Seja faminto por conhecimento e seja humilde o suficiente para dizer que sabe pouco sobre alguma coisa, mesmo que sua bagagem seja grande. Já dizia Steve Jobs:

Stay hungry, stay foolish.

Desenvolva sua autonomia no aprendizado, focando em evolução contínua porque você precisa ser sua própria motivação, saiba filtrar o que lhe cai bem dentro da sua bagagem de conhecimento, seja organizado, seja curioso, corra atrás.

Vale à pena sim saber sobre hardskills e principalmente softskills, super importante para quem quer evoluir e ser dev sênior. Trabalhe sua comunicação, a proatividade, a resiliência, saiba gerenciar seu tempo, mais uma coisa, não se apegue a uma linguagem de programação, tecnologias vêm e vão, mas a teoria por trás delas são as mesmas.

E é isso pessoal! Gostou? Compartilha!