1. Зміст статті Вивчити нову мову і середовище розробки - це мінімум, що від тебе буде потрібно, якщо...
2. UI-фреймворки
3. інші платформи
4. Appcelerator Titanium ( www.appcelerator.com ).
5. Corona SDK ( www.anscamobile.com/corona ).

Зміст статті

Вивчити нову мову і середовище розробки - це мінімум, що від тебе буде потрібно, якщо ти захочеш написати своє перше мобільний додаток. Щоб з розумінням накидати елементарний todo list для Android або iOS, що не передірая приклад з книжки, піде не менше кількох тижнів. Але можна не освоювати Objective-C або Java і при цьому швидко розробляти програми для смартфонів, якщо використовувати такі технології, як PhoneGap.

Запуск програми в симуляторі iOS

Якщо ти уважно вивчав нововведення, які очікують нас в Windows 8, то, можливо, зауважив, що під нею можна буде розробляти програми на HTML5. Ідея, на справді, не нова - технології, що реалізують той же підхід для мобільних платформ, розвиваються семимильними кроками. Одним з таких фреймворків, що дозволяє розробляти додатки для смартфонів за допомогою зв'язки звичних для нас HTML, JavaScript і CSS !, якраз і є PhoneGap. Написане з його допомогою додаток підійде для всіх популярних платформ: iOS, Android, Windows Phone, Blackberry, WebOS, Symbian і Bada. Тобі не потрібно буде вивчати особливості програмування під кожну платформу (наприклад, Objective-C у випадку з iOS), розбиратися з різними API і середовищами розробки. Все, що потрібно для створення крос-платформного мобільного застосування, - це знання HTML5 і спеціального PhoneGap API. При цьому на виході вийде не тупа HTML-сторінка, «обрамлена» в інтерфейс програми, немає! API фреймворка дозволяє задіяти практично всі можливості телефону, які використовуються при розробці за допомогою нативних інструментів: доступ до акселерометру, компасу, камері (запис відео і фотозйомка), списку контактів, файлової системи, системи нотифікацій (стандартних повідомлень на телефоні), сховищ і т . д. Нарешті, такий додаток може безболісно звертатися до будь-якого крос-доменному адресою. Ти можеш відтворити нативні елементи управління за допомогою фреймворків на кшталт jQuery Mobile або Sencha, і кінцева програма буде виглядати на мобільному телефоні так, як ніби вона написана на нативному мовою (ну або майже так). Найкраще проілюструвати вищесказане на ділі, тобто написати додаток, тому пропоную відразу приступити до практики. Засікай час - на все про все піде чи більше півгодини.

Інші корисності PhoneGap

Крім приголомшливої ​​платформи для мобільних додатків, PhoneGap також надає сервіс для складання твого додатки в «хмарі». Під всі платформи і в один клік! Складальник умовно безкоштовний. Ти можеш зареєструватися на сайті PhoneGap Build ( build.phonegap.com ) І отримати доступ до збирачеві. З його допомогою ти маєш право зібрати необмежену кількість додатків з відкритим вихідним кодом і один додаток з закритими кодами. Зрозуміло, що якщо потрібно скомпілювати більше закритих додатків, то доведеться трохи заплатити.

Якщо тобі не вистачає якогось функціоналу в «базовій комплектації» PhoneGap, то ти можеш розширити його можливості з допомогою плагінів. Існує цілий репозиторій ( github.com/phonegap/phonegap-plugins ), Який включає в себе чотири розділи iPhone, Android, Palm, BlackBerry. Зараз під iOS написано більше 20 плагінів: BarcodeScanner (сканер штрих-кодів), AdPlugin (відображення реклами iAd), NativeControls (нативні для iOS контроли) та інші.

