Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2

Пишем свое первое приложение на Ionic 2: приложение для обмена фотографиями

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

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

Эта вторая часть будет посвящена тому, что вам нужно знать, когда дело доходит до написания приложений в Ionic 2. Вы узнаете, как создавать страницы для приложения, как получать данные от пользователя и как использовать плагины для доступа к нативным функциям. К концу этой статьи у вас будет приложение на устройстве или эмуляторе. Но прежде чем вы дойдете до этого, давайте поговорим о том, что вы будете создавать.

Что вы будете создавать

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

  1. Пользователь открывает приложение и регистрируется. Затем он будет перенаправлен на страницу для выбора изображения для совместного использования.
  2. Пользователь нажимает кнопку Pick Image. Появляется окно для выбора изображения, и пользователь выбирает одно изображение. Затем будет показано превью этого изображения.
  3. Пользователь вводит подпись и нажимает кнопку Share Image, чтобы передать изображение в приложение «Instagram».

В этом руководстве будет показано только, как запустить приложение на устройстве Android, но Cordova (инфраструктура, на которой работает Ionic) является кросс-платформенной. Ionic 2 имеет встроенные темы для Android, iOS и Windows, поэтому будет легко создать версию вашего приложения для этих устройств.

Вот как выглядит приложение:

Completed photo sharing app

Настройка проекта

Если вы читали предыдущий учебник, вы уже создали свою среду разработки Ionic 2 и выстроили проект. Мы использовали следующие команды CLI Ionic 2 для создания дерева папок проекта и подготовки к развертыванию на Android:

Мы также установили пару полезных плагинов:

Создание домашней страницы

В оставшейся части учебника вы будете в основном работать в папке src, поэтому подразумевайте, что папка src является корнем каждый раз, когда вы видите путь к файлу. (Если вы хотите обновить пути, созданные шаблоном запуска Ionic, для этого обратитесь к предыдущему учебнику.)

Внутри каталога src находятся четыре папки:

  • app: здесь определяется код приложения. Если вам нужно запустить определенный код при запуске приложения или вы хотите обновить глобальный CSS, то это вам нужно сюда.
  • assets: здесь распологаются ресурсы, такие как изображения, используемые в качестве контента для приложения.
  • pages: здесь у нас будет код для отдельных страниц. Каждая страница имеет свою собственную папку, и внутри каждой папки находятся три файла, которые определяют шаблон (HTML), стиль (CSS) и скрипт (TypeScript) для этой страницы.
  • themes: здесь вы можете изменить тему Ionic 2 по умолчанию.

Шаблон домашней страницы

По умолчанию шаблон Ionic уже содержит домашнюю страницу. Итак, все, что вам нужно сделать, это отредактировать его, чтобы отобразить тот контент, который вы хотите. Откройте файл pages/home/home.html и очистите его текущее содержимое. Добавьте следующее вверху страницы:

Вышеприведенный код является шаблоном для заголовка приложения. Компонент <ion-navbar> служит в качестве навигационной панели инструментов. Он будет автоматически показывать кнопку «Назад», когда вы переходите от страницы по умолчанию. <ion-title> устанавливает заголовок навигационной панели.

Далее - фактическое содержание страницы. Вы можете определить это внутри компонента <ion-content> . Заполнение по умолчанию можно применить, указав опцию padding. Внутри этого контейнера создайте новый список, который содержит поля ввода для ввода имени пользователя и пароля. Создание списка, содержащего поля редактирования, является стандартной практикой в Ionic - это позволяет аккуратно накладывать каждое поле друг на друга. Ниже списка находится кнопка для входа в систему.

Давайте рассмотрим код ввода текста и нажатие кнопки. В Ionic вы можете определить поля ввода текста, используя компонент <ion-input>. Чтобы привязать текстовое поле к свойству класса, определенному в вашем скрипте страницы, используйте [(ngModel)]. Тогда назначенное ему значение - это имя свойства класса.

