Criando aplicativos móveis com Ionic e React

Ionic recentemente adicionou suporte para React; agora, os desenvolvedores do React podem obter as vantagens do Ionic para criar aplicativos móveis híbridos e aplicativos da web progressivos (PWAs). Neste post, mostraremos como começar a usar o Ionic com React criando um aplicativo de demonstração simples do zero.

Pré-requisitos

Para seguir corretamente este tutorial, você precisará dos seguintes pré-requisitos:

• versões recentes do Node.js e npm instaladas em seu sistema,
• conhecimento prático de TypeScript e React.

Você pode verificar se tem a versão mais recente do Node.js (v10) instalada executando o seguinte comando:

 $ node -v

Apresentando React e Ionic

Vamos começar com breves introduções ao React e ao Ionic.

Segundo o site oficial:

“React é uma biblioteca JavaScript declarativa, eficiente e flexível para construir interfaces de usuário. Ele permite que você componha interfaces de usuário complexas a partir de pedaços pequenos e isolados de código chamados 'componentes'.”

O React se concentra na criação de UIs e não fornece ferramentas internas para as tarefas comuns necessárias no desenvolvimento da Web, como buscar dados remotos e roteamento, portanto, você precisará usar algumas bibliotecas de terceiros existentes para essas tarefas.

De acordo com o site Ionic:

“O Ionic Framework é o kit de ferramentas de interface do usuário móvel gratuito e de código aberto para desenvolver aplicativos multiplataforma de alta qualidade para iOS, Android e Web nativos – tudo a partir de uma única base de código.”

Basicamente, é um conjunto de componentes de interface do usuário que você pode usar com JavaScript simples ou qualquer estrutura ou biblioteca de front-end popular, como Angular, React ou Vue, para criar um aplicativo móvel híbrido e PWA.

Neste tutorial, veremos e usaremos alguns componentes de interface do usuário do Ionic, como os seguintes:

• IonMenu: Com isso, uma gaveta de navegação deslizará do lado da exibição atual.
• IonToolbar: Essas barras superiores são posicionadas acima ou abaixo do conteúdo.
• IonHeader: Este componente pai contém o componente da barra de ferramentas.
• IonContent: Este componente fornece uma área de conteúdo, com métodos para controlar a área rolável e outras coisas. Você precisa apenas de um componente de conteúdo dentro de uma única visualização.
• IonList: Este componente contém itens com conteúdo de dados semelhante, como imagens e texto. É composto de objetos IonItem.
• IonItem: Este componente pode conter texto, ícones, avatares, imagens, entradas e qualquer outro elemento nativo ou personalizado.
• IonButton: Este componente fornece um elemento clicável, que pode ser usado em um formulário ou em qualquer lugar que precise de funcionalidade simples e padrão de botão.
  

Instalando o Ionic CLI v5

A interface de linha de comando (CLI) do Ionic, versão 5, tem suporte para criação de projetos Ionic baseados em React. Então, vamos começar instalando a ferramenta do npm.

Abra uma CLI e execute o seguinte comando:

 $ npm install -g ionic

No momento em que escrevo, o CLI v5.2.3 do Ionic é o mais recente.

Observação : *De acordo com a forma como você instalou o Node.js em seu sistema, pode ser necessário adicionar sudo antes do comando no macOS ou Linux ou executar o prompt de comando como administrador no Windows se ocorrer algum erro de permissão. Você também pode simplesmente corrigir suas permissões npm ou usar uma ferramenta como nvm.*

Em seguida, instale Cordova Resources (que é usado para gerar recursos do Cordova localmente) e o Native Run (usado para implantar binários de aplicativos em dispositivos):

 $ npm install -g cordova-res native-run

Eles são necessários apenas se você quiser testar seu aplicativo em um dispositivo móvel ou emulador real.

Criando um projeto Ionic e React

Agora, vamos criar um projeto baseado em React. Volte para o seu terminal, verifique se você está no seu diretório de trabalho e execute o seguinte comando:

 $ ionic start myApp --type=react

Usamos --type=react para gerar um projeto baseado em React. Em seguida, você precisará escolher um modelo inicial entre os disponíveis. Vamos escolher sidemenu para um modelo inicial com menu lateral e navegação.

