Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: Construindo um App com Native-base

React Native: Construindo um App com Native-base

Instalando o expo e o TypeScript - Apresentação

Olá! Boas vindas a mais um curso de React Native. Meu nome é André Cunha e sou instrutor de mobile.

Autodescrição: Sou um homem de pele parda, cabelo ondulado, castanho, escuro e curto, e olhos castanhos escuros também. Estou usando uma camiseta básica azul-marinho. Ao fundo, há uma parede de madeira com iluminação azul clara.

Neste curso, iremos construir a aplicação para agendamento de consultas médicas chamada Voll, em que criaremos diversas telas, como de login, cadastro, buscas e perfil.

Para isso, aplicaremos boas práticas de programação, modularizando nossos componentes utilizando tecnologias modernas, como o Expo que nos permitirá fazer uma aplicação mobile.

Também usaremos o TypeScript com sua linguagem moderna que nos ajuda a evitar erros, e o Native Base, que utiliza uma biblioteca de estilos para construirmos o layout da aplicação mais rapidamente e com consistência.

Ao longo do curso, usaremos o Figma para construirmos as telas e mantermos a uniformidade.

Aprenderemos sobre o React Navigation, uma forma de navegarmos entre essas telas.

Vamos lá?

Instalando o expo e o TypeScript - Conhecendo o projeto no Figma

Nesta formação, trabalharemos com a aplicação Voll, voltada para o agendamento de consultas médicas.

Teremos tanto a parte web quanto mobile. Na primeira, faremos a gerência das clínicas, histórico de consultas e algumas métricas, enquanto na segunda parte, iremos nos dedicar à pessoa usuária paciente que instalará o aplicativo, pesquisará pela especialidade que precisa e fará o agendamento.

Em nossas aulas, trabalharemos apenas com esta parte mobile.

O Figma é uma aplicação de construção de telas que otimiza o projeto, economiza tempo e evita retrabalho, pois poderemos ter o resultado visual final antes mesmo de começarmos a trabalhar no código de programação, afinal o caminho inverso seria bem mais trabalhoso.

Para este aplicativo mobile, criaremos seis telas:

Na primeira, teremos o logotipo da aplicação "Voll" no topo, o título "Faça login em sua conta", um campo de texto para e-mail e outro para senha, seguido de um botão para logarmos.

Tela de "Login" em formato mobile com fundo branco no Figma. O logotipo da aplicação "Voll" escrita em azul claro está centralizado no topo, e o título "Faça login em sua conta" em cinza está abaixo. Abaixo, há um campo de texto retangular horizontal em uma caixa cinza para "e-mail" escrito em azul escuro, e outro para senha no mesmo estilo. Abaixo dos campos, está um botão retangular em azul escuro com o escrito "Entrar" escrito em branco. Por fim, na base da tela, está o texto sublinhado em cinza "Esqueceu sua senha?" seguido de "Ainda não tem conta?" e "Faça seu cadastro" na mesma linha em azul.

Caso a pessoa ainda não tenha um login, terá a opção de clicar em "Ainda não tem conta? Faça seu cadastro!" para ir até a tela de "Cadastro".

Três telas de "Cadastro" em formato mobile com fundo branco no Figma alinhadas lado a lado. Na primeira à esquerda chamada "Cadastro paciente 1", o logotipo da aplicação "Voll" escrita em azul claro está centralizado no topo, e o título "Insira alguns dados básicos" em cinza está abaixo. Abaixo, há um campo de texto retangular horizontal em uma caixa cinza para "Nome" escrito em azul escuro, outro para "E-mail", "Crie uma senha" e "Repita a senha" no mesmo estilo, um abaixo do outro. Abaixo dos campos, está um botão retangular em azul escuro com o escrito "Avançar" escrito em branco. Ao centro, na tela chamada "Cadastro paciente 2", está o logotipo no topo, o título "Agora, mais alguns dados sobre você:" com campos de "CEP", "Endereço" "Número", "Complemento" e "Telefone" no mesmo estilo padrão da aplicação, seguido do botão "Voltar" em cinza e "Avançar" em azul. à direita, na tela chamada "Cadastro paciente 3", está o logotipo no topo, o título "Para finalizar, qual seu plano de saúde?" seguido de uma lista contendo oito itens para serem selecionados com um check. Na base, estão os botões "Voltar" em cinza e "Cadastrar!" em azul.

Esta tela é única mas terá algumas variações, em que teremos alguns campos para a pessoa preencher com seus dados, os quais serão registrados e salvos em uma API.

