Fala aí meu Povo!

Elves na área.

Let’s Rock?

Escrever um artigo é sempre um desafio, seja porque você expõe o que pensa para o crivo alheio, seja porque quanto mais você lê e relê mais parece que dá para melhorar ou que ficou faltando alguma coisa.

Pensando nisso entrei nesse desafio com essa cabeça, haverão críticas e o que escrevi está incompleto … o que é muito bom pois pode nos levar a uma reflexão sobre os temas, onde todos nós saímos ganhando … então bora abrir o coração.

De acordo com a última Pesquisa Nacional por Amostra de Domicílios (PNAD), divulgada pelo Instituto Brasileiro de Geografia e Estatística (IBGE),  em setembro de 2022, 90% dos lares brasileiros tem acesso a internet, e em 99,5% desses lares o telefone celular é usado para acessar a internet, com base nisso é inimaginável que as empresas que querem explorar esse ambiente não tenham em suas equipes profissionais preocupados com o desenvolvimento, migração e manutenção de aplicativos e soluções para o acesso aos seus produtos e serviços através de dispositivos móveis.

Atualmente essas aplicações são desenvolvidos tentando abranger o maior número de tecnologias possíveis então busca-se desenvolver para os navegadores, que são softwares especializados em ler e exibir as páginas da internet, e disponibilizar aplicações em sites,  e que permite uma infinidade de dispositivos, incluindo não móveis como smarts TVs e computadores, mas principalmente para o Android, que é sistema operacional da Google e está presente na maior parte dos smartphones, tablets e smart Tvs, e o iOS que é o sistema operacional da Apple - presente no iPhone, iPad, Mac, Apple Watch e Apple TV. Esse tipo de desenvolvimento é chamado de MOBILE (pronuncia-se mobal, com o 'mo' fechado como em moeda).

Partindo desse ponto, nesta última semana tivemos a Santander Devweek 2023, um aperitivo para o Santander Bootcamp 2023, foram quatro dias apresentando um pouco de algumas “ferramentas” e seus potenciais, onde em cada dia o objetivo era criar a tela inicial do aplicativo do Santander, para mobile e, em uma tecnologia diferente.

Como sou novo, não de idade porque aos 43 já tenho alguma malandragem - digo experiência - adquirida, mas novo na área de tecnologia, percebi nas interações do chat que muita gente como eu, também iniciante, ouviu a frase:

“Agora que instalamos o framework, bora codar?”

como sendo :

“Τώρα που εγκαταστήσαμε το πλαίσιο, ας κωδικοποιήσουμε;”

que segundo o google tradutor quer dizer:

Por esse motivo optei por escrever um artigo que busca resumir um pouco a finalidade de cada dia do “esquenta” e trazer um glossário com alguns termos que foram utilizados. Assim o principal objetivo desse artigo  é quebrar o gelo com a área de tecnologia e tornar a interação mais amigável.

1º Dia - Angular e TypeScript

O primeiro dia foi voltado ao desenvolvimento do app para navegadores, e o Felipão deu um show de sagacidade e conhecimento técnico, em cultura mangá e anime, mas sobretudo em Angular com TypeScript. Ele apresentou o framework e mostrou o milagre da multiplicação dos components: onde o desenvolvedor consegue criar “fôrmas” com características elementais que se mantém, permitindo que essa estrutura seja replicada com essas características, as estilizações e os comportamentos, e que sejam alterados apenas no que as difere em cada elemento, o que traz mais produtividade pois elimina os inúmeros “ctrl+c” e “ctrl+v”, também traz mais clareza e organização, pois o código fica mais “enxuto” e com as partes bem definidas, com arquivos html, css e scripts mais específicos, um para cada component, o que nos presenteia com uma estrutura final que permite uma manutenção facilitada, uma vez que muitas atualizações exigem que haja apenas uma única interação com o component e ela será, automaticamente, replicada em todos os elementos que derivam dele.

A criação de components, através do comando ‘ng’ no terminal também é incrível, pois traz padrões que permitem que cada component tenha as mesmas estruturas. Fundamental para o Front-end;

