Configurando ambiente de desenvolvimento React Native com Expo no Linux

O que é Expo ?

O Expo (GitHub) é um framework open-source e uma plataforma para aplicativos React universais. É um conjunto de ferramentas e serviços criados em torno de plataformas React Native e nativas para ajudar desde o desenvolvimento até atualizações Over The Air (OTA) e a geração do .apk, .aab e .ipa para que você possa colocar seu app nas lojas Play Store e App Store.

O Expo permite o desenvolvimento de aplicativos iOS, Android e web a partir da mesma base de código JavaScript / TypeScript.

O objetivo deste post é explicar os procedimentos de configuração do ambiente de desenvolvimento React Native no Linux (qualquer distro) e criar o primeiro aplicativo "HelloWorld-Expo".

Pré-requisitos:

• Ter o Node.js 12 ou superior.
• Instalar o aplicativo Expo no seu smartphone para a leitura do QRCODE.
• O editor de código pode ser qualquer um de sua escolha, eu uso o VSCode.

Instalando o Node.js via NVM

Segue as instruções Instalando o Node.js no Linux (qualquer distro)

Instalar a lib "expo-cli" via NPM

$ npm install -g expo-cli

Criando a primeira aplicação React Native com Expo

$ expo init HelloWorld-Expo

Escolha a opção blank

Aguarde a construção da estrutura base do aplicativo e acesse o diretório definido

$ cd HelloWorld-Expo

Iniciar o servidor de desenvolvimento do React Native Expo

$ npm start

Irá abrir uma nova aba do Google Chrome ou outro browser que definiu como padrão, a página do Expo com o QRCODE, conforme o screenshot abaixo.

Abre o aplicativo Expo que instalou no seu smartphone e faça a leitura do QRCODE, após isso irá executar o build do aplicativo no smartphone.

Após concluir, conforme o screenshot. Edite o arquivo App.js no editor de sua preferência, após editar a linha 8 e salvar, irá fazer o hot-reload no emulador, que poderá ver o resultado na hora.

Feito!

Configurando ambiente de desenvolvimento React Native no Linux

O que é React Native ?

React Native é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos para os sistemas Android e iOS de forma nativa.

O objetivo deste post é explicar os procedimentos de configuração do ambiente de desenvolvimento React Native no Linux (Debian/Ubuntu/Fedora) e criar o primeiro aplicativo "HelloWorld".

Pré-requisitos:

• Memória RAM mínima 8GB de RAM no computador. Recomendado 16GB de memória RAM.
• Suporte a virtualização habilitado no setup da BIOS.
• Node.js 12 ou superior, JDK 8 ou superior e Android Studio para o emulador.

O editor de código pode ser qualquer um de sua escolha, eu uso o VSCode.

Verificando suporte de virtualização

$ egrep '(vmx|svm)' --color=always /proc/cpuinfo

Se obter resultado, então o processador do seu computador tem suporte de virtualização. Pode continuar as próximas etapas.

Instalando o Node.js via NVM

Segue as instruções Instalando o Node.js no Linux (qualquer distro)

Instalando o openJDK

No Debian/Ubuntu, segue:

$ sudo add-apt-repository ppa:openjdk-r/ppa
$ sudo apt update
$ sudo apt-get install openjdk-8-jdk

No Fedora, segue:

echo -e '[adoptopenjdk]\n Name=AdoptOpenJDK $releasever - $basearch\n baseurl=https://adoptopenjdk.jfrog.io/adoptopenjdk/rpm/fedora/$releasever/$basearch\n enabled=1\n gpgcheck=1\n gpgkey=https://adoptopenjdk.jfrog.io/adoptopenjdk/api/gpg/key/public' | sudo tee /etc/yum.repos.d/adoptopenjdk.repo

sudo dnf install adoptopenjdk-8-hotspot

Instalando o Android Studio

Faça o Download Android Studio . Após concluir o download, acessar o diretório onde salvou o Android Studio e extraia.

$ tar -xzvf android-studio-ide-X.Y-linux.tar.gz

Onde o X e Y correspondem versão e release, respectivamente.

No Wizard do Android Studio, precisa marcar os itens:

• Android SDK
• Android SDK Plataform
• Android Virtual Device

Configuração da variável de ambiente ANDROID_SDK_HOME, ANDROID_AVD_HOME

Adicione no arquivo $HOME/.bash_profile ou $HOME/.bashrc

