Categorias
🖥 Desenvolvimento

Packages excelentes do Laravel para desenvolvimento Back-End

O Laravel é um framework PHP, excelente para criar aplicações tanto simples quanto robustas, voltado para o Back-End. Porém o Front-End pode ser implementado tanto separadamente com APIs, quanto dentro do projeto, usando diversos tipos de frameworks (vue, react, bootstrap, …).

Com o Laravel é possível criar desde projetos básicos e simples, até robustos e complexos, contando com uma vasta comunidade de desenvolvedores e uma imensa rede de packages disponíveis. Os packages PHP disponíveis, ficam localizados no Packagist, que atualmente é o principal repositório do Composer. Ele agrega pacotes PHP públicos instaláveis ​​com o Composer.

Abaixo será listado algumas das bibliotecas mais relevantes para usar dentro de um projeto Laravel:

Laravel Breeze

O Laravel Breeze é uma implementação simples de todos os recursos de autenticação do Laravel, incluindo login, cadastro, redefinição de senha, verificação de e-mail e confirmação de senha. Além disso, inclui uma página simples de Profile onde o usuário pode atualizar seu nome, endereço de e-mail e senha.

A camada de visualização padrão do Laravel Breeze é composta de modelos Blade, simples e estilizados com Tailwind CSS, mas também podendo ser estruturado usando Vue ou React e Inertia. O Breeze fornece um excelente ponto de partida para iniciar um novo projeto Laravel.

Laravel Sail

O Laravel Sail é uma interface de linha de comando leve para interagir com o ambiente de desenvolvimento Docker padrão do Laravel. O Sail fornece um excelente ponto de partida para criar um aplicativo Laravel usando PHP, MySQL e Redis sem exigir experiência anterior com o Docker.

Permitindo uma visualização inicial do seu projeto muito mais rápido e fácil sem a necessidade de instalar diversos programas, um para cada tipo de tecnologia que irá utilizar dentro do projeto, aglomerando tudo dentro de containers Docker.

Laravel Telescope

O Laravel Telescope é uma ferramenta maravilhosa para o seu ambiente de desenvolvimento local. O Telescope fornece informações sobre as requisições que chegam ao seu projeto, exceções, entradas de log, consultas de banco de dados, jobs em fila, e-mails, notificações, operações de cache, tarefas agendadas ​​e muito mais.

Permitindo um gerenciamento muito maior de todos os erros e ações ocorridos dentro da sua aplicação local em laravel e tudo isso dentro de uma interface muito direta.

Laravel Horizon

O Laravel Horizon fornece um belo painel e configuração orientada por código para suas filas Redis alimentadas pelo Laravel. O Horizon permite que você monitore facilmente as principais métricas de seu sistema de filas, como taxa de transferência de trabalho, tempo de execução e falhas que ocorreram em filas.

Laravel Dusk

O Laravel Dusk fornece uma API para automação de testes fácil de utilizar. Por padrão, o Dusk não exige que você instale o JDK ou o Selenium em seu computador local. Em vez disso, o Dusk usa uma instalação autônoma do ChromeDriver. No entanto, você é livre para utilizar qualquer outro driver compatível com o Selenium que desejar, caso já esteja mais familiarizado.

Conclusão

Lembre-se que existem inúmeros packages para se utilizar dentro do Laravel, mas aqui foram listados apenas alguns deles, caso tenha algum outro que seja incrível e muito útil para o dia-a-dia dos Devs, comente aqui.

()
Categorias
🖥 Desenvolvimento

Criando um Custom Hook utilizando o Intersection Observer API

Imagine se deparar com o seguinte problema: Você deve carregar uma imagem para o usuário somente quando ele ver o componente na tela. Uma das coisas mais complexas no desenvolvimento web é saber exatamente quando um elemento aparece pelo usuário.