В якості цільової платформи візьмемо iOS - так-так, гроші лежать в AppStore, і монетизувати свої розробки поки найкраще там :). Але відразу внесу ясність: все те ж саме, без змін, можна провернути, скажімо, для Android. Довго думав, який приклад розглянути, так як писати чергову ТУЛЗ для обліку списку справ зовсім не хотілося. Тому я вирішив створити додаток під назвою «Геонапоміналка», навігаційну прогу, призначення якої можна описати однією фразою: «Розкажи мені, коли я знову тут опинюся». У AppStore є чимало утиліт, які дозволяють «запам'ятати» місце, де користувач припаркував машину. Це майже те ж саме, тільки трохи простіше. Ти зможеш вказати на карті міста точку, поставити для неї певний радіус і запрограмувати повідомлення. Коли ти в наступний потрапиш в межі кола з вказаним радіусом, додаток видасть тобі повідомлення, а точка буде видалена. Будемо діяти за таким планом: спочатку створимо просте веб-додаток, перевіримо його в браузері, а потім перенесемо за допомогою PhoneGap на платформу iOS. Дуже важливо написати в прототипі і протестувати в браузері на комп'ютері основну частину коду, оскільки налагоджувати додаток у телефоні набагато складніше. Як каркас ми візьмемо JS-фреймворк jQuery c jQuery Mobile ( jquerymobile.com ), А в якості движка карт - Google Maps v3. Додаток буде складатися з двох сторінок: карти і списку точок.

• На карті встановлюється маркер твого поточного становища. По кліку на карті створюється точка, до якої прив'язується повідомлення (на кшталт «машина поруч»). Точку можна видалити, клікнувши на ній. Для переміщення маркера людини по карті використовується геонавігаціонних API.
• На сторінці зі списком точок повинна бути додаткова кнопка «Видалити всі крапки», а поруч з кожною точкою - кнопка «Видалити цю точку». Якщо клікнути по елементу в списку, відповідна точка відобразиться на карті. Налаштування користувача та список точок будемо зберігати в localStorage.

UI-фреймворки

jQuery Mobile - це, звичайно, не єдиний фреймворк для створення мобільного інтерфейсу. На сайті PhoneGap наведено величезний список бібліотек і фреймворків, які ти можеш використовувати ( phonegap.com/tools ): Sencha Touch, Impact, Dojo Mobile, Zepto.js і ін.

Відразу пояснюю, навіщо ми будемо використовувати jQuery Mobile. Ця JS-бібліотека надає нам вже готові елементи інтерфейсу мобільного застосування (максимально наближені до нативним) для самих різних платформ. Адже нам треба, щоб на виході було саме мобільний додаток, а не сторінка з браузера! Так що качаємо останню версію JQuery Mobile ( jquerymobile.com/download ) І переносимо в робочу папку перші файли програми, які нам знадобляться:

• images / (перенеси сюди все зображення з однойменної папки архіву jq-mobile);
• index.css;
• index.html;
• index.js;
• jquery.js;
• jquery.mobile.min.css;
• jquery.mobile.min.js.

Потрібно зробити ресурси в основному локальними, щоб користувач в майбутньому не витрачав мобільний інтернет. Тепер створюємо каркас сторінок у файлі index.html. Наведений нижче код описує верхню частину сторінки з картою, написом «Геонапоміналка» і кнопкою «Точки».

Сторінка з картою

<Div id = "index" class = "page-map" data-role = "page" data-dom-cache = "true"> <div data-role = "header"> <h1> Геонапоміналка </ h1> < a id = "menu-points" class = "ui-btn-right" href = "# points" data-transition = "pop"> Точки </a> </ div> <div data-role = "content"> <div id = "map-canvas"> <! - Тут буде карта -> </ div> </ div> </ div> Сторінка з картою, відкрита в мобільному браузері. Це ще не iOS додаток.

Атрибут сторінки data-dom-cache = "true" необхідний для того, щоб вона не вивантажувалася з пам'яті. Для кнопки «Точки» використовується data-transition = "pop», щоб сторінка «Список точок» відкривалася з ефектом «Всплиття». Детальніше про те, як влаштовані сторінки jQuery Mobile, можна почитати в хорошому мануале ( bit.ly/vtXX3M ). За аналогією створюємо сторінку зі списком точок:

Сторінка зі списком точок

<Div id = "points" class = "page-pints" data-role = "page" data-dom-cache = "true"> <div data-role = "header"> <! - Видаляє всі крапки зі списку -> <a id="delete-all" href="#" data-theme="b" data-icon="delete"> Видалити все </a> <h1> Точки </ h1> <! - кнопка Карта -> Карта </ div> <div> <! - Список точок -> <ul id = "list" data-role = "listview" data-inset = "true" data-split-icon = " delete "> </ ul> </ div> </ div>

Для кнопки «Карта» теж пропишемо data-transition = "pop», але додамо атрибут data-direction = "reverse», щоб сторінка «Карта» відкривалася з ефектом «Загасання». Ті ж атрибути пропишемо в шаблоні точки. Все, наш каркас готовий.

