第⼀一次拖拖拉拉做WebAPP就上⼿手

趙柏強bobchao@gmail.com

Appmaker

appmaker60mins

me = BobChaoMozillian & Creative CommonerProject Manager, KKTIX

appmaker60mins

1. create 2. publish 3. teach

WebAPP with Appmaker

your app and install with Firefox

with teaching kit on webmaker.org

appmaker60mins

appmaker60mins

Y U NO LAPTOP!?

Desktop is okay 👍

http://flic.kr/p/oDg6SZ

appmaker60mins

1.

appmaker60mins

2. bit.ly/ appmaker60mins

appmaker60mins

?

appmaker60mins

appmaker60mins

我們擁護能讓⼤大眾了解更多、做更多、也做得更好的 Web。

Mitchell Baker

Photo from https://www.mozilla.org/foundation/annualreport/2012/

appmaker60mins

appmaker60mins

webmaker.org

appmaker60mins

Appmaker Basic

appmaker60mins

apps.webmaker.org

appmaker60mins

Working Space

appmaker60mins

Bricks

appmaker60mins

Properties

appmaker60mins

Message Channels

appmaker60mins

DEMOhttps://acoustic-use-518.webmak.es/app

appmaker60mins

in the App…•Fireworks

•shoot fireworks

•set your own sound

•Button

•you can change the Label and Color

•Text Input with Button

•input text to use in other bricks.appmaker60mins

and what you will need later…•Counter

•Count Up / Down / Reset

•Set Value

•Send current count

appmaker60mins

appmaker60mins

3 mins play around

Challenge: Counter APPCounter, Button, and maybe more…

https://commons.wikimedia.org/wiki/File:Hand_tally_and_knitting_row_counter_007.jpg

appmaker60mins

Publish & Install

appmaker60mins

Login with Persona

Save & Publish

Firefox Firefox for Android

Firefox OS

Install

appmaker60mins

Firefox Firefox for Android

Firefox OS

Run

appmaker60mins

Google Chrome for Android

Google Chrome

DEMOhttps://thoughtless-bedroom-216.webmak.es/install

appmaker60mins

appmaker60mins

Teach!

appmaker60mins

Teach Appmaker

appmaker60mins

Ideation

Publish & Share(Edit)

Learn about Bricks Demo how you can use the bricks

Paper Prototyping

Create App

Logic & flow, Layout, Interaction…

Issue to solve

CC:BY-SA, https://www.flickr.com/photos/rcourtie/3499307295/sizes/z/ appmaker60mins

https://jess.makes.org/thimble/MTY3NTY4OTk4NA==/mobile-design-ideation-kit

appmaker60mins

more infohttps://github.com/mozilla-appmaker/appmaker/wiki/Teach-Appmaking

appmaker60mins

Not only about App

appmaker60mins

我們擁護能讓⼤大眾了解更多、做更多、也做得更好的 Web。

~ Mitchell Baker

Photo from https://www.mozilla.org/foundation/annualreport/2012/

appmaker60mins

appmaker60mins

Web is the platform

appmaker60mins

INTEROPERABLEKNOWABLE

OURSappmaker60mins

Recap

appmaker60mins

Web is the platform

appmaker60mins

bit.ly/ appmaker60mins

appmaker60mins

Next step…•Join Webmaker Taiwan forum（online）

http://groups.google.com.tw/d/forum/moztw-webmaker

•Create & Share your teach kit.

•Try it in your class, and share your experience.

Thanks!appmaker60mins

Next session: PopcornMaker