$ vim $HOME/.bashrc
export ANDROID_SDK_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_HOME/emulator
export PATH=$PATH:$ANDROID_SDK_HOME/tools
export PATH=$PATH:$ANDROID_SDK_HOME/tools/bin
export PATH=$PATH:$ANDROID_SDK_HOME/platform-tools
export ANDROID_AVD_HOME=$ANDROID_SDK_HOME/tools/bin/avdmanager
export PATH=$PATH:$ANDROID_AVD_HOME export ANDROID_SDK_ROOT=$HOME/Android/Sdk

ESC +:x (salvar e sair do editor Vim)

$ source $HOME/.bashrc

Criando a primeira aplicação React Native

Estando com as ferramentas necessárias instaladas e configuradas, conforme os procedimentos descritos, então vamos criar a primeira aplicação React Native "HelloWorld".

Execute o comando para criar a estrutura do projeto base

$ npx react-native init HelloWorld

Abrir o emulador Android, sem a necessidade de abrir o Android Studio

Lista os AVDs já criados no Android Studio

$ emulator -list-avds

Abrir o emulador definido o AVD no Android Studio.

$ emulator @Pixel_2_API_29

Executando a aplicação React Native

Acessar o diretório definido do aplicativo

cd HelloWorld
Start Metro

Primeiro, você precisará iniciar o Metro, o empacotador JavaScript que acompanha o React Native. Metro pega um arquivo de entrada e várias opções e retorna um único arquivo JavaScript que inclui todo o seu código e suas dependências.

$ npx react-native start

Em outra aba do terminal

NOTA: É necessário estar aberto o emulador e manter em execução o Metro na primeira aba do terminal.

$ npx react-native run-android

Na primeira vez, o processo é demorado, pois irá fazer o build do aplicativo no emulador.

Habilitar o modo de desenvolvedor no smartphone

Outra opção que pode fazer é executar aplicação Android diretamente no seu smartphone. Para isso, é necessário habilitar o modo de desenvolvedor, os procedimentos pode variar de modelo do seu smartphone, como a localização dos menus, então adapte, se for o seu caso.

Settings\System\About phone

Pressione 7x sobre Build number, irá aparecer um pop-up informando que foi habilitado o modo de desenvolvedor

Para confirmar, Settings\System\Developer Options

Marcar "Depuparação USB" na hora que estiver desenvolvendo aplicativo Android

Adicionar o seu usuário no grupo plugdev

$ sudo usermod -aG plugdev $LOGNAME
$ sudo apt-get install android-sdk-platform-tools-common

Verificar o dispositivo

$ lsusb

Confira a marca do seu smartphone no resultado do comando acima, conforme o exemplo do meu caso.

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

Altere "22b8", conforme o resultado mostrado no comando lsusb

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

Note que "22b8" ou outro que for exibido no executado do comando lsusb deve aparecer no resultado do comando a seguir

$adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device


Após concluir, conforme o screenshot. Edite o arquivo App.js no editor de sua preferência, após editar a linha 74 e salvar, irá fazer o hot-reload no emulador, que poderá ver o resultado na hora, conforme o screenshot do emulador em execução.

Feito!

Instalando o software IRPF 2021 no Linux

O software IRPF 2021 permite gerar a declaração de imposto de renda para pessoa física referente ao exercício de 2021, do ano 2020.

Se obteve rendimentos tributáveis superior a R$ 28.559,70 ou, no caso de atividade rural teve uma receita bruta superior a R$ 142.798,50, no ano de 2020, então precisa fazer a declaração do imposto de renda pelo software IRPF 2021.

A novidade do IR 2021 é a exigência de declaração para quem recebeu o auxílio emergencial para enfrentar a pandemia do Covid-19, Mas, apenas precisa declarar o auxílio quem recebeu outros rendimentos tributáveis que somem mais de R$ 22.847,76. Quem se enquadrar nesse caso, terá que devolver o valor recebido do auxílio.

O prazo de entrega da declaração teve início no dia 01/03/2021 e se prolongará até às 23h59 do dia 30/04/2021.

Procedimentos de instalação do software IRPF 2021 no Linux (qualquer distro)

Abre o terminal e acesse um diretório de sua escolha que pretende salvar o instalador irpf2021.bin

$ wget https://downloadirpf.receita.fazenda.gov.br/irpf/2021/irpf/arquivos/IRPF2021Linux-x86_64v1.2.bin -O irpf2021.bin

Se por algum motivo ocorrer um erro de certificado (ERRO: não foi possível verificar o certificado de downloadirpf.receita.fazenda.g…, emitido por "/C=BR/O=ICP-Brasil/OU=Secretaria da Receita Federal do Brasil – RFB/CN=Autoridade Certificadora SERPRORFBv4").

