1################### 2Building a NaCl App 3################### 4In the browser! 5--------------- 6 7Follow along with Brad Nelson's Google I/O 2014 talk. 8Explore our new in-browser development environment and debugger. 9 10Learn how easy it is to edit, build, and debug NaCl application 11all in your desktop web browser or on a Chromebook. 12Work either on-line or off-line! 13 14.. raw:: html 15 16 <iframe class="video" width="500" height="281" 17 src="//www.youtube.com/embed/MvKEomoiKBA?rel=0" frameborder="0"></iframe> 18 19 20Installation 21============ 22 23The setup process currently requires several steps. 24We're working to reduce the number of steps in future releases. 25As the process gets easier, we'll update this page. 26 27You currently need to: 28 29* Navigate to: chrome://flags and: 30 31 * Enable **Native Client**. 32 * Enable **Native Client GDB-based debugging**. (For the debugger) 33 34* Install the NaCl in-browser debugger. 35 36 * Install the `NaCl Debugger Extension <https://chrome.google.com/webstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_. 37 38 * Install `GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe>`_. 39 40* Install the `NaCl Development Environment <https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_. 41 42 * First run is slow (as it downloads and installs packages). 43 44 45Editor 46====== 47 48To follow along in this tutorial, you'll need to use a text editor to modify 49various files in our development environment. 50There are currently two editor options, nano or vim. 51Emacs is coming soon... 52If you're unsure what to pick, nano is simpler to start with and has on-screen 53help. 54 55* You can open **nano** like this:: 56 57 $ nano <filename> 58 59 Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_. 60 61* You can open **vim** like this:: 62 63 $ vim <filename> 64 65 Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_. 66 67 68Git Setup 69========= 70 71This tutorial also uses a revision control program called 72`git <http://en.wikipedia.org/wiki/Git_(software)>`_. 73In order to commit to a git repository, 74you need to setup your environment to with your identity. 75 76You'll need to add these lines to `~/.bashrc` to cause them to be invoked each 77time you start the development environment. 78:: 79 80 git config --global user.name "John Doe" 81 git config --global user.email johndoe@example.com 82 83Tour (follow the video) 84======================= 85 86Create a working directory and go into it:: 87 88 $ mkdir work 89 $ cd work 90 91Download a zip file containing our sample:: 92 93 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O 94 $ ls -l 95 96Unzip the sample:: 97 98 $ unzip voronoi.zip 99 100Go into the sample and take a look at the files inside:: 101 102 $ cd voronoi 103 $ ls 104 105Our project combines voronoi.cc with several C++ libraries to produce a NEXE 106(or Native Client Executable). 107 108.. image:: /images/voronoi1.png 109 110The resulting application combines the NEXE with some Javascript to load 111the NaCl module, producing the complete application. 112 113.. image:: /images/voronoi2.png 114 115Let's use git (a revision control program) to track our changes. 116 117First, create a new repository:: 118 119 $ git init 120 121Add everything here:: 122 123 $ git add . 124 125Then commit our starting state:: 126 127 $ git commit -m "imported voronoi demo" 128 129Now, likes run **make** to compile our program (NOTE: Changed since video, 130we've got Makefiles!):: 131 132 $ make 133 134Oops, we get this error:: 135 136 voronoi.cc: In member function 'void Voronoi::Update()': 137 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght' 138 139We'll need to start an editor to fix this. 140You'll want to change *hieght* to *height* on line 506. 141Then rebuild:: 142 143 $ make 144 145Lets look at the diff:: 146 147 $ git diff 148 149And commit our fix:: 150 151 $ git commit -am "fixed build error" 152 153To test our application, we run a local web server, written in python. 154Run the server with this command (NOTE: Running through a Makefile 155now):: 156 157 $ make serve 158 159Then, navigate to http://localhost:5103/ to test the demo. 160 161If you follow along with the demo video, you will discover the sample crashes 162when you change the thread count. 163 164*Debugger walk-thru coming soon.* 165 166Once you've identified the problem. You'll want to stop the test server. 167Press enter to halt it. 168 169Open your editor again, navigate to line 485 and change *valu* to *value*. 170 171Then rebuild:: 172 173 $ make 174 175Check the diff and commit our fix:: 176 177 $ git diff 178 $ git commit -am "fixed thread ui bug" 179 180Now look at your commit history:: 181 182 $ git log 183 184Run the demo again. And everything now works:: 185 186 $ make serve 187
