Создание мобильных приложений с использованием Ionic и React

От автора: Ionic недавно добавил поддержку React; поэтому теперь разработчики React могут использовать преимущества Ionic для создания гибридных мобильных приложений и прогрессивных веб-приложений (PWA). В этой статье мы покажем вам, как начать использовать Ionic с React, создав простое демонстрационное приложение с нуля.

Что вам необходимо

Чтобы следовать этому руководству, вам понадобятся следующие предварительные условия:

Вы можете проверить, установлена ли у вас последняя версия Node.js (v10), выполнив следующую команду:

node -v

Представляем React и Ionic

Давайте начнем с краткого введения в React и Ionic. По информации официального сайта: «React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Она позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных частей кода, называемых «компонентами».

React фокусируется на создании пользовательских интерфейсов и не предоставляет никаких встроенных инструментов для общих задач, необходимых для веб-разработки, таких как выборка удаленных данных и маршрутизация, поэтому вам придется использовать для этого некоторые сторонние библиотеки.

По информации сайта Ionic: «Ionic Framework — это бесплатный инструментарий мобильного интерфейса с открытым исходным кодом для разработки высококачественных кроссплатформенных приложений для iOS, Android и Веб — и все это из единой базы кода».

По сути, это набор компонентов пользовательского интерфейса, которые можно использовать с простым JavaScript или любой популярной интерфейсной средой или библиотекой, такой как Angular, React или Vue, для создания гибридного мобильного приложения и PWA.

В этом руководстве мы будем использовать некоторые компоненты Ionic UI, такие как:

Установка Ionic CLI V5

Интерфейс командной строки (CLI) Ionic, версия 5, поддерживает создание проектов Ionic на основе React. Итак, начнем с установки инструмента из npm. Откройте CLI и выполните следующую команду:

npm install -g ionic

На момент написания, Ionic CLI v5.2.3 является последней.

Примечание:* В зависимости от того, как вы установили Node.js в своей системе, вам может потребоваться добавить sudo перед командой на macOS или Linux, или запустить командную строку с правами администратора в Windows, если вы получите какие-либо ошибки доступа. Вы также можете просто исправить права доступа npm или использовать такой инструмент, как nvm.*

Затем установите Cordova Resources(который используется для локального создания ресурсов Cordova) и Native Run (используется для развертывания двоичных файлов приложений на устройствах):

npm install -g cordova-res native-run

Они необходимы только в том случае, если вы хотите протестировать приложение на реальном мобильном устройстве или эмуляторе.

Создание проекта React и Ionic

Теперь давайте создадим проект на основе React. Вернитесь к терминалу, убедитесь, что вы находитесь в рабочем каталоге, и выполните следующую команду:

ionic start myApp --type=react

Мы используем —type=react для создания проекта на основе React. Затем вам нужно будет выбрать стартовый шаблон из доступных. Давайте выберем стартовый шаблон sidemenu с боковым меню и навигацией.

После создания проекта и установки зависимостей вы можете обслуживать свое приложение локально, используя следующие команды:

cd ./myApp
ionic serve

Ваше приложение будет доступно по адресу http://localhost:8100, и вы можете использовать веб-браузер, чтобы начать экспериментировать с ним.

Ionic называется гибридной мобильной платформой, потому что она использует веб-технологии, которые изначально были предназначены для создания веб-приложений, наряду с собственным контейнером (Cordova или Capacitor), для создания мобильных приложений без использования нативных технологий для целевых платформ, таких как Java или Kotlin для Android или Swift для iOS.

Поскольку ваше мобильное приложение на самом деле является веб-приложением, вы можете выполнять большую часть разработки, тестируя в веб-браузере без использования эмулятора или реального мобильного устройства, за исключением тестирования нативных функций устройства, таких как камера или хранилище SQLite. Фактически, даже возможно использовать определенные методы, чтобы имитировать плагины, которые предоставляют нативные функции, и выполнять полное тестирование во время разработки в веб-браузере.

Очистка проекта

У нас есть базовая структура приложения, с двумя страницами (home и list) и меню. Давайте удалим страницу списка, так как это всего лишь стандартный код.

Сначала удалите файл src/pages/List.tsx, затем откройте файл src/App.tsx и удалите запись для страницы списка из массива appPages:

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

Также удалите импорт страницы списка из файла:

import List from './pages/List';

Далее удалите <Route path=»/:tab(home)/list» component={List} exact={true} /> из компонента App:

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

Компонент App является корневым компонентом, который визуализируется с помощью нашего приложения. Если вы откроете файл src/index.tsx, вы найдете следующий код:

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

