Як я створив свій перший мультиплатформенний мобільний додаток за допомогою JavaScript та XDK

Потрібно визнати: я маю понад десятирічний досвід розробки додатків.

Я писав заявки переважно для корпоративного бізнесу. Це означало, що я використовував комерційні програми та власні мови програмування - головним чином, керуючись політикою організації, для якої я розробляв, яку працював або обох.

Тим часом мови з відкритим кодом виросли. І хоча я мав безліч навичок JavaScript, CSS та HTML, мої навички в цих сферах були недостатньо хорошими, щоб перейти безпосередньо на роботу у веб-розробці. Який я нещодавно обрав як варіант кар’єри, оскільки:

  • хтось приховав мій сир, тож необхідне перекваліфікація
  • є багато людей, які хочуть веб-сайти та подібні речі
  • є обіцянка розробки мультиплатформенних додатків для смарт-пристроїв

Отже, я розпочав перекваліфікацію. Я вибрав Free Code Camp або, врешті-решт, обрав мене. Я, чесно кажучи, не впевнений, який. Те, як я стрибнув у води Free Code Camp, для цієї історії не важливо. Однак це важлива довідкова інформація.

Іншою важливою частиною цієї історії є обіцянка розробки мультиплатформенних додатків.

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

Але ось ось що: я дуже поспішаю. У мене немає часу вчитися. Мені дуже потрібен інструмент розробки, який фактично працює нестандартно з мінімальними зусиллями. Думаю, я звик до комерційних продуктів у цьому плані.

Повернутися до Free Code Camp. Все, що я хочу сказати, це те, що я дійшов до Ziplines. І я їх закінчив. У мене також є дефіцит уваги. Після того, як я закінчив Ziplines, я зрозумів, що: "Далеко, я можу створювати веб-програми зараз". Тепер я добре володів мовами з відкритим кодом: розмітками та мовами сценаріїв, такими як HTML, CSS та JavaScript. І мені потрібна була перерва в школі до цього етапу.

Тож я знову подивився навколо інструментів, які можуть відповідати обіцянкам розробки мультиплатформенних додатків. І, трохи пробуючи, я познайомився з Intel XDK (так, я встановив це на своїй машині приблизно 6 місяців, сидячи без діла). Справедливості заради, моїх навичок написання сценаріїв дещо бракувало, коли я вперше встановив їх із зворотним зв'язком (незважаючи на моє всебічне розуміння VBA, об'єктно-орієнтоване кодування та інтеграцію реляційної бази даних).

Intel XDK також значно покращився, і до того, як я створив з ним свою першу програму, я перейшов на (тодішню) поточну версію.

Тож чому я обрав Intel XDK порівняно з його конкурентами. За ці роки я випробував і викинув близько десяти різних інструментів. Ось короткий опис мого досвіду:

  • Один конкуруючий продукт не дав змоги кінцевому користувачеві (мені) редагувати мій власний додаток. Я міг би розпочати його створення, але тоді не було відомого способу його редагування. Це не проблема, яку хтось очікує - ніколи. Знаєте, після перерви, наприклад, я не знаю, вимкнувши комп’ютер, щоб я міг заснути, а потім повернувшись на наступний день, щоб продовжувати будувати свій додаток, - але немає можливості отримати доступ до моєї роботи на моїй машині? Здогадайтеся, скільки часу тривав цей інструмент розробки на моїй машині ... Так, я шукав підтримки. Знайдені мені відповіді розчарували мене навіть більше, ніж відсутність можливості редагувати власний код. Grrr…
  • Документація: Я спробував інший інструмент, коли документації було 12 або близько місяців (за датою опублікування). У той час Кордова пройшла світлі роки позаду, де залишилася ця несвіжа документація. І, як і багато інших речей, покритих пилом, інструкції щодо використання саме цього інструменту, про який я думаю, насправді були не такими актуальними чи корисними. У смітник пішло.
  • Інші інструменти на базі серверів змушують мене нервувати. Що станеться, якщо сервер вийде з ладу або відповідальна організація збанкрутує? Як повернути свій проклятий код? Мені не подобається такий великий ризик. Світ надто швидко обертається. Речі весь час падають. Мені не потрібно, щоб моя ІР була відкинута від світу через поганий вибір хостів додатків з мого боку. А рішення на базі серверів, як правило, коштують набагато дорожче, ніж я можу собі дозволити. А хто насправді володіє ІР, коли код, який я пишу, розміщується на чужій машині?

Докладніше про Intel XDK

Коли я погрався з цією версією Intel XDK, я приємно дізнався, що можу запустити свою програму. Спочатку йди. І це не простий додаток - він використовує геолокацію, щоб знайти щось. І інші трикси речі. Я заздалегідь знав, що мені потрібні деякі плагіни. Погравшись з PhoneGap раніше у цій частині, я познайомився з Кордовою (PhoneGap раніше був безкоштовним, тепер належить Adobe, не таким безкоштовним). Це було місяці тому. Дивлячись на Intel XDK, можна припустити, що деякі речі можуть бути зроблені за допомогою власного коду Intel, і, можливо, деякі з них потребують обробки сторонніми плагінами (наприклад, Кордовою).