Depois de gerar o projeto e instalar as dependências, você pode servir seu aplicativo localmente usando os seguintes comandos:

 $ cd ./myApp $ ionic serve

Seu aplicativo estará disponível no endereço https://localhost:8100 e você poderá usar seu navegador da Web para começar a jogar com ele.

O Ionic é chamado de estrutura móvel híbrida porque faz uso de tecnologias da Web que foram originalmente projetadas para criar aplicativos da Web, juntamente com um contêiner nativo (Cordova ou Capacitor), para criar aplicativos móveis sem usar tecnologias nativas para as plataformas de destino, como Java ou Kotlin para Android ou Swift para iOS.

Como seu aplicativo móvel é, na verdade, um aplicativo da Web, você pode fazer a maior parte do desenvolvimento testando em um navegador da Web sem usar um emulador ou um dispositivo móvel real, exceto para testar recursos nativos do dispositivo, como a câmera ou o armazenamento SQLite, caso você Já os usei em seu aplicativo. Na verdade, é até possível usar certas técnicas para imitar os plugins que fornecem os recursos nativos e fazer todo o teste durante o desenvolvimento em seu navegador web.

Limpando nosso projeto

Temos a estrutura básica do app, com duas páginas (home e lista) e um menu. Vamos remover a página de lista, pois é apenas um código clichê.

Primeiro, remova o arquivo src/pages/List.tsx , abra o arquivo src/App.tsx e remova a entrada para a página de lista do array appPages :

 const appPages: AppPage[] = [ { title: 'Home', url: '/home', icon: home } ];

Além disso, remova a importação da página de lista do arquivo:

 import List from './pages/List';

Em seguida, remova <Route path="/:tab(home)/list" component={List} exact={true} /> do componente App :

 const App: React.FunctionComponent = () => ( <IonApp> <IonReactRouter> <IonSplitPane content> <Menu appPages={appPages} /> <IonPage> <IonRouterOutlet> <Route path="/:tab(home)" component={Home} exact={true} /> <Route exact path="/" render={() => <Redirect to="/home" />} /> </IonRouterOutlet> </IonPage> </IonSplitPane> </IonReactRouter> </IonApp> ); export default App;

O componente App é o componente raiz que é renderizado pelo nosso aplicativo. Se você abrir o arquivo src/index.tsx , encontrará o seguinte código:

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));

O método render() é usado para renderizar um elemento React no DOM no elemento root fornecido.

Tema do aplicativo

Tendo criado, servido e limpo nosso projeto Ionic, vamos agora ver como podemos alterar as cores da interface do usuário para que pareça mais profissional.

Vamos começar com o menu lateral. Abra o arquivo src/components/Menu.tsx e adicione um atributo color com um valor primary aos componentes de interface do usuário IonToolbar , IonContent , IonList e IonItem :

 const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> ); const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu content> <IonHeader> <IonToolbar color="primary"> <IonTitle>Menu</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary"> <IonList style= {{ background : '#3880ff'}} color="primary"> {appPages.map((appPage, index) => { return ( <IonMenuToggle key={index} auto-hide="false"> <IonItem color="primary" href={appPage.url}> <IonIcon slot="start" icon={appPage.icon} /> <IonLabel>{appPage.title}</IonLabel> </IonItem> </IonMenuToggle> ); })} </IonList> </IonContent> </IonMenu> );

O Ionic fornece algumas cores padrão (primária, secundária, terciária, sucesso, aviso, perigo, claro, médio e escuro) que podem ser usadas para alterar a cor dos componentes da interface do usuário. Uma cor pode ser aplicada a um componente Ionic para alterar as cores padrão usando o atributo color . Consulte “Cores” para obter mais informações.

Essas cores têm valores padrão, mas você pode personalizá-las por meio de algumas variáveis ​​CSS predefinidas. Consulte “Modificando Cores“.

Esta é uma captura de tela do nosso menu:

Em seguida, vamos alterar a cor da página inicial. Abra o arquivo src/pages/Home.tsx e defina o atributo color dos componentes IonToolbar e IonContent como primary :

 const HomePage: React.FunctionComponent = () => { return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > </IonContent> </> ); };

Esta é uma captura de tela da página:

Instalando o Axios e consumindo uma API REST

Veremos como instalar o Axios e consumir uma API RESTful de terceiros em nosso aplicativo, e também veremos como exibir os dados buscados usando o cartão Ionic e os componentes de lista.

