OLD | NEW |
---|---|
1 .. _io2014: | 1 .. _io2014: |
2 | 2 |
3 ################### | 3 ################### |
4 Building a NaCl App | 4 Building a NaCl App |
5 ################### | 5 ################### |
6 | 6 |
7 In the browser! | 7 In the browser! |
8 --------------- | 8 --------------- |
9 | 9 |
10 Follow along with Brad Nelson's Google I/O 2014 talk. | 10 Follow along with Brad Nelson's Google I/O 2014 talk. |
11 Explore our new in-browser development environment and debugger. | 11 Explore our new in-browser development environment and debugger. |
12 | 12 |
13 Learn how easy it is to edit, build, and debug NaCl application | 13 Learn how easy it is to edit, build, and debug NaCl application |
14 all in your desktop web browser or on a Chromebook. | 14 all in your desktop web browser or on a Chromebook. |
15 Work either on-line or off-line! | 15 Work either on-line or off-line! |
16 | 16 |
17 .. raw:: html | 17 .. raw:: html |
18 | 18 |
19 <iframe class="video" width="500" height="281" | 19 <iframe class="video" width="500" height="281" |
20 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe> | 20 src="//www.youtube.com/embed/OzNuzBDEWzk?rel=0" frameborder="0"></iframe> |
21 | 21 |
22 .. raw:: html | |
23 | |
24 <div><b><font color="#880000" style="font-size: 120%"> | |
25 NOTE: The NaCl Development Environment has changed since this video was made. | |
26 The instructions below no longer match the video. | |
27 </font></b></div> | |
28 | |
22 .. include:: nacldev/web_tools_note.inc | 29 .. include:: nacldev/web_tools_note.inc |
23 | 30 |
24 Installation | 31 Installation |
25 ============ | 32 ============ |
26 | 33 |
27 The setup process currently requires several steps. | 34 The setup process currently requires several steps. |
28 We're working to reduce the number of steps in future releases. | 35 We're working to reduce the number of steps in future releases. |
29 As the process gets easier, we'll update this page. | 36 As the process gets easier, we'll update this page. |
30 | 37 |
31 To install the development environment: | 38 To install the development environment: |
32 | 39 |
33 * Install the `NaCl Development Environment <https://chrome.google.com/webstor e/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_. | 40 * Install the `NaCl Development Environment <https://chrome.google.com/webstor e/detail/nacl-development-environm/aljpgkjeipgnmdpikaajmnepbcfkglfa>`_. |
34 | 41 |
35 * Navigate to: chrome://flags and: | 42 * Navigate to: chrome://flags and: |
36 | 43 |
37 * Enable **Native Client**. | 44 * Enable **Native Client**. |
38 * Restart your browser by clicking **Relaunch Now**. | 45 * Restart your browser by clicking **Relaunch Now**. |
39 | 46 |
40 * First run is slow (as it downloads and installs packages). Launch and allow | 47 * First run is slow (as it downloads and installs packages). Launch and allow |
41 initial install to complete before first use. | 48 initial install to complete before first use. |
42 | 49 |
43 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: | |
46 | |
47 * Install a usable version of | |
48 `Chrome Linux (M36+, Dev or Beta channel) <http://www.chromium.org/getting-i nvolved/dev-channel>`_. | |
49 * Install the `Native Client Debugger Extension <https://chrome.google.com/web store/detail/nacl-debugger/ncpkkhabohglmhjibnloicgdfjmojkfd>`_. | |
50 * Install `Native Client GDB <https://chrome.google.com/webstore/detail/gdb/gk joooooiaohiceibmdleokniplmbahe>`_. | |
51 | |
52 * Navigate to: chrome://flags and: | |
53 | |
54 * Enable **Native Client GDB-based debugging**. | |
55 * Restart your browser by clicking **Relaunch Now**. | |
56 | |
57 * NOTE: If you experience unexplained hangs, disable GDB-based debugging | |
58 temporarily and try again. | |
59 | |
60 | |
61 .. include:: nacldev/editing.inc | 50 .. include:: nacldev/editing.inc |
62 | 51 |
63 .. include:: nacldev/git.inc | 52 .. include:: nacldev/git.inc |
64 | 53 |
65 | 54 |
66 Tour (follow the video) | 55 Tour (follow the video) |
67 ======================= | 56 ======================= |
68 | 57 |
69 Create a working directory and go into it:: | 58 Create a working directory and go into it:: |
70 | 59 |
71 $ mkdir work | 60 $ mkdir work |
72 $ cd work | 61 $ cd work |
73 | 62 |
74 Download a zip file containing our sample:: | 63 Download a zip file containing our sample:: |
75 | 64 |
76 $ curl http://nacltools.storage.googleapis.com/io2014/voronoi.zip -O | 65 $ curl https://nacltools.storage.googleapis.com/io2014/voronoi.zip -O |
77 $ ls -l | 66 $ ls -l |
78 | 67 |
79 Unzip the sample:: | 68 Unzip the sample:: |
80 | 69 |
81 $ unzip voronoi.zip | 70 $ unzip voronoi.zip |
82 | 71 |
83 Go into the sample and take a look at the files inside:: | 72 Go into the sample and take a look at the files inside:: |
84 | 73 |
85 $ cd voronoi | 74 $ cd voronoi |
86 $ ls | 75 $ ls |
87 | 76 |
88 Our project combines voronoi.cc with several C++ libraries to produce a NEXE | 77 Our project combines voronoi.cc with several C++ libraries to produce a NEXE |
89 (or Native Client Executable). | 78 (or Native Client Executable). |
90 | 79 |
91 .. image:: /images/voronoi1.png | 80 .. image:: /images/voronoi1.png |
92 | 81 |
93 The resulting application combines the NEXE with some Javascript to load | |
94 the NaCl module, producing the complete application. | |
95 | |
96 .. image:: /images/voronoi2.png | |
97 | |
98 Let's use git (a revision control program) to track our changes. | 82 Let's use git (a revision control program) to track our changes. |
99 | 83 |
100 First, create a new repository:: | 84 First, create a new repository:: |
101 | 85 |
102 $ git init | 86 $ git init |
103 | 87 |
104 Add everything here:: | 88 Add everything here:: |
105 | 89 |
106 $ git add . | 90 $ git add . |
107 | 91 |
108 Then commit our starting state:: | 92 Then commit our starting state:: |
109 | 93 |
110 $ git commit -m "imported voronoi demo" | 94 $ git commit -m "imported voronoi demo" |
111 | 95 |
112 Now, likes run **make** to compile our program (NOTE: Changed since video, | 96 Now, run **make voronoi** to compile and run our program (NOTE: Changed since |
113 we've got Makefiles!):: | 97 video, we've got Makefiles!):: |
114 | 98 |
115 $ make | 99 $ make voronoi |
116 | 100 |
Sam Clegg
2016/01/07 01:12:59
So did you update the zip file?
Are none of the i
| |
117 Oops, we get this error:: | |
118 | |
119 voronoi.cc: In member function 'void Voronoi::Update()': | |
120 voronoi.cc:506: error: 'struct PSContext2D_t' has no member named 'hieght' | |
121 | |
122 We'll need to start an editor to fix this. | |
123 You'll want to change *hieght* to *height* on line 506. | |
124 Then rebuild:: | |
125 | |
126 $ make -j10 | |
127 | |
128 Lets look at the diff:: | |
129 | |
130 $ git diff | |
131 | |
132 And commit our fix:: | |
133 | |
134 $ git commit -am "fixed build error" | |
135 | |
136 To test our application, we run a local web server, written in python. | |
137 Run the server with this command (NOTE: Running through a Makefile | |
138 now):: | |
139 | |
140 $ make serve | |
141 | |
142 Then, navigate to http://localhost:5103/ to test the demo. | |
143 | |
144 If you follow along with the demo video, you will discover the sample crashes | |
145 when you change the thread count. | |
146 | |
147 Debugging | |
148 ========= | |
149 | |
150 If you haven't installed the debugger at this point, skip to the next section. | |
151 | |
152 At this point, if you have the debugger installed, you should be able to open | |
153 the developer console and view the resulting crash. | |
154 | |
155 You can see a backtrace with:: | |
156 | |
157 bt | |
158 | |
159 You can see active threads with:: | |
160 | |
161 info threads | |
162 | |
163 Currently, symbol information is limited for GLibC executables. | |
164 We have improvements coming that will improve the experience further. | |
165 | |
166 For newlib and PNaCl executables you can retrieve full symbols information | |
167 with:: | |
168 | |
169 remote get irt irt | |
170 add-symbol-file irt | |
171 remote get nexe nexe | |
172 add-symbol-file nexe | |
173 | |
174 Fix it up | |
175 ========= | |
176 | |
177 Return to the development environment and stop the test server, | |
178 by pressing Ctrl-C. | |
179 | |
180 Open your editor again, navigate to line 485 and change *valu* to *value*. | |
181 | |
182 Then rebuild:: | |
183 | |
184 $ make -j10 | |
185 | |
186 Check the diff and commit our fix:: | |
187 | |
188 $ git diff | |
189 $ git commit -am "fixed thread ui bug" | |
190 | |
191 Now look at your commit history:: | |
192 | |
193 $ git log | |
194 | |
195 Run the demo again. And everything now works:: | |
196 | |
197 $ make serve | |
198 | 101 |
199 Thanks | 102 Thanks |
200 ====== | 103 ====== |
201 | 104 |
202 Thanks for checking out our environment. | 105 Thanks for checking out our environment. |
203 Things are rapidly changing and in the coming months you can expect to see | 106 Things are rapidly changing and in the coming months you can expect to see |
204 further improvements and filling out of our platform and library support. | 107 further improvements and filling out of our platform and library support. |
205 | 108 |
206 Follow the status of the NaCl Dev Environment at :doc:`this page <nacldev>`. | 109 Follow the status of the NaCl Dev Environment at :doc:`this page <nacldev>`. |
OLD | NEW |