Tworzenie aplikacji mobilnych za pomocą Ionic i React

Ionic niedawno dodał wsparcie dla React; więc teraz programiści React mogą wykorzystać zalety Ionic do tworzenia hybrydowych aplikacji mobilnych i progresywnych aplikacji internetowych (PWA). W tym poście pokażemy Ci, jak zacząć korzystać z Ionic w React, budując od podstaw prostą aplikację demonstracyjną.

Warunki wstępne

Aby poprawnie postępować zgodnie z tym samouczkiem, będziesz potrzebować następujących wymagań wstępnych:

• najnowsze wersje Node.js i npm zainstalowane w Twoim systemie,
• praktyczna znajomość języka TypeScript i React.

Możesz sprawdzić, czy masz zainstalowaną najnowszą wersję Node.js (v10), uruchamiając następujące polecenie:

 $ node -v

Przedstawiamy React i Ionic

Zacznijmy od krótkiego wprowadzenia zarówno do React, jak i Ionic.

Według oficjalnej strony internetowej:

„React to deklaratywna, wydajna i elastyczna biblioteka JavaScript do budowania interfejsów użytkownika. Pozwala komponować złożone interfejsy użytkownika z małych i odizolowanych fragmentów kodu zwanych „komponentami”.

React koncentruje się na tworzeniu interfejsów użytkownika i nie zapewnia żadnych wbudowanych narzędzi do typowych zadań wymaganych w tworzeniu stron internetowych, takich jak pobieranie danych zdalnych i routing, więc do tych zadań musisz użyć niektórych istniejących bibliotek innych firm.

Według strony internetowej Ionic:

„Ionic Framework to bezpłatny zestaw narzędzi do mobilnego interfejsu użytkownika o otwartym kodzie źródłowym do tworzenia wysokiej jakości aplikacji międzyplatformowych dla natywnych systemów iOS, Android i sieci — wszystko z jednej bazy kodu”.

Zasadniczo jest to zestaw komponentów interfejsu użytkownika, których można używać ze zwykłym JavaScriptem lub dowolną popularną platformą lub biblioteką front-end, taką jak Angular, React lub Vue, aby zbudować hybrydową aplikację mobilną i PWA.

W tym samouczku zobaczymy i użyjemy niektórych komponentów interfejsu użytkownika Ionic, takich jak:

• IonMenu: Dzięki temu szuflada nawigacji wysunie się z boku bieżącego widoku.
• IonToolbar: Te górne paski są umieszczone nad lub pod treścią.
• IonHeader: Ten komponent nadrzędny zawiera komponent paska narzędzi.
• IonContent: Ten składnik zapewnia obszar zawartości, z metodami sterowania obszarem przewijania i innymi rzeczami. Potrzebujesz tylko jednego składnika zawartości w jednym widoku.
• IonList: Ten komponent zawiera elementy o podobnej zawartości danych, takie jak obrazy i tekst. Składa się z obiektów IonItem.
• IonItem: Ten komponent może zawierać tekst, ikony, awatary, obrazy, dane wejściowe i dowolny inny natywny lub niestandardowy element.
• IonButton: Ten komponent zapewnia klikalny element, którego można użyć w formularzu lub w dowolnym miejscu, które wymaga prostej, standardowej funkcjonalności przycisku.
  

Instalowanie Ionic CLI v5

Interfejs wiersza poleceń (CLI) Ionic, wersja 5, obsługuje tworzenie projektów Ionic w oparciu o React. Zacznijmy więc od zainstalowania narzędzia z npm.

Otwórz CLI i uruchom następujące polecenie:

 $ npm install -g ionic

W momencie pisania tego tekstu Ionic's CLI v5.2.3 jest najnowszy.

Uwaga : *W zależności od tego, jak zainstalowałeś Node.js w swoim systemie, może być konieczne dodanie sudo przed poleceniem w systemie macOS lub Linux lub uruchomienie wiersza polecenia jako administrator w systemie Windows, jeśli wystąpią jakiekolwiek błędy uprawnień. Możesz także po prostu naprawić swoje uprawnienia npm lub użyć narzędzia takiego jak nvm.*

