anúncios

quarta-feira, 28 de abril de 2021

Configurando o projeto MSN-JS no servidor Linux

O que é projeto MSN-JS?

O Projeto MSN-JS, tem objetivo de reproduzir o Windows Live Messenger na versão web. O Windows Live Messenger foi um dos mensageiros mais famosos da Internet, que foi descontinuado em 15 de Março de 2013.

O MSN foi o mais usado no mundo com mais de 230 milhões. No Brasil, o serviço atingiu mais de 75% dos usuários da Internet, que significava mais de 34 milhões de usuários no país.

Tecnologias envolvidas no projeto

Vamos configurar o projeto MSN-JS e relembrar do MSN como nostalgia ?

Bora.

Pré-requisitos: Git, Node.js e gerenciador de bibliotecas NPM

Observação: O presente howto foi testado no Debian 10 e Ubuntu 18.04/20.04

Segue os procedimentos abaixo:

$ git clone https://github.com/rmsaitam/msn-js.git

Em uma aba do terminal, execute:

$ cd msn-js/frontend
$ npm install

Na outra aba do terminal, execute:

$ cd msn-js/backend
$ npm install

Algumas parametrizações no Frontend e Backend

No arquivo frontend/src/configs/config_connections.js

Informe o endereço IP do servidor, onde está hospedado

Crie um app no spotify API https://developer.spotify.com/dashboard Ao criar o Spotify, irá fornecer duas chaves, client e secret.

Configure o redirecionamento de URL, onde está hospedado o seu servidor.

Exemplo: https://seudominio.com/routes/spotify/callback

Feito isso, coloque o client_id e o client_secret no arquivo de configuração backend/configs/config.js. Coloque o IP do servidor, onde está hospedado e as duas chaves do Spotify.

Inicializar o serviço Frontend e Backend

No diretório frontend, execute

$ npm start

No diretório backend, execute

$ sudo npm start

No browser acesse http://IPSERVIDOR:3000, coloque o seu nome e clique no botão "Entrar".

Compartilhe o endereço http://IPSERVIDOR:3000 para outra máquina da mesma rede e teste, cada um que acesse esse endereço após colocar o seu nome e clicar no botão "Entrar" poderá conversar com as pessoas que estiverem online no momento.

Disfruta da nostalgia do MSN.

Feito!

terça-feira, 20 de abril de 2021

Configurando uma plataforma como alternativa ao WeTransfer

O projeto Send é fork do projeto da Mozilla Firefox Send, esse utiliza criptografia de arquivos e proteção com password, permite enviar arquivos (1GB a 2,5GB) com proteção e segurança. Porém a Mozilla Firefox abandonou o projeto Send, então por isso o fork do Send para continuar com projeto na comunidade opensource.

O projeto Send pode ser utilizado como alternativa ao WeTransfer no servidor próprio.

Pré-requisitos: Ter o Node.js, o gerenciador de bibliotecas NPM, Git e o servidor web Apache para ambiente de produção.

Observação: Os procedimentos deste howto foram testados nas distros Debian 10 e Ubuntu 18.04/20.04.

Procedimentos de configuração do ambiente Send no servidor próprio

Clone do repositório Send

$ git clone https://github.com/timvisee/send.git

Acessar o diretório clonado

$ cd send

Instalar as dependências necessárias com o NPM

$ npm install

Ambiente de desenvolvimento

$ npm start

Ambiente de produção

$ npm run build
$ npm run prod

No browser acesse http://IPSERVIDOR:8080

Como utilizar o Send?

A forma de utilização do Send é similar ao WeTransfer, onde ao fazer o upload do arquivo que está no seu computador, irá gerar o link aleatório e você pode definir uma senha se quiser e o tempo de expiração do link gerado. Envie o link gerado para outra pessoa, se definiu a senha, irá pedir para liberar o acesso de download do arquivo. Simples assim.

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!

segunda-feira, 19 de abril de 2021

Conhecendo o Insomnia

O que é Insomnia?

É uma ferramenta cliente de API REST, como o Postman, mas tem alguns recursos adicionais, como suporte a GraphQL, gRPC, entre outros.

Os principais métodos HTTP são:

  • GET: Utilizado para obter um recurso
  • POST: Utilizado para cadastrar uma informação
  • PUT: Utilizado para alterar um recurso
  • DELETE: Utilizado para deletar um recurso

Instalando o Insomnia