Primeiramente pensei em fazer cálculos com o scroll event, porém isso poderia facilmente trazer problemas de performance para a aplicação. Então, fiz como todo bom desenvolvedor, passei horas pesquisando possíveis soluções e encontrei uma de implementação bem simples, sem necessidade de trazer libs para o projeto, o Intersection Observer API.

Como o Intersection Observer API funciona ?


O Intersection Observer API é uma API do browser, de forma resumida, ela observa um elemento alvo e informa quando há a interseção desse elemento alvo com um outro elemento ou o com viewport. Em outras palavras, com essa API é possível saber quando o elemento aparece para o usuário. Para mais detalhes da API aqui está a documentação dela.



Essa API espera dois parâmetros, um callback e um objeto, com as opções para a API observar o elemento. Essas opções são o root, rootMargin e threshold.  

root: O elemento que é utilizado como viewport para o elemento alvo, se passado root com “null” o próprio viewport é utilizado.

rootMargin: Margin em volta do root. Pode ser usado como um CSS convencional de margin, por exemplo “10px 15px 10px 15px”. Esse valor serve para aumentar ou diminuir um espaço nos lados do elemento root antes de começar a calcular a intersecção. Por padrão é zero.

threshold: Um valor que pode variar entre 0 e 1, que indica a porcentagem e visibilidade que o componente deve aparecer para disparar o callback. Por exemplo, se o valor é 0.5, o elemento deve estar 50% visível para o callback ser disparado. Também é possível passar um array de valores para que em cada valor o callback seja executado.

Como usar isso em um custom hook ?

A ideia do custom hook que iremos criar é retornar uma referência para ser usada no elemento alvo e um booleano em que informa se o elemento alvo está visível recebendo como parâmetro as opções do nosso Intersection Observer API.


Para a referência utilizamos o hook useRef, e com o hook useState teremos o estado do elemento visível ou não, que alterado pelo nosso callback do Intersection Observer API. O próximo passo é criar o nosso callback, utilizamos o useCallback para que ele seja sempre a mesma função mesmo o componente que utilizar o custom hook tenha um re-render.

Bom, já temos nossas options e o callback, agora de fato vamos utilizar o Intersection Observer API e deixar no hook completo.

 
O useRef também serve para armazenar dados para serem inalterados ao houver um re-render. Ou seja, caso haja um re-render o valor da ref ainda será o da primeira renderização. Assim, na linha 45 criamos uma referência para o observer. Entre a linha 67, criamos uma instância de IntersectionObserver com nosso o callback e as options. Na linha 71, vemos se a referência do elemento está sendo utilizada para ser observada. Caso houver um re-render, a linha 65 serve para desativar nosso observer, que será o mesmo do primeiro render.

()
Categorias
🏢 Outsourcing de TI

Porque a Tecnologia é importante no mundo dos negócios?

Com o grande avanço da tecnologia no mundo todo, nascimento de novas startups, podemos dizer que a tecnologia gera resultados importantes nas grandes operações entre as empresas, a tecnologia tem qualidades benéficas em todos os propósitos que farão com que as empresas possam aumentar suas receitas e consequentemente agregar mais resultados nas entregas de serviços e/ou produtos para os seus clientes. 


Pesquisa à frente dos concorrentes


A empresa que utiliza a tecnologia e/ou recursos tecnológicos com certeza estará à frente de seus concorrentes. Um negócio estará sendo considerado saudável quando ele tem o poder de se manter, crescendo sempre e adquirindo novas fontes de oportunidades. A tecnologia nos permite expandir os negócios numa velocidade jamais vista antes, onde estamos cada vez mais conectados, e em segundos conseguimos literalmente viajar o mundo de forma remota adquirindo experiências, conhecimentos, ferramentas, clientes, aumentando nosso networking, entre outras inúmeras vantagens que a tecnologia pode ser usada a favor dos negócios.


Segurança das informações