$ wget --no-check-certificate http://downloadirpf.receita.fazenda.gov.br/irpf/2021/irpf/arquivos/IRPF2021Linux-x86_64v1.2.bin -O- irpf2021.bin

Setar a permissão para execução

$ chmod +x irpf2021.bin

Executar o instalador IRPF2021

$ ./irpf2021.bin

Na primeira tela, clique no botão "Sim".

Clique no botão "Avançar"

O próximo passo é escolher o diretório de instalação que deseja salvar, clique em "Avançar".

Confirme a instalação no botão "Avançar".

Por fim, clique no botão "Concluir".

Pronto, a instalação do IRPF2021 está concluída, poderá abrir no atalho que foi criado na área de trabalho. Também se preferir abrir o software IRPF2021 pelo terminal

$ ~/ProgramasRFB/IRPF2021/java-runtime/bin/java -Xms128M -Xmx512M -jar ~/ProgramasRFB/IRPF2021/irpf.jar

Agora, pode fazer a sua declaração do imposto de renda no Linux.

Após fazer a sua declaração e salvar o comprovante que fez a declaração do imposto de renda 2021, se quiser, pode desinstalar o software IRPF 2021.

Execute no terminal

~/ProgramasRFB/IRPF2021/uninstall

Confirme a desinstalação, clicando no botão "Sim"

Feito!

Configurando ambiente de transferência de arquivos seguro com Blymp-io

O que é Blymp-io?

Blymp-io é uma ferramenta de transferência de arquivos de um dispositivo para outro, informando o código.

Procedimentos de instalação e configuração do Blymp-io em servidor próprio

Pré-requisitos: Ter o Node.js e NPM instalado, se caso não tiver, Instalando o Node.js no Linux (qualquer distro)

Clonar o repositório do projeto

git clone https://github.com/vantezzen/blymp-io

Acessar o diretório do projeto clonado

cd blymp-io

Executar as dependências via NPM

npm install

Executar o servidor no ambiente de desenvolvimento

npm run dev

Para o build no ambiente de produção, execute:

npm run start

Ambiente de produção: http://IPSERVIDOR:8080

Ambiente de desenvolvimento: http://localhost:3000

Configuração no ambiente de produção com servidor web Apache

Habilitar o módulo Rewrite no Apache

$ sudo a2enmod rewrite

Adicione no arquivo /etc/apache2/sites-available/000-default.conf

<IfModule mod_alias.c>
   Redirect 301 / http://IPSERVIDOR:8080
</IfModule>

Reinicie o Apache

$ sudo systemctl restart apache2

Agora após executar npm run start irá liberar o serviço na porta 8080 que será redirecionado automaticamente ao acessar http://seudominio.com.br

Feito!

Configurando o Jetstream Laravel no Docker

O que é Jetstram Laravel?

O Jetstream fornece o ponto de partida para seu próximo projeto incluindo login, registro, verificação de e-mail, autenticação de dois fatores, gerenciamento de sessão, suporte de API via Laravel Sanctum e gerenciamento de usuários

O objetivo deste post é explicar os procedimentos de configuração do Jetstream a partir do ambiente PHP 8 com Apache e SGBD MySQL no Docker

Após criar o ambiente PHP 8 com Apache e SGBD MySQL no Docker , segue os procedimentos abaixo:

Primeiro acessar o diretório do ambiente e subir o ambiente PHP 8 com Apache e SGBD MySQL, conforme segue:

$ docker-compose up -d

Se utilizou o mesmo ambiente PHP 8 com Apache e SGBD MySQL no Docker , tem o Adminer, que é uma ferramenta web de administração de diversos SGBDs, nesse caso o SGBD MySQL.

Acessar o Adminer no browser http://localhost:8080 e crie o banco de dados com o nome que preferir

Após criar o banco de dados, acessar o container php8-apache para instalar o Laravel

$ docker exec -it php8-apache bash

Instalar o Laravel via composer, definir o nome como app, mas geralmente é colocado o nome do projeto

$ composer create-project --prefer-dist laravel/laravel app

Após concluir a instalação do Laravel, saia do container php8-apache, digite exit

No diretório do ambiente PHP 8 que configurou, dentro deste diretório deve ter um diretório src, que é o volume mapeado entre HOST e CONTAINER.

$ cd ambiente-php8-apache-mysql-docker/src

Aqui deve ter o diretório definido na instalação do Laravel, nesse caso app, mas antes é necessário alterar o owner do diretório para o seu usuário.

$ sudo chown -R ambiente-php8-apache-mysql-docker/ seu-usuario:seu-usuario

Renomear o .env.example para .env no editor de sua preferência