Para arrematar foi feita a integração do modelo criado com uma API que fornece dados - através do “ng g service” onde o framework não só estabelece as rotas, mas é capaz de servir dados ao site que está sendo criado - uma verdadeira simulação do Back-end.

E para finalizar o TypeScript que trouxe o dinamismo para página permitindo que ela, abastecida através do back-end, seja atualizada com os dados específicos e relativos ao cliente conforme ele interage com a aplicação.

dica show: trabalho em equipe fica mais simples com um “editorconfig”

frase do dia: “O NG é o nosso melhor amigo!” - Felipão

O que talvez estava em grego?

HTML (acrônimo de HyperText Markup Language) é uma "Linguagem de Marcação de Hipertexto", é a linguagem que define a maior partes das páginas ( sites ) e aplicativos na internet. A estrutura básica do html são os elementos que são definidos entre os sinais de menor e maior “< >” e são definidos por tagnames, ou simplesmente tags, que são as etiquetas que definem a “função” do elemento.

Por exemplo, em língua portuguesa temos a estrutura de uma frase - que pode variar - mas em geral é sujeito + verbo + predicado, assim se pensar em uma frase em html poderiamos ter:

A tag “frase” engloba tudo, e cada pedaço está dentro de suas próprias tags, pois tem as suas funções, mas o resultado visível será apenas o conteúdo, como no exemplo abaixo:

O Resultado é uma frase, mesmo que a tag não apareça para dizer, assim como "o Angular" é o sujeito, e "facilita" o verbo, e assim por diante, podemos dizer então que existem inúmeras tags, cada uma com a sua função, e outras tantas a serem criadas pois conforme novos designs são criados novos elementos podem surgir. E assim como a língua portuguesa temos até as questões de semântica - mas aí já é outra conversa.

CSS (acrônimo de Cascading Style Sheets) é uma “Linguagem de estilização em folhas em cascata”, é o caminho encontrado para que os desenvolvedores possam personalizar a exibição dos conteúdos das páginas. De forma bem simples é possível inserir informações para que as tags sejam exibidas com personalizações - mudar fonte, posição, cor, cor de fundo e por aí vai!. No princípio essa informação era inserida diretamente nas tags, mas com o avanço das linguagens, embora ainda possa ser inserido diretamente na tag em geral é feito em um arquivo separado, com a extensão .css, e importado para o html através de um elemento html com a tag <link>.

E nosso exemplo poderia ficar assim:

Perceba que é possível direcionar as personalizações para cada Tag individualmente, o que é uma mão na roda. Lembrando que esta, do exemplo, é apenas uma forma de estilização, diretamente no html, mas que não é a única. 

JavaScript é a linguagem de comportamento, a que fecha a tríade com HTML e CSS, onde o html define o que são as coisas, o css define como elas devem se mostrar e o JavaScript diz o que elas farão. O JavaScript permite dar interações às páginas como reagir aos cliques do usuário, as interações do teclado, os toques na tela, enfim permite que sejam colocadas funcionalidades a todos os elementos de uma página, tornando a experiência muito mais imersiva para os usuários.

Editor de código: são os softwares através do qual são desenvolvidos a maior parte do trabalho de desenvolvedores, é possível criar uma página inteirinha, com arquivos html, css e scripts, apenas com um terminal, ou um bloco de notas, e salvando-se os arquivos com as extensões corretas, mas aplicativos como o  VS Code, um dos mais conhecidos e utilizados, nos auxiliam de diversas maneiras pois trazem diversos recursos que nos permitem identificar com facilidade detalhes de código, distinguindo em cores, por exemplo, os atributos e os valores.

Framework o termo foi cunhado para a área de tecnologia com base em sua tradução literal em inglês “frame” quer dizer “estrutura”, então na construção existem a “Wood frame” e a “Stell frame”, por exemplo, que são construções com estrutura de madeira e aço, respectivamente, mas o termo Framework refere-se a estrutura de trabalho, ou seja, é a estratégia, a abordagem, que será utilizada na solução de uma demanda, entendendo isso podemos dizer então que o Angular, que é um framework, é apenas uma, de muitas maneiras, de se abordar a codificação de aplicações para a web.