No Linux (Debian, Ubuntu)

Adicionar o repositório no arquivo sources.list.d/insomnia.list

$ echo "deb https://dl.bintray.com/getinsomnia/Insomnia /" | sudo tee -a /etc/apt/sources.list.d/insomnia.list

Adicionar a chave pública

$ wget --quiet -O - https://insomnia.rest/keys/debian-public.key.asc | sudo apt-key add -

Atualizar o repositório e instalar o Insomia pelo gerenciador de pacotes APT

sudo apt update
sudo apt install insomnia

Outras distros, pode instalar via Snap

$ sudo snap install insomnia

Tendo instalado o Insomnia no computador, a URL da API e os endpoints, pode já começar a utilizar a fazer as requisições.

Por convenção de boas práticas, utiliza versionamento na API REST, assim a URL ficaria algo assim https://api.dominio.com/v1/ seguido pelo nome do endpoint.

Ao abrir o Insomnia, tem a opção de criar uma conta e compartilhar dados, mas é opção, pode clicar em Skip.

Feito isso, clique no "+" e "New Request", coloque o nome da requisição que está fazendo na sua API e selecione o método HTTP correspodente, por fim clique em "Create".

Tem a opção de criar um diretório também ao clicar no "+" e "New Folder" e assim organizar as requisições de múltiplas APIs REST por diretórios.

Geralmente a API REST tem algum método de autenticação, seja, Basic (autenticação básica), API Key, Bearer Token (JWT), entre outros listados, conforme pode verificar no Insomnia na aba Auth, ao clicar irá aparecer as opções disponívels de métodos de autenticação.

Após selecionar o método de autenticação utilizado pela API REST, informe o campo correspondente, conforme o método selecionado.

Se selecionar Basic, irá aparecer dois campos Username e Password.

Se selecionar Bearer Token, irá aparecer o campo Token, que corresponde ao JWT.

Assim sucessivamente para outros métodos de autenticação disponíveis.

O próximo é selecionar o método HTTP e a URL da API com o endpoint

Exemplo de requisição GET

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: GET

Se quiser consultar todos os registros de produtos da API do exemplo. Nesse caso, selecione GET, coloque a URL da API com o endpoint produtos e clique no botão "Send", irá obter o resultado. geralmente um JSON como resposta com a listagem de produtos da API.

Caso deseja obter apenas um registro específico, então após o endpoint, adicione o id que é o identificador único.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

identificador único que deseja buscar: 8

Método HTTP: GET

No Postman, a URL ficaria assim https://api.dominio.com/produtos/8

Exemplo de requisição POST

Para facilitar o processo, evitando ter que colocar o método de autenticação da API novamente na próxima requisição, nesse caso POST, passa sobre o mouse no nome da requisição sobre a seta , vai em Duplicate, assim será duplicado, bastando apenas alterar o método HTTP, nesse caso de GET para POST e apagar o identificador único, colocando a URL real e o endpoint da API.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: POST

Na primeira aba, clica em cima e selecione "Form" para entrada de campos simples ou "Multipart" para campos texto,numérico ou "JSON" para no formato JSON. Por fim, preenche os campos com o nome do campo e respectivado valor ou se escreve o JSON dos campos de chave e valor.

Faz isso para cada campo, após concluir, clique no botão "Send", que irá obter um retorno em JSON, algo como "Cadastrado com sucesso" e com status 200 ou 201.

Exemplo de requisição PUT

Repita o procedimento explicado anteriormente para duplicar o requição anterior, assim altere o método HTTP de POST para PUT.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: PUT

Na primeira aba, clica em cima e selecione "Form" para entrada de campos simples ou "Multipart" para campos texto,numérico ou "JSON" para no formato JSON. Por fim, preenche os campos com o nome do campo e respectivado valor ou se escreve o JSON dos campos de chave e valor.

O método PUT é semelhante ao POST, com a diferença que é para atualizar o registro no endpoint, então precisa informar o identificador único para que seja atualizado apenas no id específico.

Informe na URL com o endpoint da API no final o identificador único. A URL ficaria assim https://api.dominio.com/produtos/8. Nesse caso o identificador seria o 8, mas pode ser o que quiser, você escolhe.

Faz isso para cada campo, após concluir, clique no botão "Send", que irá obter um retorno em JSON, algo como "Cadastrado com sucesso" e com status 200 ou 201.

