Pull to refresh

App Puzzle15. Дорога в Питер за android-фоном

Reading time 3 min
Views 437
image

Совсем недавно в славном городе на Неве проводился конкурс ребятами из местного GTUG, анонс конкурса ютится в этом топике. О самом конкурсе, проведении его и результатах будет подробно написано в отчёте от arkady112. Я же хочу рассказать немного о приложении Puzzle15, которое получило одну из 3х наминаций и вместе с ней HTC WildFire.
Под катом небольшой обзор и пример реализации некоторых функций…

Как, надеюсь, понятно из названия Puzzle15 — это всеми нами любимые пятнашки, так сказать «портированные» с игровой полки в браузер chrome.
К основным особенностям приложения я отнесу:
• game for fun
• социальность
• синхронизация данных

Game for fun


Что касается первой особенности, то тут немного сложнее чем кажется. Да, игры это хорошо, это весело. Конечно, пазлы, как и другие интеллектуальные игры, помогают нашему мозгу, если так можно выразится, «не заплыть жирком». Но за всем этим развлечением стоит забавный факт- ровно половина комбинаций костяшек просто-напросто не может быть собранной а это половина от 15!

Социальность


Собирать пятнашки можно бесконечно долго, причём одному, а это не всегда весело! На помощь к нам приходит в этом случае twitter.
image

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

А если пройтись по хэшу #Puzzle15, то можно будет загрузить разнообразные шаблоны других пользователей себе.

Синхронизация данных


Это, пожалуй, самое интересное было для меня в процессе создания приложения, да и отличало моё приложение от остальных представленных на демо фесте.
image

Уточню, синхронизация не приложения, а именно данных, используемых в нём.
Так как готового решения данной проблемы я не нашёл (может плохо искал), то был придуман «самокатик».
Использовал умение браузера самостоятельно синхронизировать закладки. Моей задачей было создать закладку, записать туда необходимые данные (писал в json) и по некоторым действиям в приложении обновлять её.
30.10

Остальное делает уже сам браузер (синхронизирует в ваши G-docs).
image


Ключевые моменты по работе с закладками в приложении
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 (как это реализовано в браузере я писал раньше)
image

Так же используются уведомления простые и расширенные (HTML)
image


Если вы не используете браузер Chrome то можете просто посмотреть на всё это безобразие в следующем демо-видео

А если всё же захотели попробовать «размять мозги», милости прошу Puzzle15

Хронологию разработки можно глянуть тут http://puzzle-15.blogspot.com/
Рад буду ответить на возникшие вопросы, конечно же в перерывах между изучением своего нового робота (HTC WildFire).
Спасибо за внимание.
PS
мероприятие было замечательное, организаторы ребята молодцы, девушка — прелестна ;)
Жалко что нет в Минске своего gtug'a (но мы это исправим ;) )
upd.
Tags:
Hubs:
+6
Comments 7
Comments Comments 7

Articles