Введение в Кордову: основы

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

• Что такое Кордова?
• Как это работает под капотом?
• Что я могу построить с Cordova?
• Как начать работать с Cordova и что мне нужно?

Давайте идти вперед и погрузиться в.

1. Что такое Кордова?

Cordova — это среда разработки мобильных приложений, которая в первую очередь предназначена для веб-разработчиков. Это позволяет веб-разработчикам использовать веб-технологии, такие как HTML, CSS и JavaScript, для создания мобильных приложений. Как и любая другая технология, у Cordova есть свои плюсы и минусы.

Pros

• Легко учиться Если вы веб-разработчик, то у Cordova достаточно плавный курс обучения. Вы можете легко применить свои навыки веб-разработчика для создания приложения с помощью Cordova. Все, что вам действительно нужно, это ознакомиться с командной строкой, чтобы начать работу с Cordova.
• Доступ к собственным функциям С Cordova у вас есть доступ к встроенным возможностям устройства, таким как камера, контакты, геолокация, мультимедиа, SMS и многие другие.
• Бесплатно Вам не нужно ничего платить за использование Cordova.
• Открытый исходный код Любой может внести свой вклад в исходный код Cordova, чтобы сделать его лучше. Плагины также с открытым исходным кодом, и каждый может создавать собственные плагины. Это означает, что такие разработчики, как вы, могут легко установить и использовать эти плагины. Или вы можете создать свой собственный плагин и поделиться им с сообществом.
• Большое сообщество Многие разработчики используют Cordova. Например, в Stack Overflow имеется около 40 000 вопросов, помеченных с помощью cordova . Это означает, что вы никогда не останетесь в одиночестве, решая странные ошибки (если вы когда-нибудь столкнетесь с ними). Люди в сообществе всегда готовы помочь, все, что вам нужно сделать, это попросить.
• Один раз, Развертывание везде, Cordova компилирует ваше приложение в файл пакета, который требуется большинству магазинов приложений. Это означает, что приложения, созданные с помощью Cordova, можно легко развернуть в магазине приложений по вашему выбору. При развертывании на Android Cordova создает файл APK (пакет приложений Android). Если вы развертываете на iOS, Cordova компилирует в IPA . Для Windows это APPX .

Cons

• Плохая документация Трудно найти информацию о действительно конкретных вещах, например, какие пакеты необходимо установить с помощью Android SDK Manager. И когда вы что-то ищите, результаты указывают на информацию, относящуюся к разным версиям Cordova. Это иногда сбивает с толку новичков, поскольку у них может быть установлена ​​другая версия Cordova, и они ищут документацию для другой версии Cordova.
• Меньше, чем родной Поскольку приложения, созданные с помощью Cordova, в основном являются веб-приложениями, содержащимися в веб-представлении, они не работают так же хорошо, как их собственные аналоги. Это означает, что существует ограничение на то, какие приложения вы можете создавать. Например, приложение для редактирования видео лучше встроено изначально, поскольку оно будет сильно зависеть от процессора и графического процессора для своей работы.
• Фреймворки Поскольку Cordova — это просто оболочка для веб-приложения, она не поставляется с компонентами пользовательского интерфейса, анимацией и другими полезностями, которые можно найти в большинстве нативных приложений. Это означает, что вы должны реализовать все это самостоятельно. Вот почему многие разработчики полагаются на такие инфраструктуры, как Ionic или Onsen UI, для создания пользовательского интерфейса своих приложений.
• Ошибки в плагинах Не каждый плагин создан одинаково. Есть такие, которые имеют ошибки или не работают, как ожидалось.
• Не все устройства одинаковы. Встроенные функции устройства доступны через использование плагинов. Cordova предоставляет API, чтобы эти плагины можно было использовать в веб-представлении, но не все устройства одинаковы. Есть причуды на каждом устройстве. Проще говоря, не все опции, которые вы можете установить в плагине, будут работать на каждом устройстве. Например, в Android значение cameraDirection всегда приводит к фотографии, сделанной камерой, расположенной назад.

2. Кордова и PhoneGap

Работая с Cordova, вы часто сталкиваетесь с термином PhoneGap . PhoneGap — это название первоначального проекта, созданного стартапом Nitobi в 2009 году. В 2011 году компания была приобретена компанией Adobe.

Обратите внимание, что Adobe не купила реальную кодовую базу, просто имя и людей, которые работали в Nitobi. Ядро с открытым исходным кодом было передано в дар Apache Software Foundation, который теперь известен как Cordova.

Обычная аналогия, используемая разработчиками, заключается в том, что Cordova для PhoneGap является тем же, что и WebKit для Safari. Иными словами, PhoneGap — это дистрибутив Cordova, поддерживаемый Adobe. Если вы хотите узнать больше об истории, вы можете прочитать эту статью в блоге PhoneGap Брайана Леру .

На практике PhoneGap и Cordova в основном одинаковы. Вы можете выбрать PhoneGap или Cordova при запуске проекта. Единственное отличие — это CLI (интерфейс командной строки). CLI PhoneGap интегрируется с Adobe PhoneGap Build . Этот сервис позволяет разработчикам компилировать свои приложения на платформу по своему выбору, загрузив его на сайт PhoneGap Build.