Метод render() используется для визуализации элемента React в DOM в предоставленном элементе root.

Настройка темы приложения

Создав, обслужив и очистив наш проект Ionic, давайте теперь посмотрим, как мы можем изменить цвета пользовательского интерфейса, чтобы он выглядел более профессионально.

Давайте начнем с бокового меню. Откройте файл src/components/Menu.tsx и добавьте к компонентам IonToolbar, IonContent, IonList и IonItemUI атрибут color со значением primary:

const Menu: React.FunctionComponent = ({ appPages }) => ( <IonMenu contentId="main"> <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 предоставляет некоторые цвета по умолчанию (primary, secondary, tertiary, success, warning, danger, light, medium и dark), которые можно использовать для изменения цвета компонентов пользовательского интерфейса. Цвет может быть применен к компоненту, чтобы изменить цвета по умолчанию с помощью атрибута color. Эти цвета имеют значения по умолчанию, но вы можете настроить их с помощью некоторых предопределенных переменных CSS.

Это скриншот нашего меню:

Далее давайте изменим цвет домашней страницы. Откройте файл src/pages/Home.tsx и установите для атрибута color компонентов IonToolbar и IonContent значение primary:

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

Это скриншот страницы:

Установка Axios и использование REST API

Мы рассмотрим, как установить Axios и использовать сторонний RESTful API в приложении, а также, как отображать извлеченные данные с помощью карты Ionic и компонентов списка.

Настроив тему приложения, давайте теперь посмотрим, как получать данные с помощью Axios. Мы будем использовать сторонний API, доступный на NewsAPI.org.

Во-первых, нам нужно получить ключ API, чтобы мы могли взаимодействовать с ним. Перейдите на страницу регистрации, введите свои данные и зарегистрируйте учетную запись. Вам будет предоставлен ключ API; скопируйте его, и давайте продолжим.

Вернитесь к терминалу и выполните следующую команду, чтобы установить Axios:

npm install axios --save

Затем откройте файл src/pages/Home.tsx и начните с импорта Axios и IonButton:

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

Затем определите постоянные переменные API_KEYи URL:

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

В переменную URL добавим конечную точку, чтобы получить верхние заголовки из нашего источника, TechCrunch. Вы можете использовать любой источник из доступных.

Примечание. Не забудьте поместить в переменную API_KEY собственный ключ API.

Затем следующим образом определите метод fetchArticles():

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

Мы просто вызываем метод axios() для отправки запроса GET к конечной точке, и результатом метода является promise, который необходимо разрешить для получения данных новостей.

Затем обновите компонент HomePage следующим образом, чтобы вызвать метод fetchArticles() и разрешить возвращенный promise:

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

В функциональном компоненте мы сначала вызываем хук React useState(), чтобы создать переменную состояния articles, которая будет содержать новостные статьи после того, как мы получим их из API.

useState() возвращает переменную состояния, которая содержит пустой массив в качестве исходного значения и функцию, которую мы можем использовать для изменения значения переменной. Мы используем деструктурирующее присваивание, чтобы распаковать значения из возвращенной пары в различные переменные (то есть articles и setArticles()).

Далее мы вызываем хук useEffect() для выполнения побочного эффекта в нашем компоненте. В нашем случае побочным эффектом является получение данных из API новостей с помощью метода fetchArticles(), который возвращает promise. Как только promise разрешен, мы вызываем метод setArticles() для присвоения данных новостей переменной articles.

И useState(), и useEffect() являются встроенными хуками React, которые были представлены в React 16.8; они просто позволяют вам использовать состояние и другие функции React без необходимости писать класс. Хук useEffect() эквивалентен вызову методов жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount, объединенных в компоненты на основе класса.

Наконец, в шаблоне представления мы перебираем массив articles, используя метод map(), и отображаем заголовок каждой новостной статьи внутри элемента IonItem компонента IonList, а также кнопку, которая переносит нас на страницу полной статьи.

Это скриншот страницы:

Вы можете найти исходный код в этом репозитории GitHub.

Заключение

В этом руководстве мы использовали Ionic и React и для создания простого мобильного приложения, которое извлекает и отображает новостные данные из стороннего API с помощью клиента Axios. Мы также рассмотрели, как использовать хуки React, а именно — хуки useState() и useEffect() — для создания состояния и выполнения побочных эффектов внутри компонентов функции React. Мы увидели, как легко с помощью Ionic создать проект на основе React, и как мы можем оформить тему приложения, используя атрибуты компонентов color.

Автор: Ahmed Bouchefra

Источник: https://www.smashingmagazine.com

Редакция: Команда webformyself.