Por fim, com o cadastro feito, a pessoa usuária poderá logar na aplicação.

Com isso, será direcionada para a tela Home, a principal onde teremos as boas vindas, campo para digitar a especialidade que procura e a região onde quer pesquisar.

Também teremos alguns depoimentos.

Tela de "Home - Web App" em formato mobile com fundo branco no Figma. O logotipo da aplicação "Voll" escrita em azul está centralizado no topo, e o título "Boas vindas!" em azul claro está abaixo. Abaixo, há um campo de texto retangular horizontal em uma caixa cinza para "Digite a especialidade" escrito dentro, e outro para "Digite sua localização" no mesmo estilo. Abaixo dos campos, está um botão retangular em azul escuro com o escrito "Buscar" escrito em branco. Por fim, na base da tela, está uma série de textos de "Depoimentos".

Já na tela de "Minhas consultas", a pessoa poderá ver as consultas que fez no passado e no futuro, inclusive podendo cancelar se quiser e reagendar com a médica ou médico que já passou.

Tela de "Minhas Consultas" em formato mobile com fundo branco no Figma. Centralizado no topo, está o título "Minhas consultas" em azul claro, seguido de um botão azul escuro de "Agendar outra consulta" escrito em branco. Abaixo, há o título "Próximas consultas" com um card branco de bordas cinzas contendo a foto de perfil de uma médica Angiologista, e possui um botão azul escuro com "Cancelar" escrito em branco. Abaixo, está a a seção de "Consultas passadas" escrito em azul claro, seguido de um card branco de bordas cinzas contendo dados da mesma médica Angiologista, e possui um botão azul escuro com "Agendar consulta" escrito em branco.

Teremos também a tela de pesquisa em que será possível buscar pela especialidade médica e localização, seguido da lista de resultados encontrados.

Tela de "Resultado de Buscas" em formato mobile com fundo branco no Figma. Centralizado no topo, está o campo de texto "Digite a especialidade" e abaixo "Digite sua localização", ambos em cinza. Abaixo, há um botão azul escuro com "Buscar" escrito em branco. Abaixo, está a seção de "Resultado da busca" escrito em azul claro, seguido de cards brancos de bordas cinzas contendo dados da mesma médica Angiologista, cada um contendo um botão azul escuro com "Agendar consulta" escrito em branco.

Por fim, teremos a tela de perfil contendo os dados que foram registrados no cadastro e o histórico médico.

Tela de "Perfil" em formato mobile com fundo branco no Figma. Centralizado no topo, está o título "Meu Perfil" seguido de uma fotografia dentro de um círculo de uma pessoa asiática. Abaixo, está escrito "Informações pessoais" em azul claro, seguido de alguns dados. Ao centro da tela, há uma linha horizontal separando esta primeira parte de "Histórico médico" seguido escrito em azul claro. Por fim, estão dois itens listados em cinza, "Bronquite" e "Sinusite".

Todas essas telas serão criadas usando o React Native, que é uma biblioteca JavaScript que nos permitirá construir toda a aplicação.

Instalando o expo e o TypeScript - Utilizando Expo e TypeScript

No Figma, vimos todas as telas da nossa aplicação mobile que iremos construir.

Iremos disponibilizar o projeto para consultarmos as cores, fontes e outras configurações que utilizaremos ao longo do curso.

Há diversas maneiras, como nativamente programando tanto para Android quanto iOS, ou ainda usando a biblioteca React Native neste link, criada e mantida pelo Facebook atualmente, e que sempre está recebendo atualizações e melhorias.

A vantagem de programarmos é que conseguimos fazer criar um app que roda nos dois sistemas operacionais, ou seja, uma aplicação híbrida.

Em nossas aulas, trabalharemos com o TypeScript e entenderemos o porquê de usá-lo. Para quem está começando e quer saber como ter uma aplicação de base sólida e escalável, além de ter um bom desempenho, poderá usar diretamente o que está na documentação do React Native neste link, ou usar o Expo.

Essa ferramenta facilita nossa construção com o React Native. Teríamos que configurar algumas coisas nativas no Android e iOS, enquanto usando o Expo, isso será feito automaticamente.

Para utilizarmos, precisaremos ter o NodeJS instalado na máquina, que é o mesmo para aplicações web com React. Recomendamos que sempre instale a última versão LTS através deste link.

De volta à documentação do Expo aqui, teremos um comando para criarmos um projeto executando no Terminal.

npx create-expo-app my-app

No Terminal, abriremos a pasta de documentos onde criaremos o projeto e colaremos o comando.

Em seguida, antes de executarmos, escreveremos o nome da aplicação: voll-mobile.

npx create-expo-app my-app voll-mobile

Depois da criação, com a mensagem Yout project is ready!, abriremos a pasta "voll-mobile" com o comando cd pelo próprio Terminal e abriremos com a IDE Visual Studio Code.

Para isso, digitaremos code . para abrirmos o código no VSCode.

Ao lado esquerdo da tela, temos a lista de arquivos onde encontraremos package.json que contém as dependências instaladas em "dependencies", como "expo", "react" e "react-native".

Acima, teremos o package-lock.json que salva alguns arquivos instalados de projetos. Já em app.json, teremos as principais informações e configurações necessárias.

Depois, abriremos o App.js que é o arquivo principal da aplicação, onde está o código que exibe a tela, cuja sintaxe é muito parecida com o React.

Diferente da aplicação web em que temos as tag como <div> ou <h1>, em mobile há componentes próprios que são importados do próprio 'react-native'.

Além da <View> envolve toda a tela como faz a <div>, existe o <Text> e o <StatusBar> também. Ao final, encontraremos nossos estilos em styles.

No arquivo referente ao GitHub gitignore, quando subirmos para a branch, veremos evitar subir o node_modules/ que é a pasta com todas as bibliotecas instaladas, e é bem pesada.

Por fim, a pasta "assets" possui ícones que podemos eventualmente substituir para deixarmos a aplicação mais próxima do que temos no Figma.

Para executarmos a aplicação, poderemos tanto abrir um emulador usando Android Studio ou ainda abrir no dispositivo físico com o aplicativo Expo, disponível na app store.

Quando executarmos, rodaremos dentro do aplicativo para acompanharmos as mudanças enquanto programamos.

Abrindo o Terminal, rodaremos o comando npx expo start e aparecerá um QR code que será lido pelo aplicativo se estivermos usando o dispositivo físico.

Se optarmos pelo emulador, abriremos o Android Studio e, na janela de introdução, clicaremos nos três pontinhos ao lado superior direito da tela para selecionarmos "Virtual Device Manager" onde criaremos um novo dispositivo, como "Pixel 4" e API "31".

Prosseguiremos nas janelas clicando no botão "Next" e finalizaremos com "Finish". Na janela de "Device Manager", clicaremos no ícone de "play" do dispositivo que acabamos de criar.

Ao longo do curso, usaremos o emulador Android. Quando for carregado, encontraremos os aplicativos padrões mas não o do Expo.

No Terminal do VSCode, teremos algumas opções de comandos que o próprio Terminal indica, como:

Press a | open Android

Press i | open iOS simulator

Press w | open web

Lembrando que só é possível simular IPhone se tivermos um MacOS, mas o Android funciona nos dois sistemas operacionais inclusive Linux.

Apertando a tecla "a" no Terminal e abrindo o emulador depois de aguardarmos a instalação, veremos o novo aplicativo com a tela de boas vindas.

Notaremos que, o mesmo texto que aparece na tela do emulador com fundo branco também está em <Text> de App.js. Modificaremos esse texto e escreveremos Hello World!.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, text, View } from 'react-native';

export default function App() {
    return (
        <View style={styles.container}>
            <text>Hello World</Text>
            <StatusBar style="auto" />
        </View>
};

//código omitido

Ao salvarmos o arquivo, o texto será alterado na tela do emulador em tempo real.

Quando criamos o projeto, usamos o JavaScript em App.js, mas ao longo do curso, usaremos o TypeScript porque nos permite detectar erros quando estivermos passando parâmetros para as funções, sem precisarmos debugar para encontrá-los.

Para fazermos a conversão do Expo para TypeScript, encerraremos a aplicação no terminal com "Ctrl + C", abriremos App.js e o renomearemos para App.tsx.

Quando salvarmos, já teremos alertas de erros e iremos executar a aplicação novamente com o comando npx expo start. Feito isso, receberemos uma mensagem dizendo que estamos usando TypeScript mas não o temos instalado, e nos pergunta se queremos fazer a instalação.

Ao apertarmos a tecla "Y", iremos instalar e os erros do App.tsx irão desaparecer.

Abriremos nosso emulador com a tecla "a" e executaremos a aplicação novamente.

Com tudo funcionando com TypeScript, a seguir iremos trabalhar com o código para criarmos a tela de login.

Sobre o curso React Native: Construindo um App com Native-base

O curso React Native: Construindo um App com Native-base possui 163 minutos de vídeos, em um total de 57 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas