| {{+bindTo:partials.standard_nacl_article}} |
| |
| <section id="building-a-nacl-app"> |
| <span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>Building a NaCl App</h1> |
| <h2 id="in-the-browser">In the browser!</h2> |
| <p>Follow along with Brad Nelson’s Google I/O 2014 talk. |
| Explore our new in-browser development environment and debugger.</p> |
| <p>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!</p> |
| <iframe class="video" width="500" height="281" |
| src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><div><b><font color="#880000" style="font-size: 120%"> |
| NOTE: The NaCl Development Environment has changed since this video was made. |
| The instructions below no longer match the video. |
| </font></b></div><h3 id="our-web-based-tools">Our Web-based Tools</h3> |
| <p>These development tools are a <a class="reference external" href="nacldev">work in progress</a>. |
| At this point, they are a learning tool and demonstration of NaCl’s |
| flexibility, but are not the recommended tools for a production application. |
| In the future, that may change, but for the moment, |
| to develop a substantial application for Native Client / |
| Portable Native Client, |
| we recommend you use the |
| <a class="reference external" href="/native-client/sdk/download">Native Client SDK</a>.</p> |
| <b><font color="#880000"> |
| NOTE: The NaCl Development Environment is not yet stable. |
| Ideally, user data is preserved, but currently it can be lost during updates |
| or sporadically. We're working to resolve this. |
| </font></b><h3 id="installation">Installation</h3> |
| <p>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.</p> |
| <p>To install the development environment:</p> |
| <blockquote> |
| <div><ul class="small-gap"> |
| <li>Install the <a class="reference external" href="https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa">NaCl Development Environment</a>.</li> |
| <li><p class="first">Navigate to: chrome://flags and:</p> |
| <ul class="small-gap"> |
| <li>Enable <strong>Native Client</strong>.</li> |
| <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> |
| </ul> |
| </li> |
| <li>First run is slow (as it downloads and installs packages). Launch and allow |
| initial install to complete before first use.</li> |
| </ul> |
| </div></blockquote> |
| <h4 id="editing">Editing</h4> |
| <p>To follow along in this codelab, 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. |
| We have an Emacs port, but it is not yet available in the Dev Environment |
| (coming soon). |
| If you’re unsure what to pick, nano is simpler to start with and has on-screen |
| help.</p> |
| <ul class="small-gap"> |
| <li><p class="first">You can open <strong>nano</strong> like this:</p> |
| <pre class="prettyprint"> |
| $ nano <filename> |
| </pre> |
| <p>Here’s an online <a class="reference external" href="http://mintaka.sdsu.edu/reu/nano.html">nano tutorial</a>.</p> |
| </li> |
| <li><p class="first">You can open <strong>vim</strong> like this:</p> |
| <pre class="prettyprint"> |
| $ vim <filename> |
| </pre> |
| <p>Here’s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p> |
| </li> |
| </ul> |
| <h3 id="git-setup">Git Setup</h3> |
| <p>This tutorial also uses a revision control program called |
| <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)">git</a>. |
| In order to commit to a git repository, |
| you need to set up your identity.</p> |
| <p>Run these commands (with your info) to setup your <cite>~/.gitconfig</cite> |
| for use:</p> |
| <pre class="prettyprint"> |
| git config --global user.name "John Doe" |
| git config --global user.email johndoe@example.com |
| </pre> |
| <h3 id="tour-follow-the-video">Tour (follow the video)</h3> |
| <p>Create a working directory and go into it:</p> |
| <pre class="prettyprint"> |
| $ mkdir work |
| $ cd work |
| </pre> |
| <p>Download a zip file containing our sample:</p> |
| <pre class="prettyprint"> |
| $ curl https://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
| $ ls -l |
| </pre> |
| <p>Unzip the sample:</p> |
| <pre class="prettyprint"> |
| $ unzip voronoi.zip |
| </pre> |
| <p>Go into the sample and take a look at the files inside:</p> |
| <pre class="prettyprint"> |
| $ cd voronoi |
| $ ls |
| </pre> |
| <p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE |
| (or Native Client Executable).</p> |
| <img alt="/native-client/images/voronoi1.png" src="/native-client/images/voronoi1.png" /> |
| <p>Let’s use git (a revision control program) to track our changes.</p> |
| <p>First, create a new repository:</p> |
| <pre class="prettyprint"> |
| $ git init |
| </pre> |
| <p>Add everything here:</p> |
| <pre class="prettyprint"> |
| $ git add . |
| </pre> |
| <p>Then commit our starting state:</p> |
| <pre class="prettyprint"> |
| $ git commit -m "imported voronoi demo" |
| </pre> |
| <p>Now, run <strong>make voronoi</strong> to compile and run our program (NOTE: Changed since |
| video, we’ve got Makefiles!):</p> |
| <pre class="prettyprint"> |
| $ make voronoi |
| </pre> |
| <h3 id="thanks">Thanks</h3> |
| <p>Thanks for checking out our environment. |
| Things are rapidly changing and in the coming months you can expect to see |
| further improvements and filling out of our platform and library support.</p> |
| <p>Follow the status of the NaCl Dev Environment at <a class="reference internal" href="/native-client/nacldev.html"><em>this page</em></a>.</p> |
| </section> |
| |
| {{/partials.standard_nacl_article}} |