Изучение того, как создать гибридное приложение - от начинающих до среднего уровня

Наша конечная цель

Репозиторий Github, который будет следовать: https://github.com/apuravchauhan/air-pollution-tutorial

Загрузите приложение Live Air Pollution Check из Playstore здесь.

Шаг 1

Установим супер крутой гибридный фреймворк Ionic. Вкратце о гибридных приложениях: это приложения, которые позволяют упаковать код HTML / CSS / JS для запуска внутри собственного Webview или аналогичного компонента. Упаковка внутри происходит с использованием Кордовы. Предполагая, что у вас установлен Nodejs, давайте установим cordova и ionic, выполнив шаги, описанные в начале работы с ionic framework здесь http://ionicframework.com/getting-started/. Для простоты убедитесь, что вы запускаете приложение со стартовым шаблоном sidemenu.

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

Шаг 2

Покрытие всего Ionic выходит за рамки задачи, поэтому я коснусь лишь минимальных моментов, которые заставят наш проект свернуть, а именно: одна страница и одна боковая панель. Давайте разберемся с основными частями нашей структуры каталогов. Большая часть нашего кода находится в папке src. Любое достойное приложение требует настройки CSS, изображений и шрифтов. Ionic следует пользовательскому интерфейсу на основе компонентов, что в текущем контексте означает, что каждый экран будет рассматриваться как отдельный элемент управления пользовательским интерфейсом со своими собственными js, html и css. В этом приложении у нас есть два компонента: «домашний» и «список».

Компоненты находятся в папке страниц, как показано выше. Так что, если вы откроете папку с домашними компонентами, вы сможете следить за этим. И ничто не мешает вам разбить большой компонент на гораздо более мелкие и повторно используемые компоненты.

Папка приложения содержит макет или код клея, который в конечном итоге будет отображать дочерние компоненты внутри нее. app.html - это страница макета, которая содержит боковое меню и область навигации, где будут отображаться компоненты домашней страницы и списка. Этот HTML контролируется и поддерживается javascript app.component.ts для привязки данных. app.scss - это файл css для применения стиля к компоненту приложения. app.module.ts - это своего рода файл конфигурации, который сообщает фреймворку, какие все компоненты и другие конкретные модули загружать в приложение.

Здесь ts означает машинописный текст, который является надмножеством JS, что делает его похожим на типизированный язык. Не запутайся, а пока просто катайся со мной. Мы будем избегать функций TS, чтобы упростить задачу.

Шаг 3 - Время кодирования

Конфигурация глобальной темы

Теперь ionic будет автоматически применять тему материала при создании темы для Android и ios при создании для iphone. Но мне нравится придерживаться единой темы, чтобы поддерживать брендинг и согласованность, что приводит нас к тому, что мы говорим ионному ядру исправить платформу, изменив приведенную ниже строку в этом файле. Откройте файл app.module.ts и исправьте режим на ios

IonicModule.forRoot (MyApp, {mode: ‘ios’}),

Удаление / добавление новых компонентов

Удалите компонент списка, так как нашему приложению нужна только одна страница. Удалите папку списка внутри папки страниц. Удалите указанную ниже ссылку на импорт из app.module.ts и app.component.ts.

импортировать {ListPage} из ‘../pages/list/list’;

Удалите ссылку ListPage из объявлений и свойства entryComponents определения @Ngmodule в app.module.ts. В файле app.component.ts удалите ссылку на него из свойства pages.

Если вы правильно думаете, вы сделаете обратное, если захотите добавить новый компонент.

HTML / UI / UX дизайн

Я большой поклонник Muzli, Dribbble и Behance, потому что они помогают утолить мою жажду дизайнерского вдохновения. Итак, теперь мы закодируем html-часть, чтобы сделать макет нашего основного приложения похожим на этот снимок https://dribbble.com/shots/2985170-Healthy. Сейчас мы собираемся изменить домашний компонент, и для проектирования нам понадобятся следующие основные вещи, таблица стилей css, несколько изображений и классная типографика. Я не буду рассказывать, как разрабатывать правила, но обязательно посмотрю, куда идут эти элементы дизайна.

  1. HTML войдет в home.html
  2. Правила стиля помещаются в home.scss.
  3. Ресурсы мультимедиа / изображений попадают в папку src / assets / imgs
  4. Пользовательские шрифты попадают в src / assets / fonts. После добавления файлов ttf / woff / eot вам необходимо указать их в своей сборке ionic. В папке темы создайте scss-файл с именем product-sans.scss для создания правил шрифтов и импортируйте этот файл в файл variables.scss. После загрузки правил шрифтов вы можете применить новое правило шрифта, например правило ion-app.ios, в файле scss компонента.

ion-app.ios {
font-family: ‘Product Sans’! important;
}

Если вы скопировали суть из приведенной выше ссылки, и все идет хорошо, это то, что у нас есть сейчас.

Следуйте Части 2, где мы добавим серверную часть в приложение и, наконец, создадим apk для Android, чтобы опубликовать его в игровом магазине.