Forem: Rodrigo Régio

Breve resumo dos meus projetos desta semana

Rodrigo Régio — Sun, 27 Mar 2022 21:01:48 +0000

Bom dia, boa tarde e quem sabe boa noite a quem este post possa interessar. Mais uma vez venho compartilhar o que fiz esta semana relacionado aos meus projetos pessoais. Tentarei ser breve aqui.

Pra quem ainda não sabe na semana passada publiquei um post só dizendo que não estava bem pra estudar, e nem pra nada sinceramente, e só coloquei uma tag famosa (ou brasil ou braziliandev) porque não queria mesmo que muitas pessoas o lessem. E pra quem não lembra estou com praticamente dois projetos pessoais esses dias, um é treinamento de angular que decidi usar o appideas pra fazer os projetos e outro é um projeto de plataforma de blog que criei já o back end e agora estou fazendo o frontend. O que dá angular ou angular.

Tá continue...

E essa semana voltei a desenvolver o frontend da aplicação de blog com angular. Já havia desenvolvido a tela inicial (que carrega os posts com a barra de menu). E então fiz algumas coisas nele, movi a parte dos posts do blog para um componente (que dei o nome de index-posts) e deixei a barra de menu com o appcomponent.

Para fazer essa transição foi relativamente simples, só copiei e colei a div (container, posts, completa) no componente criado. Copiei também a parte do css relacionado a isso. E colei a lógica do arquivo .ts (que fará carregar os posts).

Criei um componente para registros de usuários onde no html simplesmente adicionei os campos referentes a um usuario (email, senha, nome e bio) e no css só enlargueci eles para ocupar a largura da tela. No arquivo .ts eu simplesmente falei para dar um console.warn e mostrar os dados inseridos no console (depois terei de implementar a lógica de inserir o usuário). Ah e coloquei para que o item do menu que criei na ultima vez (que tinha um item lá para registrar).

A imagem abaixo mostra o item de menu que citei...

E aqui abaixo como está o componente criado.

E aí teve alguma dificuldade com o angular??

Minha maior dificuldade foi e está sendo para exibir esse componente. Primeiramente queria que quando abrisse o componente de registro fechasse o index-posts, mas como o angular foi feito para single page ele abre na mesma página que o index-posts (exibindo assim a página de registro e os posts). Se alguém souber como fazer isso eu agradeço imensamente. E o resto (que é chamar o componente quando clicar no menuitem) até que foi tranquilo...

E vamos aí tentando continuar a vida e os projetos pessoais de estudo.

Agradecimentos

Agradeço a todos que leem estes meus posts (registro de atividades em projetos pessoais) vocês são demais :-) mesmo...

Semana que vem posto o que fizer mais.

Nenhum projeto essa semana

Rodrigo Régio — Sun, 20 Mar 2022 07:13:09 +0000

Bom dia, boa tarde ou, quem sabe, boa noite...
Hoje não vai ter um post muito elaborado porque esta semana me bateu uma bad muito grande devido a algo que aconteceu no sábado da semana passada. Mas relaxem não foi nada grave ou que me machuquei, físicamente estou muito bem, mas mentalmente abalado.

Só foi algo que falaram e me machucou muito, e nem foi pra mim, mas pra alguém muito próximo. E aí desde então não estou animado pra nada, e minha vontade desde então é ficar em casa e se possível dormindo.

Eu poderia pedir conselhos ou perguntar o que vocês fazem quando isso acontece, mas como nada adianta pra mim não irei fazer isso kkkk (ou melhor rsrsrsrs).

Mas é isso, nada fiz essa semana.

Então, devido a isso, não fiz nada. Nenhum projeto novo, nem incrementei meus projetos. Nem o de angular, nem o de Blog, não estudei as aulas direito essa semana (consegui estudar uma matéria só) e as coisas não rendem.

É isso, se quiserem comentar algo, podem usar aqui ou qualquer uma das minhas redes sociais. Eu poderia colocar elas aqui mas...

Ps.: Sei que não deveria postar isso aqui, mas sei lá só estou justificando o porque de não ter um post mais bem elaborado essa semana.

Tentando ir pra frontend, e agora?

