Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(438)

Side by Side Diff: native_client_sdk/doc_generated/io2014.html

Issue 1561343002: Updating nacl sdk docs to match changed sample. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: merge Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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&#8217;s Google I/O 2014 talk. 6 <p>Follow along with Brad Nelson&#8217;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&#8217;s 17 At this point, they are a learning tool and demonstration of NaCl&#8217;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
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&#8217;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&#8217;ll need to use a text editor to mo dify 47 <p>To follow along in this codelab, you&#8217;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&#8217;re unsure what to pick, nano is simpler to start with and has on-sc reen 52 If you&#8217;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
93 git config --global user.email johndoe&#64;example.com 77 git config --global user.email johndoe&#64;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&#8217;s use git (a revision control program) to track our changes.</p> 102 <p>Let&#8217;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 &quot;imported voronoi demo&quot; 113 $ git commit -m &quot;imported voronoi demo&quot;
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&#8217;ve got Makefiles!):</p> 116 video, we&#8217;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&#8217;ll need to start an editor to fix this.
145 You&#8217;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 &quot;fixed build error&quot;
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&#8217;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 &quot;fixed thread ui bug&quot;
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}}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698