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

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: 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/README » ('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:
44 .. naclcode:</p>
45 <pre class="prettyprint">
46 nano &lt;filename&gt;
47 </pre>
48 <p>Here&#8217;s an online <a class="reference external" href="http://mintaka.sds u.edu/reu/nano.html">nano tutorial</a>.</p>
49 </li>
50 <li><p class="first">You can open <strong>vim</strong> like this:
51 .. naclcode:</p>
52 <pre class="prettyprint">
53 vim &lt;filename&gt;
54 </pre>
55 <p>Here&#8217;s an online <a class="reference external" href="http://www.openvim .com/tutorial.html">vim tutorial</a>.</p>
56 </li>
57 </ul>
58 </section><section id="git-setup">
59 <h3 id="git-setup">Git Setup</h3>
60 <p>This tutorial also uses a revision control program called
61 <a class="reference external" href="http://en.wikipedia.org/wiki/Git_(software)" >git</a>.
62 In order to commit to a git repository,
63 you need to setup your environment to with your identity.</p>
64 <p>You&#8217;ll need to add these lines to <cite>~/.bashrc</cite> to cause them to be invoked each
65 time you start the development environment.</p>
66 <pre class="prettyprint">
67 git config --global user.name &quot;John Doe&quot;
68 git config --global user.email johndoe&#64;example.com
69 </pre>
70 </section><section id="tour-follow-the-video">
71 <h3 id="tour-follow-the-video">Tour (follow the video)</h3>
72 <p>Create a working directory and go into it.</p>
73 <pre class="prettyprint">
74 mkdir work
75 cd work
76 </pre>
77 <p>Download a zip file containing our sample.</p>
78 <pre class="prettyprint">
79 curl http://nacltools.sotrage.googlepapis.com/io2014/voronoi.zip -O
80 ls -l
81 </pre>
82 <p>Unzip the sample.</p>
83 <pre class="prettyprint">
84 unzip voronoi.zip
85 </pre>
86 <p>Go into the sample and take a look at the files inside.</p>
87 <pre class="prettyprint">
88 cd voronoi
89 ls
90 </pre>
91 <p>Our project combines voronoi.cc with several C++ libraries to produce a NEXE
92 (or Native Client Executable).</p>
93 <svg width="600" height="200">
94 <defs>
95 <marker id="markerArrow" markerWidth="13" markerHeight="13"
96 refx="2" refy="6" orient="auto">
97 <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
98 </marker>
99 </defs>
100
101 <g transform="translate(10,10)">
102 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
103 style="fill:#cc0000;stroke:black;stroke-width:3" />
104 <text x="50" y="25" fill="white" text-anchor="middle"
105 alignment-baseline="middle">voronoi.cc</text>
106 </g>
107 <g transform="translate(10,70)">
108 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
109 style="fill:#cccc00;stroke:black;stroke-width:3" />
110 <text x="50" y="25" fill="white" text-anchor="middle"
111 alignment-baseline="middle">libraries</text>
112 </g>
113 <g transform="translate(210,10)">
114 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
115 style="fill:#0000cc;stroke:black;stroke-width:3" />
116 <text x="50" y="25" fill="white" text-anchor="middle"
117 alignment-baseline="middle">voronoi.nexe</text>
118 </g>
119 <path d="M110,35 L195,30"
120 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
121 <path d="M110,95 L195,50"
122 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
123
124 <text x="50" y="155" fill="black" text-anchor="middle"
125 alignment-baseline="middle">build.sh</text>
126 <path d="M80,155 L300,155"
127 stroke-dasharray="5,5" d="M5 20 l215 0"
128 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
129 </svg><p>The resulting application combines some Javascript to load the module w ith
130 voronoi.nexe, producing the complete application.</p>
131 <svg width="600" height="200">
132 <defs>
133 <marker id="markerArrow" markerWidth="13" markerHeight="13"
134 refx="2" refy="6" orient="auto">
135 <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
136 </marker>
137 </defs>
138
139 <g transform="translate(10,10)">
140 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
141 style="fill:#cc0000;stroke:black;stroke-width:3" />
142 <text x="50" y="25" fill="white" text-anchor="middle"
143 alignment-baseline="middle">voronoi.nexe</text>
144 </g>
145 <g transform="translate(10,70)">
146 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
147 style="fill:#cccc00;stroke:black;stroke-width:3" />
148 <text x="50" y="25" fill="white" text-anchor="middle"
149 alignment-baseline="middle">example.js</text>
150 </g>
151 <g transform="translate(210,10)">
152 <rect x="0" y="0" rx="20" ry="20" width="100" height="50"
153 style="fill:#0000cc;stroke:black;stroke-width:3" />
154 <text x="50" y="25" fill="white" text-anchor="middle"
155 alignment-baseline="middle">Web App</text>
156 </g>
157 <path d="M110,35 L195,30"
158 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
159 <path d="M110,95 L195,50"
160 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
161
162 <text x="50" y="155" fill="black" text-anchor="middle"
163 alignment-baseline="middle">demo.py</text>
164 <path d="M80,155 L300,155"
165 stroke-dasharray="5,5" d="M5 20 l215 0"
166 style="stroke:black; stroke-width: 2px; marker-end: url(#markerArrow);"/>
167 </svg><p>Let&#8217;s use git (a revision control program) to track our changes.< /p>
168 <p>First, create a new repository:</p>
169 <pre class="prettyprint">
170 git init
171 </pre>
172 <p>Add everything here:</p>
173 <pre class="prettyprint">
174 git add .
175 </pre>
176 <p>Then commit our starting state.</p>
177 <pre class="prettyprint">
178 git commit -m &quot;imported voronoi demo&quot;
179 </pre>
180 <p>Now, lets invoke the bash build script to compile our program:</p>
181 <pre class="prettyprint">
182 ./build.sh
183 </pre>
184 <p>Oops, we get this error:</p>
185 <pre class="prettyprint">
186 voronoi.cc: In member function 'void Voronoi::Update()':
187 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
188 </pre>
189 <p>We&#8217;ll need to start an editor to fix this.
190 You&#8217;ll want to change <em>hieght</em> to <em>height</em> on line 506.</p>
191 <p>Then rebuild:</p>
192 <pre class="prettyprint">
193 bash build.sh
194 </pre>
195 <p>Lets look at the diff.</p>
196 <pre class="prettyprint">
197 git diff
198 </pre>
199 <p>And commit our fix.</p>
200 <pre class="prettyprint">
201 git commit -am &quot;fixed build error&quot;
202 </pre>
203 <p>We can now run the demo with this command.</p>
204 <pre class="prettyprint">
205 python ${PWD}/demo.py
206 </pre>
207 <p>Navigate to <a class="reference external" href="http://localhost:5103/">http: //localhost:5103/</a> to test the demo.</p>
208 <p>If you follow along with the demo video, you will discover the sample crashes
209 when you change the thread count.</p>
210 <p><em>Debugger walk-thru coming soon.</em></p>
211 <p>Once you&#8217;ve identified the problem. You&#8217;ll want to stop the test server.
212 Press enter to halt it.</p>
213 <p>Open your editor again, navigate to line 485 and change <em>valu</em> to <em> value</em>.</p>
214 <p>Then rebuild.</p>
215 <pre class="prettyprint">
216 bash build.sh
217 </pre>
218 <p>Check the diff and commit our fix.</p>
219 <pre class="prettyprint">
220 git diff
221 git commit -am &quot;fixed thread ui bug&quot;
222 </pre>
223 <p>Now look at your commit history.</p>
224 <pre class="prettyprint">
225 git log
226 </pre>
227 <p>Run the demo again. And everything now works.</p>
228 <pre class="prettyprint">
229 python ${PWD}/demo.py
230 </pre>
231 </section></section></section>
232
233 {{/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/README » ('J')

Powered by Google App Engine
This is Rietveld 408576698