Następnie zainstaluj Cordova Resources (używany do lokalnego generowania zasobów Cordova) i Native Run (używany do wdrażania plików binarnych aplikacji na urządzenia):

 $ npm install -g cordova-res native-run

Są one wymagane tylko wtedy, gdy chcesz przetestować swoją aplikację na prawdziwym urządzeniu mobilnym lub emulatorze.

Tworzenie projektu jonowego i reagującego

Teraz stwórzmy projekt w oparciu o React. Wróć do terminala, upewnij się, że jesteś w swoim katalogu roboczym i uruchom następujące polecenie:

 $ ionic start myApp --type=react

Używamy --type=react do wygenerowania projektu w oparciu o React. Następnie musisz wybrać szablon startowy spośród dostępnych. Wybierzmy sidemenu dla szablonu startowego z bocznym menu i nawigacją.

Po wygenerowaniu projektu i zainstalowaniu zależności możesz obsługiwać swoją aplikację lokalnie za pomocą następujących poleceń:

 $ cd ./myApp $ ionic serve

Twoja aplikacja będzie dostępna pod adresem https://localhost:8100 i możesz zacząć z nią grać za pomocą przeglądarki internetowej.

Ionic nazywa się hybrydową platformą mobilną, ponieważ wykorzystuje technologie internetowe, które zostały pierwotnie zaprojektowane do tworzenia aplikacji internetowych, wraz z natywnym kontenerem (Cordova lub Capacitor) do tworzenia aplikacji mobilnych bez korzystania z natywnych technologii dla platform docelowych, takich jak Java lub Kotlin na Androida lub Swift na iOS.

Ponieważ Twoja aplikacja mobilna jest w rzeczywistości aplikacją internetową, większość programowania możesz wykonywać, testując w przeglądarce internetowej bez użycia emulatora lub prawdziwego urządzenia mobilnego, z wyjątkiem testowania natywnych funkcji urządzenia, takich jak kamera lub pamięć SQLite, jeśli: użyłem ich w Twojej aplikacji. W rzeczywistości możliwe jest nawet użycie pewnych technik do naśladowania wtyczek, które zapewniają natywne funkcje i wykonanie całego testowania podczas programowania w przeglądarce internetowej.

Czyszczenie naszego projektu

Mamy podstawową strukturę aplikacji, z dwiema stronami (główną i listą) oraz menu. Usuńmy stronę z listą, ponieważ jest to tylko standardowy kod.

Najpierw usuń plik src/pages/List.tsx , następnie otwórz plik src/App.tsx i usuń wpis dla strony listy z tablicy appPages :

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

Usuń również import strony listy z pliku:

 import List from './pages/List';

Następnie usuń <Route path="/:tab(home)/list" component={List} exact={true} /> ze składnika 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;

Komponent App to główny komponent, który jest renderowany przez naszą aplikację. Jeśli otworzysz plik src/index.tsx , znajdziesz następujący kod:

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

Metoda render() służy do renderowania elementu React do DOM w dostarczonym elemencie root .

Motywowanie aplikacji

Po utworzeniu, obsłużeniu i oczyszczeniu naszego projektu Ionic, zobaczmy teraz, jak możemy zmienić kolory interfejsu użytkownika, aby wyglądał bardziej profesjonalnie.

Zacznijmy od bocznego menu. Otwórz plik src/components/Menu.tsx i dodaj atrybut color z primary wartością do 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 zapewnia kilka domyślnych kolorów (główny, drugorzędny, trzeciorzędny, sukces, ostrzeżenie, niebezpieczeństwo, jasny, średni i ciemny), których można użyć do zmiany koloru komponentów interfejsu użytkownika. Do składnika jonowego można zastosować kolor, aby zmienić domyślne kolory za pomocą atrybutu color . Zobacz „Kolory”, aby uzyskać więcej informacji.

Te kolory mają wartości domyślne, ale można je dostosować za pomocą wstępnie zdefiniowanych zmiennych CSS. Zobacz „Modyfikowanie kolorów”.

To jest zrzut ekranu naszego menu:

