WebNews Logo WebNews
Kvrt Dvlpmnt

Informação: Para se inscrever ou cancelar a inscrição, você precisa estar logado.

Capa
Roadmap to Build in Public - Webnews 1.0.0

Autor

Author
Felipe Kurt Pohling x° Edição

Kvrt Dvlpmnt

Nessa primeira edição eu pretendo dar uma breve descrição sobre mim e tentar permear sobre tudo que eu faço para poder contextualizar as pessoas que tiverem interesse em continuar com a leitura e talvez assinar a minha newsletter Kvrt Dvlpmnt:

  • Sobre Mim
  • Projetos
  • WebNews
  • Roadmap to Build in Public

Mas o foco dessa produção textual no geral é somar conhecimento, então vou estar sempre tentando trazer discussões que me parecem válidas tanto do meu dia a dia como desenvolvedor e acadêmico como também assuntos atuais que acredito que têm grande pertinência para a bolha tech.

Sobre Mim

Bom, meu nome é Felipe Kurt Pohling, atualmente atuo como desenvolvedor FullStack especialista em php em uma empresa chamada imaxis no sudoeste paranaense, onde trabalho com:

  • CodeIgniter
  • Jquery
  • Bootstrap 4.5
  • Flutter

Mas, em side-projects como o WebNews, atuo com a TALL Stack:

  • TailwindCSS
  • AlpineJS
  • Livewire
  • Laravel

Eu me considero uma pessoa que lê ativamente e as newsletters, para mim, trazem a possibilidade de poder não só compartilhar o meu conhecimento, mas também documentar o que eu penso e faço, para no futuro poder me relembrar e ver minha trajetória. Então essa newsletter é em primeiro foco para mim mesmo kkkk.

No lado acadêmico:

  • Sou técnico em desenvolvimento de sistemas pela Etec de São Paulo (Bom Retiro), onde fiz o ensino médio integrado ao técnico.
  • Atualmente, estou cursando Bacharelado de Sistemas de Informação na UTFPR-FB, onde sou:
    • Diretor de Ensino e Pesquisa do centro acadêmico.
    • Monitor da disciplina de Programação Orientada a Objetos.

Projetos

Dentro desses 4 anos na programação pude trabalhar com alguns projetos, mas irei falar apenas dos que ainda estou desenvolvendo, que chegaram em um ponto maduro.


LaravelCMS

O LaravelCMS consiste de um Content Management System, que funciona com base em arquivos de marcação .yaml. Através de certas chaves predefinidas, você pode criar o arquivo .yaml com o mesmo nome da sua entidade do Eloquent e com isso já ter mapeado o objeto, tendo assim uma maneira de fazer o CRUD de maneira automática.

Podendo passar flags específicas para campos de select relacionais com outras tabelas, ou então usar uma função PHP que você fez para renderizar certo valor de maneira estilizada (como um formatCPF()).

Além disso, o LaravelCMS também abstrai toda a lógica de permissões para um arquivo chamado configMenu.yaml, lendo esse arquivo o CMS constrói tanto o menu, como a área de gerenciamento de permissões para Usuário e Nível, o que faz com que de maneira muito rápida você saia do chão com:

  • Gerenciamento de diferentes níveis de usuário
  • Gerenciamento de permissões para níveis e diretamente o usuário
  • Lógica de autenticação
  • CRUD dinâmico, preenchendo apenas o .yaml e tendo todo o backend e frontend feito

Esse sistema veio de um CMS usado no meu serviço chamado Ipanel que foi feito em CodeIgniter + Jquery, o LaravelCMS é uma releitura feita com a TALL Stack, atualmente no meu repositório tem um caso de uso chamado votacao_hacklab, que foi um sistema para a votação de uma competição de programação promovida pelo CASIS, com eu à frente da organização.

Um dos pontos chaves do CMS é que mesmo trazendo toda essa estrutura pronta, ele é preparado para receber arquivos customizados, então em metade do sistema pode-se usar o .yaml enquanto na outra metade ainda assim usar o configMenu.yaml e criar arquivos diretamente na mão com .blade.php.

🔗 Repositório: LaravelCMS


Votacao_Hacklab

Esse projeto é bem simples em regra de negócio, mas o que torna ele interessante é o fato de ser o primeiro caso de uso do LaravelCMS. Em 4 dias usando o LaravelCMS eu pude desenvolver esse sistema para ser usado na votação de um evento de programação promovido pelo CASIS.

