make something real for firefox os with mozilla app templates

45
1 Wednesday, 12 September 12

Upload: piotr-zalewa

Post on 13-May-2015

1.264 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Make something real  for Firefox OS with Mozilla app templates

1Wednesday, 12 September 12

Page 2: Make something real  for Firefox OS with Mozilla app templates

OHAI

2Wednesday, 12 September 12

Page 3: Make something real  for Firefox OS with Mozilla app templates

@TOFUMATT AND @ZALUN

3Wednesday, 12 September 12

Page 4: Make something real  for Firefox OS with Mozilla app templates

MAKE SOMETHING REAL FOR FIREFOX OS WITH

MOZILLA APP TEMPLATES

4Wednesday, 12 September 12

Page 5: Make something real  for Firefox OS with Mozilla app templates

FIRST,we’ll need a phone

5Wednesday, 12 September 12

Page 6: Make something real  for Firefox OS with Mozilla app templates

EMULATING FIREFOX OS

•Download and install B2G emulator (95MB)

•Checkout gaia project (200MB)

•Create profile (50MB)

•Run $> b2g -profile /Users/{user}/gaia/profile

6Wednesday, 12 September 12

Page 7: Make something real  for Firefox OS with Mozilla app templates

B2G + GAIA

7Wednesday, 12 September 12

Page 8: Make something real  for Firefox OS with Mozilla app templates

STANDARD WEBDEV TOOLSMAKE USE OF THEM

8Wednesday, 12 September 12

Page 9: Make something real  for Firefox OS with Mozilla app templates

INSPECTOR

9Wednesday, 12 September 12

Page 10: Make something real  for Firefox OS with Mozilla app templates

3D VIEW

10Wednesday, 12 September 12

Page 11: Make something real  for Firefox OS with Mozilla app templates

RESPONSIVE VIEW

11Wednesday, 12 September 12

Page 12: Make something real  for Firefox OS with Mozilla app templates

WEB CONSOLE

12Wednesday, 12 September 12

Page 13: Make something real  for Firefox OS with Mozilla app templates

JSFIDDLE DRAFT FEATURE

13Wednesday, 12 September 12

Page 14: Make something real  for Firefox OS with Mozilla app templates

X-TAGS: BUILDING BLOCKS

14Wednesday, 12 September 12

Page 15: Make something real  for Firefox OS with Mozilla app templates

X-TAGS

• accordion • actionbar • alert-popup • autosuggest • date-time-picker • dialog-prompt • dialog-toast • dragbox • dropdown-menu

• flipbox • grid-list • index-scroller• list-view• map• mediaquery• modal • overlay • pager • panel

• select-list• shiftbox• slidebox• slider• tabbox• time-picker-analog• toggle-switch• toggler • search-list

15Wednesday, 12 September 12

Page 16: Make something real  for Firefox OS with Mozilla app templates

MANY OTHER TOOLS...

16Wednesday, 12 September 12

Page 17: Make something real  for Firefox OS with Mozilla app templates

PRE-APP SUBMISSION

•Write your app

•Create Manifestcheck it on http://appmanifest.org

•Host the app somewhere for github $> volo ghdeploy

17Wednesday, 12 September 12

Page 18: Make something real  for Firefox OS with Mozilla app templates

http://marketplace.mozilla.org/developers

18Wednesday, 12 September 12

Page 19: Make something real  for Firefox OS with Mozilla app templates

IN STORE!

19Wednesday, 12 September 12

Page 20: Make something real  for Firefox OS with Mozilla app templates

OK, SO HOW DO I BUILD IT?!

20Wednesday, 12 September 12

Page 21: Make something real  for Firefox OS with Mozilla app templates

WE’VE THOUGHT OF THAT

21Wednesday, 12 September 12

Page 22: Make something real  for Firefox OS with Mozilla app templates

22Wednesday, 12 September 12

Page 23: Make something real  for Firefox OS with Mozilla app templates

MANY MOVING PARTS

23Wednesday, 12 September 12

Page 24: Make something real  for Firefox OS with Mozilla app templates

•Appcache and web app manifests

•Asset management

•Responsive design

•Server to host an app

•Gaming template

•Payment API

• iOS Compatibility

•Modular JavaScript

•App-specific libraries

•Kitchen sink?

24Wednesday, 12 September 12

Page 25: Make something real  for Firefox OS with Mozilla app templates

25Wednesday, 12 September 12

Page 26: Make something real  for Firefox OS with Mozilla app templates

APP TEMPLATES

26Wednesday, 12 September 12

Page 27: Make something real  for Firefox OS with Mozilla app templates

•Standard App Stub

•2D Game Template

•Server Template

27Wednesday, 12 September 12

Page 28: Make something real  for Firefox OS with Mozilla app templates

•Appcache (App works offline)

• iOS, FirefoxOS, etc.

•Responsive Design

•Works with volo

APP STUB

28Wednesday, 12 September 12

Page 29: Make something real  for Firefox OS with Mozilla app templates

•Animation Loop

•Canvas + JS

•Desktop + Mobile

•Keyboard, Mouse, and Gamepad

WEBGAMESTUB

29Wednesday, 12 September 12

Page 30: Make something real  for Firefox OS with Mozilla app templates

•node.js + express

•Common use cases

•Deploy on Heroku

• Includes App Stub

SUTTHISAN สุทธิสาร

30Wednesday, 12 September 12

Page 31: Make something real  for Firefox OS with Mozilla app templates

Web app package and deploy management

VOLO

31Wednesday, 12 September 12

Page 32: Make something real  for Firefox OS with Mozilla app templates

It does all this awesome stuff OMG!!!1♥♥♥VOLO

32Wednesday, 12 September 12

Page 33: Make something real  for Firefox OS with Mozilla app templates

ONE-STEP DEPLOY

33Wednesday, 12 September 12

Page 34: Make something real  for Firefox OS with Mozilla app templates

COMPRESS ASSETS

34Wednesday, 12 September 12

Page 35: Make something real  for Firefox OS with Mozilla app templates

CREATE MANIFESTS

35Wednesday, 12 September 12

Page 36: Make something real  for Firefox OS with Mozilla app templates

SHOW ME THE MONEY

36Wednesday, 12 September 12

Page 37: Make something real  for Firefox OS with Mozilla app templates

BORING

37Wednesday, 12 September 12

Page 38: Make something real  for Firefox OS with Mozilla app templates

MUCH COOLER

38Wednesday, 12 September 12

Page 39: Make something real  for Firefox OS with Mozilla app templates

NOT JUST GAMES

39Wednesday, 12 September 12

Page 40: Make something real  for Firefox OS with Mozilla app templates

BUILT INA DAY

40Wednesday, 12 September 12

Page 41: Make something real  for Firefox OS with Mozilla app templates

TELEPONGTwo contributors in one afternoon

41Wednesday, 12 September 12

Page 42: Make something real  for Firefox OS with Mozilla app templates

YOU CAN DO THIS

42Wednesday, 12 September 12

Page 43: Make something real  for Firefox OS with Mozilla app templates

NOW GO MAKEAWESOME APPS!

43Wednesday, 12 September 12

Page 44: Make something real  for Firefox OS with Mozilla app templates

QUESTIONS?

44Wednesday, 12 September 12

Page 45: Make something real  for Firefox OS with Mozilla app templates

THANKS!http://tinyurl.com/mozcamp-apps

45Wednesday, 12 September 12