Utilizando de forma correta a tecnologia, podemos proteger as informações de uma empresa, sejam elas dados sensíveis, públicos, confidenciais ou não. Ao usar dispositivos para efetuar as atividades do dia a dia, como tablets, celulares, notebooks, servidores, as organizações podem evitar que as suas informações, projetos e até objetivos futuros sejam invadidos, e até mesmo furtados como existem diversos casos de sequestro virtual de dados e até mesmo seguido de um resgate mediante pagamento de moedas em carteiras virtuais. A tecnologia e seus recursos subsequentes, ajudam as organizações a proteger suas informações financeiras, estratégicas e toda sua propriedade informativa.


Processos bem definidos


Uma empresa bem sucedida é precedida de um leque de processos bem definidos, seja através de documentações como os procedimentos operacionais de apoio, instruções de trabalho, e até um FAQ através de uma intranet por exemplo demonstrando como fazer os processos internos, e estes não sejam prejudicados mediante saída de algum colaborador ou que o mesmo seja feito sua troca de setor e/ou departamento. Hoje existem diversas ferramentas que facilitam esse trabalho, ajudando as empresas a melhorar os seus processos e consequentemente a melhoria na entrega dos seus resultados perante aos seus clientes.


Conclusão


A tecnologia é algo que pode ser usado sempre a nosso favor, seja nos aspectos, humanos, pessoais, empresariais, onde neste último existem diversos fatores que podem alavancar o sucesso das organizações, fazendo com que a tecnologia seja usada a nosso favor, não como substituição de mão de obra mas sim como agregar valor às pessoas, otimizando recursos, processos manuais e aumentando o seu sucesso.

()
Categorias
📈 Mercado de TI

Cultura DevOps otimizando o desenvolvimento nas empresas

Vivemos em um mundo competitivo e veloz, onde a entrega rápida de software é essencial. No entanto, a qualidade não pode ser comprometida nesse processo. Surge então o DevOps, um conjunto de práticas e filosofias que acelera a entrega e mantém a qualidade do produto final.

Neste artigo, exploraremos a importância do DevOps e como as organizações podem adotar essa cultura.

Perspectivas dos times de desenvolvimento

As equipes de operações lidam com a administração de vários servidores em ambientes de produção. Porém, as ferramentas e softwares legados nem sempre são eficientes para gerenciar múltiplos servidores simultaneamente. Modificações no código são necessárias para garantir o funcionamento em diferentes ambientes e as implantações devem ser realizadas dentro dos prazos estabelecidos.

O DevOps desempenha um papel fundamental nesse contexto. Integrando as equipes de desenvolvimento e operações, essa metodologia busca a integração, desenvolvimento e implantação contínuos de software. Dessa forma, supre a necessidade de lançamentos mais rápidos, mantendo a qualidade do software entregue.

Automação

A automação desempenha um papel crucial no processo DevOps. Ao automatizar processos, é possível corrigir problemas instantaneamente e garantir a execução sem erros. Além disso, recursos valiosos podem ser direcionados para contribuições mais significativas, evitando desperdício de tempo, esforço, dinheiro e recursos.

Conclusão

O DevOps é uma abordagem valiosa para acelerar o desenvolvimento e entrega de software, mantendo a qualidade. Ao unir equipes, adotar práticas de automação e promover uma cultura de colaboração, as organizações podem otimizar seus processos de desenvolvimento, obter lançamentos mais rápidos e melhorar a experiência do usuário final.

()
Categorias
💡 Inovação

Façam suas apostas: Qual o limite da Realidade Virtual?

E se você pudesse sentir o impacto de uma explosão ou a textura de uma folha na realidade virtual (VR) dentro de um jogo?

Talvez isso esteja mais próximo do que você imagina.

Em 2022, a empresa H2L Technologies, em parceria com a Sony, anunciou o desenvolvimento de um dispositivo inovador que busca gerar sensações táteis na realidade virtual.

A ideia é enviar sinais elétricos para o cérebro, permitindo que as pessoas sintam dor, prazer e outras sensações imersivas enquanto estão imersas em ambientes virtuais. Isso vai ser capaz de proporcionar uma experiência muito mais realista.