Rodrigo Régio — Sun, 13 Mar 2022 10:40:04 +0000

Só pra contextualizar a todos, recentemente resolvi alguns problemas de responsividade no sistema da empresa que estou trabalhando e meu coordenador disse que estou me saindo melhor com o frontend do que com o backend. Quando ele disse isso pensei logo "e agora!", terei que aprender o Javascripto (como alguns streamers dizem na twitch). E pra quem não sabe sou dev Jr Java em uma empresa de semáforos.

Pra mim não há problemas em tentar ajustar telas, mas o sistema usa Angular JS e não conheço muito de JavaScript, nem Angular e menos de Angular JS. Então o que estou tentando fazer pra aprender sobre isso?

Já estava sabendo um pouco que o Typescript possui algumas caracteristicas do Java, como a linguagem ser tipada (ter que declarar o tipo da variável), possuir herança, encapsulamento, etc.

Devido a essa minha rejeição ao Javascript e já conhecer sobre java decidi tentar aprender a usar o TypeScript. E como o Angular usa o TypeScript decidi iniciar um ou alguns projetos para treinar o frontend com o Angular. Como isso já tem algum tempo (algumas semanas) já estava tentando aprender algo, porém foi mais rápido do que eu tive tempo pra aprender.

Então pensei, nada mais apropriado para aprender do que o repositório AppIdeas

E como todo aspirante a desenvolvedor brasileiro já sabe (graças ao Felipe Deschamps que falou em seu canal) temos o repositório chamado AppIdeas do florinpop17 veja o repositório aqui que possui algumas idéias de aplicativos para fazer. PS.: Sempre achei que esses aplicativos desse repositório eram melhores de fazer com JS ou por devs frontend, por isso nunca fiz muitas dessas ideias.

E se você não conhece explicarei um pouco sobre ele.

Como disse vou dar uma de Delipe Feschamps rsrs. O repositório possui algumas ideias de aplicativos para desenvolvedores de todos os níveis. E essas ideias possuem alguns check points (chamados User Stories) que devemos passar antes de concluir o aplicativo. Por exemplo no primeiro (de conversão de base decimal para binário) temos os seguintes pontos:

[x] O usuário pode inserir até 8 dígitos binários em um campo de entrada.
[x] O usuário deve ser notificado se um digito for diferente de 0 ou 1.
[x] O usuário visualiza o resultado em um único campo de saída contendo o decimal (base 10) equivalente ao binário inserido.

A ideia de app possui também alguns recursos extras (bonus features). E o de bin2dec é a abaixo:

[x] O usuário pode inserir um número variável de dígitos binários.

Aqui que eu buguei um pouco, no primeiro ele diz que pode ter até 8 bits em um campo de entrada e depois pede pra poder inserir quantos bits o usuário quiser. Mas tudo bem deixei como a bonus feature pede. Aliás pode ser que eu não tenha entendido direito, e se você entendeu me explique pois buguei mesmo rsrs.

Mas e aí teve alguma dificuldade? fez o aplicativo bin2dec??

Como falei sim fiz a appidea e pesquisando sobre descobri que possui uma função no JS que já converte uma string para um numero de base que quisermos (tá não sei se todas, mas eu acho que sim rsrsrs) que é a parseInt(numeroAConverter, base) então em meu arquivo bin2dec.component.ts criei uma função que chama a parseInt. Esta função possui alguns itens que precisam ser validados (devido aos user stories) como se o valor digitado é diferente de 0 ou 1.

E no html fiz campos de input de texto mesmo, porém da forma abaixo:

<div class="container">
    <div class="title">
        <h2>Bin2dec</h2>
    </div>
    <div class="body">
        <p><input ngModel #formBin="ngModel" type="text" class="inp" placeholder="Binary value here" value="0"/> to <input type="text" name="decvalue" id="decvalue" class="inp" placeholder="Decimal value here" [value]="valorMudouBin(formBin.value)" value="0"/></p>
    </div>
    <div class="erro">
        <p class="binv" [hidden]="incorretobin">O valor digitado não corresponde a um numero binário!</p>
    </div>
</div>