API (acrônimo de Application Programming Interface) a “Interface de Programação de Aplicações” é uma ferramenta, com as definições e protocolos que subsidiam a criação de aplicações mais complexas e de softwares. De modo simples são aplicações que ligam diferentes pontos do aplicativo, através de procedimentos internos, são capazes de fornecer soluções e serviços, sem a necessidade de implementações complexas e geralmente são bastante específicas em suas respostas. No exemplo demonstrado na live a API fornece, quando solicitada, os dados dos clientes do banco como Nome, número da conta, número do cartão, saldo, limites, etc.

Front-end e Back-end: embora sejam termos mais acessíveis existe uma analogia que me agrada muito.

Imagine o seguinte: você fez uma reserva em um restaurante, vai até o estabelecimento e é muito bem recebido pelo garçom que lhe entrega um menu, após alguma conversa ele lhe sugere um bife à milanesa com um vinho tinto, você aceita a sugestão do bife e troca o vinho por um suco de laranja. E, após apreciar uma das melhores experiências gastronômicas de sua vida, pede a conta, paga e vai embora.

Quando utilizamos aplicações na web, é de certo modo a mesma coisa:

• ao digitar um endereço no seu navegador você está fazendo uma reserva;
• que se confirmada, te dará acesso ao site (restaurante);
• em muitos sites a interface visual vai te mostrar muito do que você pode encontrar ali; e às vezes faz até sugestões (o menu e o garçom)
• você escolhe o que veio ver no site, clica em um link e é direcionado para o que quer ver ( faz a sua escolha e seu pedido, que é preparado na cozinha e entregue na sua mesa);
• após você consumir o seu conteúdo a sua interação termina (se você for embora)

Para que tudo isso ocorra existem diversos processos que deverão ser feitos, muitos precisarão da interação com o cliente e outros não. Todos os processos em que há essa interação pertence ao Front-end e os que não existe essa interação são os de Back-end. Então se você pede o bife e recebe de acordo, de um modo que te agradou, pouco importa o back-end - se foi frito na manteiga ou em óleo, se era alcatra ou coxão mole, se os tomates eram frescos ou enlatados, se a farinha de rosca foi comprada ou se foi produzida no restaurante, o que quero dizer é todas as variações que ocorrem por trás das portas da cozinha são importantes, pois alteram o produto que lhe é servido, mas se forem bem feitas não afetarão negativamente a sua experiência. Da mesma forma se você acessa um site, clica em um link e o conteúdo entregue lhe agradou, pouco importa se a rota com o servidor era a mais correta, ou se os processos vieram de uma API ou foram feitos pelo site, se o servidor é em São Paulo ou Los Angeles, se a experiência for positiva o back-end, assim como a cozinha no restaurante, terá cumprido seu papel. E aqui podemos concluir o seguinte embora o cliente não esteja vendo a cozinha (o back-end), se não há carne, não há tomates, não profissionais habilitados para o preparo, não há cadeiras, talheres, enfim sem esse serviço o pedido não será feito, ou não será entregue, o que quero dizer é que sem uma cozinha adequada não adianta um garçom polido e um menu bonito. Sem um bom back-end não há porque se ter front-end.

2º Dia - Android / Kotlin

A proposta do segundo dia era desenvolver o app para aplicativos baseados em Android, uma tendência se pensarmos em Mobile, e aí nada mais justo que Kotlin, que em 2017 foi adotada como a linguagem de desenvolvimento oficial do Android, pela Google, juntando-se ao Java e ao C++.

Para dissecar o Kotlin tivemos o Igor e o Ezequiel, que fizeram um bate bola digno das grandes duplas de ataque estilo Pelé e Coutinho.

A produção do app seguiu o mesmo princípio do primeiro dia, a componentização,  ou seja, o Igor e o Ezequiel buscaram a todo momento criar os elementos de modo que pudessem ser replicados e não só isso mas que pudessem ser dinâmicos e interagir com o back-end, permitindo que algumas manutenções sejam automáticas, pois a inserção de elementos ligada ao retorno da API permite que essa ação aconteça apenas com  atualizações de back-end, ou dos bancos de dados, assim se o back-end retorno um item a mais o aplicativo irá renderizar dinamicamente um elemento a mais.

