Crearea de aplicații mobile cu Ionic și React

Ionic a adăugat recent suport pentru React; așa că acum, dezvoltatorii React pot beneficia de avantajele Ionic pentru a construi aplicații mobile hibride și aplicații web progresive (PWA). În această postare, vă vom arăta cum să începeți să utilizați Ionic cu React, creând o aplicație demonstrativă simplă de la zero.

Cerințe preliminare

Pentru a urma corect acest tutorial, veți avea nevoie de următoarele cerințe preliminare:

• versiunile recente ale Node.js și npm instalate pe sistemul dvs.,
• cunoștințe de lucru de TypeScript și React.

Puteți verifica dacă aveți cea mai recentă versiune Node.js (v10) instalată rulând următoarea comandă:

 $ node -v

Vă prezentăm React și Ionic

Să începem cu scurte introduceri atât la React, cât și la Ionic.

Conform site-ului oficial:

„React este o bibliotecă JavaScript declarativă, eficientă și flexibilă pentru construirea de interfețe cu utilizatorul. Vă permite să compuneți interfețe de utilizare complexe din bucăți mici și izolate de cod numite „componente”.

React se concentrează pe construirea de interfețe de utilizare și nu oferă instrumente încorporate pentru sarcinile comune necesare în dezvoltarea web, cum ar fi preluarea datelor de la distanță și rutarea, așa că va trebui să utilizați unele biblioteci terțe existente pentru aceste sarcini.

Potrivit site-ului Ionic:

„Ionic Framework este setul de instrumente pentru interfața de utilizare mobilă gratuit, open-source, pentru dezvoltarea de aplicații multiplatforme de înaltă calitate pentru iOS, Android și web nativ – toate dintr-o singură bază de cod.”

Practic, este un set de componente UI pe care le puteți utiliza cu JavaScript simplu sau orice cadru sau bibliotecă front-end popular, cum ar fi Angular, React sau Vue, pentru a construi o aplicație mobilă hibridă și PWA.

În acest tutorial, vom vedea și vom folosi câteva componente Ionic UI, cum ar fi următoarele:

• IonMenu: Cu aceasta, un sertar de navigare va aluneca din partea laterală a vizualizării curente.
• IonToolbar: Aceste bare de sus sunt poziționate deasupra sau sub conținut.
• IonHeader: Această componentă părinte deține componenta bară de instrumente.
• IonContent: Această componentă oferă o zonă de conținut, cu metode pentru a controla zona de derulare și alte lucruri. Aveți nevoie de o singură componentă de conținut într-o singură vizualizare.
• IonList: Această componentă conține articole cu conținut de date similar, cum ar fi imagini și text. Este alcătuit din obiecte IonItem.
• IonItem: Această componentă poate conține text, pictograme, avatare, imagini, intrări și orice alt element nativ sau personalizat.
• IonButton: Această componentă oferă un element pe care se poate face clic, care poate fi utilizat într-o formă sau oriunde care necesită funcționalitate simplă, standard a butonului.
  

Instalarea Ionic CLI v5

Interfața de linie de comandă (CLI) a lui Ionic, versiunea 5, are suport pentru crearea de proiecte Ionic bazate pe React. Deci, să începem prin a instala instrumentul din npm.

Deschideți un CLI și rulați următoarea comandă:

 $ npm install -g ionic

La momentul scrierii, CLI v5.2.3 al lui Ionic este cel mai recent.

Notă : *În conformitate cu modul în care ați instalat Node.js în sistemul dvs., poate fi necesar să adăugați sudo înainte de comanda în macOS sau Linux sau să rulați promptul de comandă ca administrator în Windows dacă primiți erori de permisiune. De asemenea, puteți să vă remediați permisiunile npm sau să utilizați un instrument precum nvm.*

Apoi, instalați Cordova Resources (care este folosit pentru a genera resurse Cordova local) și Native Run (folosit pentru a implementa aplicații binare pe dispozitive):

 $ npm install -g cordova-res native-run

Acestea sunt necesare numai dacă doriți să vă testați aplicația pe un dispozitiv mobil real sau pe un emulator.

Crearea unui proiect Ionic și React

Acum, să creăm un proiect bazat pe React. Reveniți la terminal, asigurați-vă că vă aflați în directorul de lucru și executați următoarea comandă:

 $ ionic start myApp --type=react

Folosim --type=react pentru a genera un proiect bazat pe React. În continuare, va trebui să alegeți un șablon de pornire dintre cele disponibile. Să alegem sidemenu pentru un șablon de pornire cu un meniu lateral și navigare.

După generarea proiectului și instalarea dependențelor, vă puteți servi aplicația local folosind următoarele comenzi:

 $ cd ./myApp $ ionic serve

Aplicația dvs. va fi disponibilă de la adresa https://localhost:8100 și puteți utiliza browserul web pentru a începe să vă jucați cu ea.

Ionic este numit cadru mobil hibrid deoarece folosește tehnologii web care au fost concepute inițial pentru a crea aplicații web, împreună cu un container nativ (Cordova sau Capacitor), pentru a construi aplicații mobile fără a utiliza tehnologii native pentru platformele țintă, cum ar fi Java. sau Kotlin pentru Android sau Swift pentru iOS.

Deoarece aplicația dvs. mobilă este de fapt o aplicație web, puteți face cea mai mare parte a dezvoltării testând într-un browser web fără a utiliza un emulator sau un dispozitiv mobil real, cu excepția testării funcțiilor native ale dispozitivului, cum ar fi camera sau stocarea SQLite, în cazul în care" le-am folosit în aplicația dvs. De fapt, este chiar posibil să folosiți anumite tehnici pentru a imita pluginurile care oferă caracteristicile native și pentru a face întreaga testare în timpul dezvoltării în browserul dvs. web.

