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

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

Предпосылки

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

• последние версии Node.js и npm, установленные в вашей системе,
• знание TypeScript и React.

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

 $ node -v

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

Давайте начнем с краткого введения в React и Ionic.

Согласно официальному сайту:

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

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

Согласно веб-сайту Ionic:

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

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

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

• IonMenu: при этом панель навигации будет выдвигаться со стороны текущего представления.
• IonToolbar: эти верхние панели располагаются над или под содержимым.
• IonHeader: этот родительский компонент содержит компонент панели инструментов.
• IonContent: этот компонент предоставляет область содержимого с методами управления прокручиваемой областью и другими вещами. Вам нужен только один компонент контента внутри одного представления.
• IonList: этот компонент содержит элементы с похожим содержанием данных, например изображения и текст. Он состоит из объектов IonItem.
• IonItem: этот компонент может содержать текст, значки, аватары, изображения, входные данные и любой другой собственный или пользовательский элемент.
• IonButton: этот компонент предоставляет кликабельный элемент, который можно использовать в форме или в любом другом месте, где требуется простая стандартная функциональность кнопки.
  

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

Интерфейс командной строки Ionic (CLI) версии 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

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

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

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

 $ ionic start myApp --type=react

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

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

 $ cd ./myApp $ ionic serve

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

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

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

Очистка нашего проекта

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

Сначала удалите файл 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 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;

Компонент 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 и добавьте атрибут color с primary значением в компоненты пользовательского интерфейса IonToolbar , IonContent , IonList и 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> );

Ionic предоставляет несколько цветов по умолчанию (первичный, вторичный, третичный, успех, предупреждение, опасность, светлый, средний и темный), которые можно использовать для изменения цвета компонентов пользовательского интерфейса. Цвет можно применить к компоненту Ionic, чтобы изменить цвета по умолчанию с помощью атрибута 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. Перейдите на страницу регистрации, введите свои данные и зарегистрируйте учетную запись. Вам будет предоставлен ключ 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 в переменной API_KEY .

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

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

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

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

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

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

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

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

И 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 и как мы можем оформить приложение, используя цветовые атрибуты компонентов.