andrelinos / stream-data

ignite-template-react-native-stream-data

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

stream.data

Logo stream.data

Info: Projeto desenvolvido durante o desafio do Chapter II - Trilha React Native com login social com a Twitch. Foi implementado todo o fluxo de login e logout utilizando o OAuth da Twitch. { Tema inicial clonado }



Telas   |    Tecnologias   |    Funcionalidades   |    Clonando    |    Executando   |    Dúvidas   |    Licença





🔄 Telas da aplicação



Página login

login




Página home

home



🎨 Funcionalidades


  • Login social com a Twitch.
  • Atualizar a tela sem necessidade de reload na aplicação.
  • Lista todos os canais ao vivo que vc segue.
  • Lista os canais mais assistidos da Twitch.
  • Logout para limpar informações de login da aplicação.



🏇 Tecnologias usadas




💻 Clonando o projeto para sua máquina


  1. Abra o terminal de seu computador.
  2. Acessar a pasta de seus projetos.
  3. Estando dentro da pasta de seus projetos, execute os comandos abaixo:
# Para fazer o download do projeto para seu computador
$ git clone https://github.com/andrelinos/stream-data.git

# Entrar na pasta do projeto 
$ cd stream-data

# Para baixar as dependências do projeto
$ yarn

# Abra com o editor vscode
$ code .
  1. Pronto, agora basta testar e fazer as alterações que desejar.



🔥 Como executar o projeto em seu celular usando o expo


  1. Copie e renomeie o arquivo .env.example para para .env.
  2. Acesse a Twitch e acesse sua conta, ou caso tenha uma, faça o login.
  3. Vá para o link https://dev.twitch.tv/console/apps/create para registar uma nova aplicação.
  • Name: Dê um nome para sua aplicação.
  • URLs de redirecionamento OAuth: https://auth.expo.io/@seu-user/nomeSeuApp
    • Notas:
    • Para pegar o nome da sua aplicação, acesse o arquivo app.json na instrução "slug": "streamData",. Caso não tenha esta linha, insira-a.
  • Categoria: Selecione Application Integration
  • Marque que você não é um Droid.
  • Clique no botão Criar.
  • Após este passo você verá seu ID do cliente, basta copiá-lo para o arquivo .env que você copiou e renomeou antes.
  1. Agora dentro da pasta da aplicação pelo terminal, execute o comando abaixo:
# Este comando disponibilizar o projeto para ser aberto pelo aplicativo expo que 
# você precisa de instalar em seu dispositivo físico ou no emulador. 
$ expo start
  1. Em seguida, com o aplicativo Expo Go instalado em seu smartphone, basta ler o QRCode que aparece na tela do computador.

Nota: Seu celular e o computador devem estar na mesma rede wi-fi e na mesma faixa de IP para que funcione o aplicativo entre seu computador e seu celular.



✔️ Dúvidas


Se você tive alguma dúvida, poderá entrar em contato comigo aqui andrelino.dev.



Quer ser dev? Acesse aqui!

Seja um dev



📄 Licença MIT


  • Consulte a LICENÇA para mais informações.


Made with 💜 by Andrelino Silva

About

ignite-template-react-native-stream-data

License:MIT License


Languages

Language:TypeScript 67.3%Language:Java 17.1%Language:Objective-C 8.9%Language:Starlark 3.4%Language:JavaScript 1.8%Language:Ruby 1.1%Language:Swift 0.2%Language:C 0.2%Language:Shell 0.0%