O Sistema funcionava baseado em eventos, então poderia ser reutilizado no futuro. Através do .yaml foram criados os cadastros das entidades de:

  • Evento
  • Projeto
  • Critérios
  • Jurados

Sendo necessário o desenvolvimento de fato apenas das áreas para:

  • Votação
  • Apresentação de resultados
  • Cronômetro

Permissões separadas por nível (Jurado, Admin), assim como restrições específicas por usuário (Meu admin podendo tudo, Admin do CASIS podendo apenas ver) vieram de maneira automática após preencher os arquivos corretos, o que fez a solução ser viável em curto prazo de desenvolvimento.

Esse projeto fez minha vontade de codar o CMS aumentar muito e é o reflexo do trabalho duro em desenvolver o CMS. Ainda tem muitos pontos chaves para se melhorar, mas é um projeto que vejo muito espaço para melhorias e sucesso.

🔗 Repositório: Votacao Hacklab

WebNews

Contextualização

O WebNews surgiu de uma conversa simples que eu tive com o Vitor sobre o fato de ser legal uma newsletter da UTFPR. No momento em que ele me trouxe essa pira de desenvolver um sistema de newsletter, já fiquei interessado na hora, primeiro por um motivo egoísta: sempre quis ter um ambiente em que eu pudesse compartilhar textos como às vezes faço no TabNews, mas no meu próprio ambiente, tendo a minha própria forma de veiculação do conteúdo. Segundo, com o intuito de melhorar na programação, afinal, depois que você aprende só melhora fazendo.

Dentro do sistema, qualquer autor vai poder se inscrever e disponibilizar conteúdos de seu interesse. Basta aguardar um pouco a aprovação e logo seguir para a escrita das suas edições. Para que esse ambiente siga para frente e se torne uma maneira de adquirir conteúdo e conhecimento, é essencial não apenas ter um sistema bem feito e prático, mas o foco principal é a adoção dos leitores, e por conta disso sempre estou disponível para relatos de bugs e sugestões de melhorias para tornar esse ambiente o melhor no que ele propõe ser.

Técnica

O sistema é desenvolvido usando a TALL Stack, seguindo assim o modelo de projeto imposto pelo Livewire (view.blade.php, Controller.php). Dentro da organização de arquivos optei por fazer o código o mais componentizado possível, então foi muito usado Traits e Componentes Blade. Todos os cadastros do sistema, por exemplo, são componentizados — então a mesma tela que vocês veem no cadastro de autor é a que eu vejo no painel de admin.

Atualmente o sistema conta com 3 níveis diferentes de acesso:

  • Autor
  • Assinante
  • Administrador

O assinante apenas controla as suas assinaturas e pode passar pelo hotsite para se inscrever em novas newsletters e ler conteúdos (por enquanto…).

Já o autor possui um painel próprio para o gerenciamento de suas newsletters e a escrita das edições. Os textos para as edições possuem uma lógica de lista encadeada, cada nó tendo:

  • Título
  • Imagem
  • Conteúdo escrito em Markdown

Através desses registros eu resgato eles pela relação de chave estrangeira com a edição e construo a tela para a exibição.

Novas funcionalidades para o autor já estão sendo desenhadas, mas isso vai ser dito com mais detalhes no ChangeLog.

Futuro

Esse é apenas um MVP, o mínimo necessário para que o sistema possa continuar e evoluir. Ainda tem muitas coisas que pretendo implementar. A curto prazo:

  • Seleção de ícone no cadastro da newsletter
  • Templates diversificados para escrita e nós customizados
  • Alteração das cores da newsletter para exibição
  • Uploads de fotos para criar divisores da newsletter
  • Customização do header e footer

Então enquanto tiverem pessoas lendo, vão ter pessoas melhorando esse ecossistema de modo que o WebNews se torne um espaço acolhedor e confiável para busca de conteúdo.

Roadmap to Build in Public

Saindo das apresentações e vindo para o primeiro conteúdo da Kvrt Dvlpmnt, quero comentar um pouco sobre uma das semanas mais corridas que tive esse ano: a semana em que fiz tudo o necessário para tirar o WebNews de uma ideia para um MVP, com o mínimo necessário para que pudessem ser disponibilizadas newsletters pelo próprio sistema com intenção de documentar o desenvolvimento — o famoso Build in Public.

