Создание собственного мобильного приложения с Cordova

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

Вы можете скомпилировать свои коды на многочисленные мобильные платформы, включая iOS, Android, Windows Phone и BlackBerry, используя инструмент сборки Phonegap. Вопрос сейчас в том, с чего начать?

Для начала нам нужно создать «Cordova Project». Если вы веб-разработчик, который заинтересован в создании собственного мобильного приложения, следуйте этому посту. Мы покажем вам самый быстрый способ начать проект по созданию мобильного приложения с Cordova. Давайте просто начнем.

Рекомендуемое чтение: 10 рамок для создания мобильного приложения с HTML, CSS и JavaScript

Cordova CLI

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

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

npm установить -g кордова

Это установит команду cordova глобально; Вы можете получить доступ к команде в любом месте в каталогах вашего компьютера. Введите cordova -v, чтобы получить установленную версию.

Создание проекта

После того, как вы установили Cordova CLI, запуск проекта Cordova будет простым. Даже не будучи знакомым с командными строками, это должно быть легко следовать. Мы можем создать проект с помощью команды create, за которой следует имя папки проекта, например:

Cordova создать Hongkiatcom

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

Как только проект будет создан, войдите в каталог проекта, используя cd , Эта папка должна содержать количество папок следующим образом.

• Папка hooks может содержать сценарии, которые настраивают собственные команды Cordova.
• Папка слияния может содержать файлы HTML, CSS и JavaScript для конкретных платформ и будет переопределена с файлами в папке www при развертывании приложения.
• Папка платформы будет содержать исходные файлы приложения, когда мы собираемся построить для конкретной платформы.
• Папка плагинов будет содержать плагины, расширяющие Cordova.
• Папка www содержит общие веб-файлы, которые являются общими для разных платформ.

Платформа IDE
Прежде чем продолжить, нам понадобится IDE, такая как Xcode для разработки приложения iOS, Android Studio для разработки Android и Visual Studio для Windows Phone. Поскольку я использую OS X и уже установил Xcode, я буду использовать их для добавления платформы iOS в свой проект.

Введите следующую команду:

платформа Cordova добавить IOS

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

Если вы добавили платформу Android, вы должны вместо этого найти папку с именем android.

Добавить проект в IDE (Xcode)

Теперь мы добавляем каталог проекта в IDE, в данном случае это Xcode. Запустите Xcode. Перейдите в меню «Файл»> «Открыть» и перейдите в каталог платформы — например / platform / ios. Нажмите Открыть, чтобы открыть папку в Xcode.

Вы можете изменить что угодно — HTML, CSS, Image и JS — в папке www. Когда это будет сделано, нажмите кнопку воспроизведения в верхнем левом углу Xcode, чтобы скомпилировать приложение и представить его в iPhone Simulator.

Последняя мысль

Cordova упростила процесс создания мобильного приложения. Мы можем создать мобильное приложение, как мы строим веб-сайт. В этом посте мы показали, как создать проект Cordova и представить приложение в симуляторе iOS. На самом деле в Кордове есть еще много всего интересного. Увы, я надеюсь, что этот пост поможет вам начать использовать Phonegap для разработки мобильного приложения.