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