O dispositivo ainda está em fase de protótipo, mas espera-se que seja lançado no futuro, após aprimoramentos e mais pesquisas.

Essa novidade pode significar uma grande revolução nos videogames que utilizam de VR, já que permite que os jogadores sintam sensações táteis, como dor, prazer e outras texturas, a experiência de jogar em ambientes virtuais se tornará ainda mais imersiva.

Um dispositivo tátil vai tornar possível que os jogadores experimentem uma maior conexão emocional com o jogo, com sensações físicas intensificadas. Por exemplo, em um jogo de ação, sentir a dor de um golpe ou o impacto de uma explosão pode aumentar a sua adrenalina e a imersão naquele universo virtual.

Além disso, a possibilidade de sentir texturas e objetos virtuais com maior precisão proporcionará uma interação mais tangível com o ambiente do jogo. Isso abrirá caminho para novas mecânicas de jogabilidade e desafios, levando a uma experiência de jogo mais envolvente.

Nossa eNer e Arquiteta de Software, Carla Luena, já joga videogame de VR a 2 anos e contou pra gente um pouco da sua experiência, “Meu jogo preferido é Pistol Whip.

É muito emocionante, realmente você esquece do mundo real, é super imersivo. E é muito bom também porque você mantém seu corpo em movimento mesmo jogando.

Inclusive em casa já aconteceu de pessoas virem jogar e até trombarem na parede ou irem de encontro a TV (risos)”.

Mas, se engana quem acha que a realidade virtual é algo atual.

A primeira experiência conhecida de VR remonta à década de 1960 com o desenvolvimento do “The Sword of Damocles” por Ivan Sutherland.

No entanto, a popularização da VR só aconteceu nas décadas seguintes, com empresas como a VPL Research. O interesse e investimento na VR aumentaram nos anos 1990, mas enfrentaram desafios técnicos e comerciais.

A partir do final dos anos 2000 e início dos anos 2010, o VR ressurgiu com dispositivos como Oculus Rift, HTC Vive e PlayStation VR, oferecendo experiências mais imersivas.

Desde então, a realidade virtual continua a evoluir e expandir-se em várias áreas, desde educação, até negócios e entretenimento.

Se você ficou empolgado com as novidade de RV, deixaremos uma lista aqui de alguns dos melhores jogos já lançados com essa tecnologia:

Pistol Whip (recomendação da Carla): É um jogo de VR que combina ação, ritmo e música. Os jogadores se movem em sincronia com a música, atirando em inimigos e desviando de balas. Com uma trilha sonora eletrônica empolgante, o jogo oferece uma experiência imersiva e eletrizante. Possui controles intuitivos, modos de jogo variados e níveis temáticos emocionantes.

Beat Saber: Um jogo de ritmo e música onde você usa sabres de luz virtuais para cortar blocos que se aproximam de você no ritmo da música. É um jogo imersivo e energético que desafia sua coordenação e reflexos.

Superhot VR: Neste jogo de ação em primeira pessoa, o tempo só se move quando você se move. Com uma mecânica única, você precisa desviar de balas, desarmar inimigos e completar desafios em uma série de cenários de combate.

The Elder Scrolls V: Skyrim VR: Uma versão em realidade virtual do lendário jogo de RPG de mundo aberto, “Skyrim”. Explore vastas paisagens, lute contra criaturas míticas e mergulhe em uma história épica enquanto vive a experiência imersiva da realidade virtual.

Half-Life: Alyx: Este jogo de tiro em primeira pessoa se passa no universo da renomada série “Half-Life”. Com gráficos impressionantes e jogabilidade envolvente, você assume o papel de Alyx Vance em uma luta contra uma invasão alienígena.

Resumidamente, o potencial do VR é gigantesco e a gente tá contando os dias para ver de perto essa evolução.

()
Categorias
🦺 Segurança da Informação

Melhorando a segurança digital no seu Home Office

/

Com a pandemia e a transição para o trabalho remoto, cada vez mais pessoas estão trabalhando em casa. Nesse contexto, é comum investir em equipamentos e móveis confortáveis para criar um ambiente de trabalho produtivo. No entanto, muitas vezes negligenciamos um aspecto importante: a segurança cibernética.

Tão importante quanto se sentir confortável em seu home office, é garantir que ele esteja protegido contra ameaças digitais.

Por que devemos nos preocupar com a segurança mesmo ao trabalhar em home office?

A segurança ao trabalhar em regime remoto desempenha um papel crucial para aqueles que utilizam a internet, mas é especialmente importante para quem trabalha em casa e utiliza vários dispositivos.

Essa segurança visa proteger todos os dispositivos, ou endpoints, em sua rede. Cada um desses dispositivos pode representar uma oportunidade para indivíduos mal-intencionados ou códigos maliciosos realizarem ataques.

Pense em todos os dispositivos em sua casa que estão conectados à internet: computadores, laptops, tablets, impressoras, smartphones e muito mais. A segurança desses dispositivos têm como objetivo proteger esses pontos de acesso e impedir a entrada de vírus e outros códigos maliciosos.

Caso você esteja inseguro sobre a segurança dos dispositivos em sua casa, aqui estão algumas dicas para melhorar a segurança desses dispositivos no seu escritório em casa.

Uma das medidas mais simples que você pode adotar para reforçar a segurança no home office é ter cuidado ao escolher suas senhas.

Aqui estão algumas dicas rápidas sobre segurança de senhas:

  • Evite usar a mesma senha para várias contas.
  • Nunca utilize informações pessoais, como iniciais, data de aniversário ou nomes de animais de estimação, como senhas.
  • Altere suas senhas regularmente.
  • Utilize um gerenciador de senhas para criar e armazenar senhas difíceis de serem adivinhadas. Um exemplo é o aplicativo Bitwarden.
  • Ative a autenticação de dois fatores em todas as contas, conhecida como MFA.

Além de seguir boas práticas para senhas de dispositivos e contas, é essencial manter seus dispositivos seguros quando não estão em uso.

Configure senhas ou reconhecimento facial em seu celular. Defina seu computador para bloquear automaticamente após um determinado período de inatividade.

Nunca deixe seus dispositivos desbloqueados sem supervisão, principalmente ao viajar ou trabalhar em espaços públicos, como cafeterias, shoppings ou bibliotecas.

Combinado? Siga essas boas práticas e trabalhe em um ambiente digitalmente seguro.

()
Categorias
🏢 Outsourcing de TI

Conheça os principais tipos de teste de qualidade de software

Já ouviu falar em testes de qualidade de software? Se nunca ouviu falar, relaxe que eu vou te explicar tudo aqui!

Basicamente, os testes de software são super importantes para garantir que o software funcione corretamente e sem nenhum erro. Eles ajudam a identificar problemas antes do software ser lançado para o público final, o que é essencial para atender às necessidades dos usuários e garantir a qualidade do produto.

E existem vários tipos de testes que ajudam a verificar, desde os pedacinhos do código, até o software como um todo!

Teste Unitário

O primeiro tipo é o teste unitário, onde o desenvolvedor verifica cada método e classe do código para garantir que tudo esteja funcionando corretamente.

Teste de Integração

Depois temos o teste de integração, que é feito para verificar se as partes do software se encaixam corretamente. É como montar um quebra-cabeça: você vai testando as peças antes de montar tudo de uma vez só.

Teste de Sistema

E, por fim, temos o teste de sistema, que é o grande teste final para garantir que o software esteja funcionando sem nenhum problema. É aqui que a gente descobre se o software vai ser tipo um mundo cheio de arco-íris ou um desastre tipo Chernobyl

Conclusão

