Skip to content

GitLab

T
tangled
Commit a0211314 authored by bradnelson@google.com's avatar bradnelson@google.com
Browse files
Options

Adding development environment tutorial. 

First cut at the landing page.
Missing debugger walk thru.

BUG=None
TEST=None
R=sbc@chromium.org, binji@chromium.org

Review URL: https://codereview.chromium.org/345703002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@278510 0039d316-1c4b-4281-b951-d872f2087c98
parent 8a9d71c8
Hide whitespace changes
Inline Side-by-side
Showing with 363 additions and 2 deletions
native_client_sdk/doc_generated/io2014.html 0 → 100644
View file @ a0211314
{{+bindTo:partials.standard_nacl_article}}
<section id="building-a-nacl-app">
<h1 id="building-a-nacl-app">Building a NaCl App</h1>
<section id="in-the-browser">
<h2 id="in-the-browser">In the browser!</h2>
<p>Follow along with Brad Nelson&#8217;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/MvKEomoiKBA?rel=0" frameborder="0"></iframe><section id="installation">
<h3 id="installation">Installation</h3>
<p>The setup process currently requires several steps.
We&#8217;re working to reduce the number of steps in future releases.
As the process gets easier, we&#8217;ll update this page.</p>
<p>You currently need to:</p>
<ul class="small-gap">
<li><p class="first">Navigate to: chrome://flags and:</p>
<ul class="small-gap">
<li>Enable <strong>Native Client</strong>.</li>
<li>Enable <strong>Native Client GDB-based debugging</strong>. (For the debugger)</li>
</ul>
</li>
<li><p class="first">Install the NaCl in-browser debugger.</p>
<ul class="small-gap">
<li>Install the <a class="reference external" href="https://chrome.google.com/webstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd">NaCl Debugger Extension</a>.</li>
<li>Install <a class="reference external" href="https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe">GDB</a>.</li>
</ul>
</li>
<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>
<ul class="small-gap">
<li>First run is slow (as it downloads and installs packages).</li>
</ul>
</li>
</ul>
</section><section id="editor">
<h3 id="editor">Editor</h3>
<p>To follow along in this tutorial, you&#8217;ll need to use a text editor to modify
various files in our development environment.
There are currently two editor options, nano or vim.
Emacs is coming soon...
If you&#8217;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 &lt;filename&gt;
</pre>
<p>Here&#8217;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 &lt;filename&gt;
</pre>
<p>Here&#8217;s an online <a class="reference external" href="http://www.openvim.com/tutorial.html">vim tutorial</a>.</p>
</li>
</ul>
</section><section id="git-setup">
<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 setup your environment to with your identity.</p>
<p>You&#8217;ll need to add these lines to <cite>~/.bashrc</cite> to cause them to be invoked each
time you start the development environment.</p>
<pre class="prettyprint">
git config --global user.name &quot;John Doe&quot;
git config --global user.email johndoe&#64;example.com
</pre>
</section><section id="tour-follow-the-video">
<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 http://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>The resulting application combines the NEXE with some Javascript to load
the NaCl module, producing the complete application.</p>
<img alt="/native-client/images/voronoi2.png" src="/native-client/images/voronoi2.png" />
<p>Let&#8217;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 &quot;imported voronoi demo&quot;
</pre>
<p>Now, likes run <strong>make</strong> to compile our program (NOTE: Changed since video,
we&#8217;ve got Makefiles!):</p>
<pre class="prettyprint">
$ make
</pre>
<p>Oops, we get this error:</p>
<pre class="prettyprint">
voronoi.cc: In member function 'void Voronoi::Update()':
voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
</pre>
<p>We&#8217;ll need to start an editor to fix this.
You&#8217;ll want to change <em>hieght</em> to <em>height</em> on line 506.
Then rebuild:</p>
<pre class="prettyprint">
$ make
</pre>
<p>Lets look at the diff:</p>
<pre class="prettyprint">
$ git diff
</pre>
<p>And commit our fix:</p>
<pre class="prettyprint">
$ git commit -am &quot;fixed build error&quot;
</pre>
<p>To test our application, we run a local web server, written in python.
Run the server with this command (NOTE: Running through a Makefile
now):</p>
<pre class="prettyprint">
$ make serve
</pre>
<p>Then, navigate to <a class="reference external" href="http://localhost:5103/">http://localhost:5103/</a> to test the demo.</p>
<p>If you follow along with the demo video, you will discover the sample crashes
when you change the thread count.</p>
<p><em>Debugger walk-thru coming soon.</em></p>
<p>Once you&#8217;ve identified the problem. You&#8217;ll want to stop the test server.
Press enter to halt it.</p>
<p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em>value</em>.</p>
<p>Then rebuild:</p>
<pre class="prettyprint">
$ make
</pre>
<p>Check the diff and commit our fix:</p>
<pre class="prettyprint">
$ git diff
$ git commit -am &quot;fixed thread ui bug&quot;
</pre>
<p>Now look at your commit history:</p>
<pre class="prettyprint">
$ git log
</pre>
<p>Run the demo again. And everything now works:</p>
<pre class="prettyprint">
$ make serve
</pre>
</section></section></section>
{{/partials.standard_nacl_article}}
native_client_sdk/doc_generated/sitemap.html
View file @ a0211314
......@@ -211,6 +211,10 @@
<li class="toctree-l2"><a class="reference internal" href="/native-client/devguide/distributing.html#non-portable-native-client">Non-portable Native Client</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="/native-client/io2014.html">Building a NaCl App</a><ul class="small-gap">
<li class="toctree-l2"><a class="reference internal" href="/native-client/io2014.html#in-the-browser">In the browser!</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="/native-client/community/index.html">Community</a></li>
<li class="toctree-l1"><a class="reference internal" href="/native-client/community/application-gallery.html">Application Gallery</a></li>
<li class="toctree-l1"><a class="reference internal" href="/native-client/community/middleware.html">Middleware and Software Support</a></li>
......
native_client_sdk/src/doc/README
View file @ a0211314
......@@ -22,8 +22,10 @@ All output is written to native_client_sdk/doc_generated/...
How to build
------------
To build the docs you will needs sphinx installed (and sphinx-build in your
path). On debian/ubuntu this command is part of the ``python-sphinx`` package.
To build the docs you will need these debian/ubuntu packages:
* python-sphinx
* python-beautifulsoup
There are two primary make targets: ``chromesite`` and ``chromesite_rst``. The
``chromesite`` target will build all documentation, including the doxygen docs.
......
native_client_sdk/src/doc/io2014.rst 0 → 100644
View file @ a0211314
###################
Building a NaCl App
###################
In the browser!
---------------
Follow along with Brad Nelson's Google I/O 2014 talk.
Explore our new in-browser development environment and debugger.
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!
.. raw:: html
<iframe class="video" width="500" height="281"
src="//www.youtube.com/embed/MvKEomoiKBA?rel=0" frameborder="0"></iframe>
Installation
============
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.
You currently need to:
* Navigate to: chrome://flags and:
* Enable **Native Client**.
* Enable **Native Client GDB-based debugging**. (For the debugger)
* Install the NaCl in-browser debugger.
* Install the `NaCl Debugger Extension <https://chrome.google.com/webstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_.
* Install `GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe>`_.
* Install the `NaCl Development Environment <https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_.
* First run is slow (as it downloads and installs packages).
Editor
======
To follow along in this tutorial, 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.
Emacs is coming soon...
If you're unsure what to pick, nano is simpler to start with and has on-screen
help.
* You can open **nano** like this::
$ nano <filename>
Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_.
* You can open **vim** like this::
$ vim <filename>
Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_.
Git Setup
=========
This tutorial also uses a revision control program called
`git <http://en.wikipedia.org/wiki/Git_(software)>`_.
In order to commit to a git repository,
you need to setup your environment to with your identity.
You'll need to add these lines to `~/.bashrc` to cause them to be invoked each
time you start the development environment.
::
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
Tour (follow the video)
=======================
Create a working directory and go into it::
$ mkdir work
$ cd work
Download a zip file containing our sample::
$ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O
$ ls -l
Unzip the sample::
$ unzip voronoi.zip
Go into the sample and take a look at the files inside::
$ cd voronoi
$ ls
Our project combines voronoi.cc with several C++ libraries to produce a NEXE
(or Native Client Executable).
.. image:: /images/voronoi1.png
The resulting application combines the NEXE with some Javascript to load
the NaCl module, producing the complete application.
.. image:: /images/voronoi2.png
Let's use git (a revision control program) to track our changes.
First, create a new repository::
$ git init
Add everything here::
$ git add .
Then commit our starting state::
$ git commit -m "imported voronoi demo"
Now, likes run **make** to compile our program (NOTE: Changed since video,
we've got Makefiles!)::
$ make
Oops, we get this error::
voronoi.cc: In member function 'void Voronoi::Update()':
voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
We'll need to start an editor to fix this.
You'll want to change *hieght* to *height* on line 506.
Then rebuild::
$ make
Lets look at the diff::
$ git diff
And commit our fix::
$ git commit -am "fixed build error"
To test our application, we run a local web server, written in python.
Run the server with this command (NOTE: Running through a Makefile
now)::
$ make serve
Then, navigate to http://localhost:5103/ to test the demo.
If you follow along with the demo video, you will discover the sample crashes
when you change the thread count.
*Debugger walk-thru coming soon.*
Once you've identified the problem. You'll want to stop the test server.
Press enter to halt it.
Open your editor again, navigate to line 485 and change *valu* to *value*.
Then rebuild::
$ make
Check the diff and commit our fix::
$ git diff
$ git commit -am "fixed thread ui bug"
Now look at your commit history::
$ git log
Run the demo again. And everything now works::
$ make serve
native_client_sdk/src/doc/sitemap.rst
View file @ a0211314
......@@ -37,6 +37,7 @@ Contents:
devguide/coding/url-loading.rst
devguide/coding/view-focus-input-events.rst
devguide/distributing.rst
io2014.rst
community/index.rst
community/application-gallery.rst
community/middleware.rst
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment