Olá!
Vamos iniciar uma série de posts sobre desenvolvimento híbrido utilizando Ionic, Angular e Firebase.
Caso você não conheça as tecnologias, segue os sites e descrições oficiais:
Ionic
“Aplicativos rápidos e bonitos
O Ionic Framework é o kit de ferramentas de interface do usuário móvel gratuito e de código aberto para o desenvolvimento de aplicativos de plataforma cruzada de alta qualidade para iOS, Android e Web nativos - tudo a partir de uma única base de código.
Crie com componentes de interface do usuário intuitivos que aceleram o desenvolvimento de aplicativos e podem ser implantados praticamente em qualquer lugar.”
Crie aplicativos rapidamente, sem precisar gerenciar a infraestrutura Com as funcionalidades do Firebase, como análises, bancos de dados, mensagens e relatórios de erros, você tem mais agilidade e pode se concentrar nos seus usuários.
Feito pelo Google, usado pelos melhores aplicativos O Firebase foi criado sobre a infraestrutura do Google e faz o escalonamento automático, até mesmo para os maiores apps.
Uma plataforma com produtos que funcionam melhor juntos Os produtos do Firebase funcionam muito bem sozinhos, mas têm um resultado ainda melhor quando compartilham dados e insights entre si.
Vamos ao código!
Inicie instalando o Ionic via npm:
npm install -g @ionic/cli
Com o Ionic instalado, vamos iniciar um novo projeto vazio.
ionic start ionic-firebase-starter
Aparecerá uma lista para selecionarmos qual framework vamos utilizar. Neste caso, vamos utilizar o Angular. Mova com a seta do seu teclado para Angular e aperte enter.
Em seguida, o Ionic apresenta opções de templates para iniciarmos o projeto. Vamos escolher o “Blank”.
Vamos agora habilitar o Capacitor para depois gerar os builds do nosso app. Capacitor é o novo framework do Ionic para criação de apps para Android, iOS e Electron (Desktop). Dê uma conferida no Capacitor clicando aqui. Para habilitar, aperte Y e dê enter.
A partir desde momento, o CLI do Ionic vai instalar os pacotes necessários para o funcionamento do mesmo.
Quando acabar, aparecerá uma mensagem semelhante a imagem abaixo:
Vamos então acessar o projeto ionic-firebase-starter com um cd ionic-firebase-starter e executar um code . para abrir o Visual Studio Code.
Com o VSCode aberto, podemos ver a estrutura que o Ionic cria para a gente.
Vamos dar uma passada em alguns items:
src Pasta principal contendo todo o conteúdo do aplicativo
src/app: Código da nossa aplicação
src/assets: Estilos, bibliotecas, imagens
src/environments: Variáveis de ambientes da nossa aplicação. Quando executamos, ele pega um tipo de arquivo de ambiente. Quando geramos um build, ele pega o outro arquivo environment.prod
src/theme: Pasta contendo as variáveis de tema da aplicação
angular.json: Configurações do Angular
capacitor.config.json: Configurações do Capacitor
ionic.config.json: Configurações do Ionic
package.json: Arquivo criado pelo NPM com as configurações do projeto.
Certo, com esta breve passada pelos principais arquivos, vamos rodar nosso projeto. Para isto execute o seguinte comando dentro da pasta do projeto:
ionic serve
Este comando vai iniciar o servidor e abrir o seu navegador com a url http://localhost:8100
Vai aparecer a seguinte tela:
Vemos que ele abriu em tela inteira. Vamos agora tentar simular como seria em um dispositivo usando o próprio navegador. Para isto aperte F12 (Estou usando Windows e Google Chrome) ou acesse Menu -> Mais Ferramentas -> Ferramentas do Desenvolvedor.
Vai abrir a seguinte tela:
Clique agora la em cima, onde (no meu caso) está Responsive e selecione o dispositivo que queira testar. No meu caso vou selecionar iPhone X.
Veja que a tela foi redimensionada para a resolução do iPhone X, mas manteve ainda o Material Design do Android. Vamos atualizar a página para que o Ionic entenda e consiga exibir os components do iOS
Veja que agora o título foi para o centro e a fonte mudou. Isso porque o Ionic ja entende qual plataforma que ele está e adapta o visual dos seus componentes para aquela plataforma.
- Desktop, Android e Web utilizará o Material Design
- iOS utilizará o Cupertino (Padrão do iOS)
Para não ficar muito extenso, no próximo post vamos começar a codar nosso projeto adicionando a biblioteca AngularFire e conectando com o Firebase.
Este projeto estará todo disponível em: https://github.com/luizhfraraujo/ionic-firebase-starter
Qualquer dúvida, sugestão, entre em contato comigo!
https://github.com/luizhfraraujo
Grande Abraço!
Luiz Henrique Araújo.