Enfim, esses testes são super importantes para garantir a qualidade do software e atender às necessidades dos usuários. Se você é da área de tecnologia, já deve ter ouvido falar desses testes, né? Mas se não, agora já sabe um pouquinho mais!

()
Categorias
🖥 Desenvolvimento

Bibliotecas incríveis do React para desenvolvimento Front-End

Não há dúvida de que o React é o framework front-end mais popular atualmente.

Novas aplicações web são criadas usando o React ou seus frameworks, como NextJS e Gatsby. O sucesso de qualquer framework não depende apenas do seu desempenho, mas também das bibliotecas de terceiros que o suportam.

Existem muitas bibliotecas JavaScript e React. Elas suportam gerenciadores de pacotes como npm, yarn e pnpm. 

Hoje, vou listar algumas das bibliotecas mais relevantes para usar com React no front-end.

Vamos começar.

React Router

React Router é uma das bibliotecas mais instaladas para o React. Há cerca de 8 milhões de instalações por semana. Essa biblioteca fornece uma facilidade de roteamento para o React e agora se tornou um recurso central do React.

Redux

Redux é uma popular biblioteca JavaScript de código aberto usada para gerenciar o estado de aplicações web. É um contêiner de estado previsível para aplicativos JavaScript. Isso ajuda a gerenciar o estado de um aplicativo de maneira mais organizada e centralizada, tornando mais fácil depurar e manter.

Chakra UI

Chakra UI é a minha biblioteca preferida para obter componentes React personalizáveis. Ele usa um sistema de tema flexível baseado na biblioteca Styled System, que permite criar estilos consistentes e reutilizáveis para seus componentes.

Características relevantes do Chakra UI

  • Fácil de usar
  • Muitos componentes
  • Facilmente personalizável de acordo com a UI
  • Pode ajudar a construir a parte frontal em muito menos tempo
  • Ele também tem excelente documentação e uma comunidade ativa, o que torna fácil começar e encontrar ajuda quando necessário.

Axios

Axios é uma biblioteca JavaScript popular usada para fazer solicitações HTTP a partir de navegadores da web ou Node.js. Esta biblioteca não é restrita ao frontend, mas estende sua capacidade para o meu backend também. 

Com o Axios, é fácil definir cabeçalhos, parâmetros de consulta e dados de solicitação. Ele também suporta vários mecanismos de autenticação, como autenticação básica, autenticação de token e OAuth2.

React Helmet

React Helmet é uma biblioteca de código aberto popular para o React que fornece uma maneira simples de gerenciar a seção head das suas páginas web. SEO é uma parte crucial de um site, além do desenvolvimento web.

Adicionar informações relevantes a ele aumentará a classificação do SEO.

Com o React Helmet, é possível alterar dinamicamente o conteúdo do cabeçalho, incluindo o título, meta tags, folhas de estilo e scripts.

React Testing Library

A React Testing Library é uma biblioteca de teste open-source para aplicativos React que se concentra em testar o comportamento do usuário em vez de detalhes de implementação.

É projetada para incentivar os desenvolvedores a escrever testes que sejam mais legíveis, mantíveis e resistentes a mudanças.

A React Testing Library é uma biblioteca poderosa e flexível que pode ajudá-lo a escrever testes mais eficazes.

Seu foco no teste do comportamento do usuário em vez de detalhes de implementação, juntamente com suas ferramentas de teste de acessibilidade e diretrizes de teste, tornam-na uma escolha popular para desenvolvedores que desejam melhorar a qualidade e confiabilidade de seu código.

Framer Motion

Quando se trata de adicionar animação a componentes React, o Framer Motion é minha primeira escolha. Ele ajuda a criar animações impressionantes e fluidas para suas aplicações web. Dá muito controle à animação.

Uma das principais características do Framer Motion é seu suporte para variantes. As variantes são estados de animação reutilizáveis que definem um conjunto de propriedades e valores para um componente.

Conclusão

