| OLD | NEW |
|---|
| (Empty) | |
| 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><sectio
n 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 debugge
r)</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/we
bstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd">NaCl Debugger Exte
nsion</a>.</li> |
| 29 <li>Install <a class="reference external" href="https://chrome.google.com/websto
re/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe">GDB</a>.</li> |
| 30 </ul> |
| 31 </li> |
| 32 <li><p class="first">Install the <a class="reference external" href="https://chr
ome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmne
pbcfkglfa">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 m
odify |
| 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-sc
reen |
| 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.sds
u.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/voronoi
1.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/voronoi
2.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 si
nce 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}} |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 345703002:
Adding development environment tutorial. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src
