The story behind PF2014
http://pf2014.sinusgear.com
Juraj Michálek
Brno
Creativity is just connecting things.
- Jobs
Motivation
Create something new
Learn something new
Do something new
PF 2010
PF 2011
PF 2012

HTML5 Canvas
PF 2013

Webfonts
PF 2014?
Mobile
Touch
Apache Cordova
Install NodeJS
Install Cordova
Create project
Add platform
Build
Emulate - AVD Manager
Import to Idea
Correction of modules
Run/Emulate from Idea
Logs
Cordova project structure
● platforms
○ android
○ ios

● plugins
● www (edit code here)
Testing in browser
HTML5 Canvas - EaselJS

A Javascript library that makes working with the
HTML5 Canvas element easy.
Problems

performance: Caching demo - 2 FPS - Samsung Galaxy S
worse tooling than HTML :-(
Constellations
Tracing Paper tool
http://tp.sinusgear.com
Display stars
<i class="positionMarker fa fa-star"
data-index="{{$index}}"
ng-repeat="item in visibleStars" ng-style="
get...
http://fontawesome.io/
Use Font Awesome in Cordova
Drag the star
Angular-drag-drop, Angular-touch
angular.module('app', ['ngTouch',
'ngDragDrop'])
.controller('Constellation...
Drag’n’drop
jQuery-ui - animation
drag by mouse
No Canvas?

How to draw a line?!
Div + CSS3
.line {
width: 100px;
height: 2px;
transform: rotate(120deg);
background: lightyellow; ...
}
AngularJS dynamic style
<div class="line"
ng-repeat="line in visibleLines" ng-style="
getLineStyle(line)">
</div>
Chrome Developer Tools - F12
Google
Chrome
Canary
Mobile device emulation
Hups!

Drag’n’drop does not work on mobile!
Event mapping override
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemov...
Persisting game state
Angular local storage
Going mobile
https://play.google.com/apps/publish
Registration: 25$
- one time payment for developer
Signed APK
Prepare and publish

https://play.google.com/apps/publish
Review ~ 1 day
Going live
Analytics
http://developer.apple.com
Registration: 99$ / year
Approved bank account: ~2 days
Build: only Mac OS X
- requires: XCode
- sign by valid Apple certificate
Review: 5-7 days
http://www.windowsphone.com/
Registration: 19$/year
Build: WP8 requires Windows 8
https://developer.amazon.com/home.html
Registration: free
Review: ~1 day
PF 2014 summary
Web: 188 visits
Google Play: 25
Amazon: 6
Apple App Store: 0, still waiting for approval
Campaign channels...
Grab the source code :-)

https://github.com/georgik/pf2014
Share and enjoy
PF 2014: http://georgik.sinusgear.com/2013/12/28/pf-2014/
PF 2013: http://georgik.sinusgear.com/2012/12/22...
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
The story behind PF2014 - Cordova
Upcoming SlideShare
Loading in …5
×

The story behind PF2014 - Cordova

2,845 views

Published on

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

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,845
On SlideShare
0
From Embeds
0
Number of Embeds
1,841
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The story behind PF2014 - Cordova

  1. 1. The story behind PF2014 http://pf2014.sinusgear.com Juraj Michálek Brno
  2. 2. Creativity is just connecting things. - Jobs
  3. 3. Motivation Create something new Learn something new Do something new
  4. 4. PF 2010
  5. 5. PF 2011
  6. 6. PF 2012 HTML5 Canvas
  7. 7. PF 2013 Webfonts
  8. 8. PF 2014? Mobile Touch
  9. 9. Apache Cordova
  10. 10. Install NodeJS
  11. 11. Install Cordova
  12. 12. Create project
  13. 13. Add platform
  14. 14. Build
  15. 15. Emulate - AVD Manager
  16. 16. Import to Idea
  17. 17. Correction of modules
  18. 18. Run/Emulate from Idea
  19. 19. Logs
  20. 20. Cordova project structure ● platforms ○ android ○ ios ● plugins ● www (edit code here)
  21. 21. Testing in browser
  22. 22. HTML5 Canvas - EaselJS A Javascript library that makes working with the HTML5 Canvas element easy.
  23. 23. Problems performance: Caching demo - 2 FPS - Samsung Galaxy S worse tooling than HTML :-(
  24. 24. Constellations
  25. 25. Tracing Paper tool http://tp.sinusgear.com
  26. 26. Display stars <i class="positionMarker fa fa-star" data-index="{{$index}}" ng-repeat="item in visibleStars" ng-style=" getStarStyle(item)"> </i>
  27. 27. http://fontawesome.io/
  28. 28. Use Font Awesome in Cordova
  29. 29. Drag the star Angular-drag-drop, Angular-touch angular.module('app', ['ngTouch', 'ngDragDrop']) .controller('ConstellationController',...
  30. 30. Drag’n’drop jQuery-ui - animation drag by mouse
  31. 31. No Canvas? How to draw a line?!
  32. 32. Div + CSS3 .line { width: 100px; height: 2px; transform: rotate(120deg); background: lightyellow; ... }
  33. 33. AngularJS dynamic style <div class="line" ng-repeat="line in visibleLines" ng-style=" getLineStyle(line)"> </div>
  34. 34. Chrome Developer Tools - F12
  35. 35. Google Chrome Canary
  36. 36. Mobile device emulation
  37. 37. Hups! Drag’n’drop does not work on mobile!
  38. 38. Event mapping override switch(event.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type="mousemove"; break; case "touchend": type="mouseup"; break; default: return; }
  39. 39. Persisting game state
  40. 40. Angular local storage
  41. 41. Going mobile
  42. 42. https://play.google.com/apps/publish Registration: 25$ - one time payment for developer
  43. 43. Signed APK
  44. 44. Prepare and publish https://play.google.com/apps/publish
  45. 45. Review ~ 1 day
  46. 46. Going live
  47. 47. Analytics
  48. 48. http://developer.apple.com Registration: 99$ / year Approved bank account: ~2 days
  49. 49. Build: only Mac OS X - requires: XCode - sign by valid Apple certificate
  50. 50. Review: 5-7 days
  51. 51. http://www.windowsphone.com/ Registration: 19$/year Build: WP8 requires Windows 8
  52. 52. https://developer.amazon.com/home.html Registration: free Review: ~1 day
  53. 53. PF 2014 summary Web: 188 visits Google Play: 25 Amazon: 6 Apple App Store: 0, still waiting for approval Campaign channels: Mail, Skype, Google+
  54. 54. Grab the source code :-) https://github.com/georgik/pf2014
  55. 55. 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/

×