summaryrefslogtreecommitdiffstats
path: root/native_client_sdk/src/doc/io2014.rst
blob: ec083a895ea2971dbf04e7cb791659e8d0c80c0a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
.. _io2014:

###################
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/OzNuzBDEWzk?rel=0" frameborder="0"></iframe>

.. include:: nacldev/web_tools_note.inc

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.

To install the development environment:

  * Install the `NaCl Development Environment <https://chrome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_.

  * Navigate to: chrome://flags and:

    * Enable **Native Client**.
    * Restart your browser by clicking **Relaunch Now**.

  * First run is slow (as it downloads and installs packages). Launch and allow
    initial install to complete before first use.

When initially experimenting with the development environment,
at this time, we recommend you run it without the debugger activated.
Once you're ready to apply the debugger, follow these steps:

  * Install a usable version of
    `Chrome Linux (M36+, Dev or Beta channel) <http://www.chromium.org/getting-involved/dev-channel>`_.
  * Install the `Native Client Debugger Extension <https://chrome.google.com/webstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_.
  * Install `Native Client GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe>`_.

  * Navigate to: chrome://flags and:

    * Enable **Native Client GDB-based debugging**.
    * Restart your browser by clicking **Relaunch Now**.

  * NOTE: If you experience unexplained hangs, disable GDB-based debugging
    temporarily and try again.


.. include:: nacldev/editing.inc

.. include:: nacldev/git.inc


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 -j10

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.

Debugging
=========

If you haven't installed the debugger at this point, skip to the next section.

At this point, if you have the debugger installed, you should be able to open
the developer console and view the resulting crash.

You can see a backtrace with::

  bt

You can see active threads with::

  info threads

Currently, symbol information is limited for GLibC executables.
We have improvements coming that will improve the experience further.

For newlib and PNaCl executables you can retrieve full symbols information
with::

  remote get irt irt
  add-symbol-file irt
  remote get nexe nexe
  add-symbol-file nexe

Fix it up
=========

Return to the development environment and stop the test server,
by pressing Ctrl-C.

Open your editor again, navigate to line 485 and change *valu* to *value*.

Then rebuild::

  $ make -j10

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

Thanks
======

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.

Follow the status of the NaCl Dev Environment at :doc:`this page <nacldev>`.