OLD | NEW |
1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
2 | 2 |
3 <section id="building-a-nacl-app"> | 3 <section id="building-a-nacl-app"> |
4 <span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>B
uilding a NaCl App</h1> | 4 <span id="io2014"></span><h1 id="building-a-nacl-app"><span id="io2014"></span>B
uilding a NaCl App</h1> |
5 <h2 id="in-the-browser">In the browser!</h2> | 5 <h2 id="in-the-browser">In the browser!</h2> |
6 <p>Follow along with Brad Nelson’s Google I/O 2014 talk. | 6 <p>Follow along with Brad Nelson’s Google I/O 2014 talk. |
7 Explore our new in-browser development environment and debugger.</p> | 7 Explore our new in-browser development environment and debugger.</p> |
8 <p>Learn how easy it is to edit, build, and debug NaCl application | 8 <p>Learn how easy it is to edit, build, and debug NaCl application |
9 all in your desktop web browser or on a Chromebook. | 9 all in your desktop web browser or on a Chromebook. |
10 Work either on-line or off-line!</p> | 10 Work either on-line or off-line!</p> |
11 <iframe class="video" width="500" height="281" | 11 <iframe class="video" width="500" height="281" |
12 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><h3 id=
"our-web-based-tools">Our Web-based Tools</h3> | 12 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe><div><b
><font color="#880000" style="font-size: 120%"> |
| 13 NOTE: The NaCl Development Environment has changed since this video was made. |
| 14 The instructions below no longer match the video. |
| 15 </font></b></div><h3 id="our-web-based-tools">Our Web-based Tools</h3> |
13 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. | 16 <p>These development tools are a <a class="reference external" href="nacldev">wo
rk in progress</a>. |
14 At this point, they are a learning tool and demonstration of NaCl’s | 17 At this point, they are a learning tool and demonstration of NaCl’s |
15 flexibility, but are not the recommended tools for a production application. | 18 flexibility, but are not the recommended tools for a production application. |
16 In the future, that may change, but for the moment, | 19 In the future, that may change, but for the moment, |
17 to develop a substantial application for Native Client / | 20 to develop a substantial application for Native Client / |
18 Portable Native Client, | 21 Portable Native Client, |
19 we recommend you use the | 22 we recommend you use the |
20 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> | 23 <a class="reference external" href="/native-client/sdk/download">Native Client S
DK</a>.</p> |
21 <b><font color="#880000"> | 24 <b><font color="#880000"> |
22 NOTE: The NaCl Development Environment is not yet stable. | 25 NOTE: The NaCl Development Environment is not yet stable. |
(...skipping 10 matching lines...) Expand all Loading... |
33 <li><p class="first">Navigate to: chrome://flags and:</p> | 36 <li><p class="first">Navigate to: chrome://flags and:</p> |
34 <ul class="small-gap"> | 37 <ul class="small-gap"> |
35 <li>Enable <strong>Native Client</strong>.</li> | 38 <li>Enable <strong>Native Client</strong>.</li> |
36 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> | 39 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> |
37 </ul> | 40 </ul> |
38 </li> | 41 </li> |
39 <li>First run is slow (as it downloads and installs packages). Launch and allow | 42 <li>First run is slow (as it downloads and installs packages). Launch and allow |
40 initial install to complete before first use.</li> | 43 initial install to complete before first use.</li> |
41 </ul> | 44 </ul> |
42 </div></blockquote> | 45 </div></blockquote> |
43 <p>When initially experimenting with the development environment, | |
44 at this time, we recommend you run it without the debugger activated. | |
45 Once you’re ready to apply the debugger, follow these steps:</p> | |
46 <blockquote> | |
47 <div><ul class="small-gap"> | |
48 <li>Install a usable version of | |
49 <a class="reference external" href="http://www.chromium.org/getting-involved/dev
-channel">Chrome Linux (M36+, Dev or Beta channel)</a>.</li> | |
50 <li>Install the <a class="reference external" href="https://chrome.google.com/we
bstore/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd">Native Client Debu
gger Extension</a>.</li> | |
51 <li>Install <a class="reference external" href="https://chrome.google.com/websto
re/detail/gdb/gkjoooooiaohiceibmdleokniplmbahe">Native Client GDB</a>.</li> | |
52 <li><p class="first">Navigate to: chrome://flags and:</p> | |
53 <ul class="small-gap"> | |
54 <li>Enable <strong>Native Client GDB-based debugging</strong>.</li> | |
55 <li>Restart your browser by clicking <strong>Relaunch Now</strong>.</li> | |
56 </ul> | |
57 </li> | |
58 <li>NOTE: If you experience unexplained hangs, disable GDB-based debugging | |
59 temporarily and try again.</li> | |
60 </ul> | |
61 </div></blockquote> | |
62 <h4 id="editing">Editing</h4> | 46 <h4 id="editing">Editing</h4> |
63 <p>To follow along in this codelab, you’ll need to use a text editor to mo
dify | 47 <p>To follow along in this codelab, you’ll need to use a text editor to mo
dify |
64 various files in our development environment. | 48 various files in our development environment. |
65 There are currently two editor options, nano or vim. | 49 There are currently two editor options, nano or vim. |
66 We have an Emacs port, but it is not yet available in the Dev Environment | 50 We have an Emacs port, but it is not yet available in the Dev Environment |
67 (coming soon). | 51 (coming soon). |
68 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen | 52 If you’re unsure what to pick, nano is simpler to start with and has on-sc
reen |
69 help.</p> | 53 help.</p> |
70 <ul class="small-gap"> | 54 <ul class="small-gap"> |
71 <li><p class="first">You can open <strong>nano</strong> like this:</p> | 55 <li><p class="first">You can open <strong>nano</strong> like this:</p> |
(...skipping 21 matching lines...) Expand all Loading... |
93 git config --global user.email johndoe@example.com | 77 git config --global user.email johndoe@example.com |
94 </pre> | 78 </pre> |
95 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> | 79 <h3 id="tour-follow-the-video">Tour (follow the video)</h3> |
96 <p>Create a working directory and go into it:</p> | 80 <p>Create a working directory and go into it:</p> |
97 <pre class="prettyprint"> | 81 <pre class="prettyprint"> |
98 $ mkdir work | 82 $ mkdir work |
99 $ cd work | 83 $ cd work |
100 </pre> | 84 </pre> |
101 <p>Download a zip file containing our sample:</p> | 85 <p>Download a zip file containing our sample:</p> |
102 <pre class="prettyprint"> | 86 <pre class="prettyprint"> |
103 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O | 87 $ curl https://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
104 $ ls -l | 88 $ ls -l |
105 </pre> | 89 </pre> |
106 <p>Unzip the sample:</p> | 90 <p>Unzip the sample:</p> |
107 <pre class="prettyprint"> | 91 <pre class="prettyprint"> |
108 $ unzip voronoi.zip | 92 $ unzip voronoi.zip |
109 </pre> | 93 </pre> |
110 <p>Go into the sample and take a look at the files inside:</p> | 94 <p>Go into the sample and take a look at the files inside:</p> |
111 <pre class="prettyprint"> | 95 <pre class="prettyprint"> |
112 $ cd voronoi | 96 $ cd voronoi |
113 $ ls | 97 $ ls |
114 </pre> | 98 </pre> |
115 <p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE | 99 <p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE |
116 (or Native Client Executable).</p> | 100 (or Native Client Executable).</p> |
117 <img alt="/native-client/images/voronoi1.png" src="/native-client/images/voronoi
1.png" /> | 101 <img alt="/native-client/images/voronoi1.png" src="/native-client/images/voronoi
1.png" /> |
118 <p>The resulting application combines the NEXE with some Javascript to load | |
119 the NaCl module, producing the complete application.</p> | |
120 <img alt="/native-client/images/voronoi2.png" src="/native-client/images/voronoi
2.png" /> | |
121 <p>Let’s use git (a revision control program) to track our changes.</p> | 102 <p>Let’s use git (a revision control program) to track our changes.</p> |
122 <p>First, create a new repository:</p> | 103 <p>First, create a new repository:</p> |
123 <pre class="prettyprint"> | 104 <pre class="prettyprint"> |
124 $ git init | 105 $ git init |
125 </pre> | 106 </pre> |
126 <p>Add everything here:</p> | 107 <p>Add everything here:</p> |
127 <pre class="prettyprint"> | 108 <pre class="prettyprint"> |
128 $ git add . | 109 $ git add . |
129 </pre> | 110 </pre> |
130 <p>Then commit our starting state:</p> | 111 <p>Then commit our starting state:</p> |
131 <pre class="prettyprint"> | 112 <pre class="prettyprint"> |
132 $ git commit -m "imported voronoi demo" | 113 $ git commit -m "imported voronoi demo" |
133 </pre> | 114 </pre> |
134 <p>Now, likes run <strong>make</strong> to compile our program (NOTE: Changed si
nce video, | 115 <p>Now, run <strong>make voronoi</strong> to compile and run our program (NOTE:
Changed since |
135 we’ve got Makefiles!):</p> | 116 video, we’ve got Makefiles!):</p> |
136 <pre class="prettyprint"> | 117 <pre class="prettyprint"> |
137 $ make | 118 $ make voronoi |
138 </pre> | |
139 <p>Oops, we get this error:</p> | |
140 <pre class="prettyprint"> | |
141 voronoi.cc: In member function 'void Voronoi::Update()': | |
142 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght' | |
143 </pre> | |
144 <p>We’ll need to start an editor to fix this. | |
145 You’ll want to change <em>hieght</em> to <em>height</em> on line 506. | |
146 Then rebuild:</p> | |
147 <pre class="prettyprint"> | |
148 $ make -j10 | |
149 </pre> | |
150 <p>Lets look at the diff:</p> | |
151 <pre class="prettyprint"> | |
152 $ git diff | |
153 </pre> | |
154 <p>And commit our fix:</p> | |
155 <pre class="prettyprint"> | |
156 $ git commit -am "fixed build error" | |
157 </pre> | |
158 <p>To test our application, we run a local web server, written in python. | |
159 Run the server with this command (NOTE: Running through a Makefile | |
160 now):</p> | |
161 <pre class="prettyprint"> | |
162 $ make serve | |
163 </pre> | |
164 <p>Then, navigate to <a class="reference external" href="http://localhost:5103/"
>http://localhost:5103/</a> to test the demo.</p> | |
165 <p>If you follow along with the demo video, you will discover the sample crashes | |
166 when you change the thread count.</p> | |
167 <h3 id="debugging">Debugging</h3> | |
168 <p>If you haven’t installed the debugger at this point, skip to the next s
ection.</p> | |
169 <p>At this point, if you have the debugger installed, you should be able to open | |
170 the developer console and view the resulting crash.</p> | |
171 <p>You can see a backtrace with:</p> | |
172 <pre class="prettyprint"> | |
173 bt | |
174 </pre> | |
175 <p>You can see active threads with:</p> | |
176 <pre class="prettyprint"> | |
177 info threads | |
178 </pre> | |
179 <p>Currently, symbol information is limited for GLibC executables. | |
180 We have improvements coming that will improve the experience further.</p> | |
181 <p>For newlib and PNaCl executables you can retrieve full symbols information | |
182 with:</p> | |
183 <pre class="prettyprint"> | |
184 remote get irt irt | |
185 add-symbol-file irt | |
186 remote get nexe nexe | |
187 add-symbol-file nexe | |
188 </pre> | |
189 <h3 id="fix-it-up">Fix it up</h3> | |
190 <p>Return to the development environment and stop the test server, | |
191 by pressing Ctrl-C.</p> | |
192 <p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em>
value</em>.</p> | |
193 <p>Then rebuild:</p> | |
194 <pre class="prettyprint"> | |
195 $ make -j10 | |
196 </pre> | |
197 <p>Check the diff and commit our fix:</p> | |
198 <pre class="prettyprint"> | |
199 $ git diff | |
200 $ git commit -am "fixed thread ui bug" | |
201 </pre> | |
202 <p>Now look at your commit history:</p> | |
203 <pre class="prettyprint"> | |
204 $ git log | |
205 </pre> | |
206 <p>Run the demo again. And everything now works:</p> | |
207 <pre class="prettyprint"> | |
208 $ make serve | |
209 </pre> | 119 </pre> |
210 <h3 id="thanks">Thanks</h3> | 120 <h3 id="thanks">Thanks</h3> |
211 <p>Thanks for checking out our environment. | 121 <p>Thanks for checking out our environment. |
212 Things are rapidly changing and in the coming months you can expect to see | 122 Things are rapidly changing and in the coming months you can expect to see |
213 further improvements and filling out of our platform and library support.</p> | 123 further improvements and filling out of our platform and library support.</p> |
214 <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> | 124 <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> |
215 </section> | 125 </section> |
216 | 126 |
217 {{/partials.standard_nacl_article}} | 127 {{/partials.standard_nacl_article}} |
OLD | NEW |