Чтобы настроить двустороннюю привязку данных, вы можете установить [value] на то же имя свойства, что и для [(ngModel)]. Это позволяет обновить значение текстового поля, изменив значение модели из сценария страницы. Позже вы увидите, как определить свойство класса внутри скрипта страницы.

Чтобы определить кнопки, используйте стандартный элемент button в HTML. Если вам интересно, почему это не <ion-button>, то это связано с соображениями доступности. Кнопки являются важным компонентом интерфейса, поэтому команда Ionic решила придерживаться стандартных кнопок HTML, чтобы сделать их доступными. Вместо этого для обеспечения дополнительной функциональности добавляется директива ion-button.

Ionic 2 buttons

Чтобы добавить обработчик кликов, вы используете директиву (click) со значением, определяющим функцию (определенную в вашем скрипте страницы) для выполнения, когда происходит событие клика.

Скрипт домашней страницы

Откройте файл pages/home/home.ts, очистите все его содержимое и добавьте следующее:

Разбив код выше, мы сначала импортируем класс компонента Angular, в котором уже есть все Ionic-директивы.

Затем мы импортируем контроллеры для навигации и предупреждений из пакета ionic-angular. Это то место, где подключаются все контроллеры Ionic.

После этого мы импортируем PickerPage. Вы создадите его позже, так что оставьте его на данный момент закомментированным. Не забудьте удалить комментарий, как только вы будете готовы к его загрузке.

После импорта используйте декоратор @Component, чтобы указать шаблон HTML, который будет использоваться скриптом:

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

Сделайте NavController и AlertController доступными во всем классе, определив их как параметры в constructor. Это позволяет вам использовать this.navCtrl, например, когда вы хотите использовать NavController для перехода на другую страницу.

Теперь мы готовы определить свойства нашего контроллера, на которые можно ссылаться из шаблона. Эти свойства будут содержать текущее значение текстового поля для имени пользователя и пароля:

Чтобы все было просто, мы будем использовать жестко заданные значения для имени пользователя и пароля. Но для реальных приложений вы обычно будете делать запрос на сервер для аутентификации пользователя.

Внутри функции login() создайте alert, когда пользователь вводит неверное имя пользователя или пароль:

Если учетные данные неверны, покажите предупреждение:

Ionic 2 alerts

Если имя пользователя и пароль, введенные пользователем, соответствуют жестко закодированным значениям, используйте NavController, чтобы отправить страницу Picker в стек навигации. Любая страница, которую вы отправляете в стек навигации, станет текущей страницей, а всплывающая страница будет эффективно перемещаться на предыдущую страницу. Вот как работает навигация в Ionic 2.

Страница выбора изображения

Затем вам нужно создать страницу выбора изображения. Как вы уже знаете, стандартом является создание отдельной папки для каждой страницы, и каждая папка будет иметь внутри три файла. К счастью, Ionic CLI также поставляется с командой, которая позволяет нам создавать новые страницы:

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

Шаблон страницы выбора изображения

Как только это будет сделано, откройте файл pages/picker/picker.html и замените шаблонный код следующим:

Здесь нет для нас ничего незнакомого, за исключением директивы hidden и использование компонента <ion-card>.

Директива hidden позволяет скрыть элемент на основе определенного значения, которое определено в вашем скрипте страницы. Поэтому, если has_picked_image равно true, то только тогда этот div будет видимым.

Компонент <ion-card> используется для создания карточек. Карточки - отличный способ отображать изображения внутри приложений.

Ionic 2 card images

Стиль страницы выбора изображения

Откройте файл pages/picker/picker.scss и добавьте следующее:

Сценарий страницы выбора

Откройте файл pages/picker/picker.ts и добавьте следующее:

Итак по порядку. Сначала мы импортируем плагины, которые вы установили ранее. Обратите внимание, что все плагины установлены из одного и того же пакета (ionic-native). Это действительно приятно, потому что вместо того, чтобы импортировать каждый отдельный плагин на новой строчке, вы можете просто сделать это все в одной строке.

Далее мы объявляем свойства класса:

Когда кнопка Pick Image нажата, задайте параметры для выбора изображений. Эти параметры довольно понятны, но я добавил несколько комментариев, чтобы уточнить, что каждый из них делает.

