Conhecendo a plataforma TETA

TETA é uma plataforma No-Code para criação de aplicativos com Backend que não precisam de servidores Serveless.

Serverless é um modelo de desenvolvimento nativo em nuvem para criação e execução de aplicações sem o gerenciamento de servidores.

Todos os recursos necessários já fazem parte da plataforma e você pode criar utilizar o seu banco de dados com as ferramentas Low-code e No-code, apém de consumir APIs externas ou internas.

A plataforma TETA é fácil de utilizar e possui recursos mais avançados.

Planos de assinatura da plataforma TETA

Até a data de publicação deste post, os valores e recursos da plataforma TETA são esses.

Starter	Dev	Pro
0€ Download do código fonte Projetos ilimitados Até 500MB de armazenamento no banco de dados Até 5K usuários simultâneos Até 10K visualizações por mês Suporte da comunidade	12€ Tudo incluso no plano Starter Até 2GB de armazenamento no banco de dados (1M documentos) Ate 32K usuários simultâneos Até 100K visualizações por mês Suporte por e-mail	25€ Tudo incluso no plano Dev Até 10GB de armazenamento no banco de dados Até 100K usuários simultâneos Até 500K visualizações por mês Suporte prioritário

O plano Starter inicialmente atende para testes de experimentos, se caso achar interessante e produtivo no desenvolvimento de aplicativos, pode migrar para os planos Dev ou Pro.

Referências

https://teta.so/

Feito!

Transformar protótipos de telas do Figma para aplicativo em React Native

Você já deve ter perguntado se é possível transforrmar os protótipos de telas que fez no Figma para sites estáticos e aplicativo mobile? Pois bem, existe um plugin para o Figma que faz exatamente isso. Esse é objetivo deste post.

O presente post, apresenta um plugin para o Figma que consegue transformar os protótipos de telas feitos no Figma para aplicativo já pronto, pelo menos o frontend.

O Locofy é uma plataforma que trabalha com inteligência artificial que ajuda você a exportar seus protótipos de telas criados do Figma para React, React Native, HTML/CSS, Next.js e Gatsby, apenas definindo algumas configurações básicas.

Depois que a exportação é feita você pode trabalhar o código para deixar do jeito que você quer e exportar tudo para usar onde e como quiser.

Para utilizar o Locofy é necessário criar uma conta na plataforma, depois sincronizar com a sua conta no Figma, escolher um layout e começar a exportação. Você também precisa instalar o plugin Locofy no seu Figma, para que possa realizar todas as etapas.

Feito!

Conhecendo o Figma

Figma é uma plataforma web para criar prototipação das telas de sites, sistemas, aplicativos, focado na experiência de usuário.

Permite trabalhar de forma colaborativa por uma equipe de pessoas envolvidas no projeto.

Isso facilita os profissionais que atuam Home Office.

Planos de assinatura do Figma

Gratuito	Professional	Organizacional
Até 3 projetos	$12 por mês	$45 por mês

Como usar o Figma?

O primeiro passo é criar uma conta de acordo com o plano de assinatura escolhido.

Pode integrar com a sua conta do Google.

Pode começar no plano gratuito.

Após logar na sua conta do Figma ou integrada no Google, crie um novo projeto, podendo reutilizar templates disponíveis e ir adaptando, conforme as telas do seu site, sistema ou aplicativo.

Feito!

Extensões úteis para desenvolvimento Web no Google Chrome

O presente post apresenta as extensões que tenho no Google Chrome, que considero útil para o desenvolvimento Web.

CSS Peeper: É um visualizador de CSS adaptado para designers.

Selenium IDE: Facilita a familiarização com o Selenium WebDriver.

Material Icons for GitHub: Substitua os ícones de arquivo ou diretório no navegador de arquivos GitHub por ícones que representam o tipo de arquivo que estiver utilizando na ferramenta.

Windows Resizer: Redimensione a janela do browser para emular diversas resoluções de tela.

StackOverflow Power Use: Destaca a melhor resposta no topo que agiliza no tempo de pesquisa por uma solução para determinado problema que pesquisou.

Clean Cache: Limpe seu cache e dados de navegação com um único clique de botão.

ColorZilla: Seletor de cores.

Designer Tool: Meça e alinhe elementos na página web no Chrome.

ModHeader: Modifica cabeçalhos de solicitação e resposta HTTP.

BrowserStack: Testar a página web em qualquer browser desktop ou mobile.

Existem outras extensões de desenvolvimento Web no Google Chrome, apenas compartilhei as extensões que costumo utilizar no Chrome.Caso utilize alguma extensão que não foi mencionada neste post, escreva nos comentários.

Feito!

Extensões úteis de desenvolvimento no VSCode

O presente post apresenta as extensões que tenho no VSCode, que considero útil para o desenvolvimento de projetos em PHP, JS, Java, React Native, Flutter, entre outros que são na formatação de codificação e comunicação de containers dos ambientes Docker.