Build in Public?

Build in Public consiste em construir seu produto e documentar o processo: falar quando fez coisas novas, compartilhar o processo de decisão, mostrar os problemas que encontrou e como resolveu. É uma maneira de deixar o seu usuário fazer parte ativa do desenvolvimento mesmo sem encostar um dedo no código, e saber qual direção a aplicação está tomando, trazendo assim uma maneira orgânica de gerar interesse no sistema.

Objetivos da Semana

Atualmente o sistema pode passar uma imagem de maturidade e parecer ter um foco bem direcionado tanto em identidade visual como também em fluxo de ações. Porém, até semana passada não era assim kkkk.

Os focos para essa semana foram basicamente esses abaixo:

Fora os subtópicos para cada que uma dessas coisas funcione de fato kkkkk.

  • Segunda → Ajustes na Lógica de Autor
  • Terça → Cadastro de Newsletter e Edições
  • Quarta → Ajustes de Domínio e Infra
  • Quinta → Áreas do Assinante e Listagem de Edições no HotSite
  • Sexta → Ninguém é de ferro…
  • Sábado → Estatísticas para o Autor e Assinante
  • Domingo → Lógica de Revisão e Envio

Vendo tudo isso dá pra ter uma noção de como foi a minha semana: basicamente muito código das 09:00 até as 18:00, pois o sistema em que estou desenvolvendo no serviço vai participar de uma POC, então essa semana de reta final e realização do que faltava do edital foi agitada.

E depois de chegar em casa, mais 3/4 horas programando pra tentar pôr no ar esse sistema para aí sim começar o desenvolvimento com o Build in Public e tentar captar assinantes. Mas claro que com a faculdade atrapalhando o objetivo não foi alcançado… mas não é que eu falhei em algum desses dias — a questão é que tudo isso foi feito, porém teve coisas que foram adiadas para segunda e terça.

O que faltou?

Infelizmente, o que faltou foi a parte principal do sistema: o envio de emails. O WebNews, por ser focado em emails, depende deles até para o login. No momento em que você esteja lendo isso, talvez ainda não esteja no ar essa feature, mas a ideia é que o login seja apenas com email — você recebe um email no inbox com um link que te redireciona para uma área do meu sistema, onde eu espero um JSON criptografado com dados necessários para te autenticar: login mágico, legal e eficiente.

Mas não foi só isso que faltou fazer, o que faltou estava ainda mais atrelado ao core do sistema e tinha dois problemas distintos que acarretaram a isso, um de infra e outro de organização.

  • Infra

    • Atualmente o sistema é hospedado com uma Droplet Debian no site da DigitalOcean. Essa escolha foi feita por ser o local onde eu tinha créditos para hospedar de graça, então por enquanto o sistema só custou o domínio e meu tempo kkkk.

    • A DO infelizmente trava as portas responsáveis por SMTP, que é o protocolo de saída para emails. Então tanto a 587 como a 245 são travadas e eu não consigo destravar mesmo conectado por SSH, o que me faz ter que enviar um email solicitando o destravamento das portas. Nisso aí já se vão uns 3/4 dias.

  • Organização

    • Na minha opinião, sou muito eficiente como programador. O WebNews teve o primeiro commit em 16 de maio, agora em 16 de junho tudo isso listado foi feito. A única coisa que faltou foi o bendito dos envios de emails que funciona em ambiente local, já que tenho as portas destravadas e utilizo da Facade Mail do Laravel para fazer esse envio.

    • Infelizmente subestimei o tempo em que poderia fazer isso, mas segunda que vem com certeza esses envios de email e mais coisas além disso que não estavam planejados vão ser implementadas.

Mensagem Final

Bom, o que eu tinha me organizado para falar nessa edição era isso. Espero que tenha sido de alguma maneira interessante a leitura do texto, espero não ter deixado muito maçante e difícil de acompanhar, mas ainda estou criando a prática de escrita e pretendo melhorar para futuras edições.

Para próxima edição tenho planejado um tópico de engenharia de prompt. Sempre gostei muito de criar imagens com IA desde que isso é possível, e ultimamente desenvolvi um prompt muito bom para geração de imagens realistas que torcem a realidade. No meu LinkedIn já abordei esse tópico, mas apenas dando minha opinião. Então para a próxima edição vem o prompt e tutorial de como eu fiz para criar aquilo.

Preview