O React é uma biblioteca JavaScript poderosa e popular para a criação de interfaces de usuário dinâmicas e interativas. 

No entanto, para aprimorar seu desenvolvimento React, é importante considerar o uso de outras bibliotecas, como o React Helmet, a React Testing Library e o Framer Motion. 

Essas bibliotecas fornecem recursos poderosos que podem simplificar tarefas comuns e melhorar a funcionalidade de seus aplicativos. 

Lembre-se de que há outras bibliotecas importantes que você pode usar para melhorar ainda mais sua experiência de desenvolvimento React.

Comente abaixo se você tiver alguma outra biblioteca em mente. ()

Categorias
📈 Mercado de TI

Por que devs ganham tanto, mesmo com cursos gratuitos na área?

 

A programação é uma habilidade altamente valorizada no mercado de trabalho atual e a demanda por profissionais qualificados só tem aumentado com a evolução da tecnologia. Embora exista uma grande quantidade de recursos de aprendizado de programação disponíveis gratuitamente na internet, isso não significa que todas as pessoas sejam pagas igualmente.

A verdade é que a habilidade de programar não é o único fator que determina o salário dos devs, vem conferir os principais pontos abaixo:

  • Experiência
  • Habilidades técnicas avançadas
  • Habilidades de comunicação e liderança
  • Demanda do mercado

Experiência

A experiência é um dos fatores mais importantes que afetam o salário de um programador. Quanto mais devs passam no mercado, mais  aprendem sobre a indústria, as tecnologias e as melhores práticas. Além disso, tendem a ter mais eficiência na entrega de projetos de alta qualidade, o que aumenta sua credibilidade e valor para empregadores.

 

Habilidades técnicas avançadas

As habilidades técnicas também são cruciais para determinar o salário de devs. 

Quem possui habilidades avançadas em linguagens de programação, plataformas e tecnologias específicas tende a ser mais valorizado no mercado.

Habilidades de comunicação e liderança

Outro ponto relevante é a capacidade de se comunicar e ser líder. Devs que tem uma  boa comunicação e skills de liderança são valorizados bastante por empregadores, pois são capazes de trabalhar em equipe e gerenciar projetos.

Demanda de mercado

Por fim, a demanda do mercado também afeta o salário de quem trabalha com programação. Em setores em crescimento, como a tecnologia da informação e a inteligência artificial, a demanda por devs com ótima qualificação é alta, o que significa que os salários tendem a ser mais elevados.

Conclusão

Apesar do acesso gratuito a recursos de aprendizado de programação, o salário de um programador é determinado por uma combinação de fatores, incluindo experiência, habilidades técnicas, habilidades de comunicação e liderança, e demanda do mercado. Portanto, é importante lembrar que aprender a programar é apenas o primeiro passo em uma carreira bem sucedida como dev. ()

Categorias
🚀 Cases

Como ajudamos a Algar Telecom a ter mais eficiência no portal

A Algar Telecom é uma empresa do grupo Algar que atua no setor de Telecom e TI há mais de 60 anos com dois objetivos principais: manter um relacionamento próximo com os nossos clientes e oferecer serviços de alta qualidade. 

A versão anterior do site foi criada em 2014 foi atualizada em 2018 quando a Ene Soluções assumiu a responsabilidade sobre o portal,  junto com os times internos da Algar, e trouxe uma nova visão de estrutura.

Sistema de componentes

O portal possui uma estrutura consideravelmente complexa e composta por várias páginas e aplicações. Para otimizar os processos, decidimos implementar uma estrutura baseada em componentes.

Mas afinal, o que é um componente?

Basicamente, o componente é uma “peça” reutilizável, que pode ser facilmente substituída por outra coisa que implementa a mesma API, que pode ser implementada independentemente, e que encapsula um conjunto coerente de comportamentos e responsabilidade na estrutura. Ou seja, uma página é construída utilizando a junção de vários componentes.

Baseado nesse ponto de vista, é muito mais inteligente e ágil pensar na evolução dos componentes, do que em criar uma “nova página”.