O uso do compose é de grande auxílio, mas é importante lembrar que há algumas funções, e métodos, que podem estar em estado experimental - aí é a documentação que pode ajudar.

A Cami foi uma super anfitriã e a dica dela no final da live das gravações para entender um pouco a construção do back-end foi demais.

E a persistência do Igor, no final da live, para ajustar um percalço com os devices são um excelente exemplo de resiliência para todos nós que ingressamos nessa área, nem sempre vai dar tudo certo e tudo bem, você estuda o erro e corrige, e assim se aprimora.

dica show: é sempre importante ter cuidado com as informações que garantem acessibilidade.

frase do dia: “É legal sempre ter um Preview … pra gente ir acompanhando …” - Igor

O que talvez estava em grego?

Figma embora já tenha sido citado no primeiro dia, o Figma do produto foi mais explorado nesse segundo dia, o Figma é uma plataforma colaborativa, que permite a pessoa responsável pelo design desenvolver o resultado visual de produtos de tecnologia, sejam sites ou aplicativos, e compartilhar com os desenvolvedores, e não apenas os resultados visuais mas também muitas relações entre os entes do projeto podem ser visualizadas no Figma - detalhes de navegação, animações e interações por exemplo.

3º Dia - iOS com Swift

O terceiro dia começou tenso o Robinho teve um contratempo clínico e foi parar no DM, como não podia entrar em campo foi substituído pelo Fernando que não deixou o padrão de jogo cair e deu um show com inúmeras assistências;

A pegada seguiu a tendência do mobile e como foi tratado o Android no dia anterior o foco de hoje foi o iOS.

A live começou quente e já desmistificando a ideia de que se precisa de um equipamento de uma MAC, ou outro dispositivo da Apple para desenvolver para iOS. Muito legal a apresentação inicial e do Fernando situando a questão da migração do Objective-C para o Swift. E o arremate de saber que o Swift, além de abarcar todas as necessidades para criar aplicativos iOS nativos para dispositivos da Apple (como o iPhone e o iPad), também pode ser utilizado para multiplataformas.

O uso de Stack que se inserem ordenadamente, trazendo uma auto organização pela orientação vertical e horizontal, se mostrou muito eficiente no desenvolvimento do app,  possibilitando inclusive o encadeamento com as stacks dentro de stacks.

O Fernando deixou clara a ideia, mesmo que não fosse o objetivo, do ViewModel armazenar as informações que vem através do model e distribuir para o view gerar a visualização; E em dado momento um show de humildade lembrando que não nasceu brilhante, mas que foi sendo “lustrado” pelos erros da vida de desenvolvedor.

A percepção, no final, de que o primeiro componente levou uma década para sair e os outros foram feitos em questão de segundos é muito bacana - fica sensível que com o domínio da tecnologia e dos princípios ganhamos muita produtividade quando o assunto é código.

Menção honrosa ao Venilton que ficou fervendo o chat durante a live toda, assim ele manteve o chat focado e evoluindo na discussão - é comum o chat dar uns perdidos quando é uma live, não percebi isso nessa - Salve Venilton!

dica show: se você é desenvolvedor iOS use stack que facilita

frase do dia: “No começo você vai errar muito layout … mas assim, vai pra cima e não tenha medo” - Fernando

O que talvez estava em grego?

Stack a tradução mais literal do termo talvez fosse “Pilha”, no sentido de se empilhar, mas o conceito é mais no sentido de “fila” - segue uma lógica bem comum na gestão de estoque, ou de atendimento: o primeiro que entra é o primeiro que sai; Na aplicação do layout o “VStack” e “HStack” organizam a visualização respectivamente em  verticalmente e horizontalmente,  assim o primeiro VStack declarado vai ser exibido antes do segundo VStack, por padrão acima se não houver outra configuração que mude essa visualização, da mesma forma o primeiro HStack será exibido antes do segundo, por padrão mais à esquerda, se não houver mais configurações.

