Совсем недавно в славном городе на Неве проводился конкурс ребятами из местного GTUG, анонс конкурса ютится в этом топике. О самом конкурсе, проведении его и результатах будет подробно написано в отчёте от arkady112. Я же хочу рассказать немного о приложении Puzzle15, которое получило одну из 3х наминаций и вместе с ней HTC WildFire.
Под катом небольшой обзор и пример реализации некоторых функций…
Как, надеюсь, понятно из названия Puzzle15 — это всеми нами любимые пятнашки, так сказать «портированные» с игровой полки в браузер chrome.
К основным особенностям приложения я отнесу:
• game for fun
• социальность
• синхронизация данных
Game for fun
Что касается первой особенности, то тут немного сложнее чем кажется. Да, игры это хорошо, это весело. Конечно, пазлы, как и другие интеллектуальные игры, помогают нашему мозгу, если так можно выразится, «не заплыть жирком». Но за всем этим развлечением стоит забавный факт- ровно половина комбинаций костяшек просто-напросто не может быть собранной а это половина от 15!
Социальность
Собирать пятнашки можно бесконечно долго, причём одному, а это не всегда весело! На помощь к нам приходит в этом случае twitter.
Теперь мы можем поделиться своим шаблоном пятнашек со всеми обитателями этого чудного сервиса буквально одним нажатием кнопки.
В итоге мы сообщим остальным птичкам свой шаблон.
А если пройтись по хэшу #Puzzle15, то можно будет загрузить разнообразные шаблоны других пользователей себе.
Синхронизация данных
Это, пожалуй, самое интересное было для меня в процессе создания приложения, да и отличало моё приложение от остальных представленных на демо фесте.
Уточню, синхронизация не приложения, а именно данных, используемых в нём.
Так как готового решения данной проблемы я не нашёл (может плохо искал), то был придуман «самокатик».
Использовал умение браузера самостоятельно синхронизировать закладки. Моей задачей было создать закладку, записать туда необходимые данные (писал в json) и по некоторым действиям в приложении обновлять её.
Остальное делает уже сам браузер (синхронизирует в ваши G-docs).
Ключевые моменты по работе с закладками в приложении
chrome.bookmarks.getChildren('1', function(tree) {
if (!localStorage['FlagBookmarks']){
localStorage['IndexBookmarks']="";
localStorage['IDbookmarks']="";
}
tree.forEach(function( item, index) {
if (item.title=="Puzzle15") {
localStorage['FlagBookmarks']=1; // наличие в системе закладки для синхронизации данных
localStorage['IndexBookmarks']=item.index;
localStorage['IDbookmarks']=item.id;
}
});
if (!localStorage['FlagBookmarks']) { // если нету закладок - создаю одну с шаблоном по умолчанию
chrome.bookmarks.create({
'parentId' : '1', // other
'title' : 'Puzzle15',
'url' : 'http://puzzle-15.blogspot.com/{"id":["100"],"pattern";["1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0"],"added_on":["02.01 19:86"],"count":["0"]}'
}, function(){
localStorage['FlagBookmarks']=1;
console.log("create bookmark for sync (id="+localStorage['IDbookmarks']+")")
})
}
else if (localStorage['FlagBookmarks']==1){ // проверяю, есть ли закладка (создана ли), если есть, то создаю объект JSON_bookmark и передаю в него шаблоны
console.log("bookmark exists");
var JSON_bookmark={};
chrome.bookmarks.getChildren('1', function(tree) {
tree.forEach(function( item, index) {
if (item.title=="Puzzle15"){
temp_bookmark = item.url;
temp=temp_bookmark.slice(30); // вырезаю лишний хлам с закладки: http://puzzle-15.blogspot.com/
JSON_bookmark=JSON.parse(unescape(temp)); // перевод из escape-последовательности в "нормальный" вид
}
})
// А дальше уже идёт работа с объектом JSON_bookmark, перенос его в web sql db и прочие радости
// ...
})
}
})
код не идеален, признаю, но он работоспособен и отражает основные механизмы синхронизации данных
Что осталось за бортом
Кроме всего прочего в проекте принимали участие web sql db (как это реализовано в браузере я писал раньше)
Так же используются уведомления простые и расширенные (HTML)
Если вы не используете браузер Chrome то можете просто посмотреть на всё это безобразие в следующем демо-видео
А если всё же захотели попробовать «размять мозги», милости прошу Puzzle15
Хронологию разработки можно глянуть тут http://puzzle-15.blogspot.com/
Рад буду ответить на возникшие вопросы, конечно же в перерывах между изучением своего нового робота (HTC WildFire).
Спасибо за внимание.
PS
мероприятие было замечательное, организаторы ребята молодцы, девушка — прелестна ;)
Жалко что нет в Минске своего gtug'a (но мы это исправим ;) )
upd.