1 <h1>Build a Todo Chrome App
</h1>
3 <p>Welcome to the Chrome Apps codelab.
</p>
5 <p>Follow along with each step to learn about the basic building blocks of the Chrome Apps platform. By the end of this codelab, you will have an offline-enabled and feature-rich Todo app that you can install on
<!-- both --> your desktop computer.
<!-- and mobile device. --></p>
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">installed from the Chrome Web Store
</a>.
</figcaption>
12 <p>Along the way, you will learn:
</p>
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 Content Security 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.html">Step
3</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>
20 <li>How to write to a file in the native filesystem in
<a href=
"app_codelab_filesystem.html">Step
6</a>.
</li>
21 <li>How to publish your app to the Chrome Web Store in
<a href=
"app_codelab_publish.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> -->
25 <p>To prepare for this codelab:
</p>
28 <li>Use the latest version of
<a href=
"https://www.google.com/intl/en/chrome/browser/">Google Chrome
</a>.
</li>
29 <li>Start fresh in an empty project directory on your development computer.
</li>
30 <li><a href=
"https://github.com/mangini/io13-codelab/archive/master.zip">Download 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 stuck.
</li>
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>
36 <p>Let's get started. Go to
<a href=
"app_codelab_basics.html">Step
1 - Create and run a Chrome App
»</a></p>