Рынок мобильных приложений быстро становится одной из лучших платформ для охвата современных клиентов. Распространенной проблемой, с которой сталкиваются фронтенд-разработчики, является создание пользовательских интерфейсов (UI), которые выглядят и хорошо работают на всех платформах: Android, iOS или даже как веб-приложение.
Комплект для разработки программного обеспечения Ionic UI является распространенным решением этой проблемы и позволяет интерфейсным разработчикам создавать кроссплатформенные приложения с помощью всего лишь одной кодовой базы.
Сегодня мы познакомим вас с Ionic, покажем, как он сочетается с другими веб-технологиями, и поможем создать ваше первое приложение Ionic.
Что такое Ionic?
Ionic — это комплект для разработки программного обеспечения с открытым исходным кодом (SDK), используемый для разработки мобильных, настольных или прогрессивных веб-приложений (PWA). Первоначально он был построен на основе AngularJS, но теперь поддерживает все основные интерфейсные фреймворки. Вы можете использовать Ionic для создания пользовательских интерфейсов для мобильных приложений, созданных с помощью Angular, React или Vue.js.
Ionic даже позволяет разрабатывать приложения Ionic Native без какой-либо структуры.
Ionic используется для создания гибридных приложений, которые по сути представляют собой веб-приложение, заключенное в собственную оболочку. Устройство устанавливает контейнер приложения локально (как собственное приложение), но приложение использует встроенный браузер для подключения к любым возможностям мобильной платформы. Встроенный браузер и любые плагины невидимы для пользователя.
Самым большим преимуществом приложений Ionic (и гибридных приложений в целом) является то, что вы можете создать единую базу кода, а затем настроить ее для определенных платформ, таких как iOS, Android или Windows.
Встроенный браузер отделяет исходный код от устройства и действует как переводчик между поведением, описанным в коде, и особенностями устройства. Эта настройка для конкретной платформы позволяет создавать приложения, которые отлично работают и отлично смотрятся на любой платформе, поддерживаемой Ionic.
Плюсы использования Ionic:
- Настройка для конкретной платформы
- Бэкэнд-агностик
- Обширные встроенные параметры и элементы пользовательского интерфейса
- Поддерживается ведущими мобильными и веб-платформами
- Легко подобрать для тех, кто имеет опыт работы с Sass, CSS или HTML.
Минусы:
- Низкая производительность для приложений Ionic Native (особенно для приложений с тяжелой графикой)
- Зависимость от плагина, приложения могут полностью сломаться, если плагин отсутствует
- Нет поддержки горячей перезагрузки, необходимо перезапустить приложение, чтобы изменения вступили в силу.
Как работает Ionic?
Ионные приложения создаются путем объединения встроенных строительных блоков пользовательского интерфейса, называемых компонентами. В библиотеке Ionic есть тысячи компонентов пользовательского интерфейса, которые используются для реализации общих форм, таких как кнопки, предупреждения или приглашения для ввода. Все встроенные компоненты работают и выглядят одинаково независимо от платформы.
Сравнение компонентов на разных мобильных платформах
Компоненты позволяют быстрее создавать приложения, потому что вам не нужно реализовывать каждую общую функцию с нуля. В результате вы часто можете выполнить все основные функции своего приложения всего за один присест.
Если вы хотите выйти за рамки стандартной библиотеки, вы также можете создавать собственные компоненты. С этого момента пользовательские компоненты можно повторно использовать в вашем приложении.
Ионные компоненты записываются в TSXверсии JSXфайла TypeScript. TSX- это расширение TypeScript, которое позволяет размещать HTML-разметку непосредственно внутри вашего кода.
Вот пример TSXфайла, который использует как TypeScript, так и HTML.
const fruit = [ 'Apples', 'Oranges', 'Grapes', 'Peaches']; return ( <div> <h1>Hello, Ionic</h1> <p>Welcome to our app!</p> <h2>Here are some fruits</h2> <ul> {fruit.map((f) => <li>{f}</li>)} </ul> </div> );
Cordova
Ионные приложения становятся гибридными с включением фреймворка для разработки мобильных приложений Apache Cordova или Capacitor. Эти программы создают встроенный слой браузера, который позволяет веб-контенту Ionic работать в собственном приложении. После установки встроенного браузера ваше приложение функционирует как собственное приложение и может быть развернуто в магазинах приложений на iOS, Android, Electron или в Интернете как PWA.
Без Cordova веб-приложения существуют в изолированной программной среде и не могут напрямую обращаться к различным аппаратным и программным ресурсам на устройстве. Кордова предоставляет пути API JavaScript для преодоления ограничений ресурсов песочницы. Проще говоря, Cordova действует как переводчик, позволяя вашему гибридному приложению получать доступ к тем же ресурсам, что и собственное приложение.
Наконец, Cordova может создавать виртуальные эмуляторы популярных мобильных платформ, таких как Android или iOS, для тестирования ваших приложений.
Как Cordova и Ionic сочетаются друг с другом
Другие фреймворки
Ionic часто сочетается с другими интерфейсными фреймворками, такими как React и Angular.
React — любимый интерфейсный фреймворк для разработки мобильных приложений. Ionic поддерживает собственную версию React с настройкой, идентичной стандартным приложениям React.
Ionic React использует специфичные для DOM функции React с react-dom и незаметно реализует React Router для маршрутизации и навигации. React Ionic часто используется из-за того, насколько тесно он ведет себя и управляет, как стандартные приложения React.
Angular — это интерфейсный фреймворк, который обычно используется для корпоративных приложений. Он менее удобен для новичков, но Ionic предлагает инструменты и API, призванные помочь разработчикам Angular легко интегрировать эти две технологии.
Ionic 4 и более поздние версии используют официальный стек Angular для построения и маршрутизации, чтобы ваше приложение Angular Ionic идеально сочеталось с другими инструментами, ориентированными на Angular.
Начало работы с Ionic
Теперь, когда у вас есть базовые знания, давайте перейдем к практическому обучению. Сначала мы расскажем, как установить Ionic, а затем перейдем к традиционной программе Hello World.
Installation
Для установки Ionic вам понадобится установленный Node.js. Мы установим версию Ionic для Cordova, которая включает оба программного обеспечения.
Введите следующий код в командную строку.
sudo apt-get install nodejs sudo apt-get install npm sudo npm install -g ionic cordova
Подождите, пока команда запустится, и у вас будет все необходимое!
Hello World
Теперь мы сделаем простое HelloWorldприложение, которое покажет вам веревки.
Шаг 1
Сначала создайте папку helloworldдля вашего проекта с помощью следующей команды:
ionic start helloworld blank
- startсигналы в интерфейс командной строки для создания нового приложения.
- helloworldбудет именем каталога и именем приложения для вашего проекта.
- blankвыбирает встроенный blankшаблон, который содержит одну пустую стартовую страницу.
При появлении запроса, если вы хотите добавить плагины Cordova, введите Nили No.
Шаг 2
Измените свой каталог на helloworldкаталог, который мы только что создали. Это позволит вам вносить изменения в проект.
cd helloworld
cd это сокращение от «изменить каталог».
Шаг 3
Откройте helloworldпапку в ваших файлах. Вы найдете коллекцию заранее созданных папок и пустых шаблонов файлов. Открыто src/page/home/home.html. Мы отредактируем этот файл на следующем шаге.
Остальные файлы в этом разделе home.scss- это страница для написания вашего кода CSS и home.ts, где вы можете писать код TypeScript.
Шаг 4
Удалите любой текущий текст в home.htmlфайле и замените его следующим:
<ion-header> <ion-navbar> <ion-title> Ionic Project </ion-title> </ion-navbar> </ion-header> <ion-content padding> <h2>Hello World </h2> </ion-content>
Синтаксис этого раздела почти идентичен синтаксису HTML. Наша helloworldстраница в поле называется «Ионный проект». Единственный контент в нашем приложении — это термин «Hello World» внутри h2поля.
Сохраните изменения в файле и закройте home.html.
Шаг 5
Теперь все, что нам нужно сделать, это запустить ваше приложение с помощью следующей команды:
ionic serve
serve запускает приложение в выбранном каталоге.
Когда ваше приложение запустится, введите его localhost:8100в адресную строку, чтобы просмотреть содержимое веб-приложения.
Сделайте своё первое Ionic приложение
Теперь мы создадим полное приложение с Ionicframeworkсайта и исследуем каждую часть.
Сначала зайдите в онлайн-конструктор приложений Ionic по адресу ionicframework.com/start. Назовите свой проект firstapp, выберите цвет темы и выберите menuопцию. Эти параметры определяют начальную точку вашего Ionic-проекта. Выберите React в качестве своего фреймворка.
Затем вам будет предложено создать учетную запись или войти в систему. Затем вам будет предоставлена команда пользовательской установки, используемая для создания программы с предоставленными спецификациями.
Введите, npm installа затем команду custom-install в командную строку.
Затем cd firstappнажмите Enter, чтобы выбрать новый каталог проекта, и введите ionic serve.
firstappТеперь ваш проект будет запущен.
Если вы не хотите создавать файлы на своей стороне, вы можете продолжить, используя zip-файл ниже.
ionic-react-example-app-educative.zip
Обзор кода Ionic React
Давайте подробнее рассмотрим код этого приложения.
index.tsx
Откройте index.tsxфайл. Этот файл длинный, но самые важные части находятся вверху.
import React from ‘react’;import ReactDOM from ‘react-dom’;import App from ‘./App’;import * as serviceWorker from ‘./serviceWorker’;ReactDOM.render(<App />, document.getElementById(‘root’));
Строка 1: В верхней части файла вы можете увидеть оператор импорта для библиотек react и react-dom. Каждому приложению необходимо импортировать пространство имен React, чтобы использовать React.
Строка 2: ReactDOMпространство имен предоставляет методы, специфичные для объектной модели HTML-документа, которые должны вызываться из самого верхнего уровня приложения.
Строка 3: AppИмпорт включает определение самого приложения.
Строка 6: При вызове предлагается render()выполнить AppКомпонент и поместить его в контейнер, указанный вторым параметром. Этот контейнер представляет собой HTML-элемент с атрибутом id root, который находится в index.htmlфайле, найденном в общей папке.
index.html
Этот файл содержит множество тегов, управляющих отображением приложения на мобильных устройствах. Ionic уже оптимизировал этот файл, поэтому вам редко придется его изменять. Вместо этого внесите изменения в index.tskфайл.
<!DOCTYPE html><html lang=»en»><head><meta charset=»utf-8″ /><title>Ionic App</title><base href=»/» /><meta name=»color-scheme» content=»light dark» /><meta name=»viewport»content=»viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no» /><meta name=»format-detection» content=»telephone=no» /><meta name=»msapplication-tap-highlight» content=»no» /><link rel=»manifest» href=»%PUBLIC_URL%/manifest.json» /><link rel=»shortcut icon» type=»image/png» href=»%PUBLIC_URL%/assets/icon/favicon.png» /><!— add to homescreen for ios —><meta name=»apple-mobile-web-app-capable» content=»yes» /><meta name=»apple-mobile-web-app-title» content=»Ionic App» /><meta name=»apple-mobile-web-app-status-bar-style» content=»black» /></head><body><div id=»root»></div></body></html>
bodyМетки на линии 25-27 содержит в divпаре с, rootчтобы index.htmlсоединиться с index.tsx.
App.tsx
Этот файл определяет Appкомпонент. Именно здесь начинается код React вашего приложения. Appопределяется как постоянная стрелочная функция типа React.FC. FCявляется сокращением от FunctionComponent.
Эта функция возвращает HTML для определения компонента. Большая часть ионного кода появляется в этой HTML-подобной форме.
const App: React.FC = () => {return (<IonApp><IonReactRouter><IonSplitPane contentId=»main»><Menu /><IonRouterOutlet id=»main»><Route path=»/page/:name» component={Page} exact /><Redirect from=»/» to=»/page/Inbox» exact /></IonRouterOutlet></IonSplitPane></IonReactRouter></IonApp>);};export default App;
Строка 3: возвращаемая разметка. Это все, что находится внутри returnзаявления.
Строка 4: Первое в нем — это файл IonApp. An IonApp- это корневой компонент Ionic, который должен отображаться на всех страницах Ionic-React.
Строка 5: Внутри него IonReactRouter. Это тонкая обертка Ionic вокруг React Router. React Router — это то, что позволяет вам создавать многостраничные приложения с богатыми переходами страниц с веб-сайта с помощью одного htmlфайла, также известного как одностраничное приложение(SPA).
Строка 6: Внутри IonReactRouterнаходится IonSplitPaneкомпонент. Это макет, который обеспечивает боковое меню, которое автоматически сворачивается в гамбургер-менюна небольших экранах.
Строка 7: Внутри IonSplitPaneнаходится Menuкомпонент.
Линия 8: Как непосредственный брат в Menuэто IonRouterOutlet. Здесь появляется содержимое вашей главной страницы. MenuНаходится на левой стороне, а IonRouterOutletдома все остальные приложения.
Строка 9: Внутри есть несколько определенных маршрутов. Думайте о маршруте как об URL-адресе. Учитывая путь, /page/:name, то:nameчасть будет переведена на переменный маршрут под названием «имя».
Строка 9: у componentатрибута есть компонент для загрузки при совпадении маршрута. В данном случае это Pageкомпонент. Точный атрибут означает, что этот маршрут будет соответствовать только в том случае, если URL-адрес начинается с косой черты, за которой следует слово страница, еще одна косая черта, а затем еще одно слово, которое становится «именем» страницы.
Строка 10: Второй маршрут — маршрут по умолчанию. Он просто говорит, что если совпавший URL-адрес представляет собой один символ косой черты, перенаправьте приложение на /page/Inbox.
Page.tsx
Page- еще один компонент, похожий на App. Основное отличие состоит в том, что FunctionComponentэто универсальный тип RouteComponentProps. Это то, что позволяет маршрутизатору передавать эти параметры маршрута.
В этом случае ожидается, что свойства маршрута будут содержать только имя, которое оно передает в стрелочную функцию как соответствие значения.
const Page: React.FC<RouteComponentProps<{ name: string; }>> = ({ match }) => {return (<IonPage><IonHeader><IonToolbar><IonButtons slot=»start»><IonMenuButton /></IonButtons><IonTitle>{match.params.name}</IonTitle></IonToolbar></IonHeader><IonContent><IonHeader collapse=»condense»><IonToolbar><IonTitle size=»large»>{match.params.name}</IonTitle></IonToolbar></IonHeader><ExploreContainer name={match.params.name} /></IonContent></IonPage>);};
Menu.tsx
Теперь откройте menu.tsxфайл. Здесь определяется внешний вид и категории бокового меню.
В верхней части файла он определяет AppPageинтерфейс, используемый для хранения общих свойств страницы, таких как URL-адрес, значки и заголовок.
interface AppPage {url: string;iosIcon: string;mdIcon: string;title: string;}
Ниже представлена подборка страниц для каждой из категорий нашего меню.
const appPages: AppPage[] = [{title: ‘Inbox’,url: ‘/page/Inbox’,iosIcon: mailOutline,mdIcon: mailSharp},{title: ‘Outbox’,url: ‘/page/Outbox’,iosIcon: paperPlaneOutline,mdIcon: paperPlaneSharp},{title: ‘Favorites’,url: ‘/page/Favorites’,iosIcon: heartOutline,mdIcon: heartSharp},{title: ‘Archived’,url: ‘/page/Archived’,iosIcon: archiveOutline,mdIcon: archiveSharp},{title: ‘Trash’,url: ‘/page/Trash’,iosIcon: trashOutline,mdIcon: trashSharp},{title: ‘Spam’,url: ‘/page/Spam’,iosIcon: warningOutline,mdIcon: warningSharp}];
Затем он определяет ярлыки, видимые в меню:
const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
Ниже находится разметка React:
const Menu: React.FunctionComponent<MenuProps> = ({ selectedPage }) => {return (<IonMenu contentId=»main» type=»overlay»><IonContent><IonList id=»inbox-list»><IonListHeader>Inbox</IonListHeader><IonNote>hi@ionicframework.com</IonNote>{appPages.map((appPage, index) => {return (<IonMenuToggle key={index} autoHide={false}><IonItem className={selectedPage === appPage.title ? ‘selected’ : »} routerLink={appPage.url} routerDirection=»none» lines=»none» detail={false}><IonIcon slot=»start» icon={appPage.iosIcon} /><IonLabel>{appPage.title}</IonLabel></IonItem></IonMenuToggle>);})}</IonList><IonList id=»labels-list»><IonListHeader>Labels</IonListHeader>{labels.map((label, index) => (<IonItem lines=»none» key={index}><IonIcon slot=»start» icon={bookmarkOutline} /><IonLabel>{label}</IonLabel></IonItem>))}</IonList></IonContent></IonMenu>);};
Строка 6: IonListкомпонент форматирует элементы в список.
Строка 8: IonNoteкомпонент предоставляет заголовки.
Строка 9: Вот интересный код. Функция карты массива вызывается для appPagesмассива, чтобы преобразовать его в серию IonMenuToggleкомпонентов, которая используется для переключения меню, открытого или закрытого.
Строка 12: Внутри IonMenuToggleнаходится символ IonItem, используемый для группировки других компонентов, которые в данном случае являются IonIconи IonLabel, оба из которых не требуют пояснений. IonItemИмеет routerLinkустановленный атрибут со значением URL текущей страницы. Это говорит маршрутизатору Ionic переключиться на эту страницу.
Строка 21: Под меню находится еще один список, созданный так же, как и меню. Разница в том, что он использует массив меток и не содержит routerLinks.
И вот оно! Теперь, когда вы понимаете каждую из частей этого приложения для начинающих, вы можете начать добавлять свои личные штрихи.