Exemplo de requisição DELETE

Repita o procedimento explicado anteriormente para duplicar o requição anterior, assim altere o método HTTP de PUT para DELETE.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: PUT

O método DELETE, como o próprio nome já diz, serve para excluir registro no endpoint da API, então precisa informar o identificador único para que seja excluído apenas no id específico. Informe na URL com o endpoint da API no final o identificador único. A URL ficaria assim https://api.dominio.com/produtos/8. Nesse caso o identificador seria o 8, mas pode ser o que quiser, você escolhe.

Apague o que estiver na aba Form/Multipart/JSON os campos com os valores e clique no botão "Send", irá obter um retorno JSON, que foi excluído com sucesso ou falha, isso se quem o desenvolveu a API adicionou um retorno, geralmente tem, mas em todo caso, tem o status 200.

Bônus

No Insomnia tem o recurso de gerar o código nas linguagens de programação C, C#, Objective-C, Java, Node.js, PHP, Python, Ruby, JavaScript, Kotlin, Shell, PowerShell, Clojure, R. Isso pode ser verificado no nome da requisição que definiu, clica na seta, irá abrir um modal com o campo de seleção das linguagens mencionadas e o cliente cURL, com isso irá gerar o código base funcional.

Considerações finais

Nesse post foi apresentado a descrição breve, instalação e modo de utilizar o Insomnia para utilizar na requisição de API REST de terceiros ou na sua própria que desenvolveu. Para saber mais sobre o status HTTP .

Feito!

sábado, 17 de abril de 2021

Conhecendo o Postman

O que é Postman?

É uma ferramenta de suporte à documentação das requisições feitas pela API REST com os principais métodos HTTP seguintes:

  • GET: Utilizado para obter um recurso
  • POST: Utilizado para cadastrar uma informação
  • PUT: Utilizado para alterar um recurso
  • DELETE: Utilizado para deletar um recurso

Instalando o Postman

Faça o Download do Postman , conforme o SO e arquitetura.

No Windows, basta executar o arquivo executável e seguir os padrões de costume de Windows.

No Linux, extrair o arquivo Postman-linux64-tar.gz, conforme segue:

Extrair o arquivo Postman

$ tar -xzvf Postman-linux64-tar.gz

Acessar o diretório

$ cd Postman

Executar o binário

$ ./Postman

PS: Pode criar um atalho para abrir o Postman no gerenciador gráfico que estiver utilizando na distro também.

Tendo instalado o Postman no computador, a URL da API e os endpoints, pode já começar a utilizar a fazer as requisições.

Por convenção de boas práticas, utiliza versionamento na API REST, assim a URL ficaria algo assim https://api.dominio.com/v1/ seguido pelo nome do endpoint.

Geralmente a API REST tem algum método de autenticação, seja, Basic Auth (autenticação básica), API Key, Bearer Token (JWT), entre outros listados, conforme pode verificar no Postman na aba Authorization em Type.

Após selecionar o método de autenticação utilizado pela API REST, informe o campo correspondente, conforme o método selecionado.

Se selecionar Basic Auth, irá aparecer dois campos Username e Password.

Se selecionar Bearer Token, irá aparecer o campo Token, que corresponde ao JWT.

Assim sucessivamente para outros métodos de autenticação disponíveis.

O próximo é selecionar o método HTTP e a URL da API com o endpoint

Exemplo de requisição GET

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: GET

Se quiser consultar todos os registros de produtos da API do exemplo. Nesse caso, selecione GET, coloque a URL da API com o endpoint produtos e clique no botão "Send", irá obter o resultado. geralmente um JSON como resposta com a listagem de produtos da API.

Caso deseja obter apenas um registro específico, então após o endpoint, adicione o id que é o identificador único.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

identificador único que deseja buscar: 8

Método HTTP: GET

No Postman, a URL ficaria assim https://api.dominio.com/produtos/8

Exemplo de requisição POST

Para facilitar o processo, evitando ter que colocar o método de autenticação da API novamente na próxima requisição, nesse caso POST, passa sobre o mouse no nome da requisição em 3 pontinhos, vai em Duplicate, assim será duplicado, bastando apenas alterar o método HTTP, nesse caso de GET para POST e apagar o identificador único, colocando a URL real e o endpoint da API.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: POST

Na aba Body, selecione form-data, preenche os campos Key (nome do campo), Value (o conteúdo correspondente ao campo).

