OLD | NEW |
(Empty) | |
| 1 ################### |
| 2 Building a NaCl App |
| 3 ################### |
| 4 In the browser! |
| 5 --------------- |
| 6 |
| 7 Follow along with Brad Nelson's Google I/O 2014 talk. |
| 8 Explore our new in-browser development environment and debugger. |
| 9 |
| 10 Learn how easy it is to edit, build, and debug NaCl application |
| 11 all in your desktop web browser or on a Chromebook. |
| 12 Work 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 |
| 20 Installation |
| 21 ============ |
| 22 |
| 23 The setup process currently requires several steps. |
| 24 We're working to reduce the number of steps in future releases. |
| 25 As the process gets easier, we'll update this page. |
| 26 |
| 27 You 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/det
ail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_. |
| 37 |
| 38 * Install `GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohicei
bmdleokniplmbahe>`_. |
| 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 |
| 45 Editor |
| 46 ====== |
| 47 |
| 48 To follow along in this tutorial, you'll need to use a text editor to modify |
| 49 various files in our development environment. |
| 50 There are currently two editor options, nano or vim. |
| 51 Emacs is coming soon... |
| 52 If you're unsure what to pick, nano is simpler to start with and has on-screen |
| 53 help. |
| 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 |
| 68 Git Setup |
| 69 ========= |
| 70 |
| 71 This tutorial also uses a revision control program called |
| 72 `git <http://en.wikipedia.org/wiki/Git_(software)>`_. |
| 73 In order to commit to a git repository, |
| 74 you need to setup your environment to with your identity. |
| 75 |
| 76 You'll need to add these lines to `~/.bashrc` to cause them to be invoked each |
| 77 time 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 |
| 83 Tour (follow the video) |
| 84 ======================= |
| 85 |
| 86 Create a working directory and go into it:: |
| 87 |
| 88 $ mkdir work |
| 89 $ cd work |
| 90 |
| 91 Download a zip file containing our sample:: |
| 92 |
| 93 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
| 94 $ ls -l |
| 95 |
| 96 Unzip the sample:: |
| 97 |
| 98 $ unzip voronoi.zip |
| 99 |
| 100 Go into the sample and take a look at the files inside:: |
| 101 |
| 102 $ cd voronoi |
| 103 $ ls |
| 104 |
| 105 Our project combines voronoi.cc with several C++ libraries to produce a NEXE |
| 106 (or Native Client Executable). |
| 107 |
| 108 .. image:: /images/voronoi1.png |
| 109 |
| 110 The resulting application combines the NEXE with some Javascript to load |
| 111 the NaCl module, producing the complete application. |
| 112 |
| 113 .. image:: /images/voronoi2.png |
| 114 |
| 115 Let's use git (a revision control program) to track our changes. |
| 116 |
| 117 First, create a new repository:: |
| 118 |
| 119 $ git init |
| 120 |
| 121 Add everything here:: |
| 122 |
| 123 $ git add . |
| 124 |
| 125 Then commit our starting state:: |
| 126 |
| 127 $ git commit -m "imported voronoi demo" |
| 128 |
| 129 Now, likes run **make** to compile our program (NOTE: Changed since video, |
| 130 we've got Makefiles!):: |
| 131 |
| 132 $ make |
| 133 |
| 134 Oops, 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 |
| 139 We'll need to start an editor to fix this. |
| 140 You'll want to change *hieght* to *height* on line 506. |
| 141 Then rebuild:: |
| 142 |
| 143 $ make |
| 144 |
| 145 Lets look at the diff:: |
| 146 |
| 147 $ git diff |
| 148 |
| 149 And commit our fix:: |
| 150 |
| 151 $ git commit -am "fixed build error" |
| 152 |
| 153 To test our application, we run a local web server, written in python. |
| 154 Run the server with this command (NOTE: Running through a Makefile |
| 155 now):: |
| 156 |
| 157 $ make serve |
| 158 |
| 159 Then, navigate to http://localhost:5103/ to test the demo. |
| 160 |
| 161 If you follow along with the demo video, you will discover the sample crashes |
| 162 when you change the thread count. |
| 163 |
| 164 *Debugger walk-thru coming soon.* |
| 165 |
| 166 Once you've identified the problem. You'll want to stop the test server. |
| 167 Press enter to halt it. |
| 168 |
| 169 Open your editor again, navigate to line 485 and change *valu* to *value*. |
| 170 |
| 171 Then rebuild:: |
| 172 |
| 173 $ make |
| 174 |
| 175 Check the diff and commit our fix:: |
| 176 |
| 177 $ git diff |
| 178 $ git commit -am "fixed thread ui bug" |
| 179 |
| 180 Now look at your commit history:: |
| 181 |
| 182 $ git log |
| 183 |
| 184 Run the demo again. And everything now works:: |
| 185 |
| 186 $ make serve |
OLD | NEW |