Указание width и height не обязательно означает, что результирующее изображение будет использовать точную ширину и высоту. Это означает, что Ionic будет использовать эти размеры в качестве максимальной ширины или высоты таким образом, чтобы соотношение сторон сохранялось.

Мы используем URI в качестве выходного типа, потому что плагин Instagram принимает только URI. Это означает, что вам также необходимо настроить ширину, высоту и качество до минимального минимума, поскольку URI могут быть очень длинными, если качество высокое - все изображение кодируется в строке URI! Это может привести к сбою приложения, поэтому всегда рекомендуется придерживаться более низкого качества и меньших изображений при работе с данными URI. 

Затем используйте плагин Image Picker для запуска экрана выбора изображения. Поскольку мы просто ожидаем одно изображение, то мы можем просто получить доступ к первому элементу в массиве результатов. Нам также необходимо добавить префикс для данных URI.

Наконец, когда нажата кнопка Share Image, метод share, предоставляемый плагином Instagram, запускает экран совместного доступа в приложении Instagram. У него уже будет заполнено предварительно выбранное нами изображение.

Однако подпись не будет скопирована. Приложение Instagram отключило предварительное заполнение названий, и поэтому поле заголовка будет пустым после открытия приложения Instagram. В качестве обходного пути плагин Instagram копирует заголовок в буфер обмена. Это означает, что пользователь может просто вставить его в текстовое поле заголовка в приложении Instagram.

Собираем все вместе

Последний шаг - открыть файл app/app.module.ts. Это корневой модуль приложения, в котором вы определяете все страницы и поставщики (такие как обработчик ошибок Ionic по умолчанию), которые вы будете использовать во всем приложении.

Убедитесь, что все созданные вами страницы определены, иначе вы получите сообщение об ошибке при переходе на страницу, которая не была определена. По умолчанию HomePage уже определен здесь, поэтому вам просто нужно добавить PickerPage. Просто импортируйте его в начало файла, а затем добавьте его в массив declarations и entryComponents. Обратите внимание, что MyApp не является страницей; Это компонент, который служит пустой оболочкой для загружаемых страниц.

Если вы откроете файл app/app.components.ts, вы увидите следующее:

Здесь вы можете определить корневую страницу - страницу, которую пользователь увидит после открытия приложения. В нашем случае HomePage является корневой страницей. Это также идеально подходит для выполнения кода инициализации, поскольку здесь код запускается только один раз, когда пользователь запускает приложение. Когда вы инициализируете что-либо (например, запрашиваете разрешение на включение Bluetooth), вы всегда будете ждать, пока не будет запущено событие platform.ready(). Только после того, как это событие было выпущено, вы можете быть уверены, что нативные функции готовы к вызову.

Запуск приложения

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

Убедитесь, что у вас есть устройство, подключенное к вашему компьютеру, или у вас есть работающий экземпляр эмулятора при выполнении указанной выше команды. Если приложение все еще не работает, убедитесь, что вы включили отладку USB на своем устройстве и выполните adb devices. Это заставит ваш компьютер подключиться к вашему устройству. Просто подтвердите приглашение на своем устройстве, как только увидите приглашение на аутентификацию.

Если вы хотите иметь копию файла APK, чтобы поделиться им с другом, вы можете сгенерировать его, выполнив следующее:

Будет создан файл android-debug.apk в папке platform/android/build/output/apk.

Вывод

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

Тем временем, ознакомьтесь с некоторыми из наших других руководств по Ionic 2!

Если вы хотите получить углубленное и практичное введение в Ionic 2 framework, обратите внимание на наш курс Начало работы с Ionic 2.

В этом курсе Реджи Доусон расскажем вам подробно о фреймворке Ionic и покажет, как создать мобильное приложение с нуля. Во время курса вы узнаете об библиотеке компонентов Ionic, о программировании статически типизированного JavaScript с помощью TypeScript и об интеграции приложения Ionic 2 с расширенным медиа-интерфейсом.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.