Auto Rename tag: Aumenta a produtividade na codificação através da IA Tabnine.

Path Intellisense: Autocompletar nomes de arquivos nos diretórios, onde está o projeto.

Prettier: Deixa o código fonte formatado, conforme o padrão estabelecido pelo time de desenvolvimento.

Quokka: Exibe o ícone das extensões dos arquivos.

Beautify: Habilita a execução de JavaScript de modo a customizar.

Live Server: Servidor local interno no VSCode para páginas estática (HTML, CSS, JS).

Javascript (ES6) Code Snippets: Atalhos de autocompletar do JavaScript.

ESLint: Verifica se código está no padrão, conforme a documentação da linguagem JavaScript exige.

Paste JSON as Code: Formata o JSON.

Remote – Containers: Comunica com os containers Docker/Podman.

GitLens: Visualiza o histórico de commits já realizado.

Markdown All in One: Formata e visualiza códigos em markdown.

Bookmarks: Marcador de linhas, como por exemplo TODOs no código.

Settings Sync: Sincroniza configurações do repositório remoto do GitHub, Bitbucket, Gitlab.

PHP IntelliSense: Autocompletar e verifica se está de acordo com a documentação do PHP.

Language Support for Java: Formata código Java.

Debugger for Java: Debugg de códigos Java.

Test Runner for Java: Execução de testes unitários e integrados.

Maven for Java: Gerenciador de dependências de bibliotecas do Java.

Project Manager for Java: Gerenciador de projetos Java.

React Native Tools: Integração de comandos e debug do React Native.

Flutter: Suporte e debug da linguagem Dart e Flutter.

Vistual Studio IntelliCode: Identifica a linguagem pela extensão do arquivo.

Existem outras extensões de desenvolvimento no VSCode, apenas compartilhei as extensões que costumo utilizar no VSCode. Caso utilize alguma extensão que não foi mencionada neste post, escreva nos comentários.

Feito!

Configurando o Netbeans no modo Dark

Por padrão, o Netbeans vem com fundo branco, mas a maioria dos desenvolvedores preferem utilizar o modo Dark, segue os procedimentos para fazer o modo Dark.

Com o Netbeans aberto, segue:

No menu Tools>Options

Em Fonts & Colors, selecione o Profile "FlatLaf Dark"

Clique no botão "Apply"

Se quiser todo o Netbeans em modo Dark

No menu Tools>Options

Em Apperarance, na aba "Look and Feel", selecione no campo Prereded look and feel "FlaLaf Dark".

Clique no botão "Apply"

Nessa opção irá precisar reiniciar o Netbeans, inclusive irá aparecer um alerta sobre isso.

Feito!

Instalando o Netbeans no Linux (qualquer distro)

Netbeans é uma IDE (Ambiente de Desenvolvimento Integrado) gratuito e de código aberto, é mais popular para a linguagem Java no desenvolvimento de aplicação desktop, por facilitar a construção das interfaces no drag and drop dos componentes gráficos. Porém, também tem suporte outras linguagens, como C, C++, PHP, Groovy, Ruby.

O Netbeans é multiplataforma, isto é, pode ser instalado em Windows, GNU/Linux, macOS.

O presente post explica a instalação do Netbeans no GNU/Linux (qualquer distro), pelo script oficial.

Até a data de publicação deste post, a versão atual do Netbeans é 14, no entanto, verifique a versão atual e adapte a URL, conforme a versão do Netbeans dos procedimentos a seguir:

Procedimentos de instalação do Netbeans

Premissas: Ter o Java (openJDK) instalado

Debian e derivados

$ sudo apt install openjdk-X-jdk --yes

Substitua o X pela versão atual disponibiliza no repositório. Verifique
$ apt search openjdk

JDK no modo manual que serve para qualquer distro

Instalando e configuração do Java e PATH

$ wget -c "https://dlcdn.apache.org/netbeans/netbeans-installers/14/Apache-NetBeans-14-bin-linux-x64.sh"

$ chmod +x Apache-NetBeans-14-bin-linux-x64.sh

$ ./Apache-NetBeans-14-bin-linux-x64.sh

Após executar o script Shell, segue os screenshots para ter uma base.

Clique no botão "Next"

Marque o termo da licença de uso e clique no botão "Next"

Confirme o diretório que será instalado o Netbeans e se o JDK está no diretório correto que instalou, após confirmar, clique no botão "Next"

Clique no botão "Install" e aguarde o processo de instalação concluir

Instalação do Netbeans concluída

Caso por algum motivo quer desinstalar o Netbeans, segue a próxima seção

Desinstalar o Netbeans

Abre o terminal e acesse o diretório onde instalou o Netbeans, por default é /home/<usuario>/netbeans-numero-versao

Nesse diretório que acessou, onde foi instalado o Netbeans, tem o script uninstall.sh que faz o processo de desintalação completa do Netbeans

$ ./uninstall.sh

Confirme no botão "Unistall"

Netbeans desinstalado com sucesso

Feito!