Виявляється, коли я починав, деякий власний код Intel був у стані застаріння (але це не було зрозуміло мені, кінцевому користувачеві в той час). Біт коду, який я вибрав (on.device.ready - це не повне ім’я - бо я це вже забув), був на виході.

Мені подобається Intel XDK - тому що він працює - але, як і багато інших інструментів сьогодні, документація не встигає за функціональністю. І справа не в тому, що документація обов’язково сильно відстає. У випадку з Intel XDK документація є вичерпною - і точною (так), але її важко знайти (ауу).

Отже, так, я намагаюся використати цей дзвінок, і мій додаток працює. І я не пам’ятаю - чи я перейшов на наступний випуск, і моя програма зламалася, чи мій код просто не працював ідеально, і я також перейшов на наступний випуск (так, Intel викачує оновлення до Intel XDK приблизно один до двох раз на місяць - спробуйте дотримуватися цього графіку як індивідуальний торговець).

По правді кажучи, я майже відмовився від Intel XDK. Але, я подумав: "Ошукай це" (я австралієць). І: “Я майже закінчив цю програму. Я витримаю це ". І ось, я знайшов деяку інформацію, яка вказує на те, що дзвінок "on.device.ready" ще не був мертвим, але його родина друзів була мертва і похована (застаріла, великими синіми літерами). Немає сенсу плакати над коханими. Настав час змінити передачі і агресивно рухатися далі.

Отже, я швидко дізнався про плагіни Cordova та про те, як ними користуватися в Intel XDK. Це не так важко виявляється. У своєму першому додатку я використовую досить добре використовувані та відомі плагіни.

І так, хороша новина полягає в тому, що коли я зрозумів, як підключити плагіни Cordova, я не оглянувся назад.

Отже, ось декілька скорочень для створення програми з Intel XDK. Мої перлини мудрості, щоб допомогти тобі, читачу, уникнути темних шляхів, якими я пішов, і залишатися добре на світлі:

  • Мені байдуже, яку програму ви намагаєтеся розробити, скажіть Intel XDK створити версію Кордови. Про всяк випадок, коли вам потрібно використовувати плагін. Так, так, вам, мабуть, знадобиться StatusBar. Тому що iOS.
  • Вам знадобляться як мінімум навички роботи з HTML та CSS. Плюс трохи JavaScript для того, щоб правильно використовувати плагіни. Так, ви можете використовувати JQuery замість цього, якщо це ваша справа. Наскільки JavaScript або JQuery залежить від програми, яку ви створюєте. Вам потрібно мати можливість створювати веб-сайти, щоб використовувати щось на зразок Intel XDK. Ви ще не знаєте, як створити веб-сайт? Ось рішення: приєднайтеся до Free Code Camp і дізнайтеся, наскільки це можливо, включаючи Ziplines. Після цього ви готові грати з Intel XDK. Так.
  • Для першого додатка скажіть Intel XDK створювати, використовуючи один із шаблонів. Це дасть вам готовий код, який допоможе скоротити термін "чекати, що тепер?" частина.
  • index.html: це перший користувальницький інтерфейс, з яким представлений кінцевий користувач (клієнт) вашого додатка. Ваші знання про розробку веб-сайтів, які ви отримали, включаючи Free Code Camp Ziplines, допоможуть вам зрозуміти, що робити з цим файлом.
  • GitHub: ви хочете слідувати інструкціям для кожного плагіна, який ви використовуєте. Щоб знайти документацію до вашого плагіна, Google “github cordova [плагін]”, де “[плагін]” - це назва плагіна, який ви шукаєте. Наприклад, пошук “github cordova statusbar” повинен досить легко перенести вас на плагін панелі стану. Документація щодо плагіна cordova на github відмінна.
  • StackOverflow: задайте свої "німі" запитання тут. Не забудьте спочатку пошукати відповіді на своє запитання. Величезна спільнота наставників на StackOverflow докладає особливих зусиль, щоб зазначити, що ваше питання вже задано (і на нього відповіли).
  • Форум продуктів Intel XDK: тут задайте свої “німі” конкретні запитання Intel XDK. Хлопці з Intel - ваші друзі (із задоволенням). А інші розробники, що використовують Intel XDK, також раді допомогти, якщо можуть.
  • Intel XDK створює три пакети під час створення для пристроїв Windows. Я все ще намагаюся зрозуміти, чому він створює три, але мені потрібно завантажити лише один до магазину Windows. Відповідь перевірте на форумах Intel XDK. Я запитав. Зараз це задокументовано. Не повна відповідь. Тільки відповідь, яка вам знадобиться для того, щоб продовжити. Цього достатньо.

Нехай це буде просто дурним

