The story behind building application PF2014 based on Cordova with AngularJS, jQuery without Canvas. Short info about app markets like Google Play, Apple App Store, Amazon App Store and Windows Phone store

1. The story behind PF2014
http://pf2014.sinusgear.com
Juraj Michálek
Brno

2. Creativity is just connecting things.
- Jobs

4. Motivation
Create something new
Learn something new
Do something new

5. PF 2010

6. PF 2011

7. PF 2012
HTML5 Canvas

8. PF 2013
Webfonts

9. PF 2014?
Mobile
Touch

10. Apache Cordova

13. Install NodeJS

14. Install Cordova

15. Create project

16. Add platform

17. Build

18. Emulate - AVD Manager

19. Import to Idea

20. Correction of modules

21. Run/Emulate from Idea

22. Logs

23. Cordova project structure
● platforms
○ android
○ ios
● plugins
● www (edit code here)

24. Testing in browser

25. HTML5 Canvas - EaselJS
A Javascript library that makes working with the
HTML5 Canvas element easy.

26. Problems
performance: Caching demo - 2 FPS - Samsung Galaxy S
worse tooling than HTML :-(

27. Constellations

28. Tracing Paper tool
http://tp.sinusgear.com

29. Display stars
<i class="positionMarker fa fa-star"
data-index="{{$index}}"
ng-repeat="item in visibleStars" ng-style="
getStarStyle(item)">
</i>

30. http://fontawesome.io/

31. Use Font Awesome in Cordova

32. Drag the star
Angular-drag-drop, Angular-touch
angular.module('app', ['ngTouch',
'ngDragDrop'])
.controller('ConstellationController',...

33. Drag’n’drop
jQuery-ui - animation
drag by mouse

34. No Canvas?
How to draw a line?!

35. Div + CSS3
.line {
width: 100px;
height: 2px;
transform: rotate(120deg);
background: lightyellow; ...
}

36. AngularJS dynamic style
<div class="line"
ng-repeat="line in visibleLines" ng-style="
getLineStyle(line)">
</div>

37. Chrome Developer Tools - F12

38. Google
Chrome
Canary

39. Mobile device emulation

40. Hups!
Drag’n’drop does not work on mobile!

41. Event mapping override
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}

42. Persisting game state

43. Angular local storage

44. Going mobile

45. https://play.google.com/apps/publish
Registration: 25$
- one time payment for developer

46. Signed APK

47. Prepare and publish
https://play.google.com/apps/publish

48. Review ~ 1 day

49. Going live

50. Analytics

51. http://developer.apple.com
Registration: 99$ / year
Approved bank account: ~2 days

54. Build: only Mac OS X
- requires: XCode
- sign by valid Apple certificate

55. Review: 5-7 days

56. http://www.windowsphone.com/
Registration: 19$/year
Build: WP8 requires Windows 8

57. https://developer.amazon.com/home.html
Registration: free
Review: ~1 day

59. PF 2014 summary
Web: 188 visits
Google Play: 25
Amazon: 6
Apple App Store: 0, still waiting for approval
Campaign channels: Mail, Skype, Google+

60. Grab the source code :-)
https://github.com/georgik/pf2014

61. Share and enjoy
PF 2014: http://georgik.sinusgear.com/2013/12/28/pf-2014/
PF 2013: http://georgik.sinusgear.com/2012/12/22/pf-2013/
PF 2012: http://georgik.sinusgear.com/2011/12/31/pf-2012/
PF 2011: http://georgik.sinusgear.com/2010/12/23/pf2011/
PF 2010: http://georgik.sinusgear.com/2009/12/26/pf-2010/