Tendo tematizado nosso aplicativo, vamos agora ver como buscar dados usando o Axios. Usaremos a API de terceiros disponível em NewsAPI.org.

Primeiro, precisamos pegar uma chave de API, para que possamos nos comunicar com a API. Vá para a página de registro, insira suas informações e registre uma conta. Você receberá uma chave de API; anote-o e vamos continuar.

Volte ao seu terminal e execute o seguinte comando para instalar o Axios:

 $ npm install axios --save

Em seguida, abra o arquivo src/pages/Home.tsx e comece importando Axios e IonButton :

 import { IonButton } from '@ionic/react'; import axios from 'axios';

Em seguida, defina as variáveis ​​de constante API_KEY e URL :

 const API_KEY = "<YOUR_API_KEY_HERE>"; const URL = `https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${API_KEY}`;

Na variável URL, adicionaremos um endpoint para obter as principais manchetes de nossa fonte, TechCrunch. Você pode usar qualquer fonte que desejar das fontes disponíveis.

Nota : Certifique-se de colocar sua própria chave de API na variável API_KEY .

Em seguida, defina o método fetchArticles() da seguinte forma:

 const fetchArticles = () => { return axios({ url: URL, method: 'get' }).then(response => { console.log(response); return response.data; }) };

Simplesmente chamamos o método axios() para enviar uma solicitação GET ao endpoint de notícias, e o resultado do método é uma promessa que precisa ser resolvida para obter os dados de notícias.

Em seguida, atualize o componente HomePage da seguinte forma para chamar o método fetchArticles() e resolver a promessa retornada:

 const HomePage: React.FunctionComponent = () => { const [articles, setArticles] = React.useState([]); const items: any[] = []; React.useEffect(() => { fetchArticles().then(data => setArticles(data.articles)); }, []); return ( <> <IonHeader> <IonToolbar color="primary"> <IonButtons slot="start"> <IonMenuButton /> </IonButtons> <IonTitle>Home</IonTitle> </IonToolbar> </IonHeader> <IonContent color="primary" > <IonList color="primary"> { articles.map(a => { return ( <IonItem> {a['title']} <IonButton href={a['url']} color="primary" slot="end">Read</IonButton> </IonItem> ); }) } </IonList> </IonContent> </> ); };

Em nosso componente de função, primeiro chamamos o gancho useState() do React para criar a variável de estado dos articles , que conterá os artigos de notícias após buscá-los na API.

useState() retorna a variável de estado, que tem o array vazio como seu valor inicial e uma função que podemos usar para alterar o valor da variável. Usamos atribuição de desestruturação para descompactar os valores do par retornado em variáveis ​​distintas (ou seja articles e setArticles() ).

Em seguida, chamamos o gancho useEffect() para realizar um efeito colateral em nosso componente. No nosso caso, o efeito colateral é buscar dados da API de notícias usando o método fetchArticles() , que retorna uma promessa. Uma vez que a promessa é resolvida, chamamos o método setArticles() para atribuir os dados de notícias à variável de articles .

Ambos useState() e useEffect() são hooks internos do React que foram introduzidos no React 16.8; eles simplesmente permitem que você use o estado e outros recursos do React sem precisar escrever uma classe. O gancho useEffect() é equivalente a chamar os métodos de ciclo de vida componentDidMount , componentDidUpdate e componentWillUnmount combinados em componentes baseados em classe.

Por fim, no modelo de visualização, iteramos sobre o array de articles usando o método map() e exibimos o título de cada artigo de notícias dentro de um elemento IonItem do componente IonList , e também um botão que nos leva à página do artigo completo.

Esta é uma captura de tela da página:

Você pode encontrar o código-fonte neste repositório do GitHub.

Conclusão

Neste tutorial, começamos a usar o Ionic e o React e os usamos para criar um aplicativo móvel simples que busca e exibe dados de notícias de uma API de terceiros usando o cliente Axios. Também vimos como usar ganchos no React — ou seja, os useState() e useEffect() — para criar estado e realizar efeitos colaterais dentro dos componentes da função React. Com o Ionic, vimos como é fácil gerar um projeto baseado em React e como podemos tematizar a aplicação usando os atributos de cor dos componentes.