DB_HOST=db #nome do serviço container MySQL
D_PORT=3306 # porta default do MySQL
DB_DATABASE=nome-banco-de-dados #mesmo nome do banco de dados criado na ferramenta Adminer
DB_USERNAME=root #nome de usuário do banco de dados definido no docker-compose do ambiente PHP 8
DB_PASSWORD=secret #password do usuário do banco de dados definido no docker-compsoe do ambiente PHP 8

Acessar o container php8-apache novamente

$ docker exec -it php8-apache bash

Dentro do container, acessar o diretório app e execute os procedimentos

$ cd app

Gerar a chave para o projeto via artisan do Laravel

php artisan key:generate

Adicionar a biblioteca Jetstream no projeto com Laravel

composer require laravel/jetstream

Adicionar a biblioteca Livewire para complementar o frontend no projeto Laravel com Jetstream

php artisan jetstream:install livewire

Adicione o times do Jetstream com Livewire, que é como organização de usuários.

php artisan jetstream:install livewire --teams

Execute as migrations para criar as tabelas no banco de dados criado anteriormente pela ferramenta Adminer

php artisan migrate

Instalação do Node.js e NPM via NVM (gerenciador de versões do Node.js)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash

source ~/.bashrc && nvm install v14.15.5

npm install && npm run dev

chown -R www-data:www-data storage

Saia do container php8-apache, digite exit

No browser, acesse http://app.intranet:8000 crie um novo usuário no link "register", após criar o usuário irá autenticar e redirecionar no dashboard automaticamente.

Referências

Laravel 8 Jetstream no Docker

Feito!

Expondo seu ambiente local com Ngrok

O que é Ngrok?

Ngrok é uma ferramenta de linha de comando que te permite criar um túnel seguro, por meio de NAT e Firewall, que expõem serviços locais para a Internet, tudo isso de forma fácil e segura.

Ao criar uma conexão com tunelamento pode ser útil quando você precisa:

• Mostrar uma prévia remota da aplicação que está localhost para algum cliente;
• Desenvolver integrações de Webhook;
• Testar aplicativos móveis conectado no Backend em execução local;

Instalando o Ngrok

O Ngrok é multiplataforma, assim pode ser instalado nos SOs Windows, Linux, macOS.

O primeiro passo é fazer o download Ngrok conforme o seu SO.

Considerando que salvou o arquivo .zip no diretório Downloads

$ cd $HOME/Downloads
$ sudo unzip ngrok-stable-linux-amd64.zip -d /opt

Agora só digitar no terminal, conforme segue:

$ /opt/ngrok

Para poder executar o ngrok em qualquer diretório, adicione no PATH do SO.

Tendo uma aplicação web no seu localhost na porta 80, execute

$ /opt/ngrok http 80

Irá exibir o log, com um link de domínio randômico para compartilhar para qualquer pessoa acessar, a aplicação está em execução na sua máquina com tunelamento no cloud da Ngrok.

É possível usar o ngrok sem nenhum tipo de conta, mas tem algumas limitações, por exemplo, o tempo máximo que irá limitar as seções após criar o túnel. Recomendo que crie a conta e assine o plano gratuito , com isso ao executar o ngrok na conta vinculada, elimina essa limitação de tempo por seção.

Para vincular o Ngrok na sua conta, precisa do Authtoken que é disponibilizado na configuração de conta, obtendo esse token, execute o comando:

$ /opt/ngrok authtoken [seu-authtoken-aqui]

Coloque sua aplicação localhost exposta na Internet

$ /opt/ngrok http 80

O Ngrok disponibiliza uma interface web para poder analisar em tempo real todos os detalhes das requições e respostas que estão trafegando no seu túnel.

Acesse no browser http://127.0.0.1:4000

Terá acesso todos os detalhes da requisição e da resposta, incluindo:

• Tempo duração;
• Headers;
• Payload;
• Parâmetros de consulta;
• Bytes brutos

Outros recursos e configurações

É possível criar um túnel via TCP e expor qualquer serviço que esteja executndo localmente, por exemplo: SSH, SGBDs: MySQL (3306), PostgreSQL (5432).

Liberar acesso externo ao SSH
$ /opt/ngrok tcp 22

Liberar acesso externo ao SGBD MySQL
$ /opt/ngrok tcp 3306

Liberar acesso externo ao SGBD PostgreSQL
$ /opt/ngrok tcp 5432

O Ngrok vem com um file server embutido, assim pode criar um túnel HTTP direcionando para o diretório do seu sistema de arquivo local.

Exemplo para o diretório /srv/share

$ /opt/ngrok tcp --auth="user:password" file:///srv/share

Referências:

https://ngrok.com/docs

Feito!