Тепер треба відобразити карту, для чого ми візьмемо стандартний API Google Maps, який використовується мільйонами різних сайтів:

var latLng = new gm.LatLng (this.options.lat, this.options.lng); this.map = new gm.Map (element, {zoom: this.options.zoom, // Вибираємо початковий зум center: latLng, // Встановлюємо початковий центр mapTypeId: gm.MapTypeId.ROADMAP, // Звичайна карта disableDoubleClickZoom: true, // Відключаємо автозум по тапу / подвійному кліку disableDefaultUI: true // Відключаємо всі елементи інтерфейсу});

Тут Gm - це змінна, котра посилається на об'єкт Google Maps. Параметри ініціалізації я добре закоментувавши в коді. Наступний крок - отрисовка маркера чоловічка на мапі:

this.person = new gm.Marker ({map: this.map, icon: new gm.MarkerImage (PERSON_SPRITE_URL, new gm.Size (48, 48))});

Як PERSON_SPRITE_URL використовується адреса спрайту чоловічка з Google-панорам. Його статичний адреса - maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png . Користувач буде додавати точки, клікаючи на карті, тому, щоб їх малювати, ми будемо слухати подія click:

gm.event.addListener (this.map, 'click', function (event) {self.requestMessage (function (err, message) {// Метод, який повертає текст, який Ви самі ввели if (err) return; // Метод додає точку в список активних і // отрісовиваєт її на карті self.addPoint (event.latLng, self.options.radius, message); self.updatePointsList (); // перемальовувати список точок});}, false);

Я привожу більшу частину коду - інше шукай на диску. Далі нам потрібно навчити додаток переміщати іконку користувача по карті. У прототипі ми задіємо Geolocation API (той, який використовується в тому числі в десктопних браузерах):

if (navigator.geolocation) {// Перевіряємо, чи підтримує браузер геолокацію function gpsSuccess (pos) {var lat, lng; if (pos.coords) {lat = pos.coords.latitude; lng = pos.coords.longitude; } Else {lat = pos.latitude; lng = pos.longitude; } Self.movePerson (new gm.LatLng (lat, lng)); // Переміщаємо іконку користувача} // Кожні три секунди запитуємо поточний // становище користувача window.setInterval (function () {// запитуваний поточний стан navigator.geolocation.getCurrentPosition (gpsSuccess, $ .noop, {enableHighAccuracy: true, maximumAge: 300000 });}, 3000); }

Метод movePerson за допомогою простої процедури getPointsInBounds () перевіряє, чи не перебуває користувач в який-небудь активної точці. Останнє питання - де зберігати список точок? У HTML5 з'явилася можливість використовувати localStorage, так що не будемо їй нехтувати (надаю тобі самостійно розібратися з цими ділянками коду, які я добре закоментувавши). Отже, додаток, що працює в браузері, готово!

Як я вже говорив, налагодження в основному необхідно виконувати на комп'ютері. Самий відповідний браузер для тестування веб-додатків на комп'ютері - це Safari або Chrome. Після налагодження в цих браузерах ти можеш бути впевнений в тому, що твоє програма не «поїде» в браузері мобільного телефону. Обидва цих браузера сумісні з більшістю мобільних веб-браузерів, оскільки точно так же, як і вони, побудовані на основі движка WebKit. Після усунення всіх багів можна переходити до запуску мобільного веб-додатки безпосередньо на телефоні. Для цього настрій свій веб-сервер (нехай навіть Denwer або XAMPP), щоб він віддавав створену сторінку, і відкрий її вже в браузері мобільного телефону. Додаток має виглядати приблизно так, як показано на малюнку. Тут важливо розуміти, що майбутнє мобільний додаток, зібране для мобільної платформи за допомогою PhoneGap, буде виглядати майже один в один, за винятком того, що на екрані не буде доступний широкому навігаційна панель браузера. Якщо все добре, можна приступати до створення з сторінки повноцінного iOS-додатку. Зауваж, що PhoneGap і IDE для мобільного розробки ми до цього моменту навіть не чіпали.

Для того щоб зібрати додаток під iOS, тобі потрібен комп'ютер з операційною системою Mac OS 10.6+ (або віртуальна машина на Mac OS 10.6), а також середовище розробки Xcode з встановленим iOS SDK. Якщо у тебе не встановлено SDK, доведеться завантажити з сайту Apple образ диска, що включає в себе Xcode і iOS SDK ( developer.apple.com/devcenter/ios/index.action ). Май на увазі, що образ важить близько 4 Гб. Крім цього, тобі знадобиться зареєструватися на сайті Apple в якості розробника (якщо ти не збираєшся публікувати свій додаток в AppStore, то це вимога можна обійти). За допомогою цього набору можна розробляти програми на нативному для iOS мовою Objective-C. Але ми вирішили піти обхідним шляхом і скористатися PhoneGap, тому нам ще потрібно встановити пакет PhoneGap iOS. Просто скачай архів з офсайта ( https://github.com/callback/phonegap/zipball/1.2.0 ), Розпакуйте його і в папці iOS запусти програму установки. Коли установка завершиться, в меню проектів Xcode повинна з'явитися іконка PhoneGap. Після запуску доведеться заповнити кілька форм, але вже дуже скоро ти побачиш робочу область IDE з твоїм першим додатком. Щоб перевірити, чи все працює, натисни кнопку Run - повинен запуститися емулятор iPhone / iPad з шаблонним додатком PhoneGap. Зібрана програма видасть помилку з повідомленням про те, що index.html не знайдений, - це нормально. Відкрий папку, в якій ти зберіг первинні файли проекту, і знайди в ній підпапку www. Перетащи її в редактор, кликни на іконці програми в списку ліворуч і у вікні вибери «Create folder references for any added folders». Якщо запустити програму ще раз, то все повинно запрацювати. Тепер можна скопіювати всі файли нашого прототипу в папку www. Пора підпиляти наш прототип для роботи на смартфоні в обробці PhoneGap.

В першу чергу потрібно підключити phonegap-1.2.0.js в твій індексний файл. PhoneGap дозволяє обмежувати список доступних для відвідування хостів. Пропоную відразу налаштувати такий «білий список». В меню проекту відкрий Supporting Files / PhoneGap.plist, знайди пункт ExternalHosts і додай в нього такі хости, до яких звертатиметься наш додаток (це сервера Google Maps): * .gstatic.com, * .googleapis.com, maps.google. com. Якщо їх не вказати, програма видасть попередження в консолі і карта не з'явиться. Для ініціалізації веб-версії нашого застосування ми використовували подія DOMReady або хелпер jQuery: $ (document) .ready (). PhoneGap генерує подія deviceready, яке говорить про те, що мобільний пристрій готове. Пропоную цим скористатися:

document.addEventListener ( "deviceready", function () {new Notificator ($ ( "# map-canvas") [0]); // Якщо у користувача немає інтернету, // повідомляємо йому про це if (navigator.network.connection .type === Connection.NONE) {navigator.notification.alert ( "Ні інтернет-з'єднання", $ .noop, TITLE);}}, false); прописуємо ExternalHosts

Ця подія перевіряє, чи є у користувача хоч якесь інтернет-з'єднання. Якщо його немає, виводимо відповідне повідомлення. Замість функції navigator.notification.alert можна використовувати більш звичну alert, але її мінус в тому, що вона виглядає менш природно для мобільного застосування. Зараз нам вистачить і цих знань, але ти можеш докладніше прочитати про network.connection ( bit.ly/uEyRwz ) І способах нотифікації ( bit.ly/tkvzE2 ).

Заборонимо скролінг: document.addEventListener ( "touchmove", function (event) {event.preventDefault ();}, false);

Потім замінимо всі виклики alert і confirm на нативні, які надає нам PhoneGap:

navigator.notification.confirm ( 'Видалити точку?', function (button_id) {if (button_id === 1) {// Натиснуто кнопка OK self.removePoint (point);}}, TITLE);

Останнє, що нам потрібно поміняти, - це блок коду, що переміщає іконку користувача по карті. Наш поточний код теж працює, але працює менш оптимально (переміщує іконку, навіть якщо координати не змінилися) і дає не такі багаті дані, як аналог в PhoneGap:

navigator.geolocation.watchPosition (function (position) {self.movePerson (new gm.LatLng (position.coords.latitude, position.coords.longitude));}, function (error) {navigator.notification.alert ( 'code: '+ error.code +' \ nmessage: '+ error.message, $ .noop, TITLE);}, {frequency 3000});

Цей код більш витончений - він генерує подія тільки тоді, коли координати змінилися. Тиснемо кнопку Run і переконуємося, що тільки що створене нами додаток відмінно працює в симуляторі iOS-пристрої! Пора приступати до запуску на реальному пристрої.

Нативні повідомлення в iOS

Під'єднати iPhone, iPod або iPad до комп'ютера, на якому запущено Xcode. Програма визначить новий пристрій і попросить дозволу використовувати його для розробки. Немає сенсу їй відмовляти :). Повторю ще раз: щоб запустити написане додаток на iOS, необхідно бути авторизованим розробником iOS (іншими словами, бути підписаним на iOS Developer Program). Цим доведеться задурити тільки в разі розробки додатків для продукції Apple, з будь-якою платформою (Android, Windows Phone) все набагато простіше. У тих, хто навчається у вузі, є шанс отримати доступ до програми безкоштовно завдяки яким-небудь пільг. Всі інші повинні платити $ 99 в рік для участі в програмі. Apple видає сертифікат, яким ти зможеш підписувати свій код. Підписана додаток дозволяється запускати на iOS і поширювати в App Store. Якщо ти не студент, а $ 99 для невинних експериментів тобі поки шкода, то є й інший спосіб - обдурити систему. Ти можеш створити самоподпісанний сертифікат для верифікації коду і запустити мобільний програму на джейлбрейкнутих iOS-пристрої (не буду на цьому зупинятися, тому що все максимально докладно розписано в цій статті: bit.ly/tD6xAf ). Так чи інакше, ти незабаром побачиш працює додаток на екрані свого мобільного телефону. Зупиняй секундомір. Скільки часу у тебе на це пішло?

Працююче PhoneGap-додаток

інші платформи

Крім PhoneGap, існують і інші платформи, що дозволяють створювати мобільні додатки без використання нативних мов. Перелічимо найбільш крутих гравців.

Appcelerator Titanium ( www.appcelerator.com ).

Titanium вміє збирати додатки в першу чергу під Android та iPhone, але в ньому також заявлена ​​підтримка BlackBerry. Крім самого фреймворка, проект надає набір нативних віджетів і IDE. Ти можеш розробляти програми на Titanium безкоштовно, проте за підтримку і додаткові модулі доведеться заплатити (від $ 49 в місяць). Ціна деяких сторонніх модулів доходить до $ 120 за рік. Розробники Appcelerator Titanium стверджують, що на основі їх фреймфорка написано більше 25 тисяч додатків. Вихідний код проекту поширюється під ліцензією Apache 2.

Corona SDK ( www.anscamobile.com/corona ).

Ця технологія підтрімує основні платформи - iOS и Android. Фреймворк націленій в основному на розробка ігор. Ще б пак, Аджея розробник заявляють про вісокоякісної оптімізації на OpenGL. Безкоштовної Версії біля платформи немає, а ціна Досить-таки кусюча: $ 199 в рік за ліцензію для однієї Платформи и $ 349 в рік для iOS и Android. Corona пропонує свою IDE і емулятори пристроїв. Додатки під Corona пишуть на мові, схожому на JavaScript.

Ми створили просте мобільне веб-додаток і в кілька простих кроків портувала його на платформу iOS за допомогою PhoneGap. Ми не написали жодного рядка коду на Objective-C, але отримали програму пристойної якості, витративши мінімум часу на перенесення і вивчення API PhoneGap. Якщо ти віддаєш перевагу іншу платформу, наприклад Android або Windows Mobile 7, то ти так само легко, без будь-яких змін під ці платформи, зможеш зібрати наш додаток (для кожної з них є хороший вступний мануал і видеоурок: phonegap.com/start ). Щоб переконатися в спроможності платформи, можна подивитися на вже готові програми на PhoneGap, які розробники технології зібрали в спеціальній галереї ( phonegap.com/apps ). За фактом PhoneGap - це ідеальна платформа для створення як мінімум прототипу майбутнього програми. Її головними перевагами є швидкість і мінімум затратат, чим активно користуються стартапи, які в усіх відношеннях обмежені в ресурсах. Якщо додаток попре, а нутрощі на HTML + JS тебе з якоїсь причини перестануть влаштовувати, завжди можна буде перенести додаток на нативний мову. Не можу не сказати, що PhoneGap спочатку розроблявся компанією Nitobi як відкритий проект (репозиторій розташовується на GitHub: github.com/phonegap ). Вихідні тексти і далі залишатимуться відкритими, хоча в жовтні минулого року компанію Nitobi купив Adobe. Чи потрібно говорити, які перспективи з'являються у проекту за підтримки в особі такого гіганта?