Fwd: Firefox os, Devtools and cordova

[Christian Heilmann]

For anyone who wants to create some FirefoxOS presentations, this is pure gold. Well done Jason.


----- Forwarded Message -----
From: "Jason Weathersby" <jweat...@mozilla.com>
To: "Robert Nyman" <rob...@mozilla.com>, "Christian Heilmann" <chei...@mozilla.com>
Sent: Monday, 20 October, 2014 4:13:34 PM
Subject: Firefox os, Devtools and cordova

Guys

Here is a set a materials and script for demoing tools

https://github.com/JasonWeathersby/FirefoxOSCordovaPresentation


Demos - Couple of setup notes
Make sure the flame is flashed with 180 base build and then flash the latest master production build. This should be 2.2. This is important if you plan on showing the new performance tool inside of webide connected to the phone.
The camera.html doc just uses an attached camera to point at the phone
Use the latest nightly for most of the demo.

1 - First I was going to open the webide and explain the features (ie package, hosted apps, editing etc)
2 - open Roberts boilerplate app (https://github.com/robnyman/Firefox-OS-Boilerplate-App) and connect to the phone
3 - Show page inspector modifying background color style, edit the text etc. Show new evt bubble feature.
4 - show console interacting with jsconnext. Mainly just do an alert.
5 - js debugger - explain blackboxing, prettify and set breakpoint on one of the buttons.
6 - press the button on the phone and watch the break. Explain the variables context and scope.
7 - Select the events tab and select clicks and explain vcr controls and play out the debug. Click another button and show that it breaks. play it out.
8 - next show in the webide that you can even interact with system apps - in order for this to work you need to select runtime-runtime info-request higher privileges from the top menu bar in the webide
9 - Debug the clock app change the background color and use a transform: rotate(90deg) on the clock face.
10 - demo some of the other tools:
set - Download https://github.com/JasonWeathersby/paddle
This game is currently setup to be a cordova app and this is the www directory of such an app but it can be converted to a stand alone html5 app by doing the following:
remove the index.js and add an onload event with the following code:
setupVars();
if (game.init())
game.start();
in the index.html remove:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

a - Run the game on the phone while in the webide and debug the app.
b - Select the performance tab (You will need to enable in the config of the tools)
c - select the reload button and then start the timer wait a second or two and then press again. This will display the new performance chart (There is a pic of this in the slide deck).
d - explain the frame rates and different colors. Also dig into to one of the higher percentages all the way to loop.js
e - switch over to the web audio editor, reload and touch the phone screen to do some paddles and you will see several nodes being added, click on the gain node and set it from .5 to .2 (Will back the background much quieter).
you can also set the loop to false in the audio source buffer.
f - select the canvas editor and reload, click the stop watch and explain the screenshots at the bottom and the color coded canvas commands.
g - you can also show the live memory model at this point but in the latest nightly this feature was not working.

That is all I planned on showing for the demoing the tools (minus the adapter). Optionally you can show the fan effect html file here https://github.com/JasonWeathersby/faneffect to show jQuery bubbles and the transform graphic for inspector changes. Currently this does not work in nightly but does work in aurora.
You can also show the shader editor pretty simply by using the following:

http://bjacob.github.io/webgl-tutorial/12-texture.html

There, you could start by tweaking these lines with different values:
const float ambientLight = 0.3;
const float diffuseLight = 0.7;
Or in this line,
vec3 grassColor = texture2D(grassTextureSampler, varyingTextureCoord).rgb;
You could swap the red and green color channels by changing it to
vec3 grassColor = texture2D(grassTextureSampler, varyingTextureCoord).grb;

Adapter Demo - I suggest making this piece a very quick and simple demo
(currently only support for inspector, console and js debugger - I also have had a lot of crashes here) I did not get debugger working but inspector and console worked great:
I planned on explaining the support matrix and setup procedure that is shown in the slides 70-74 and demoing my iphone and canary on the desktop. This requires you to have web inspector enabled on ios. Settings->Safari->Advanced->Web Inspector.
and you need to download and install the ios debug bridge: https://github.com/google/ios-webkit-debug-proxy open a terminal and type:

ios_webkit_debug_proxy

You can then connect from the webide as talked about in Dave's post. My plan was to make a few cosmetic changes to wikipedia.

Then show connecting to chrome desktop:

start canary on the terminal like:
open -a Google\ Chrome\ Canary --args --remote-debugging-port=9222 --disable-web-security
You should then be able to connect using the new icon in the firefox nightly browser.
Make the same changes to wikipedia or some simple site like youtube.

That is pretty much it. I am available to discuss and demonstrate and set all this up for you.

--
Jason Weathersby

[Carsten Sandtner]

Hi,

thanks for sharing. This stuff is awesome. I’ve planned a „A Firefox App in 45 minutes“ (using WebIDE) Live coding session for two Barcamps in my region (Germany). As I’m writing a script at the moment this is a perfect jump start.

Cheers,
Carsten

> _______________________________________________
> Evangelism mailing list
> Evang...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/evangelism