3. Как работает Cordova под капотом?

Пользовательский интерфейс Cordova — это веб-просмотр. Вы можете думать о веб-представлении как о вкладке в браузере. Когда вы компилируете приложение Cordova, оно на самом деле не берет код HTML, CSS и JavaScript и автоматически преобразует его в собственный код, специфичный для каждой платформы.

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

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

4. Функциональность родного устройства

С Cordova у вас есть доступ к нативной функциональности устройства с помощью плагинов. Плагины — это надстройки, которые предоставляют JavaScript API для собственных компонентов. Они позволяют получить доступ к собственным возможностям устройства, используя предоставляемый им API-интерфейс JavaScript.

Как вы можете подозревать, плагины написаны на нативном коде. Это означает, что вам нужно установить SDK для разных платформ, на которые вы планируете развертывать, только тогда вы сможете написать собственный код для каждой из этих платформ. Затем вы вызываете собственный код через JavaScript API, чтобы к нему можно было получить доступ в веб-представлении.

Существует два типа плагинов, которые вы можете найти в экосистеме плагинов Cordova. Сначала официальные плагины. Они поддерживаются сообществом Кордова. Вы будете знать, что плагин является официальным, если он имеет префикс cordova-plugin .

Другой тип плагинов — это пользовательские плагины. Они созданы разработчиками, такими как вы и я. Зачастую они создаются для решения очень специфической проблемы, такой как подключение приложения к Facebook или плагин Ionic Keyboard, чтобы упростить взаимодействие с клавиатурой.

Если вы хотите узнать больше о том, какие плагины вы можете использовать с Cordova, вы можете посетить веб-сайт Cordova Plugins .

5. Что вы можете построить с помощью Cordova?

Хотя вы можете создать практически любое приложение с помощью Cordova, есть некоторые ограничения, о которых мы поговорим позже. А сейчас давайте рассмотрим несколько примеров приложений, которые вы можете создать с помощью Cordova.

• TripCase TripCase — это приложение для путешествий, которое проведет вас через каждый этап вашей поездки.
• FruitSalad FruitSalad — это игра-головоломка, похожая на Bejeweled.
• Panasonic World Heritage Calendar Это приложение-календарь, которое показывает красивые фотографии объектов всемирного наследия. Это также включает в себя мелочи о культуре и природе, связанные с сайтами.
• HealthTap HealthTap — переполнение стека для вопросов здоровья.
• Википедия Официальное приложение Википедии построено с помощью Cordova.

Основываясь на приложениях, перечисленных выше, вы должны иметь представление о том, какие приложения вы можете создавать с помощью Cordova. Если вы разработчик, то, возможно, вы заметили, что все эти приложения используют Интернет. Все они общаются с удаленным сервером для получения данных. Это то, в чем хороша Cordova, получая данные с сервера, представляя их пользователю, а также прислушиваясь к ответам пользователя и отвечая на них.

Но это не значит, что вы не можете создавать автономные приложения с помощью Cordova. Существует множество клиентских баз данных, которые вы можете легко использовать. Одним из популярных примеров является LokiJS , быстрое, ориентированное на память хранилище документов для Node.js , браузера и Cordova. Например, в приложении для создания фотогалереи вы можете использовать эту библиотеку для хранения путей к фотографиям, а затем при необходимости извлекать их из хранилища.

С Cordova вы можете использовать практически любую библиотеку CSS или JavaScript, которую вы можете найти в cdnjs , потому что код, который вы пишете, работает в браузере. Вы должны быть осторожны, хотя, не все браузеры одинаковы. И это подводит нас к следующему разделу.

6. Ограничения

Как и во всем остальном в жизни, всегда есть ограничения. Кордова не является исключением. В этом разделе я буду говорить о некоторых ограничениях Cordova.

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

Производительность

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

Доступность плагинов

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

Веб-просмотр

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

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

Для разработчиков Cordova хорошо, что такие проекты, как Crosswalk, приходят на помощь. Crosswalk позволяет использовать пользовательское веб-представление в приложениях Cordova, нормализуя различия между платформами. Позже в этом уроке я покажу вам, как вы можете использовать Crosswalk в проекте Cordova.

Узнайте больше в нашем курсе Cordova

Если вы хотите узнать больше о Кордове, то ознакомьтесь с курсом Реджи Доусона по Кордове . Реджи знакомит вас с платформой и помогает вам создать приложение Cordova с нуля. Посмотрите видео ниже, чтобы получить представление о курсе.

Вывод

Теперь у вас должно быть хорошее представление о том, что такое Cordova и как она действует. Я надеюсь, что эта статья ответила на вопрос, является ли Cordova подходящим инструментом для вашего следующего мобильного проекта.

В следующей статье мы запачкаем руки, создав мобильное приложение с Cordova. Не стесняйтесь оставлять любые вопросы или комментарии, которые у вас есть в комментариях ниже.