Explicarei resumidamente o código acima. A primeira div que criei é um container simples, a segunda é um titulo (poderia ter usado outra tag, mas rsrs), a terceira é um corpo do app, com um parágrafo que tem dois input de texto (um pra input binario e outro decimal rsrs) e temos o ngModel que não sei ao certo pra que se usa, mas no meu caso serve para ter uma ligação entre os input , então o que eu digitar em binário será convertido em decimal no outro campo enquanto estiver digitando.

Para usar este recurso de conversão simultânea (chamo assim porque é ao mesmo tempo) precisamos importar o form module no arquivo app.module.ts (arquivo que toda aplicação Angular possui) com o código abaixo:

import { FormsModule } from '@angular/forms';

E colocar na seção de imports do mesmo arquivo que iremos utilizar ele.

Ah ia me esquecendo, a ultima div do codigo html é pra informar o erro ao usuário como pede a segunda user stories e se for digitado um caractere invalido será mostrado ao usuário com o [hidden]="incorretobin" esse incorreto bin é uma variável booleana que está no arquivo bin2dec.component.ts (o mesmo que possui a função de conversão). E quanto a isso meu aplicativo notifica, mas se a pessoa digitar um numero valido (0 ou 1) a notificação irá sair. Então se souberem como fazer isso podem me notificar aqui (ou no git hub). Então a primeira appidea atinge todas as user stories (1 a pessoa pode digitar um byte, 2 é notificado quando digita valor incorreto, 3 visualiza o resultado em um unico input de texto) e ainda a bonus feature (pode digitar quantos bits quiser rsrs).

E assim está ficando o projetinho de appideas:

Referencias

Basicamente pesquisei a documentação do angular em angular.io e outras pesquisas menores como este site que decobri como linkar inputs, e outros que pesquisei mas não ajudou muito (ou de certa forma ajudou a organizar minha forma de pesquisar para atingir o objetivo final). E este é o meu repositório onde estou treinando angular https://github.com/boirods/appideas_angular.

E por enquanto é isso, obrigado a todos que leem meus posts, agora vou pegar outra appidea e incrementar o app de appideas rsrs, e até semana que vem...

Continuando meu projeto de estudo

Rodrigo Régio — Sun, 06 Mar 2022 23:58:42 +0000

Bom dia, boa tarde ou até quem sabe boa noite a todos. Boirods aqui e queria trazer mais atualizações sobre o meu projeto feito com o framework Play (que é para Java e Scala).

Relembrando...

Só falando novamente sobre ele, ele é uma aplicação de um blog e a parte da API já foi feita com sucesso. E agora estou fazendo o frontend com Angular.

Para fazer o Play conversar com o Angular segui este post no medium onde ele fala que podemos criar um projeto play já com angular através de algumas seed dele. Mas isto é para quem está iniciando o projeto então continuei a ler o post.

E em seguida ele dá exemplos de como integrar o play com o angular e ele aborda os seguintes:

Construir o back e o front end isoladamente onde a comunicação é feita pela api rest.
Construir ambos back e front no mesmo projeto: usando scala views para expor frontend entrypoint e comunicar com o backend pela api rest.
Construir ambos back e front no mesmo projeto: usando rotas estáticas do play para servir o frontend e comunicar com o backend usando a api rest.

E em cada item destes ele dá pontos negativos e positivos em usar essas abordagens. E ele diz que usará a ultima (com rotas estáticas). E aí ele inicia o desenvolvimento.

Pra começar ele cria uma pasta chamada "ui" (não, ele não sentiu dores rsrsrs, traduzindo é UserInterface ou em ptbr interface do usuário). E diz pra utilizar o Angular CLI para criar o projeto.

Depois ele pede para alterar o arquivo package.json para usar algumas coisas como as configurações proxy (indicando o caminho do arquivo proxy.conf.js). E tem lá como criar o arquivo proxy.conf.js veja no link informado no começo do post.

Criando alguns arquivos.

Após isso ele cria alguns arquivos .scala na pasta do Play (não entendi bem o porque, sendo que a minha aplicação é em Java).