Atomic Design

Atomic Design foi criado em 2013 por Brad Frost e se baseia na química para criar uma metodologia em que os componentes são aplicados ao design de interfaces. Ele divide os componentes em átomos, moléculas, organismos, templates e páginas.

Baseados nessa metodologia, foram criados os primeiros componentes. Nesse momento, definimos as cores, as fontes incluindo peso e tamanho, espaçamentos horizontais e verticais, e todos os elementos básicos “átomos” que poderiam compor uma molécula.

Moléculas

Por mais que pareça simples um componente, a responsividade faz com que eles sempre possuam uma certa complexidade.

Banner

Um dos componentes mais importantes, o banner, utilizado na home da maioria das páginas do portal, parece simples por se tratar de uma imagem, porém ele precisa atender uma série de requisitos.

  1. As imagens precisam ser “responsivas” ou seja, precisam ser pensadas para que sua leitura e visualização sejam preservadas independente da resolução do dispositivo do usuário.
  2. As promoções precisam estar atreladas ao banco de dados do CRM 
  3. O portal identifica a localização do usuário e apresenta apenas os banners e ofertas destinadas àquele público específico.
  4. Ele funciona em sistema de carrossel com tempo pré determinado mas o usuário tem a opção de avançar ou pausar a qualquer momento.

Tem a opção de inserção de links para redirecionar o usuário.

Componente Insight

Outro componente muito utilizado, praticamente em todas as páginas, é o componente nomeado de Insight. Recebeu esse nome pela sua versatilidade de uso. Atualmente um dos componentes mais plásticos do portal. 

Nele você tem a opção de inserir uma tag de título, um título, uma descrição, um CTA, texto legal, um link, uma imagem de background e uma imagem sobreposta ao background. Além disso, você pode definir se a imagem ou texto estarão no lado esquerdo ou direito do componente. Isso facilita a liberdade criativa na hora de utilizar esse componente em alguma pagina. 

Para garantir que a imagem de background funcione corretamente, travamos a altura do componente em 650px no desktop, mas deixamos a altura adaptável no mobile.

Cards de oferta

Os cards de ofertas são os componentes mais importantes do portal pois são os responsáveis pelo índice de conversão. É no card que o usuário avalia as informações mais relevantes da oferta e consegue adquirir seu produto.

Todas essas informações vêm do banco de dados do CRM e por isso precisam atualizar de forma automática sempre que surgem novas ofertas. 

Devido a quantidade variável de cards que podem ser apresentados, definimos que seria mais viável a apresentação em carrossel. Todos os cards de oferta direcionam o usuário para o checkout e por isso, pensamos de forma estratégica ao apresentar as informações dentro do card.

Construção das páginas

Agora que temos um sistema de moléculas e que juntas formam outros componentes, fica fácil construir uma página.

Depois de trabalhar o conteúdo e priorizar as informações, podemos visitar nosso banco de componentes e escolher os que mais fazem sentido para determinados tipos de informação.

Atualmente, a home do portal de varejo é composta por 8 componentes.

Conclusão

Com nossos profissionais alocados em diversos times dentro da Algar Telecom, aumentamos consideravelmente o nível de entregas relacionadas ao portal em todos os sentidos. Trazendo alguns pontos importantes como: 

  1. Garantia de padronização do layout e funcionamento das páginas. 
  2. Agilidade no processo de concepção e desenvolvimento.
  3. Estrutura dinâmica com liberdade criativa.
  4. Sempre em beta, ou seja, pode receber melhorias contínuas. 

Com isso, concluímos que a evolução é sempre contínua se tratando de usabilidade e tecnologia. Quando se pensa dessa forma o produto final beneficia não só os clientes Algar, em termos de negócio, mas também, todos os StakeHolders envolvidos no processo em termos de operação, trazendo eficiência e dinamismo para melhorias e testes necessários para evolução do portal.

()