1. Rovinj, 23. – 26. travnja 2012.

2. Hibridne mobilne aplikacije
na WP7
Matija Šmalcelj
PET MINUTA d.o.o.

3. Sponzori

4. Isključite zvuk
telefona

5. Prije nego počnemo...
Anketa!
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

6. Zašto mobilna aplikacija, a ne mobilni web?
vs.
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

7. Bolje
korisničko Home tile
iskustvo ikona Offline rad
Marketplace Prodaja Više su
objava aplikacije korištene Bolji CTR
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

8. Što nam treba?
(nije uvjet, ali dobro dođe)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

9. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

10. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

11. PhoneGap arhitektura
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

12. Situacija prije Mango?
• Neadekvatan internet preglednik
(Html5, CSS3, pohrana
podataka, geolokacija)
• Nije bilo PhoneGapa
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

13. Demo
Instalacija PhoneGapa i osnovna
aplikacija

14. Biblioteke koje podržavaju WP7
•
A ostali?
•
• jQTouch, Kendo UI, iUI, DHTMLX Touch, ...
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

15. Prilagodba za Windows Phone
• Samo neanimirani translate 2D
• webkitAnimationEnd
• Touch evenata nema, a mouse eventi su čudni
1.
2.
3. mouseDown
mouseMove (click ako nema pokreta)
mouseUp
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

16. Demo
jQuery Mobile

17. Scrollanje
• Nema position: fixed;
• Nema scrollanja pomoću CSS3
• Ali zato ima
overflow-x: hidden;
overflow-y: scroll;
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

18. Zoomiranje cijele stranice
• Stranica se uveća nakon dvostrukog dodira
(double tap)
<meta name="viewport" content="width=device-width,
height=device-height, initial-scale=1.0,
user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
• Rješenje – nativni PhoneGap plugin
window.external.Notify("noScroll");
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
http://www.scottlogic.co.uk/blog/colin/2011/11/suppressing-zoom-
and-scroll-interactions-in-the-windows-phone-7-browser-control/

19. Live tiles (1)
• Inovacija na Windows Phone
• Obogaćuju korisničko iskustvo
• Kroz PhoneGap plugin
navigator.plugins.liveTiles.updateAppTile(
success,
fail,
{
title: 'Naslov naprijed',
image:'Images/novaNaprije.png',
count: 5,
backTitle: 'Naslov iza',
backContent:'Poruka iza',
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
backImage : 'Images/novaIza.png'
});

20. Live tiles (2)
• Podržani su i dodatni tileovi
navigator.plugins.liveTiles.createSecondaryTile(...);
navigator.plugins.liveTiles.updateSecondaryTile(...);
navigator.plugins.liveTiles.deleteSecondaryTile(...)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
https://github.com/purplecabbage/phonegap-
plugins/tree/master/WindowsPhone/LiveTiles

21. Demo
Jednostavna hibridna aplikacija

22. Prije Marketplacea
• Back gumb mora očekivano raditi
• Oporavak od nedostatka internet veze
• Povratak iz suspendiranog stanja
• Aplikacija mora biti smislena
• Ne smije se rušiti
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

23. Dragi djedice... ilitiga lista želja
• Touch eventi
• Scrollanje stranice
• Zoomiranje stranice
• Označavanje teksta
• Highlight elemenata nakon akcije
• Dodati inercijsko scrollanje
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

24. Zaključak
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

25. Pitanja