Добре, ось основна порада, яку мали б сказати вам мама і тато до того, як ви вийшли з дому:

  • створити якомога менше коду.
  • сюди входять файли активів. У моєму першому додатку було занадто багато файлів CSS і занадто багато файлів JS. Серйозно. "Аууу, оснащення", яке я мав з "on.device.ready", дало мені можливість консолідувати свою IP-адресу в меншу кількість файлів і викинути біти, які насправді ніде не використовувались. Це найкраща практика.
  • Використовуйте чужий код (не в сенсі плагіату) - використовуйте готові шаблони, які надає Intel XDK, щоб скоротити криву навчання. Принаймні для вашого самого першого додатка.
  • Застрягли на "як"? Запитайте Google, і ви знайдете відповідь у StackOverflow. Модифікуйте навчання для своїх цілей, а потім перейдіть до наступної проблеми. Ви дізнаєтесь про наступний раз.
  • Читати книги. Ха-ха-ха. Як у мене є час. Хоча серйозно. Знайдіть час.
  • Я все ще читаю про мову програмування Swift ... Це навіть не пов’язано. Але мова йде принаймні про код.
  • Використовуйте чужі активи. Для свого першого додатка я знайшов бібліотеку анімації CSS та акуратну бібліотеку шрифтів. Я переконався, що мій додаток приписує ці бібліотеки на інформаційній сторінці «Про мене» мого додатка. Відповідно до ліцензійних умов. І тому, що це правильно робити.

Використання Intel XDK для створення першого додатка

Завантажте та встановіть Intel XDK.

В Intel XDK:

  1. Натисніть «Почати новий проект».
  2. Виберіть «Шаблони», а потім «Макети та інтерфейси користувача».
  3. Виберіть додаток для перегляду вкладок (або, якщо хочете, можна вибрати інший тип шаблону). Поставте прапорець біля пункту «Використовувати дизайнер додатків» (це встановить готовий код для побудови та розпочне з - yay).
  4. Клацніть Продовжити.
  5. У вікні проекту натисніть кнопку Оновити до Кордови.
  6. Коли проект створений, додайте наступний плагін Cordova (знову в меню проекту):

    Рядок стану

Обрані вами плагіни будуть повністю залежати від того, що ви будуєте. Плагіни допомагають використовувати функції пристроїв, на яких буде працювати ваш додаток. Ймовірно, вам знадобиться хоча б один. Тому що iOS.

Створення додатка

Окрім надмірно спроектованих обручів від Apple (який сертифікат розбиття мені знову потрібен?) Та "Вибору Windows з трьох пакетів", процес збірки сам по собі простий. Перейдіть на вкладку Збірка. Завантажте свій код, створіть свій пакет, завантажте свій пакет.

Я не знаю про вас. Я бідний. Я можу протестувати свій пакет iOS. Я не можу протестувати свій пакет Android або пакети Windows. Одного разу я сподіваюся, що зможу протестувати більше ніж на одній платформі. Вибачте, протестуйте морських свинок (тобто. Усіх моїх клієнтів на пристроях Google і Windows).

Для вас, розробника: емулятор в Intel XDK слід розглядати лише як керівництво. Ви зрозумієте це. Березня. Не приймайте в'язнів. Зараз не час лякатися страху перед тим, "що, якщо це не спрацює". Майте трохи віри. Хай буде проклятий за спробу. Не будь проклятим за невдачу.

Для Android ви хочете будувати, використовуючи опцію "Crosswalk для Android". Два слова щодо того, чому: «гнучка коробка». Якщо вам потрібно знати більше, перевірте документацію. Flex box має спосіб проникнути в кожен проект (на мій досвід).

Чим я не можу тобі допомогти?

  • Яблучний спосіб роботи вкрай інтенсивно розроблений. Вам потрібно створити власний сертифікат, використовуючи заплутаний метод. Всі помиляються. Принаймні, один раз. Наполегливо.
  • Період огляду Apple тривалий. Близько 7 днів (це не помилка, це займає дні!). Це перший досвід гризти нігті. Що робити, якщо додаток відхилено? Чи буду я знати, що робити, якщо його відхиляють? Чому це так довго? Чи означає цей статус перевірки, що Apple збирається переглянути його або що я повинен? Аааааа! Це вже готово? Що відбувається? Ох, і безсонні ночі. І щохвилинна перевірка електронної пошти. Це ніколи не приходить.
  • Google займає кілька годин. Цей самий додаток буде розглянуто та розгорнуто протягом 24 годин. Може трохи довше. Менше 48. Тим не менше, якщо ви напишете складний додаток для монстра, можливо довше.
  • Windows займає кілька годин. А потім приблизно через день, щоб стати доступним для завантаження в магазині Windows. Але у вас не буде клієнтів. Тож це спірне питання. Зробіть для телефонів Windows все одно. Це завершить ваше резюме.

Що я зараз роблю?

Я будую ще один додаток.

Ця історія спочатку з’явилася на creatureoftech.com.