MVVM (acrônimo de Model View ViewModel) - é bem mais complexo que isso - mas de certo modo, e para ser amigável, é um modelo de se implementar as coisas onde o “model” é o módulo responsável pela lógica de negócio, o “view” é o módulo responsável pela apresentação visual, mas eles não se “conversam” é o “viewmodel” que faz essa interação entre os dois; isso deixa o código mais limpo em cada módulo pois cada um é especializado em um aspecto, então é mais simples identificar e solucionar os erros, um erro de cálculo, ou um dado carregado errado, devem estar no model,  enquanto que uma cor, ou espaçamento estarão no view, por exemplo.

4º Dia - Flutter com Dart

O quarto, e último, dia foi destinado ao Flutter, um framework open source (de código aberto) que foi desenvolvido pela Google em 2015, e que tem por objetivo ser capaz de, com um único “código base“, desenvolver aplicações para Android, iOS, Windows, Mac, Linux e Web. Neste ponto, como percebemos através dos três primeiros dias essas linguagens, e arquiteturas, podem ser bem diferentes e isso pode ser um problema.

Para isso o Danilo, foi mestre na sacada da estratégia da live, ele optou por não codar ao vivo, ao invés disso ele mandou ver uma gravação do app do Santander sendo criado com Dart e não bastasse o vídeo fantástico, tanto no conteúdo como na didática, ele ficou ao longo do vídeo interagindo com os comentários no chat - simplesmente uma outra aula em paralelo - genial.

No quesito estrutura nenhuma novidade a ideia dos componets se mantém, em dado momento tem até uma stack ali no meio, mas é importante atentar para uma informação lá do começo da live, dependendo do grau de especificidade que a aplicação vai exigir, das interações com controladores e hardware, pode ser que seja preciso o desenvolvimento nativo na linguagem específica do dispositivo.

A mestre de cerimônia Aline conduziu com maestria a live, interagindo muito bem com a galera do chat e traduziu muito bem os anseios do público quando interagiu com o Danilo. 

dica show: é importante tentar imaginar como uma aplicação deve funcionar antes de começar a desenvolver o código, a visão do todo faz a diferença

frase do dia: “...toda tecnologia que vocês escolherem vai agregar muito na carreira de vocês” - Danilo

O que talvez estava em grego?

CRUD (acrônimo de Create Read Update e Delete) é basicamente um sistema que realiza quatro operações em interações com bancos de dados, na ordem do acrônimo: Insere um novo dado, Consulta um dado já existente, Atualiza informações no banco de dados e Remove dados do banco. Apesar de parecer simples esse tipo de sistema pode assumir grandes graus de complexidade a depender da sensibilidade e utilização dos dados, e é uma das principais demandas no desenvolvimento.

Mocar ou Mockar vem do inglês, do termo mockup que significa maquete ou simulação, quando estamos desenvolvendo em alguns momentos teremos o layout e regra de negócio, mas a API, ou o back-end ainda não estão fornecendo as informações que serão solicitadas na aplicação neste ponto é possível “mocar” um back-end, ou uma API,  isto é, você vai criar uma rota que recebe uma simulação do que será entregue pelo back-end depois e com isso pode caminhar no desenvolvimento e nos testes da aplicação com simulação de dados enquanto aguarda os dados reais.

Conclusão

É isso galera foi uma experiência muito interessante, intensa e desbravadora,  mesmo para quem não conhecia a maior parte dessas linguagens e tecnologias o simples exercício de tentar entender alguns termos já me ajudaram a ampliar a visão sobre a área de TI.

Conhecer um pouco do Angular, Kotlin, Swift e Flutter permitem a quem está ingressando ná área não apenas sentir um pouco da pegada da liguagem em cada caso, mas ter um gostinho da complexidade e potencial de cada ferramenta, possibilitando a quem ingressa na área, sem medo, optar por um ponto de partida.

Aqui vai uma percepção pessoal - o Danilo terminar a semana com a dica de que toda tecnologia vai agregar me tranquilizou muito pois, independente do caminho que eu escolher agora ele vai estar certo lá na frente, basta agregar e percorrer um novo caminho. No fim das contas, assim como não se pode cruzar duas vezes o mesmo rio, o conhecimento jamais parte do zero duas vezes.

Abraço a todos!

E que a força esteja com vocês!