| <h1 id="lab_2_work_with_code">Create Basic App</h1> |
| |
| <p>There are three core pieces to any Chrome App:</p> |
| |
| <ul> |
| <li>The manifest that describes meta-information about your application: |
| name, description, version number and how to launch your application</li> |
| <li>The background script, |
| which sets up how your application responds to system events |
| such as the user installing and launching the app and the system suspending it</li> |
| <li>The view |
| (which is optional, but you normally need to show the user something)</li> |
| </ul> |
| |
| <p>Let's look at each of these components at their simplest level.</p> |
| |
| <p class="note"><b>Tip:</b> |
| If you use the Sublime Text editor with |
| <a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>, |
| you can create these three files with a click (Chrome -> New App -> Hello World). |
| </p> |
| |
| <h2 id="manifest">Create manifest</h2> |
| |
| <p>In an empty directory (let's call it <code><myappdir></code>), |
| create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a> |
| </p> |
| |
| <pre data-filename="manifest.json"> |
| { |
| "manifest_version": 2, |
| "name": "My first app", |
| "version": "1", |
| "app": { |
| "background": { |
| "scripts": ["main.js"] |
| } |
| } |
| } |
| </pre> |
| |
| <h2 id="background">Create background script</h2> |
| |
| <p>In the same directory, |
| create the background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> |
| |
| <pre data-filename="main.js"> |
| chrome.app.runtime.onLaunched.addListener(function() { |
| chrome.app.window.create('index.html', { |
| bounds: { |
| width: 500, |
| height: 309 |
| } |
| }); |
| }); |
| </pre> |
| |
| <h2 id="view">Create view</h2> |
| |
| <p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a> |
| |
| <pre data-filename="index.html"> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Hello World</title> |
| </head> |
| <body> |
| <h1>Hello, World!</h1> |
| </body> |
| </html> |
| </pre> |
| |
| <h2 id="install">Install and execute sample app</h2> |
| |
| <ul> |
| <li>Go to <code>chrome://extensions</code>.</li> |
| <li>Load unpacked extension...</li> |
| <li>Select the <code><myappdir></code> directory.</li> |
| <li>Open a new Chrome tab.</li> |
| <li>Click on the "My First App" icon.</li> |
| </ul> |
| |
| <h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2> |
| |
| <p class="note"><b>Tip:</b> |
| If you have enabled Developer mode in <code>chrome://extensions</code>, |
| your apps can be inspected and debugged using the Chrome Developer Tools. |
| Just like any standard web page, right-click on page and select Inspect Element. |
| For the background page which doesn't have UI, |
| you can either right-click on any app window and |
| select <code>Inspect Background Page</code> or |
| go to <code>chrome://extensions</code> and click on Inspect Views...</p> |
| |
| <ol> |
| <li><p>Change the text "Hello world" |
| to "My first app" in index.html.</p></li> |
| <li><p>Change the |
| <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> background script to create two windows instead of one. |
| Don't bother to create another html. |
| For now, you can open index.html on both.</p></li> |
| <li><p>After changing code, |
| right-click on your app and select Reload App to reload the changed files. |
| All Developer Tools windows will be reopened when you reload your app.</p></li> |
| <li><p>Launch the app in a new tab page. |
| Move the top window and you will see the second window behind it.</p></li> |
| </ol> |
| |
| <h2 id="takeaways">Takeaways</h2> |
| |
| <ul> |
| <li>Chrome Apps have three basic pieces. |
| The first and foremost is the manifest, which describes your app, |
| requests special permissions, defines important meta information and much more. |
| The second part is the background script, |
| which contains all logic not tied to a specific user interface. |
| The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li> |
| <li>Chrome Apps can be debugged just like standard web pages |
| using the Chrome Developer Tools. |
| But since an app doesn't have the Reload control of a browser, |
| a Reload App option has been added when you run in Developer mode.</li> |
| </ul> |
| |
| <h2 id="you_should_also_read">You should also read</h2> |
| |
| <ul> |
| <li><a href="first_app.html">Create Your First App</a> tutorial</li> |
| <li><a href="app.runtime.html">chrome.app.runtime</a> reference</li> |
| <li><a href="app.window.html">chrome.app.window</a> reference</li> |
| </ul> |
| |
| <h2 id="what_39_s_next_">What's next?</h2> |
| |
| <p>In <a href="app_codelab3_mvc.html">3 - Create MVC</a>, |
| you will use either pure JavaScript or |
| <a href="http://angularjs.org/">AngluarJS</a> |
| to build your app's model, view, and controller.</p> |