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

Side by Side Diff: native_client_sdk/src/doc/io2014.rst

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 | « native_client_sdk/src/doc/images/voronoi2.png ('k') | native_client_sdk/src/doc/sitemap.rst » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 ###################
2 Building a NaCl App
3 ###################
4 In the browser!
5 ---------------
6
7 Follow along with Brad Nelson's Google I/O 2014 talk.
8 Explore our new in-browser development environment and debugger.
9
10 Learn how easy it is to edit, build, and debug NaCl application
11 all in your desktop web browser or on a Chromebook.
12 Work either on-line or off-line!
13
14 .. raw:: html
15
16 <iframe class="video" width="500" height="281"
17 src="//www.youtube.com/embed/MvKEomoiKBA?rel=0" frameborder="0"></iframe>
18
19
20 Installation
21 ============
22
23 The setup process currently requires several steps.
24 We're working to reduce the number of steps in future releases.
25 As the process gets easier, we'll update this page.
26
27 You currently need to:
28
29 * Navigate to: chrome://flags and:
30
31 * Enable **Native Client**.
32 * Enable **Native Client GDB-based debugging**. (For the debugger)
33
34 * Install the NaCl in-browser debugger.
35
36 * Install the `NaCl Debugger Extension <https://chrome.google.com/webstore/det ail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_.
37
38 * Install `GDB <https://chrome.google.com/webstore/detail/gdb/gkjoooooiaohicei bmdleokniplmbahe>`_.
39
40 * Install the `NaCl Development Environment <https://chrome.google.com/webstore/ detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_.
41
42 * First run is slow (as it downloads and installs packages).
43
44
45 Editor
46 ======
47
48 To follow along in this tutorial, you'll need to use a text editor to modify
49 various files in our development environment.
50 There are currently two editor options, nano or vim.
51 Emacs is coming soon...
52 If you're unsure what to pick, nano is simpler to start with and has on-screen
53 help.
54
55 * You can open **nano** like this::
56
57 $ nano <filename>
58
59 Here's an online `nano tutorial <http://mintaka.sdsu.edu/reu/nano.html>`_.
60
61 * You can open **vim** like this::
62
63 $ vim <filename>
64
65 Here's an online `vim tutorial <http://www.openvim.com/tutorial.html>`_.
66
67
68 Git Setup
69 =========
70
71 This tutorial also uses a revision control program called
72 `git <http://en.wikipedia.org/wiki/Git_(software)>`_.
73 In order to commit to a git repository,
74 you need to setup your environment to with your identity.
75
76 You'll need to add these lines to `~/.bashrc` to cause them to be invoked each
77 time you start the development environment.
78 ::
79
80 git config --global user.name "John Doe"
81 git config --global user.email johndoe@example.com
82
83 Tour (follow the video)
84 =======================
85
86 Create a working directory and go into it::
87
88 $ mkdir work
89 $ cd work
90
91 Download a zip file containing our sample::
92
93 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O
94 $ ls -l
95
96 Unzip the sample::
97
98 $ unzip voronoi.zip
99
100 Go into the sample and take a look at the files inside::
101
102 $ cd voronoi
103 $ ls
104
105 Our project combines voronoi.cc with several C++ libraries to produce a NEXE
106 (or Native Client Executable).
107
108 .. image:: /images/voronoi1.png
109
110 The resulting application combines the NEXE with some Javascript to load
111 the NaCl module, producing the complete application.
112
113 .. image:: /images/voronoi2.png
114
115 Let's use git (a revision control program) to track our changes.
116
117 First, create a new repository::
118
119 $ git init
120
121 Add everything here::
122
123 $ git add .
124
125 Then commit our starting state::
126
127 $ git commit -m "imported voronoi demo"
128
129 Now, likes run **make** to compile our program (NOTE: Changed since video,
130 we've got Makefiles!)::
131
132 $ make
133
134 Oops, we get this error::
135
136 voronoi.cc: In member function 'void Voronoi::Update()':
137 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght'
138
139 We'll need to start an editor to fix this.
140 You'll want to change *hieght* to *height* on line 506.
141 Then rebuild::
142
143 $ make
144
145 Lets look at the diff::
146
147 $ git diff
148
149 And commit our fix::
150
151 $ git commit -am "fixed build error"
152
153 To test our application, we run a local web server, written in python.
154 Run the server with this command (NOTE: Running through a Makefile
155 now)::
156
157 $ make serve
158
159 Then, navigate to http://localhost:5103/ to test the demo.
160
161 If you follow along with the demo video, you will discover the sample crashes
162 when you change the thread count.
163
164 *Debugger walk-thru coming soon.*
165
166 Once you've identified the problem. You'll want to stop the test server.
167 Press enter to halt it.
168
169 Open your editor again, navigate to line 485 and change *valu* to *value*.
170
171 Then rebuild::
172
173 $ make
174
175 Check the diff and commit our fix::
176
177 $ git diff
178 $ git commit -am "fixed thread ui bug"
179
180 Now look at your commit history::
181
182 $ git log
183
184 Run the demo again. And everything now works::
185
186 $ make serve
OLDNEW
« no previous file with comments | « native_client_sdk/src/doc/images/voronoi2.png ('k') | native_client_sdk/src/doc/sitemap.rst » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698