Найти в Дзене

Monaca. Делаем кросс-платформенное приложение онлайн.

Возможно вы уже слышали о кросс-платформенной разработке приложений и фрамерворках которые позволяют её вести, таких как Cordova или Xamarine. Так как я являлся поклонником веба - выбор в пользу Кордовы был очевиден. Пишешь сайт на Html, JS, CSS - и конвертируешь его на нужную тебе платформу. Идея проста. Но сколько, я по началу времени(не говоря уже о нервах) потратил пытаясь настроить и заставить адекватно работать модуль Кордовы в Visual Studio! 90% времени я тратил не на написание кода, а на настройку самой среды разработки. И потому, для меня было большой удачей наткнуться в сети на платформу https://monaca.io/, которая берет на себя практически всю эту работу и предоставляет пользователям довольно удобный интерфейс и инструменты разработки. Редактор кода, генератор ключей и их хранилище, автоматическое обновление модулей и актуальная версия Cordova, удобный менеджер плагинов и библиотек с поиском, приложение-debugger для телефона и т.д. и все это онлайн в любом современном

Возможно вы уже слышали о кросс-платформенной разработке приложений и фрамерворках которые позволяют её вести, таких как Cordova или Xamarine.

Так как я являлся поклонником веба - выбор в пользу Кордовы был очевиден. Пишешь сайт на Html, JS, CSS - и конвертируешь его на нужную тебе платформу. Идея проста. Но сколько, я по началу времени(не говоря уже о нервах) потратил пытаясь настроить и заставить адекватно работать модуль Кордовы в Visual Studio! 90% времени я тратил не на написание кода, а на настройку самой среды разработки.

И потому, для меня было большой удачей наткнуться в сети на платформу https://monaca.io/, которая берет на себя практически всю эту работу и предоставляет пользователям довольно удобный интерфейс и инструменты разработки.

Знаю звучит, как реклама, но мне не платили - честно.)
Знаю звучит, как реклама, но мне не платили - честно.)

Редактор кода, генератор ключей и их хранилище, автоматическое обновление модулей и актуальная версия Cordova, удобный менеджер плагинов и библиотек с поиском, приложение-debugger для телефона и т.д. и все это онлайн в любом современном браузере. После недель занятий любовью с VC на домашнем пк мне это показалось "Раем разработчика"!

А потому я хочу и с вами поделиться своим опытом и кратко рассказать, как можно минут за 5 создать свое простое приложение на этой платформе.

Для начала конечно нужно зайти на сайт и зарегистрироваться.

Есть несколько тарифов. Я сижу на Pro(19$/мес ) он дает возможность вести до 10 проектов одновременно и неограниченное число билдов в день. Но для начала можно выбрать бесплатный тариф - 3 проекта, 3 сборки в день. Для знакомства этого достаточно.

Примерно так выглядит интерфейс управления проектами.
Примерно так выглядит интерфейс управления проектами.

Давайте для примера создадим новый проект.

-3

Вы можете выбрать пункт "Простое приложение" и использовать один из предложенных шаблонов приложений и переделать их потом под себя.

-4

Или же использовать пустой шаблон с самыми базовыми модулями. Так мы и сделаем.

-5

Разумеется проект нужно как-то назвать и прописать Description.

-6

Он появился в списке, теперь его можно открыть в среде разработки.

-7

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

-8

Папка "www" как бы является корнем нашего сайта. С ней и будем работать. Давайте откроем файл index.html и заменим текст на традиционное Hello World! Так же можем зайти в style.css и изменить цвет фона на серый, к примеру, или же выберем произвольный.

-9

Наше приложение почти готово. Давайте соберем его под Андройд!

Для этого сначала зайдем в настройки приложения для Андройда.

-10

Заполним "Application Name:" и "Package Name:" - уникальное имя вашего пакета, потом оно станет частью ссылки на страницу приложения в Google Play, если вы решите его опубликовать.

-11

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

-12

-13

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

-14

И под конец, вам предложат указать домены к которым у вашего приложения будет доступ. Я оставил звездочку, что значит, что для передачи и получения данных открыт весь интернет(возможно у гугла есть ограничения по http/https, если что поправьте). Сохраняем.

-15

Приложение можно строить. Но для начала давайте посмотрим еще пару пунктов меню.

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

-16

-17

Так же перед началом сборки рекомендую заглянуть в файл config.xml и добавить в него строчку

"<preference name="android-targetSdkVersion" value="29"/>" - ещё одно требование от Google без которого он откажется публиковать ваше приложение.

-18

Итак приготовления закончены давайте построим наше супер крутое приложение! Выбираем "Build - Build App for Android".

-19

Для создания релизного приложения нужно заранее создать и выбрать ключ подписи приложения - о чем расскажу в другой статье, если читателям будет интересно. Но так как мы вряд ли будем публиковать в Google Play это приложение - создадим debug-версию, которая так же прекрасно будет работать на нашем телефоне, выберем "Build for Debugging" и нажмем "Start Build". Поехали!

-20

-21

Спустя пару минут(зависит от размера и сложности) система предложит нам скачать получившееся приложение одним из трех доступных способов. Просто на компьютер или телефон если вы открыли Монаку в браузере телефона, по ссылке через QR-код, или получить ссылку для скачивания по почте указанной при регистрации.

-22

Скачиваем на компьютер или сразу на телефон. Устанавливаем и любуемся результатом!

-23

Мы построили приложение под Андройд за 10 минут не написав ни одной строчки java кода.

Надеюсь эта статья окажется вам полезной! Успехов!

-24

Так же прилагаю ссылку на Google Play на одно из моих приложений, построенных в этой системе и если не сложно - зайдите и оцените его - мне будет приятно! Спасибо за внимание!