Curățarea proiectului nostru

Avem structura de bază a aplicației, cu două pagini (acasă și listă) și un meniu. Să eliminăm pagina cu listă, deoarece este doar un cod standard.

Mai întâi, eliminați fișierul src/pages/List.tsx , apoi deschideți fișierul src/App.tsx și eliminați intrarea pentru pagina cu listă din matricea appPages :

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

De asemenea, eliminați importul paginii de listă din fișier:

 import List from './pages/List';

Apoi, eliminați <Route path="/:tab(home)/list" component={List} exact={true} /> din componenta 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;

Componenta App este componenta rădăcină care este redată de aplicația noastră. Dacă deschideți fișierul src/index.tsx , veți găsi următorul cod:

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

Metoda render() este folosită pentru a reda un element React în DOM în elementul root furnizat.

Tematică aplicația

După ce am creat, servit și curățat proiectul nostru Ionic, să vedem acum cum putem schimba culorile interfeței de utilizare, astfel încât să arate mai profesionist.

Să începem cu meniul lateral. Deschideți fișierul src/components/Menu.tsx și adăugați un atribut de color cu o valoare primary la componentele IonToolbar , IonContent , IonList și IonItem UI:

 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> );

Ionic oferă câteva culori implicite (primare, secundare, terțiare, succes, avertisment, pericol, deschis, mediu și întunecat) care pot fi folosite pentru a schimba culoarea componentelor UI. O culoare poate fi aplicată unei componente ionice pentru a modifica culorile implicite folosind atributul de color . Consultați „Culori” pentru mai multe informații.

Aceste culori au valori implicite, dar le puteți personaliza prin intermediul unor variabile CSS predefinite. Consultați „Modificarea culorilor“.

Aceasta este o captură de ecran a meniului nostru:

Apoi, să schimbăm culoarea paginii de pornire. Deschideți fișierul src/pages/Home.tsx și setați atributul de color al componentelor IonToolbar și IonContent la primary :

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

Aceasta este o captură de ecran a paginii:

Instalarea Axios și consumul unui API REST

Vom vedea cum să instalăm Axios și să consumăm un API RESTful terță parte în aplicația noastră și, de asemenea, vom vedea cum să afișam datele preluate folosind cardul Ionic și componentele listei.

După ce am temat aplicația noastră, să vedem acum cum să obținem date folosind Axios. Vom folosi API-ul terță parte disponibil pe NewsAPI.org.

În primul rând, trebuie să luăm o cheie API, astfel încât să putem comunica cu API-ul. Accesați pagina de înregistrare, introduceți informațiile dvs. și înregistrați un cont. Vi se va da o cheie API; notează-l și hai să continuăm.

Întoarceți-vă la terminal și rulați următoarea comandă pentru a instala Axios:

 $ npm install axios --save

Apoi, deschideți fișierul src/pages/Home.tsx și începeți prin a importa Axios și IonButton :

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

Apoi, definiți variabilele constante API_KEY și URL :

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

În variabila URL, vom adăuga un punct final pentru a obține titlurile de top din sursa noastră, TechCrunch. Puteți folosi orice sursă doriți din sursele disponibile.

Notă : asigurați-vă că puneți propria cheie API în variabila API_KEY .

Apoi, definiți metoda fetchArticles() după cum urmează:

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

Pur și simplu apelăm metoda axios() pentru a trimite o solicitare GET către punctul final de știri, iar rezultatul metodei este o promisiune care trebuie rezolvată pentru a obține datele știrilor.

Apoi, actualizați componenta HomePage după cum urmează pentru a apela metoda fetchArticles() și a rezolva promisiunea returnată:

 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> </> ); };

În componenta noastră de funcție, apelăm mai întâi cârligul useState() al lui React pentru a crea variabila de stare a articles , care va reține articolele de știri după ce le vom prelua din API.

useState() returnează variabila de stare, care are matricea goală ca valoare inițială și o funcție pe care o putem folosi pentru a schimba valoarea variabilei. Folosim atribuirea de destructurare pentru a despacheta valorile din perechea returnată în variabile distincte (adică articles și setArticles() ).

Apoi, apelăm cârligul useEffect() pentru a realiza un efect secundar în componenta noastră. În cazul nostru, efectul secundar este de a prelua date din API-ul de știri folosind metoda fetchArticles() , care returnează o promisiune. Odată ce promisiunea este rezolvată, apelăm metoda setArticles() pentru a atribui datele de știri variabilei articles .

Atât useState() cât și useEffect() sunt cârlige React încorporate care au fost introduse în React 16.8; pur și simplu vă permit să utilizați stare și alte funcții React fără a fi nevoie să scrieți o clasă. useEffect() este echivalent cu apelarea metodelor ciclului de viață componentDidMount , componentDidUpdate și componentWillUnmount combinate în componente bazate pe clasă.

În cele din urmă, în șablonul de vizualizare, iterăm peste matricea articles folosind metoda map() și afișăm titlul fiecărui articol de știri în interiorul unui element IonItem al componentei IonList , precum și un buton care ne duce la pagina articol complet.

Aceasta este o captură de ecran a paginii:

Puteți găsi codul sursă în acest depozit GitHub.

Concluzie

În acest tutorial, am început să folosim atât Ionic, cât și React și le-am folosit pentru a construi o aplicație mobilă simplă care preia și afișează date de știri de la un API terță parte folosind clientul Axios. Am văzut, de asemenea, cum să folosim cârlige în React - și anume, useState() și useEffect() - pentru a crea stare și a efectua efecte secundare în componentele funcției React. Cu Ionic, am văzut cât de ușor este să generați un proiect bazat pe React și cum putem tema aplicația folosind atributele de culoare ale componentelor.