Я написал жене приложение на Рождество

Я написал жене приложение на Рождество

Я написал жене приложение на Рождество.

Идея пришла мне в голову во время панической атаки посреди переполненного торгового центра за пару дней до праздника. Я бродил вокруг в оцепенении, пытаясь понять, что я мог бы дать ей, что сказал бы именно то, что нужно. Это было так: «Я подарил тебе это, потому что люблю тебя (и я подумал, что тебе это может понравиться (но не стесняйся вернуть его (потому что я понятия не имею, что делаю.))».

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

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

Однако приложения дали мне идею. Одни из самых запоминающихся и трогательных подарков сделаны своими руками. Подарки, которые я ценю больше всего, были сделаны из плотной бумаги с небольшими отпечатками пальцев. Я не художник и не особо хитрый. Я не плотник и не знаю, как написать хит. Что я умею писать, так это… в основном javascript.

Итак, я свернул свою IDE и подарил жене javascript (хорошие части) и Cordova, гибридную платформу приложений.

Идея приложения была довольно простой. Я бы написал список причин, по которым я люблю свою жену, и приложение каждый раз открывало бы случайный элемент из списка.

Я создал приложение с помощью Cordova, инструмента, который упаковывает устанавливаемое приложение для Android, iOS и других платформ. Приложение, которое Cordova создает для нас, по сути представляет собой тонкую оболочку вокруг окна браузера без хрома. Пользовательский интерфейс и функциональность приложения полностью основаны на HTML и JavaScript.

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

<div id="app"> 
    <h1>Reason #<span id="reason-number">445</span> Lance Loves Amanda</h1> 
    <div id="reason-text">She always does her best</div> 
</div>

Как видите, у нас есть два элемента в HTML с идентификаторами, начинающимися с «причина-», которые содержат некоторый текст по умолчанию. Именно этот текст мы будем динамически заменять.

JavaScript начинается с множества причин. Это была самая легкая часть сборки, так как придумать причины, по которым я люблю Аманду, так же просто, как вспомнить ее улыбку.

Если вы уже храните причины, по которым вы любите свою вторую половинку, в облаке, вы можете связать вызов API или параметры поиска в базе данных WebSQL, которая доступна во всех мобильных операционных системах, поддерживаемых Cordova.

// A truncated list of reasons I love my wife... 
var reasons = [ 
    “Amanda always tries her best”,
    “Amanda is nice to me when I’m sick”, 
    “Amanda makes pretty babies”, 
    “Amanda’s always up for a cuddle”, 
    “Amanda is passionate about what she believes in”, 
    “She is always eager to learn”, 
    “She is a fighter”, 
    “She puts up with my crazy ideas”, 
    “She laughs at my jokes (even the terrible ones)”, 
    “Amanda believes in me” 
];

В большинстве руководств по приложениям Cordova есть раздел, описывающий событие deviceready. В отличие от приложений JavaScript в браузере, которые в основном связаны с доступом к модели DOM, типичному приложению Cordova потребуется дождаться подтверждения загрузки кода, соединяющего приложение с API-интерфейсами устройства.

В нашем приложении мы не делаем ничего умного и можем обойтись ожиданием события загрузки DOM. Тем не менее, в интересах соглашения и быть открытым для будущих обновлений, я буду придерживаться события deviceready.

var app = { 
    initialize: function() {     
        document.addEventListener('deviceready', this.showReason, false); 
        document.getElementById('app').onclick = this.showReason; 
    }, 
    showReason: function() { 
        var reasonNumber = Math.floor(Math.random()*reasons.length), 
            reason = reasons[reasonNumber]; 
        document.getElementById('reason-number').innerHTML = reasonNumber; 
    document.getElementById('reason-text').innerHTML = reason; 
    } 
}; 
app.initialize();

Вы заметите, что я привязал дополнительный вызов showReason к событию клика в приложении. В основном это делается для целей отладки, поскольку событие deviceready не вызывается при тестировании в браузере.

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

Для этого приложения я искал наши с женой стримы в Facebook, чтобы найти нашу недавнюю совместную фотографию. У нас теперь есть дети, поэтому было на удивление трудно найти кого-то, у кого были бы только наши улыбающиеся рожицы. Я скопировал лучший из найденных в каталог проекта и поместил его в качестве фона для тела.

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

К этому я добавил немного CSS, чтобы центрировать и изменить размер текста, используя полезную функцию предварительного просмотра устройства Google Chrome в инструментах разработчика, чтобы внести коррективы. Этот слой является основной целью для анимации и переходов, чтобы сделать приложение особенным. В моей версии я добавил CSS-переход для увеличения и исчезновения текста при его загрузке.

Теперь, когда у меня было работающее приложение, я использовал Cordova для создания устанавливаемого приложения, которое я мог установить на ее телефон. Первый шаг — установить Cordova с помощью npm:

npm install --global cordova

Затем перейдите туда, где вы храните свой код, и используйте команду создания Cordova для инициализации нового проекта Cordova:

cordova create loveways com.muddylemon.loveways LoveWays

Это создаст новый каталог с именем loveways в текущем рабочем пути. Второй и третий аргументы задают пространство имен и имя вашего приложения в файле config.xml, который Cordova использует для создания вашего приложения.

Внутри каталога вы найдете стандартные папки и файлы для проекта Cordova. В одном из каталогов, www, хранятся наши файлы HTML и JavaScript. В новом cordova create есть приложение по умолчанию в www, которое отображает изображение и демонстрирует прослушивание события deviceready. Замените этот код своим собственным и скопируйте любые изображения или другие активы.

Чтобы создать приложение для устройства любимого человека, вам необходимо добавить соответствующую платформу в этот проект. Вам также потребуются правильные инструменты сборки, доступные на вашем компьютере для разработки. Например, установите и обновите Xcode для iOS (не забудьте установить инструменты командной строки!) Для Android установите программное обеспечение Android Studio и установите необходимые SDK в диспетчере SDK.

После того, как вы подготовили свою машину, добавьте платформу, выполнив команду:

cordova platform add ios
cordova platform add android  
#or the one that matches your target device.

Мне показалось полезным открыть Xcode или Android Studio и инициализировать включенные эмуляторы перед сборкой из Cordova.

На этом этапе вы можете создать сборку и увидеть, как ваше приложение работает на целевой мобильной ОС! В Cordova есть ряд незаметных команд сборки, которые могут сбивать с толку. Для наших целей мы можем использовать cordova run ‹platform›, которая покроет все основы от подготовки сборки, ее компиляции и установки приложения на эмуляторе.

Если у вас не открыт эмулятор при вызове cordova run, он будет открыт для вас. Если к вашему компьютеру подключено устройство с включенными параметрами разработчика, приложение будет установлено на ваше устройство. В первый раз это происходит волшебно.

Cordova будет использовать значок по умолчанию, если вы не укажете иначе. Это похоже на робота, который делает отжимания. К счастью, замена значка робота проста и действительно добавляет приложению некую изюминку. Мой метод, будучи графически неразвитым человеком, заключался в поиске общего изображения в форме сердца, а затем в улучшении его с помощью некоторых инструментов. Вы можете использовать Gimp, Photoshop или подобное приложение для запуска интересных фильтров. Недавно я обнаружил приложение, которое, как мне кажется, идеально подходит для создания иконки — Pikazo. Это мобильное приложение, которое берет одно изображение, обычное сердце в моем случае, и стилизует его с помощью другого изображения. Вы можете сравнить свою иконку с Пикассо, Баския, Багзом Банни или кем-то еще и получить уникальный, а иногда и прекрасный результат.

После того, как у вас есть изображение, которое вы хотите использовать, я рекомендую создать его копию размером 512 на 512 пикселей и сохранить ее как icon.png в папке www вашего проекта Cordova. Затем установите Cordova-icon через npm и запускайте его при обновлении значка или платформ, которые вы создаете. Скрипт скопирует это изображение во все правильные размеры и разрешения и сохранит их в правильном месте в папке платформы.

Установите свое приложение

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

Выполните команду cordova run ‹platform› и проверьте наличие ошибок. Найдите значок и проверьте открытие и запуск приложения. Вы можете скопировать значок на видное место, если хотите, чтобы пользователь обнаружил его врасплох. Я попытался это сделать, но в конце концов мне пришлось указать на это и наблюдать, как она понимает, что это за приложение на самом деле.

Если вы хотите узнать больше о платформе Cordova, вы можете начать с Документации Cordova. В этой статье я называл проект Cordova, но вы также можете найти соответствующую информацию, выполнив поиск по торговой марке Phonegap, которая является коммерческой версией Cordova, принадлежащей Adobe.

Если у вас есть какие-либо вопросы или комментарии, напишите мне в твиттере @muddylemon.

Первоначально опубликовано на сайте muddylemon.com 16 февраля 2016 г.