OLD | NEW |
1 <h1>Build a Todo Chrome App</h1> | 1 <h1>Build a Todo Chrome App</h1> |
2 | 2 |
3 <p>Welcome to the Chrome Apps codelab.</p> | 3 <p>Welcome to the Chrome Apps codelab.</p> |
4 | 4 |
5 <p>Follow along with each step to learn about the basic building blocks of the C
hrome Apps platform. By the end of this codelab, you will have an offline-enable
d and feature-rich Todo app that you can install on <!-- both --> your desktop c
omputer.<!-- and mobile device. --></p> | 5 <p>Follow along with each step to learn about the basic building blocks of the C
hrome Apps platform. By the end of this codelab, you will have an offline-enable
d and feature-rich Todo app that you can install on <!-- both --> your desktop c
omputer.<!-- and mobile device. --></p> |
6 | 6 |
7 <figure> | 7 <figure> |
8 <img src="{{static}}/images/app_codelab/chrome-apps-finished-project.png"> | 8 <img src="{{static}}/images/app_codelab/chrome-apps-finished-project.png"> |
9 <figcaption>The finished Todo app can be <a href="http://goo.gl/qNNUX">install
ed from the Chrome Web Store</a>.</figcaption> | 9 <figcaption>The finished Todo app can be <a href="http://goo.gl/qNNUX">install
ed from the Chrome Web Store</a>.</figcaption> |
10 </figure> | 10 </figure> |
11 | 11 |
12 <p>Along the way, you will learn:</p> | 12 <p>Along the way, you will learn:</p> |
13 | 13 |
14 <ul> | 14 <ul> |
15 <li>How to create, run, and debug a Chrome App in <a href="app_codelab_basics.
html">Step 1</a>.</li> | 15 <li>How to create, run, and debug a Chrome App in <a href="app_codelab_basics.
html">Step 1</a>.</li> |
16 <li>How to update an existing web app as a Chrome App, deal with common Conten
t Security Policy issues, and adding local storage support in <a href="app_codel
ab_todomvc.html">Step 2</a>.</li> | 16 <li>How to update an existing web app as a Chrome App, deal with Content Secur
ity Policy issues, and add local storage support in <a href="app_codelab_todomvc
.html">Step 2</a>.</li> |
17 <li>How to implement alarms and notifications in <a href="app_codelab_alarms.h
tml">Step 3</a>.</li> | 17 <li>How to implement alarms and notifications in <a href="app_codelab_alarms.h
tml">Step 3</a>.</li> |
18 <li>How to display web pages inline in <a href="app_codelab_webview.html">Step
4</a>.</li> | 18 <li>How to display web pages inline in <a href="app_codelab_webview.html">Step
4</a>.</li> |
19 <li>How to load resources (like images) from external sources in <a href="app_
codelab_images.html">Step 5</a>.</li> | 19 <li>How to load resources (like images) from external sources in <a href="app_
codelab_images.html">Step 5</a>.</li> |
20 <li>How to write to a file in the native filesystem in <a href="app_codelab_fi
lesystem.html">Step 6</a>.</li> | 20 <li>How to write to a file in the native filesystem in <a href="app_codelab_fi
lesystem.html">Step 6</a>.</li> |
21 <li>How to publish your app to the Chrome Web Store in <a href="app_codelab_pu
blish.html">Step 7</a>.</li> | 21 <li>How to publish your app to the Chrome Web Store in <a href="app_codelab_pu
blish.html">Step 7</a>.</li> |
22 <!-- <li>How to run your app on a mobile device as a native Android or iOS app
in <a href="app_codelab_mobile.html">Step 8</a>.</li> --> | 22 <!-- <li>How to run your app on a mobile device as a native Android or iOS app
in <a href="app_codelab_mobile.html">Step 8</a>.</li> --> |
23 </ul> | 23 </ul> |
24 | 24 |
25 <p>To prepare for this codelab:</p> | 25 <p>To prepare for this codelab:</p> |
26 | 26 |
27 <ul> | 27 <ul> |
28 <li>Use the latest version of <a href="https://www.google.com/intl/en/chrome/b
rowser/">Google Chrome</a>.</li> | 28 <li>Use the latest version of <a href="https://www.google.com/intl/en/chrome/b
rowser/">Google Chrome</a>.</li> |
29 <li>Start fresh in an empty project directory on your development computer.</l
i> | 29 <li>Start fresh in an empty project directory on your development computer.</l
i> |
30 <li><a href="https://github.com/mangini/io13-codelab/archive/master.zip">Downl
oad the reference code</a> for all steps or <a href="https://github.com/mangini/
io13-codelab/tree/master/cheat_code">view them on Github</a> in case you get stu
ck.</li> | 30 <li><a href="https://github.com/mangini/io13-codelab/archive/master.zip">Downl
oad the reference code</a> for all steps or <a href="https://github.com/mangini/
io13-codelab/tree/master/cheat_code">view them on Github</a> in case you get stu
ck.</li> |
31 </ul> | 31 </ul> |
32 | 32 |
33 <p>Each step builds on top of the previous but, if you decide to skip a step, so
lutions for every step can be found in the reference code.</p> | 33 <p>Each step builds on top of the previous. |
| 34 You can skip any step and use previous step solutions in the reference code.</p> |
34 | 35 |
35 <p>Let's get started. Go to <a href="app_codelab_basics.html">Step 1 - Create an
d run a Chrome App »</a></p> | 36 <p>Let's get started. Go to <a href="app_codelab_basics.html">Step 1 - Create an
d run a Chrome App »</a></p> |
OLD | NEW |