Эй, ребята,

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

Ионный? Это новый герой Marvel?

Ionic - это фреймворк для разработки пользовательских интерфейсов (UI) для различных платформ. Это одно из самых популярных кроссплатформенных решений в наши дни, а также простой и быстрый способ создания уникальных веб-приложений. Его сила заключается в том, что мы можем использовать HTML, CSS и JS при написании приложения, поэтому мы работаем над единой базой кода, которую также можно использовать для создания мобильных, настольных и веб-приложений. Это делает разработку чрезвычайно простой, потому что мы одновременно разрабатываем для нескольких платформ, и нам не нужно писать бизнес-логику более одного раза. Чтобы сделать это и позволить нам запускать приложение на мобильных устройствах, Ionic использует WebView. До сих пор встроенные функции были предоставлены Cordova, но команда Ionic разработала новую альтернативу, которая называется Capacitor. Не то чтобы производительности WebView было недостаточно, но с некоторыми более крупными приложениями вы можете заметить один из недостатков гибридных приложений: взаимодействия и анимация не всегда такие плавные, как в собственном приложении.

Наша цель - показать вам, как легко писать приложения с помощью Ionic, от простых до больших и сложных систем.

Итак, как это работает?

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

На устройствах Android и iOS Apache Cordova запускает веб-приложение через мобильную платформу: точнее, оно интерпретирует, обрабатывает и отображает наше приложение с помощью механизма рендеринга HTML под названием WebView. Кроме того, важной задачей Cordova является использование ее API-интерфейсов для предоставления доступа к функциям, предоставляемым ОС (камера, геолокация, сеть и т. Д.), Чтобы мы могли использовать базовые функции, предоставляемые устройствами, технически в веб-среде. . Все это важно, потому что функции и методы API Ionic, реализованные в JS, служат единым интерфейсом на различных платформах, поэтому вызов правильных методов API даст нам те же функции на любой платформе.

Как я и обещал ранее, мы напишем вам приложение шаг за шагом, которое поможет вам легко находить друзей во время обхода паба, где бы вы их ни оставили. При первом запуске приложение запросит имя пользователя для идентификации пользователя. После ввода имени пользователя появляется карта, на которой вы можете отслеживать местонахождение своих друзей в режиме реального времени. Чтобы иметь возможность отслеживать друга, вам необходимо сгенерировать общий ключ и отправить его другому игроку. Как только ваш друг получит ключ, он / она сможет ввести его в интерфейс приложения. Какое облегчение: местонахождение вашего странствующего друга больше не является секретом! С помощью приложения можно отслеживать движения конкретного пользователя в режиме реального времени. При позиционировании используются GPS-координаты устройства, поэтому пользователь должен дать приложению разрешение на использование GPS.

Большое спасибо за то, что нашли время прочитать эту статью.

Автор: Тамаш Хугьяк, разработчик полного стека @ Budacode.

Следите за обновлениями второй части!

Свяжитесь с нами по адресу www.budacode.com / [email protected], если у вас есть какие-либо вопросы.