Arquivos como o FrontEndCommands.scala (este é na pasta project do play) e ele terá alguns comandos em String que serão executados após o play iniciar, comandos como o npm install (para dependencias) e npm run entre outros.

O FrontEndBuilds.scala (também na pasta project) e ele será responsável por executar os comandos no arquivo anterior.

O arquivo ui-build.sbt (este arquivo deve ser criado na pasta raiz do play. Este arquivo irá construir o projeto e executar.

E aí ele cria na pasta controllers (que o play cria automaticamente) um arquivo chamado FrontendController.scala. E cria uma rota para este novo controller (o arquivo de rotas fica em conf/routes, onde o nome do arquivo é routes mesmo rsrs). E é isso, sua aplicação Play e Angular já deve funcionar.

O que deu certo e errado nisso?

E aqui comigo funcionou normalmente. E iniciei o desenvolvimento do blog, já coloquei algumas coisas como uma toolbar (angular material), tentei colocar algumas coisas mais como ícones (na toolbar) este é um que não deu certo e removi todos, sidenav é outro que não deu certo (ao menos como queria, tive problemas apenas no css), e outras coisas que não lembro agora.

E como teste fiz para que a pagina inicial mostre alguns posts já criados. Para isso pesquisei sobre requisições http aqui e tive alguns problemas com o play e algo chamado CORS, que basicamente e o que entendi é que é um problema em requisitar dados de outra fonte e no mesmo computador e resolvi com este link.

E é isso pessoal acima está uma imagem de como está ficando o design, calma, ainda vou melhorar e só pintei o fundo pra ver como fica.

E está começando minhas aulas e procurarei postar com a mesma frequencia, mas se eu sumir já sabem klkkk.

Agradeço a todos que estão lendo meus posts... Ia me esquecendo o link do repositório do projeto aqui

O que estou fazendo?? Um projetinho de estudo.

Rodrigo Régio — Tue, 01 Mar 2022 15:25:17 +0000

Olá a todos, boirods aqui, e na semana passada falei sobre fazer algo relacionado a TI ou qualquer outro projeto, e aí você pode ter se perguntado mas o que você está fazendo??

Sobre o meu projeto atual...

Estou fazendo, para estudo mesmo, uma aplicação de um blog feito em Java com o Framework Play! link aqui. Já desenvolvi algumas coisas nele, como a API, e tentarei demonstrar como consegui chegar até aqui.

Primeiros passos

Bom eu poderia fazer um tutorial aqui de como iniciar o desenvolvimento com ele, mas como meu propósito não é esse, de ensinar algo, e sim de conversar sobre isto e registrar meus passos tomados. Então vamos lá:

Primeiro de tudo procurei iniciar o desenvolvimento com a criação de um diagrama de classes. Para isso eu uso geralmente o (antigo draw.io)[https://www.draw.io] que hoje é diagrams.net. O diagrama como você verá possui basicamente 3 classes (user, post e media).

Sobre as classes

Sobre este diagrama criei da seguinte forma, criei uma classe chamada BaseModel que contém somente o atributo id, o construtor e um método abstrato para pegar o id (métodos abstratos todas as classes que extenderem essa classe base terão que implementar, ou seja codar, este método)e todas as classes extenderão ela terão o ID e um metodo para pegar este id.

A classe User no caso tem os atributos id (que vem da classe base), email, nome, bio e data de registro e tem os métodos getters e setters para alguns dos atributos informados. Os atributos id e data de registro são dados sem métodos setters porque eles são gerados no momento de registro do usuário no sistema. O usuário ainda terá na classe Java um atributo chamado posts que é uma lista de todos os posts do usuário no sistema, e este atributo representa o relacionamento da classe User com Post, ou seja, este é um relacionamento de um pra muitos (um usuário poderá ter muitos posts).

A classe Post que representa um post no aplicativo de blog possui os atributos id (que vem da classe base), titulo, conteudo, upvotes (que representa a quantidade de likes), downvotes (que representa a quantidade de dislikes). Para atributos de relacionamento o post terá um User (parte do relacionamento onde um post terá somente um User) e teremos também o atributo que é uma lista de medias.

A classe Media (não, não tem nada a ver com média rsrs e sim com) mídia, para caso queiram colocar um video ou uma imagem, tem os atributos multimediaLink e post. Como ja imaginam post é parte do relacionamento onde uma mídia terá um post especifico.

Lembrando que todas as classes tem getters e setters. E outra coisa que quero citar é que o diagrama não é algo fixo, e pode e deve ser alterado durante o desenvolvimento. Inclusive alterei algumas coisas agora pra fazer este post (basicamente coloquei atributos que julgo necessários para o sistema).

Depois disso criei a api

O play segue a arquitetura MVC (Models, Views e Controllers) que basicamente é uma arquitetura onde separamos o sistema em partes que não se deve misturar (pelo menos em projetos corporativos costumam usar esta arquitetura), pois isto facilita a manutenção e edição no sistema. Onde temos o model que deve tratar dos dados do sistema e conversa com o banco de dados. A view que trata da visualização dos dados do sistema, conhecido como frontend e ela estou fazendo com (angular)[https://angular.io] seguindo a documentação oficial, depois faço um post sobre isto pois ainda estou tentando entender como funciona e nunca havia trabalhado com isto. E temos o controller que basicamente faz a comunicação entre o model e a view.

Após o diagrama criado criei todas as classes de modelo citadas acima (BaseModel, User, Post e Media) e foram salvas na pasta Models (que é criada quando iniciamos o projeto no Play!).

Temos ainda a pasta controllers que basicamente faz a comunicação entre a visualização e o modelo. Então para cada classe criada no modelo criei uma classe no controller (basicamente criei com o mesmo nome mas com o final Controler, user por exemplo ficou UserController.java) estas classes possuem um atributo que é o que elas representam (User, Post ou Media) e métodos que basicamente tem o mesmo nome e são eles:

salva(Request requisicao) que recebe a requisição HTTP e pega os dados do Json e o converte em um objeto válido no sistema. E depois o salva no banco de dados.
altera(Request requisição, String id) que recebe uma string que é o id do usuario que se deseja alterar. O método recebe o id na URL exemplo: localhost:porta/api/user/uma-uuid-que-é-muito-grande e o converte em um objeto UUID (que é um id único universal) (caso queira saber mais leia aqui na (wikipedia)[https://pt.wikipedia.org/wiki/Identificador_%C3%BAnico_universal]) e com os dados da requisição faz basicamente o que faria no salva porém alterando o objeto desejado.
pegaTodos() que somente retornará todos os dados existentes no banco de dados.
pegaId(String uuid) que recebe o id na url e retorna os dados do usuario especificado.
apaga(String id) este o próprio nome ja diz tudo, apaga o post com id informado na url.
pega"Atributo"(String atributo) este é de acordo com a classe, e é utilizado para pesquisas. Por exemplo no usuario podemos pesquisar por email, então uso o pegaEmail(String email). Para o post, eu poderia pesquisar pelo titulo e usaria o pegaTitulo(String titulo). E não criei para a midia por não achar necessário rsrs.

Todos eles recebem a requisição HTTP que terá os dados para a api funcionar.

E após (ou melhor durante o desenvolvimento d) estas classes e métodos temos que adicionar elas no arquivo de rotas que é criado juntamente ao criar o projeto no Play Framework (este arquivo fica na pasta conf) que basicamente fica desta forma (colocarei a do usuario):

Desculpem a todos, mas não consegui formatar o codigo do meu arquivo, mas se desejar pode conferir no link do meu repositório aqui

Nele temos basicamente o + nocsrf que no meu entendimento trata de algo para autenticação (como disse não estou aqui para ensinar, então se quiser mais detalhes visite a documentação do play) e no caso disse que não quero autenticação. Na linha de baixo temos o método HTTP, o caminho que se deve acessar para conseguir os dados e a classe que deve ser chamada. Então basicamente estamos falando ao Play que para isto não queremos autenticação, e se for uma requisição get e vier de /api/user queremos salvar o usuário.

E abaixo segue imagem de como ficou meu postman para testar se estavam funcionando

Referencias usadas para chegar na conclusão da api

Para chegar até aqui pesquisei muito a documentação do Play Framework https://www.playframework.com/.

Pesquisei bastante sobre o Jackson no site do Baeldung (que tem uma documentação massa) e pode conferir aqui -> https://www.baeldung.com/jackson

E outra coisa que também pesquisei muito foi sobre o ORM utilizado pelo Play Framework, e o ORM "padrão" (disse entre aspas porque é o que tem mais documentação sobre o play e ele) que utilizei foi o Ebean, então pesquisei muito sobre ele... link dele aqui -> https://ebean.io/ e para utilizar ele precisei verificar também o repositório https://github.com/playframework/play-ebean.

E sobre o banco de dados que estou utilizando é o SQLite, não comentei muito sobre ele porque o ORM já faz tudo o que preciso sobre banco de dados.

É isso pessoal, valeu por tudo e quando tiver algo pronto do frontend com angular posto aqui... E se tiverem alguma duvida sobre o desenvolvimento vocês podem acompanhar aqui no meu repositório e me perguntar aqui também que terei o maior prazer de compartilhar sobre isso.

A arte de fazer

Rodrigo Régio — Wed, 23 Feb 2022 00:05:12 +0000

Bom este é um daqueles posts que te motivam a fazer o seu portfólio, sei que já tem muito post parecido (e com listas do que fazer)... Quero registrar aqui minha opinião.

E a minha opinião é faça seu portfólio, mesmo que ninguém veja, mesmo que ninguém elogie seu trabalho, mesmo que não seja útil. Faça nem que seja pela sua diversão, que seja algo que você goste.

Muitos podem dizer ah mas eu não tenho o equipamento XYZ (pra não dizer marcas iiii), e com ele eu faria muito melhor. Que nada, a 10 anos não tínhamos esses equipamentos tecnológicos que temos hoje e desde a época de Davinci já tinhamos coisas maravilhosas (como seus desenhos).

Se você quer desenvolver você não precisa de um computador da Nasa. Se meu computador (Deus me livre iiii) quebrasse hoje eu não pararia de desenvolver, porque tenho um Raspberry Pi. Sei que é muito limitado, mas é algo supriria minha necessidade neste momento e ainda faria algo com eletronica iiii.

E só concluindo que mesmo que ninguém veja, mesmo que ninguém fale nada. E faça algo que você gosta, algo que você use, algo que você veja depois e pense "Foi legal fazer isso!". Mesmo que seja copiando tutoriais na internet (mas por favor, dê o seu toque de personalidade)...

E é isso agradeço a todos que lerem, e como disse acima mesmo que ninguém leia, comente, etc iiii estou fazendo isto para treinar também a minha escrita iii

PS.: Isto também é pra mim, pra me lembrar de nunca deixar de fazer algo iii

Testei e estou testando tabnine

Rodrigo Régio — Fri, 18 Feb 2022 01:08:43 +0000

Bom dia, boa tarde e quem sabe a hora que você está lendo isto, mas boa noite...

Bom, aqui quero registrar minha opinião sobre o Tabnine que é um code completion com a inteligência artificial. E esta é a primeira vez que uso isto e sempre procuro me basear com a code completion da IDE mesmo.

Pra quem não me conhece programo em Java a algum tempo, maior parte do tempo não como profissional, e fazem mais de 5 anos. Usava a IDE Netbeans e de uns 2 anos pra cá estou usando Eclipse e recentemente instalei o Tabnine como uma extensão do eclipse.

E decici postar minha opinião sobre a união kkkk.

E sobre esta união nestes poucos dias que estou usando vi que o tabnine é de grande ajuda, mas sabe como é usuários né?? se não reclama de um jeito reclama de outro kkk o que quero dizer com isso é que sinto que ele meio que quer "impor" seu código na frente das opiniões da IDE.

Não que isto esteja errado, mas acho que as opiniões tanto da ide quanto do Tabnine deveriam tentar se mesclar ao invez de estar separado. No link abaixo coloquei o print do codigo que estou fazendo agora com o que estou falando e verá que fica separadinho, mas no meu entendimento deveria ter ambos da ide do tabnine.

Link foto insta

E é isso, você já usou algum AI Code completion?? como o GitHubCopilot?? Comente aqui o que você achou disso.