Aprenda a instalar o Node com o nvm. Gerando um projeto de React Native com o create-react-native-app. Conectando ao aplicativo Expo para desenvolver no próprio dispositivo móvel.

React Native - Guia de Instalação (Node e Expo)

Aprenda a instalar o Node com o nvm. Gerando um projeto de React Native com o create-react-native-app. Conectando ao aplicativo Expo para desenvolver no próp...

Nesta aula aprendemos a instalar o Node.js no Ubuntu com o Node Version Manager (nvm).

O `nvm` é um gerenciador de versões que nos permite instalar e mudar a versão instalada do Node sem ter que se restringir à uma específica.

O repositório oficial do nvm contém instruções de como instalar. Uma delas é através de um script de shell que é baixado e executado na sua máquina. Pode-se baixar o script manualmente e rodá-lo. Ou usar tanto o comando `curl` como o `wget` para baixar e redirecionar a saída para o comando `bash` (ou qualquer outro tipo de shell). [Clique aqui para acessar o repositório](https://github.com/nvm-sh/nvm#installing-and-updating) e copiar o comando de instalação:

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

(O comando acima se tornará obsoleto com novas versões então recomendo acessar o repositório diretamente e copiar de lá)

O diretório `.nvm` então será criado no caminho do seu diretório pessoal (`/home/usuario`).

Linhas de configuração do nvm também serão adicionadas ao seu arquivo de `.bashrc` no seu diretório pessoal. Para confirmar, execute o comando:

```
tail ~/.bashrc
```

Espere uma saída que contém uma passagem parecida com a seguinte:

```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
```

Para rodar o nvm sem ter que abrir uma nova janela ou aba do terminal, rode:

```
source ~/.bashrc
```

Para instalar a versão mais atual do Node de suporte a longo prazo ("long-term support"), rode:

```
nvm install 'lts/*'

# o seguinte também funciona
nvm install --lts
```

Para listar as versões instaladas:

```
nvm list
```

Para usar a versão instalada, rode `nvm use 16`, onde 16 é o número da versão desejada. Para usar a versão de suporte a longo prazo, use:

```
nvm use 'lts/*'

# o seguinte também funciona
nvm use --lts
```

Para confirmar que estás rodando a versão desejada, rode os seguintes comandos:

```
node -v

npm -v
```

[Ubuntu] Instalando o Node com NVM

# Resumo da Aula sobre Instalação do Node no Linux Usando NVM

Nesta aula, aprendemos como instalar o Node.js no Linux utilizando o NVM (Node Version Manager), um gerenciador de versões que permite escolher e alternar entre diferentes versões do Node e do NPM.

## Passos para Instalação

1. **Acessar o Repositório do NVM no GitHub**: 
   - Navegue até [a página do NVM no GitHub](https://github.com/nvm-sh/nvm).
   
2. **Instruções de Instalação**:
   - Baixe o script de instalação e execute-o no terminal.
   - O NVM será instalado na pasta `.nvm` do seu diretório pessoal.

3. **Executar o Script**:
   - Utilize um dos seguintes comandos:
     ```
     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
     ```
   - O script adicionará linhas ao seu arquivo `.bashrc` para inicializar o NVM em cada sessão do terminal.

4. **Atualizar o Terminal**:
   - Abra uma nova janela do terminal ou execute `source ~/.bashrc` para aplicar as mudanças sem reiniciar a sessão.

5. **Instalar Versões do Node**:
   - Para instalar a versão LTS do Node, use:
     ```
     nvm install --lts
     ```
   - No momento da gravação, a versão LTS era a 8.

6. **Alternar Entre Versões**:
   - Para instalar uma versão específica do Node, como a versão 6, utilize:
     ```
     nvm install 6
     ```
   - O NPM correspondente à versão do Node também será instalado.

7. **Listar Versões Instaladas**:
   - Para verificar as versões instaladas, utilize:
     ```
     nvm ls
     ```

## Considerações Finais

A instalação do Node com o NVM é conveniente e permite gerenciar facilmente várias versões do Node e do NPM. Para mais informações sobre comandos e opções do NVM, consulte a [documentação no GitHub](https://github.com/nvm-sh/nvm).

Até a próxima!

Nesta aula nós vamos aprender como instalar o node no Linux usando o NVM.
NVM é o Node Version Manager, é o gerenciador de versões para o node.
Quando a gente usar NVM a gente pode escolher que versão do node a gente quer usar.
Ele também muda a versão do NPM.
Então, para começar vamos lá no navegador e para a página do NVM no GitHub.
GitHub.com.creationix.nvm. GitHub.com.crie.nix.nvm.
Nesta página tem as instruções de instalação, se você ir lá para baixo aqui.
Installation. E é bem simples, a gente vai baixar um script de instalação e executar no nosso shell.
Aí vai instalar o NVM na parte da .nvm no seu diretório pessoal.
Então vamos lá, vamos primeiro copiar esse cara aqui.
Você tem a opção de usar o curl ou o Wget, eu vou usar o curl, tá certo?
Então vamos copiar o link do script de instalação.
E vamos voltar ao terminal aqui, vamos lá no terminal.
E vamos chamar o curl, traço o o, traço o, espaço e vamos colar aquele link.
Aí você dá um pipe para o baixo.
E ele vai baixar o NVM e vai instalar na pasta .nvm no seu diretório pessoal.
Ele também vai adicionar essas quatro linhas para o seu .bashrc.
Se você der um tail no .bashrc, seu diretório pessoal, você vê que ele realmente adiciona esse script.
Esse cara aqui vai inicializar o NVM toda vez que você abrir o seu terminal.
Se você tentar usar o NVM agora, não vai funcionar.
Então você tem que abrir um novo janela do terminal.
Se você não quiser abrir um novo janela, você pode dar um source na hora.
Dá um source assim no .bashrc para poder iniciar o NVM.
Se não, era só abrir uma nova janela, certo?
Com isso o NVM está instalado, a gente pode instalar a versão do node que a gente quiser.
Por exemplo, digitando o NVM install, LTS, barra, asterisco, vai instalar a versão de long term support.
Nesse caso é a versão 8 no momento que eu gravei esse vídeo.
Então ele vai baixar a versão do node 8 com o npm5.
Mas nós não vamos usar o npm5 porque no momento que eu gravei esse vídeo tem problema para rodar o create react native app.
Então a gente vai voltar lá para a versão do node 6 que vem com o npm3.
Se você quiser usar o node 8, pode usar e em vez de usar npm você usa o yarn, certo?
Então vamos continuar.
Eu vou agora instalar a versão 6 e mudar de versão.
Então bem fácil, só digitar NVM install 6.
Ele vai baixar e instalar a versão do node 6 junto com o npm3.
Então é bem conveniente e fácil de instalar no versões e de mudar de versões.
Se você dá o npm list, ele lhes distas versões que você tem, certo?
Note que a gente está usando agora a versão 6 com o npm3, certo?
Então esse é o npm.
Estalamos o node no Linux, no vunto, na minha ocasi versão 17.10.
E usamos a npm para instalar versões diferentes do node.
Se quiser ter mais informações de como usar o comando, dá uma olhada aqui no page no GitHub.
Tem várias maneiras de usar o padrão e se pudir antes, certo?
Então até a próxima.


0009-01 [Ubuntu] Instalando o Node com NVM

[Ubuntu] create-react-native-app

# Resumo do Tutorial de Instalação do Create React Native App

No vídeo, o instrutor mostra como instalar o módulo Create React Native App usando o NPM, que facilita a criação de projetos em React Native. Aqui estão os passos principais:

1. **Instalação do Create React Native App**:
   - Execute o comando: 
     ```bash
     npm install -g create-react-native-app
     ```
   - Alternativamente, você pode usar o Yarn para a instalação.

2. **Criação do Projeto**:
   - Após a instalação, crie um novo projeto com o comando:
     ```bash
     create-react-native-app nome-do-projeto
     ```
   - O processo de criação pode levar algum tempo, pois instala várias dependências.

3. **Próximos Passos**:
   - Assim que o projeto for gerado, o terminal exibirá os comandos para iniciar o servidor de desenvolvimento.
   - Se o Xcode ou Android Studio estiverem instalados, você pode rodar os simuladores para testar o aplicativo.
   - O próximo vídeo será dedicado a iniciar o servidor de desenvolvimento.

4. **Navegação até o Projeto**:
   - Navegue até o diretório do projeto com:
     ```bash
     cd nome-do-projeto
     ```
   - Os arquivos do projeto estarão disponíveis nesse diretório.

O próximo vídeo abordará como iniciar o servidor de desenvolvimento e utilizar o Xcode para rodar o aplicativo.

Depois de ter instalado o node usando o NPM, nós vamos agora instalar o módulo de NPM
chamado Create React Native App.
Esse módulo nos permitirá gerar projetos de React Native de maneira conveniente.
Vamos lá e usar o NPM, NPM install, traço de create react native app, certo?
E ele vai instalar esse comando globalmente.
Só um detalhe, eu estou usando node versão 6 com o NPM 3, certo?
Você também pode usar o yarn para instalar esse módulo.
Certo?
Depois de ter instalado Create React Native App, basta digitar o próprio nome,
seguido do nome do projeto para ser gerado.
Por exemplo, projeto de amostra.
Depois que digitar isso, vai criar um projeto de amostra com o nome da pasta sendo o nome do projeto.
Como esse cara demora um pouquinho, eu já fiz aqui na outra aba do meu terminal, certo?
Na verdade, ainda está fazendo.
Então, ele instala várias coisas aqui para poder gerar o projeto, certo?
O node que está criando o projeto aqui, certo?
E depois de um tempinho, o projeto termina de ser gerado.
Quando o projeto for gerado, ele vai dizer os comandos que você pode usar para iniciar o servidor de desenvolvimento.
Se você já tem o Xcode ou o Android Studio instalados, você pode rodar os simuladores daqueles caras, certo?
No nosso caso, a gente só vai querer rodar o servidor de desenvolvimento.
Isso a gente vai fazer no próximo vídeo, certo?
Então, a gente vai dar um CD para o nome do projeto que for gerado e aqui estão os arquivos.
Então, até a próxima aula, onde a gente vai aprender a rodar o servidor de desenvolvimento e usar o Xcode para poder rodar o aplicativo.
Até mais!


0009-02 [Ubuntu] create-react-native-app

[Ubuntu] Rodando o Servidor de Desenvolvimento

# Resumo do Transcrito

Após gerar o projeto com o Create React Native App, as seguintes etapas foram realizadas:

1. **Instalação das Dependências**:
   - Dentro do diretório do projeto, é necessário executar o comando:
     ```bash
     npm install
     ```
   - Este comando instala todas as dependências necessárias para rodar o projeto.

2. **Inicialização do Servidor de Desenvolvimento**:
   - O servidor de desenvolvimento é iniciado com o comando:
     ```bash
     npm start
     ```
   - Um erro relacionado ao *Watchman* pode ocorrer ("unable to start server").

3. **Resolvendo o Erro do Watchman**:
   - Para resolver isso, pode-se instalar o Watchman. No entanto, no caso apresentado, o autor opta por não instalá-lo e ao invés disso, executa comandos alternativos para configurar as instâncias do inotify.
     ```bash
     sudo sysctl -w fs.inotify.max_user_instances=1024
     sudo sysctl -w fs.inotify.max_user_watches=12288
     ```

4. **Reiniciando o Servidor**:
   - Após ajustar as configurações, o comando `npm start` é executado novamente, que inicia o Packager e gera um código QR.

5. **Conexão com o Dispositivo**:
   - O código QR gerado pode ser escaneado pelo aplicativo Expo instalado no dispositivo iOS ou Android.
   - Isso permitirá que as alterações no código do computador sejam automaticamente refletidas no dispositivo.

6. **Próximo Passo**:
   - No próximo vídeo, será demonstrado como usar o código QR para conectar o projeto ao dispositivo, e também mencionado que há uma alternativa por meio do link do IP caso o QR não funcione.

*(Nota: Os comandos devem ser executados em um terminal com privilégios de sudo, se necessário, e o dispositivo precisa ter o aplicativo Expo instalado para escanear o código QR.)*

Depois de ter gerado o projeto usando o Create React Native App, a gente agora vai instalar
todas as dependências necessárias para rodar esse projeto.
Então dentro do projeto, a parte do projeto a gente vai dizer NPM, install.
A gente vai instalar todas as dependências necessárias para poder rodar esse projeto.
Certo?
Eu já fiz o NPM, estou aqui na outra aba.
Depois de fazer isso, agora a gente está preparado para poder rodar o servidor de desenvolvimento.
A gente só fala, só fala NPM, Start.
Vamos ver o que aconteceu.
Ah, porque eu estou usando o botão Ubuntu aqui, versão 17.10 e eu não tenho.
O Watchman está dando esse erro.
Então se você tiver esse erro aqui, quando você der o NPM e Start, e te mensagem, unable
to start server, está dizendo você deve instalar o Watchman ou rodar os comandos seguintes.
Certo?
Se você quiser instalar o Watchman, vai resolver o problema.
No meu caso, eu não vou instalar o Watchman.
Eu só vou rodar esses comandos aqui para poder deixar tudo certinho para o projeto
do React Native rodar esse servidor de desenvolvimento.
Certo?
Então a gente só vai copiar e executar esses dois comandos usando o Cess CTO.
Tá bom?
Então vamos lá.
Vamos digitar sudo.
Você vai precisar do sudo, certo?
Cess CTO.
Deixa eu dar um clear aqui.
Cess CTO, traço WFS.inotify.max.usur instances.
Eu posso apoi mil e vinte e quatro.
Show.
Mostrar você melhor aqui.
sudo.cess.tl, traço WFS.inotify.max.usur instances dessa maneira.
Aí depois faz quase a mesma coisa.
Cess CTO de novo.
Traço WFS.inotify.max.usur watches.
E aí você põe 12.288.
Certo?
E com isso não vai ter mais problema quando você der o NPM start.
Certo?
Então vamos continuar e dar o NPM start de novo para poder rodar o servidor de desenvolvimento.
Então vai começar o Packager.
Aí vai mostrar quando terminar um código de QR.
Nós vamos usar esse código de QR para poder linkar com o Expo que vai estar rodando no nosso dispositivo.
Então você vai pegar o seu celular ou seu tablet que está rodando o iOS ou o Android.
Você vai instalar o aplicativo do Expo e rodar esse aplicativo.
Aí você vai escanear esse código aqui, QR, certo?
Aí ele vai linkar com o seu aplicativo.
Aí você pode começar o desenvolvimento, o código que você muda no seu computador e vai repletear aquela mudança no seu dispositivo.
Isso que a gente vai ver no próximo vídeo, certo?
Então com o NPM start já rodando aqui o servidor de desenvolvimento, você vai obter esse código QR.
Nós vamos usar esse código próximo vídeo para poder linkar com o dispositivo, certo?
Se você não conseguir rodar, usar o código QR que também pode usar o link aqui do IP, certo?
Então até a próxima!


0009-03 [Ubuntu] Rodando o Servidor de Desenvolvimento

[Ubuntu] Expo no Dispositivo Móvel

# Resumo do Processo de Desenvolvimento com Expo e React Native

Depois de rodar `npm start` para iniciar o servidor de desenvolvimento do React Native, o próximo passo é instalar o aplicativo **Expo** para conectar o código do computador ao aplicativo no dispositivo. Este guia é aplicável para dispositivos Android e iOS.

## Instalação do Expo

1. **Android**:
   - Acesse a **Google Play Store**.
   - Busque e instale o aplicativo **Expo**.

2. **iOS**:
   - Busque e instale o aplicativo **Expo** na App Store.

## Conectando o Dispositivo ao Servidor

1. **Abrindo o Expo**:
   - Abra o aplicativo **Expo** no dispositivo.

2. **Escaneando o Código QR**:
   - No terminal do computador (onde está rodando o servidor), um código QR aparecerá.
   - No Expo, selecione a opção de escanear código QR e aponte a câmera para o QR code exibido.

## Executando o Aplicativo

- Certifique-se de que o dispositivo esteja conectado à mesma rede Wi-Fi que o computador para que possa acessar o servidor de desenvolvimento.
- Após escanear, o código do aplicativo será linkado e executado no dispositivo.

## Modificando o Código

1. **Editando o Código**:
   - Abra o arquivo `app.js`, que serve como ponto de partida do seu aplicativo.
   - Faça uma alteração no retorno da função render, por exemplo:
     ```javascript
     Estou aprendendo a desenvolver aplicativos móveis com React Native.
     ```

2. **Auto Reload**:
   - Após salvar as alterações, o aplicativo no dispositivo atualizará automaticamente para refletir a nova mensagem.

## Menu de Desenvolvimento

- Para acessar o menu de desenvolvimento no dispositivo, sacuda o aparelho. As opções disponíveis incluem:
  - Debug JS Remotely (no navegador)
  - Desabilitar Live Reload
  - Hot Reload
  - Inspector

## Resumo Final

- Execute `npm install` e `npm start` para iniciar o servidor.
- Instale o aplicativo Expo no dispositivo e escaneie o código QR.
- Editar o código na máquina refletirá automaticamente as mudanças no dispositivo por meio do Expo.

Este processo proporciona uma maneira eficiente de desenvolver aplicativos móveis com React Native usando o Expo. 

Até mais!

Depois de ter executado NPM Start para rodar o servidor de desenvolvimento do React Native,
agora só basta a gente instalar o aplicativo do Exo para poder linkar o código do nosso computador
para o aplicativo que vai rodar no próprio dispositivo. Então, vamos lá? Eu tenho aqui
um dispositivo que roda Android e um dispositivo que roda iOS. A gente vai lá, no caso do Android, por exemplo,
vai na Google Play, na Play Store e você vai buscar pelo aplicativo chamado Expo. Você vai instalar esse aplicativo chamado Expo, certo?
No caso do iOS, é a mesma coisa, buscamos Expo e instala o aplicativo.
Depois de instalar o Expo, nós vamos lá e rodar o Expo, certo? Então, deixa eu abrir o Expo aqui no meu
dispositivo, Android, vai dar lá o Expo. O que a gente vai fazer? A gente vai scanhar aquele código QR do terminal,
certo? Então, vamos lá? Deixa eu me movimentar aqui para o computador. Vou pegar o dispositivo, estou aqui na frente,
pelo computador o código QR, certo? Rodando aqui no Ubuntu. Eu vou clicar aqui no scan QR code no Expo e vou rodar lá para a escraninha.
Opa! Acho que a minha câmera não está...
Estou na ano, não...
Aí, pronto. Abriu aqui o Expo no meu dispositivo, a câmera vai scanhar o código QR, certo?
Então, scanhei.
Depois de ter scanhado o código QR, ele vai conectar esse cara aqui no um... o servidor de desenvolvimento que está rodando o seu computador.
Note que esse dispositivo aqui móvel está conectado ao mesmo Wi-Fi que o computador aqui, certo?
Na mesma rede de Wi-Fi. Por isso, pode acessar do dispositivo para esse cara aqui.
Então, a gente scaneia o código QR com o aplicativo do Expo. Aí, ele vai linkar o seu aplicativo lá, o seu código, para rodar no seu
dispositivo. Note que aqui o aplicativo já está rodando. Agora, vamos modificar o código ali e ver o que acontece.
Então, vou aqui no projeto e vou modificar esse arquivo chamado app.js. É o ponto de partido do aplicativo móvel.
E vou para lá e vou mudar o texto aqui só para você ver.
E vou mudar aqui. Estou aprendendo a desenvolver aplicativos móveis com React Native, dentro aqui do retorno da função render.
Então, a gente espera que depois de salvar isso, ele vai dar um auto reload.
E você note que já mudou aqui, já atualizou automaticamente no dispositivo.
Apareceu a nova mensagem. Estou aprendendo a desenvolver aplicativos móveis com o React Native.
Certo? Então, ele atualiza automaticamente a maneira que você modifica o código fonte aqui no computador.
As mudanças lá do computador são refletidas no próprio dispositivo usando o Expo. Certo?
Se você quiser abrir o menu de desenvolvimento aqui no dispositivo, você pode dar um chacoalhar assim.
E ele abrir aqui as opções. Pode debugar JS Remotely no navegador.
Pode desabilitar o Live Reload. Isso que a gente está usando para poder atualizar automaticamente.
Tem o hot reload e tem inspector e outras coisas. Certo?
Pode até dar o reload aqui, manualmente.
Então, esse é como se rodar o aplicativo móvel usando o Expo no próprio dispositivo.
Recapitulando, a gente rodou o NPM Start aqui.
Depois de dar o NPM install, a gente deu o NPM Start para rodar o servidor de desenvolvimento do React Native.
Ele dá esse código QR que você pode usar depois de ter instalado o aplicativo do Expo no seu dispositivo móvel.
Você escaneia esse código QR para poder linkar o código fonte aqui, o bundle JavaScript,
para ser enviado aqui para o seu dispositivo e ser rodado aqui com o aplicativo.
Com a maneira que você muda o código fonte aqui no computador,
vai refletir as mudanças no próprio dispositivo. Certo?
Então é isso, usando o Expo. Então, até mais. Tchau!
