| OLD | NEW |
| 1 <h1 id="get_ready_to_build_chrome_apps_">Get Ready to Build Chrome Apps!</h1> | 1 <h1 id="get_ready_to_build_chrome_apps_">About this Codelab</h1> |
| 2 | 2 |
| 3 <p>Chrome apps are written in HTML5, JavaScript, and CSS, just like web apps. | 3 <p>The goal of this codelab is to |
| 4 But they look and behave more like native apps, and they have super-powerful cap
abilities, | 4 get you building Chrome packaged apps fast. |
| 5 like the ability to interact with network and hardware devices, media tools, and
much more.</p> | 5 We've done our best to capture some of the trickier parts |
| 6 to the development process |
| 7 keeping the samples simple and straightforward. |
| 8 Once you've completed this codelab, |
| 9 you will have a simple Todo app. |
| 10 </p> |
| 6 | 11 |
| 7 <h2 id="help_us_make_chrome_apps_better_">Help us make Chrome Apps better!</h2> | 12 <p> |
| 13 All sample code can be downloaded from the |
| 14 <a href="https://github.com/GoogleChrome/chrome-app-codelab">chrome-app-codelab
repository</a>. |
| 15 Each lab builds upon the previous lab's sample code. |
| 16 To see how the Todo app changes as you work through the lab, |
| 17 upload the code from the extensions management page |
| 18 and launch the app |
| 19 (see <a href="first_app.html#five">Create Your First App tutorial</a>). |
| 20 </p> |
| 8 | 21 |
| 9 <p>Chrome apps are still in developer preview-- we know they aren't perfect.
But we're trying to do something new here, bridging together the native and
web experience, giving developers choice and users the best experience possible
.</p> | 22 <p class="note"> |
| 23 <strong>Note: </strong> |
| 24 After the first launch, |
| 25 ChromeOS and Windows users can see their apps in the |
| 26 <a href="http://blog.chromium.org/2013/02/chrome-app-launcher-developer-preview.
html">Chrome app launcher</a>. |
| 27 Other platforms can see installed apps on a new Chrome tab |
| 28 or by navigating to <code>chrome://extensions</code>. |
| 29 </p> |
| 10 | 30 |
| 11 <p>For Chrome apps to succeed, we need and want your feedback and we don't w
ant you to have to go in circles to provide it. | 31 <h2 id="options">Choose your framework</h2> |
| 12 We appreciate your feedback either at the <a href="http://groups.google.com/a/ch
romium.org/group/chromium-apps">chromium-apps group</a> or, if appropriate, as a
bug filled at the <a href="http://crbug.com/new">official issue tracker</a></a>
.</p> | |
| 13 | 32 |
| 14 <h2 id="learn_more_about_chrome_apps">Learn more about Chrome Apps</h2> | 33 <p> |
| 34 You can choose to write your sample Todo app |
| 35 using a preferred |
| 36 <a href="app_frameworks.html">MVC framework</a>. |
| 37 Starting in |
| 38 <a href="app_codelab3_mvc.html">3 - Create MVC</a>, |
| 39 we've provided sample code in pure JavaScript |
| 40 and using |
| 41 <a href="http://angularjs.org">AngularJS</a>. |
| 42 We've also included code snippets for both versions |
| 43 throughout the codelab docs. |
| 44 As you continue through the codelab, |
| 45 make sure your sample code builds from the same version. |
| 46 </p> |
| 47 |
| 48 <p class="note"> |
| 49 <strong>Want to add a framework?</strong><br> |
| 50 You can always create your own Todo app |
| 51 in a different preferred framework. |
| 52 And we would be very happy to include it |
| 53 in the sample code repository. |
| 54 </p> |
| 55 |
| 56 <h2 id="tutorial_structure">Codelab structure</h2> |
| 15 | 57 |
| 16 <ul> | 58 <ul> |
| 17 <li>Read the <a href="http://developer.chrome.com/apps/">docs</a>.</li> | 59 <li><a href="app_codelab1_setup.html">1 - Set Up Development Environment</a></li
> |
| 18 <li>Check out the <a href="http://developer.chrome.com/apps/api_index.html">Chro
me Apps APIs</a>.</li> | 60 <li><a href="app_codelab2_basic.html">2 - Create Basic App</a></li> |
| 19 <li>Fork any and all <a href="https://github.com/GoogleChrome/chrome-app-samples
">chrome-app-samples</a> and make something of your own.</li> | 61 <li><a href="app_codelab3_mvc.html">3 - Create MVC</a></li> |
| 20 <li>Watch the <a href="https://developers.google.com/live/chrome/">Chrome Apps G
DL sessions</a>.</li> | 62 <li><a href="app_codelab5_data.html">4 - Save and Feth Data</a></li> |
| 21 <li>Follow the Chrome Apps Todo tutorial here.</li> | 63 <li><a href="app_codelab6_lifecycle.html">5 - Manage App Lifecycle</a></li> |
| 64 <li><a href="app_codelab7_useridentification.html">6 - Access User's Data</a></l
i> |
| 65 <li><a href="app_codelab8_webresources.html">7 - Access Web Resources</a></li> |
| 66 <li><a href="app_codelab_10_publishing.html">8 - Publish App</a></li> |
| 22 </ul> | 67 </ul> |
| 23 | |
| 24 <h2 id="about_this_tutorial">About this Tutorial</h2> | |
| 25 | |
| 26 <p>The goal of this tutorial is to get you building Chrome apps fast. | |
| 27 We've done our best to capture some of the trickier parts to the development
process | |
| 28 keeping the sample simple and straightforward.</p> | |
| 29 | |
| 30 <p>Once you've completed the tutorial, | |
| 31 you will have a simple Todo app. The sample code in each lab builds upon the pre
vious. | |
| 32 To see how the Todo app changes as you work through the lab, | |
| 33 you can upload the code in each lab and launch the app from a new tab.</p> | |
| 34 | |
| 35 <h2 id="tutorial_structure">Tutorial structure</h2> | |
| 36 | |
| 37 <ul> | |
| 38 <li>Set up development environment: <a href="app_codelab1_setup.html">lab1_setup
</a></li> | |
| 39 <li>Create basic app: <a href="app_codelab2_basic.html">lab2_basic</a></li> | |
| 40 <li>Create model-view-controller: <a href="app_codelab3_mvc.html">lab3_mvc</a></
li> | |
| 41 <li>Test app **Work-in-progress**: <a href="app_codelab4_testing.html">lab4_test
ing</a></li> | |
| 42 <li>Save and fetch data: <a href="app_codelab5_data.html">lab5_data</a></li> | |
| 43 <li>Manage app lifecycle: <a href="app_codelab6_lifecycle.html">lab6_lifecycle</
a></li> | |
| 44 <li>Access user's data: <a href="app_codelab7_useridentification.html">lab7_
useridentification</a></li> | |
| 45 <li>Access resources from the web: <a href="app_codelab8_webresources.html">lab8
_webresources</a></li> | |
| 46 <li>Create multiple views: <a href="app_codelab9_multipleviews.html">lab9_multip
leviews</a></li> | |
| 47 <li>Publish app in Chrome Web Store: <a href="app_codelab_10_publishing.html">la
b_10_publishing</a></li> | |
| 48 </ul> | |
| OLD | NEW |