Następnie zmieńmy kolor strony głównej. Otwórz plik src/pages/Home.tsx i ustaw atrybut color komponentów IonToolbar i IonContent na primary :

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

To jest zrzut ekranu strony:

Instalowanie Axios i używanie REST API

Zobaczymy, jak zainstalować Axios i wykorzystać API RESTful innej firmy w naszej aplikacji, a także zobaczymy, jak wyświetlić pobrane dane za pomocą karty Ionic i składników listy.

Mając tematycznie naszą aplikację, zobaczmy teraz, jak pobrać dane za pomocą Axios. Użyjemy zewnętrznego API dostępnego na NewsAPI.org.

Najpierw musimy pobrać klucz API, aby móc komunikować się z API. Przejdź do strony rejestracji, wprowadź swoje dane i zarejestruj konto. Otrzymasz klucz API; zanotuj to i kontynuujmy.

Wróć do terminala i uruchom następujące polecenie, aby zainstalować Axios:

 $ npm install axios --save

Następnie otwórz plik src/pages/Home.tsx i zacznij importować Axios i IonButton :

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

Następnie zdefiniuj zmienne stałe API_KEY i URL :

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

W zmiennej URL dodamy punkt końcowy, aby uzyskać nagłówki z naszego źródła, TechCrunch. Możesz użyć dowolnego źródła z dostępnych źródeł.

Uwaga : pamiętaj, aby umieścić własny klucz API w zmiennej API_KEY .

Następnie zdefiniuj fetchArticles() w następujący sposób:

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

Po prostu wywołujemy metodę axios() , aby wysłać żądanie GET do punktu końcowego grup dyskusyjnych, a wynikiem metody jest obietnica, którą należy rozwiązać, aby uzyskać dane dotyczące wiadomości.

Następnie zaktualizuj komponent HomePage w następujący sposób, aby wywołać fetchArticles() i rozwiązać zwróconą obietnicę:

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

W naszym komponencie funkcyjnym najpierw wywołujemy useState() React, aby utworzyć zmienną stanu articles , która będzie przechowywać artykuły z wiadomościami po pobraniu ich z API.

useState() zwraca zmienną stanu, której początkową wartością jest pusta tablica oraz funkcja, której możemy użyć do zmiany wartości zmiennej. Używamy przypisania destrukturyzującego, aby rozpakować wartości ze zwróconej pary do odrębnych zmiennych (tj. articles i setArticles() ).

Następnie wywołujemy useEffect() w celu wywołania efektu ubocznego w naszym komponencie. W naszym przypadku efektem ubocznym jest pobranie danych z News API za pomocą metody fetchArticles() , która zwraca obietnicę. Po spełnieniu obietnicy wywołujemy metodę setArticles() w celu przypisania danych newsów do zmiennej articles .

Zarówno useState() , jak i useEffect() są wbudowanymi hakami Reacta, które zostały wprowadzone w React 16.8; pozwalają po prostu korzystać ze stanu i innych funkcji Reacta bez konieczności pisania klasy. useEffect() jest równoważny wywołaniu metod cyklu życia componentDidMount , componentDidUpdate i componentWillUnmount połączonych w składniki oparte na klasach.

Na koniec, w szablonie widoku, iterujemy po tablicy articles za pomocą metody map() i wyświetlamy tytuł każdego artykułu z wiadomościami wewnątrz elementu IonItem komponentu IonList , a także przycisk, który przenosi nas na stronę pełny artykuł.

To jest zrzut ekranu strony:

Kod źródłowy można znaleźć w tym repozytorium GitHub.

Wniosek

W tym samouczku zaczęliśmy używać zarówno Ionic, jak i React, i wykorzystaliśmy je do zbudowania prostej aplikacji mobilnej, która pobiera i wyświetla dane wiadomości z zewnętrznego API przy użyciu klienta Axios. Widzieliśmy również, jak używać hooków w React — mianowicie useState() i useEffect() — do tworzenia stanu i wykonywania efektów ubocznych wewnątrz komponentów funkcji React. Dzięki Ionic widzieliśmy, jak łatwo jest wygenerować projekt w oparciu o React i jak możemy motywować aplikację za pomocą atrybutów kolorów komponentów.