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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 345703002: Adding development environment tutorial. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: fix Created 6 years, 6 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 | Annotate | Revision Log
« no previous file with comments | « no previous file | native_client_sdk/doc_generated/sitemap.html » ('j') | native_client_sdk/src/doc/io2014.rst » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 {{+bindTo:partials.standard_nacl_article}}
2
3 <section id="building-a-nacl-app">
4 <h1 id="building-a-nacl-app">Building a NaCl App</h1>
5 <section id="in-the-browser">
6 <h2 id="in-the-browser">In the browser!</h2>
7 <p>Follow along with Brad Nelson&#8217;s Google I/O 2014 talk.
8 Explore our new in-browser development environment and debugger.</p>
9 <p>Learn how easy it is to edit, build, and debug NaCl application
10 all in your desktop web browser or on a Chromebook.
11 Work either on-line or off-line!</p>
12 <iframe class="video" width="640" height="360"
13 src="//www.youtube.com/embed/MvKEomoiKBA?rel=0" frameborder="0"></iframe><sectio n id="installation">
14 <h3 id="installation">Installation</h3>
15 <p>The setup process currently requires several steps.
16 We&#8217;re working to reduce the number of steps in future releases.
17 As the process gets easier, we&#8217;ll update this page.</p>
18 <p>You currently need to:</p>
19 <ul class="small-gap">
20 <li><p class="first">Navigate to: chrome://flags and:</p>
21 <ul class="small-gap">
22 <li>Enable <strong>Native Client</strong>.</li>
23 <li>Enable <strong>Native Client GDB-based debugging</strong>. (For the debugge r)</li>
24 </ul>
25 </li>
26 <li>Follow these instructions to
27 <a class="reference external" href="https://nacltools.storage.googleapis.com/ins tall.html">Setup GDB</a></li>
28 <li><p class="first">Install the <a class="reference external" href="https://chr ome.google.com/webstore/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmne pbcfkglfa">NaCl Development Environment</a>.</p>
29 <ul class="small-gap">
30 <li>First run is slow (as it downloads and installs packages).</li>
31 </ul>
32 </li>
33 </ul>
34 </section><section id="editor">
35 <h3 id="editor">Editor</h3>
36 <p>To follow along in this tutorial, you&#8217;ll need to use a text editor to m odify
37 various files in our development environment.
38 There are currently two editor options, nano or vim.
39 Emacs is coming soon...
40 If you&#8217;re unsure what to pick, nano is simpler to start with and has on-sc reen
41 help.</p>
42 <ul class="small-gap">
43 <li><p class="first">You can open <strong>nano</strong> like this:</p>
44 <pre class="prettyprint">
45 $ nano &lt;filename&gt;
46 </pre>
47 <p>Here&#8217;s an online <a class="reference external" href="http://mintaka.sds u.edu/reu/nano.html">nano tutorial</a>.</p>
48 </li>
49 <li><p class="first">You can open <strong>vim</strong> like this:</p>
50 <pre class="prettyprint">
51 $ vim &lt;filename&gt;
52 </pre>
53 <p>Here&#8217;s an online <a class="reference external" href="http://www.openvim .com/tutorial.html">vim tutorial</a>.</p>
54 </li>
55 </ul>
56 </section><section id="git-setup">
57 <h3 id="git-setup">Git Setup</h3>
58 <p>This tutorial also uses a revision control program called
59 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)" >git</a>.
60 In order to commit to a git repository,
61 you need to setup your environment to with your identity.</p>
62 <p>You&#8217;ll need to add these lines to <cite>~/.bashrc</cite> to cause them to be invoked each
63 time you start the development environment.</p>
64 <pre class="prettyprint">
65 $ git config --global user.name &quot;John Doe&quot;
66 $ git config --global user.email johndoe&#64;example.com
67 </pre>
68 </section><section id="tour-follow-the-video">
69 <h3 id="tour-follow-the-video">Tour (follow the video)</h3>
70 <p>Create a working directory and go into it.</p>
71 <pre class="prettyprint">
72 $ mkdir work
73 $ cd work
74 </pre>
75 <p>Download a zip file containing our sample.</p>
76 <pre class="prettyprint">
77 $ curl http://nacltools.sotrage.googlepapis.com/io2014/voronoi.zip -O
78 $ ls -l
79 </pre>
80 <p>Unzip the sample.</p>
81 <pre class="prettyprint">
82 $ unzip voronoi.zip
83 </pre>
84 <p>Go into the sample and take a look at the files inside.</p>
85 <pre class="prettyprint">
86 $ cd voronoi
87 $ ls
88 </pre>
89 <p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE
90 (or Native Client Executable).</p>
91 <svg width="600" height="200">
92 <defs>
93 <marker id="markerArrow" markerWidth="13" markerHeight="13"
94 refx="2" refy="6" orient="auto">
95 <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
96 </marker>
97 </defs>
98
99 <g transform="translate(10,10)">
100 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
101 style="fill:#cc0000;stroke:black;stroke-width:3" />
102 <text x="50" y="25" fill="white" text-anchor="middle"
103 alignment-baseline="middle">voronoi.cc</text>
104 </g>
105 <g transform="translate(10,70)">
106 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
107 style="fill:#cccc00;stroke:black;stroke-width:3" />
108 <text x="50" y="25" fill="white" text-anchor="middle"
109 alignment-baseline="middle">libraries</text>
110 </g>
111 <g transform="translate(210,10)">
112 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
113 style="fill:#0000cc;stroke:black;stroke-width:3" />
114 <text x="50" y="25" fill="white" text-anchor="middle"
115 alignment-baseline="middle">voronoi.nexe</text>
116 </g>
117 <path d="M110,35 L195,30"
118 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
119 <path d="M110,95 L195,50"
120 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
121
122 <text x="50" y="155" fill="black" text-anchor="middle"
123 alignment-baseline="middle">build.sh</text>
124 <path d="M80,155 L300,155"
125 stroke-dasharray="5,5" d="M5 20 l215 0"
126 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
127 </svg><p>The resulting application combines some Javascript to load the module w ith
128 voronoi.nexe, producing the complete application.</p>
129 <svg width="600" height="200">
130 <defs>
131 <marker id="markerArrow" markerWidth="13" markerHeight="13"
132 refx="2" refy="6" orient="auto">
133 <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
134 </marker>
135 </defs>
136
137 <g transform="translate(10,10)">
138 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
139 style="fill:#cc0000;stroke:black;stroke-width:3" />
140 <text x="50" y="25" fill="white" text-anchor="middle"
141 alignment-baseline="middle">voronoi.nexe</text>
142 </g>
143 <g transform="translate(10,70)">
144 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
145 style="fill:#cccc00;stroke:black;stroke-width:3" />
146 <text x="50" y="25" fill="white" text-anchor="middle"
147 alignment-baseline="middle">example.js</text>
148 </g>
149 <g transform="translate(210,10)">
150 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
151 style="fill:#0000cc;stroke:black;stroke-width:3" />
152 <text x="50" y="25" fill="white" text-anchor="middle"
153 alignment-baseline="middle">Web App</text>
154 </g>
155 <path d="M110,35 L195,30"
156 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
157 <path d="M110,95 L195,50"
158 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
159
160 <text x="50" y="155" fill="black" text-anchor="middle"
161 alignment-baseline="middle">demo.py</text>
162 <path d="M80,155 L300,155"
163 stroke-dasharray="5,5" d="M5 20 l215 0"
164 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
165 </svg><p>Let&#8217;s use git (a revision control program) to track our changes.< /p>
166 <p>First, create a new repository:</p>
167 <pre class="prettyprint">
168 $ git init
169 </pre>
170 <p>Add everything here:</p>
171 <pre class="prettyprint">
172 $ git add .
173 </pre>
174 <p>Then commit our starting state.</p>
175 <pre class="prettyprint">
176 $ git commit -m &quot;imported voronoi demo&quot;
177 </pre>
178 <p>Now, lets invoke the bash build script to compile our program:</p>
179 <pre class="prettyprint">
180 $ ./build.sh
181 </pre>
182 <p>Oops, we get this error:</p>
183 <pre class="prettyprint">
184 voronoi.cc: In member function 'void Voronoi::Update()':
185 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
186 </pre>
187 <p>We&#8217;ll need to start an editor to fix this.
188 You&#8217;ll want to change <em>hieght</em> to <em>height</em> on line 506.</p>
189 <p>Then rebuild:</p>
190 <pre class="prettyprint">
191 $ bash build.sh
192 </pre>
193 <p>Lets look at the diff.</p>
194 <pre class="prettyprint">
195 $ git diff
196 </pre>
197 <p>And commit our fix.</p>
198 <pre class="prettyprint">
199 $ git commit -am &quot;fixed build error&quot;
200 </pre>
201 <p>We can now run the demo with this command.</p>
202 <pre class="prettyprint">
203 $ python ${PWD}/demo.py
204 </pre>
205 <p>Navigate to <a class="reference external" href="http://localhost:5103/">http: //localhost:5103/</a> to test the demo.</p>
206 <p>If you follow along with the demo video, you will discover the sample crashes
207 when you change the thread count.</p>
208 <p><em>Debugger walk-thru coming soon.</em></p>
209 <p>Once you&#8217;ve identified the problem. You&#8217;ll want to stop the test server.
210 Press enter to halt it.</p>
211 <p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em> value</em>.</p>
212 <p>Then rebuild.</p>
213 <pre class="prettyprint">
214 $ bash build.sh
215 </pre>
216 <p>Check the diff and commit our fix.</p>
217 <pre class="prettyprint">
218 $ git diff
219 $ git commit -am &quot;fixed thread ui bug&quot;
220 </pre>
221 <p>Now look at your commit history.</p>
222 <pre class="prettyprint">
223 $ git log
224 </pre>
225 <p>Run the demo again. And everything now works.</p>
226 <pre class="prettyprint">
227 $ python ${PWD}/demo.py
228 </pre>
229 </section></section></section>
230
231 {{/partials.standard_nacl_article}}
OLDNEW
« no previous file with comments | « no previous file | native_client_sdk/doc_generated/sitemap.html » ('j') | native_client_sdk/src/doc/io2014.rst » ('J')

Powered by Google App Engine
This is Rietveld 408576698