Создание приложений с помощью Apache Cordova

Опубликовано: 5 Марта, 2022

Apache Cordova - это гибридная среда мобильной разработки, используемая для создания мобильных приложений из прогрессивных веб-приложений. Однако Apache Cordova используется для создания мобильных приложений с использованием веб-представления и не может использоваться для разработки собственных приложений для Android. Обратной стороной приложений веб-просмотра является то, что они работают медленнее, чем собственные приложения, тем не менее, этого недостаточно, чтобы иметь какие-либо заметные изменения в скорости работы.

Получение Apache Cordova

Сначала установите Node.js в соответствии со спецификациями вашего компьютера и настройте переменные среды npm.

Node Package Manager (npm) используется для простой установки, обновления или удаления пакетов на вашем компьютере. Мы должны установить пакеты Cordova. Набираем следующие команды:

 npm install -g cordova

-g означает, что пакет установлен глобально, это означает, что вы можете настроить свой проект Cordova в любом месте вашего компьютера.

Затем загрузите Android SDK и установите его на свой компьютер.

Вы успешно установили Cordova и Android SDK на свой компьютер. Теперь создадим наш проект. В этой статье мы создадим простое приложение с часами, используя HTML, CSS и JavaScript.

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

Перейдите в папку, в которой вы хотите создать свой проект. Создайте свой первый проект, используя следующую команду:

 cordova создать каталог проекта com.example.name ProjectName

com.example.name - это идентификатор проекта, ProjectName - это имя проекта, а projectDirectory - это каталог, который теперь создается для создания нашего приложения Cordova. Измените рабочий каталог на только что созданный проект.

 cd projectDirectory

Теперь добавим наши платформы. Следует отметить, что Cordova - это гибридная среда разработки приложений, это означает, что одна и та же кодовая база может быть развернута на нескольких платформах, таких как рабочий стол Windows, телефоны Android, телефоны iOS и т. Д. В этом примере мы собираемся развернуть на Android. .

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

Примечание. Если вы хотите разрабатывать для Apple iOS, вам понадобится XCode, который можно установить только на рабочие столы MacOS.

Теперь мы успешно создали проект и добавили все необходимые модули для android.

Кодируем наше приложение

Все файлы кода, которые мы будем использовать, будут созданы в папке с именем www . Здесь мы видим файл index.html, файл js / index.js файл css / файл index.css. Нашей точкой входа будет index.html. Apache Cordova уже создал бы простой стартовый шаблон. Нам это не понадобится, так как мы собираемся начать кодирование с нуля. Итак, откройте редактор кода и удалите весь код из index.html, js / index.js и css / index.css.

Теперь давайте создадим простой HTML-код, в котором есть контейнер div, в котором отображаются часы, и текст заголовка. Давайте свяжем нашу таблицу стилей и JavaScript с HTML. Теперь у нас есть базовая структура представления приложения, но оно по-прежнему ничего не делает. Итак, чтобы добавить функциональности, давайте напишем несколько кодов javascript.

Let’s add some functionality in js/index.js. Create a function named showTime which takes in Date object and sets the inner text of the container in which ClockDisplay is residing to time. Also, set the interval in which the function needs to be repeated. Here, the function repeats itself every 1000ms or 1 second.

Javascript

function showTime() {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
  
    var time = h + ":" + m + ":" + s;
    document.getElementById("ClockDisplay").innerText = time;
    document.getElementById("ClockDisplay").textContent = time;
}
setInterval(showTime, 1000);

Now we have a very dull looking clock. So let’s add some CSS in css/index.css in to make it look better.

CSS

html {
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  font-family:"Open Sans", sans-serif;
}
  
#ClockDisplay {
  width: 80%;
  font-size: 20px;
  text-align: center;
  font-size: 19vw;
  color: #acfac1;
  /*text-shadow: 0 0 5px #fff, 0 0 10px #fff,
    0 0 15px #82e896, 0 0 20px #82e896, 
   0 0 25px #82e896, 0 0 30px #82e896, 0 0 35px #82e896;*/
}
 
#Text {
  color:white;
  font-family:"Open Sans", sans-serif;
  text-align: center;
  font-size: 30px;
}

Откройте index.html в браузере, чтобы убедиться, что он работает. Теперь нам нужно перейти к следующему этапу, то есть к созданию пакета приложения Android (или файла .apk).

Создание нашего приложения

Apache Cordova упрощает создание приложений. Откройте терминал и измените каталог на каталог проекта Cordova. Просто введите следующие команды для сборки:

 Кордова сборка Android

Процесс сборки займет некоторое время и сохранит выходной файл в «(папка проекта) проект платформы android app build output apk debug» как « app-debug.apk» .

Перенесите этот файл на свой мобильный телефон и установите его.

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

Apache