Faz isso para cada campo, após concluir, clique no botão "Send", que irá obter um retorno em JSON, algo como "Cadastrado com sucesso" e com status 200 ou 201.

Exemplo de requisição PUT

Repita o procedimento explicado anteriormente para duplicar o requição anterior, assim altere o método HTTP de POST para PUT.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: PUT

Na aba Body, selecione form-data, preenche os campos Key (nome do campo), Value (o conteúdo correspondente ao campo).

O método PUT é semelhante ao POST, com a diferença que é para atualizar o registro no endpoint, então precisa informar o identificador único para que seja atualizado apenas no id específico.

Informe na URL com o endpoint da API no final o identificador único. A URL ficaria assim https://api.dominio.com/produtos/8. Nesse caso o identificador seria o 8, mas pode ser o que quiser, você escolhe.

Faz isso para cada campo, após concluir, clique no botão "Send", que irá obter um retorno em JSON, algo como "Cadastrado com sucesso" e com status 200 ou 201.

Exemplo de requisição DELETE

Repita o procedimento explicado anteriormente para duplicar o requição anterior, assim altere o método HTTP de PUT para DELETE.

URL fictícia: https://api.dominio.com

Endpoint: /produtos

Método HTTP: DELETE

O método DELETE, como o próprio nome já diz, serve para excluir registro no endpoint da API, então precisa informar o identificador único para que seja excluído apenas no id específico. Informe na URL com o endpoint da API no final o identificador único. A URL ficaria assim https://api.dominio.com/produtos/8. Nesse caso o identificador seria o 8, mas pode ser o que quiser, você escolhe.

Apague o que estiver na aba Body os campos com os valores e clique no botão "Send", irá obter um retorno JSON, que foi excluído com sucesso ou falha, isso se quem o desenvolveu a API adicionou um retorno, geralmente tem, mas em todo caso, tem o status 200.

Considerações finais

Nesse post foi apresentado a descrição breve, instalação e modo de utilizar o Postman para utilizar na requisição de API REST de terceiros ou na sua própria que desenvolveu. Para saber mais sobre o status HTTP .

Feito!

domingo, 11 de abril de 2021

Configurando o ambiente de desenvolvimento Flutter no Linux

O que é Flutter?

Flutter é um kit de desenvolvimento de interface de usuário, de código aberto, criado pelo Google, que possibilita a criação de aplicativos compilados nativamente. Atualmente pode compilar para Android, iOS, Windows, Mac, Linux, Google Fuchsia e Web. Lançado em Maio de 2017.

O objetivo deste post é explicar os procedimentos de configuração do ambiente de desenvolvimento Flutter no Linux (qualquer distro) e criar o primeiro aplicativo.

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.
  • O editor de código pode ser qualquer um de sua escolha, eu uso o VSCode.

Verificando se o computador tem 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 openJDK

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

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_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

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

$ source $HOME/.bashrc

Abrir o Android Studio e crie o AVD Manager, selecione "Create Virtual Device", este é o emulador Android, estando OK, execute. Uma vez criado o AVD, ao criar o primeiro aplicativo em Flutter, será mostrado como abrir o emulador sem precisar o Android Studio.

Download do Flutter via repositório Git

$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

Adicionar a variável de ambiente FLUTTER_SDK que aponta ao diretório que fez o clone do repositório anteriormente

# vim $HOME/.bashrc
export FLUTTER_SDK=$HOME/flutter
export PATH=$PATH:$FLUTTER_SDK/bin

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

$ source $HOME/.bashrc

Execute o seguinte comando para listar as dependências que precisa instalar para o ambiente Flutter completo

$ flutter doctor

Estando tudo OK, pode continuar com o próximo passo, caso contrário revisar e verificar o que faltou instalar.

Criando a primeira aplicação Flutter

Estando com as ferramentas necessárias, conforme os procedimentos descritos, então vamos criar a primeira aplicação Flutter.

$ flutter create HelloWorld
$ cd HelloWorld

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

Lista os AVDs já criados no Android Studio

$ emulator -list-avds
$ emulator @Pixel_2_API_29
$ flutter devices
flutter run -d emulator-5554

Irá executar o exemplo padrão do Flutter no emulador, que é um contador, ao clicar no botão "+", irá incrementar o número.

Feito!

domingo, 28 de março de 2021

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!

sábado, 27 de março de 2021

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!