Adding development environment tutorial.

native_client_sdk/src/doc/io2014.rst

+###################
+Building a NaCl App
+###################
+In the browser!
+---------------
+
+Follow along with Brad Nelson's Google I/O 2014 talk.
+Explore our new in-browser development environment and debugger.
+
+Learn how easy it is to edit, build, and debug NaCl application
+all in your desktop web browser or on a Chromebook.
+Work either on-line or off-line!
+
+.. raw:: html
+
+  <iframe class="video" width="640" height="360"
+  src="//www.youtube.com/embed/MvKEomoiKBA?rel=0" frameborder="0"></iframe>
+
+
+Installation
+============
+
+The setup process currently requires several steps.
+We're working to reduce the number of steps in future releases.
+As the process gets easier, we'll update this page.
+
+You currently need to:
+
+* Navigate to: chrome://flags and:
+
+  * Enable **Native Client**.
+  * Enable **Native Client GDB-based debugging**.  (For the debugger)
+
+* Install the NaCl in-browser debugger.
+
+  * Install the `NaCl Debugger <https://chrome.google.com/webstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_.
+
+  * Install `GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe>`_.
+
+* Install the `NaCl Development Environment <https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_.
+
+  * First run is slow (as it downloads and installs packages).
+
+
+Editor
+======
+
+To follow along in this tutorial, you'll need to use a text editor to modify
+various files in our development environment.
+There are currently two editor options, nano or vim.
+Emacs is coming soon...
+If you're unsure what to pick, nano is simpler to start with and has on-screen
+help.
+
+* You can open **nano** like this::
+
+    $ nano <filename>
+
+  Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_.
+
+* You can open **vim** like this::
+
+    $ vim <filename>
+
+  Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_.
+
+
+Git Setup
+=========
+
+This tutorial also uses a revision control program called
+`git <http://en.wikipedia.org/wiki/Git_(software)>`_.
+In order to commit to a git repository,
+you need to setup your environment to with your identity.
+
+You'll need to add these lines to `~/.bashrc` to cause them to be invoked each
+time you start the development environment.
+::
+
+  git config --global user.name "John Doe"
+  git config --global user.email johndoe@example.com
+
+Tour (follow the video)
+=======================
+
+Create a working directory and go into it::
+
+  $ mkdir work
+  $ cd work
+
+Download a zip file containing our sample::
+
+  $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O
+  $ ls -l
+
+Unzip the sample::
+
+  $ unzip voronoi.zip
+
+Go into the sample and take a look at the files inside::
+
+  $ cd voronoi
+  $ ls
+
+Our project combines voronoi.cc with several C++ libraries to produce a NEXE
+(or Native Client Executable).
+
+.. image:: /images/voronoi1.png
+
+The resulting application combines the NEXE with some Javascript to load
+the NaCl module, producing the complete application.
+
+.. image:: /images/voronoi2.png
+
+Let's use git (a revision control program) to track our changes.
+
+First, create a new repository::
+
+  $ git init
+
+Add everything here::
+
+  $ git add .
+
+Then commit our starting state::
+
+  $ git commit -m "imported voronoi demo"
+
+
+Now, lets invoke the bash build script to compile our program::
+
+  $ ./build.sh
+
+Oops, we get this error::
+
+  voronoi.cc: In member function 'void Voronoi::Update()':
+  voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
+
+We'll need to start an editor to fix this.
+You'll want to change *hieght* to *height* on line 506.
+Then rebuild::
+
+  $ bash build.sh
+
+Lets look at the diff::
+
+  $ git diff
+
+And commit our fix::
+
+  $ git commit -am "fixed build error"
+
+We can now run the demo with this command::
+
+  $ python ${PWD}/demo.py
+
+Navigate to http://localhost:5103/ to test the demo.
+
+If you follow along with the demo video, you will discover the sample crashes
+when you change the thread count.
+
+*Debugger walk-thru coming soon.*
+
+Once you've identified the problem. You'll want to stop the test server.
+Press enter to halt it.
+
+Open your editor again, navigate to line 485 and change *valu* to *value*.
+
+Then rebuild::
+
+  $ bash build.sh
+

[Sam Clegg, 2014/06/19 22:11:17]

Remove extra newline.

+
+Check the diff and commit our fix::
+
+  $ git diff
+  $ git commit -am "fixed thread ui bug"
+
+Now look at your commit history::
+
+  $ git log
+
+Run the demo again. And everything now works::
+
+  $ python ${PWD}/demo.py