src/chrome/common/extensions/docs/templates/articles/app_codelab_publish.html

   1 <h1>
   2   <span class="h1-step">Step 7:</span>
   3   Publish Your App
   4 </h1>
   5
   6 <p class="note">
   7   <strong>Want to start fresh from here?</strong>
   8   Find the previous step's code in the <a href="https://github.com/mangini/io13-codelab/archive/master.zip">reference code zip</a> under <strong><em>cheat_code > solution_for_step6</strong></em>.
   9 </p>
  10
  11 <p>In this step, you will learn:</p>
  12
  13 <ul>
  14   <li>How to publish a Chrome App to the Chrome Web Store.</li>
  15 </ul>
  16
  17 <p>
  18   <em>Estimated time to complete this step: 10 minutes.</em>
  19   <br>
  20   To preview what you will complete in this step, <a href="#view-in-webstore">jump down to the bottom of this page &#8595;</a>.
  21 </p>
  22
  23 <h2 id="about-web-store">Learn about Chrome Web Store benefits</h2>
  24
  25 <p>For those not familiar with the store, it provides several benefits to users and developers.</p>
  26
  27 <p>For users:</p>
  28
  29 <ul>
  30   <li>Added security &mdash; all apps and extensions are checked for Malware signals.</li>
  31   <li>All apps are maintained with the latest version the developer has published.</li>
  32   <li>Ratings and reviews provide a great way to see the quality of applications.</li>
  33 </ul>
  34
  35 <p>For developers:</p>
  36
  37 <ul>
  38   <li>You can upload your app once and know that it will be distributed to all users.</li>
  39   <li>Payments and subscriptions are built in.</li>
  40   <li>Your app is more discoverable to users.</li>
  41   <li>Tools to help you manage bugs and reviews from users.</li>
  42 </ul>
  43
  44 <h2 id="developer-dashboard">Upload your app via the Developer Dashboard</h2>
  45
  46 <p>The Chrome Web Store has a special dashboard for developers that lets you upload new applications and update existing ones.</p>
  47
  48 <p>The process of uploading apps is simple:</p>
  49
  50 <ol>
  51   <li>Compress your application's root directory (the folder containing the <em>manifest.json</em> file) into a .zip file.</li>
  52   <li>Go to the <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Web Store Developer Dashboard</a> and log in with a developer-verified Google Account. (If you don't have a verified account, you can <a href="https://chrome.google.com/webstore/developer/about_signup">sign up</a> for a nominal fee.)</li>
  53   <li>Click <strong>Add new item</strong>.</li>
  54   <li>Accept the terms and services agreement to continue.</li>
  55   <li>Use the <strong>choose file</strong> dialog box to find the .zip file in your system. Select that file to upload.</li>
  56 </ol>
  57
  58 <figure>
  59   <img src="{{static}}/images/app_codelab/webstore-file-picker.jpg" alt="Choose a zip to upload"/>
  60 </figure>
  61
  62 <p>You are nearly done. If you are not quite ready for the next step, you can save the draft for later, or you can publish it to a group of testers.</p>
  63
  64 <figure>
  65   <img src="{{static}}/images/app_codelab/webstore-draft.png" alt="Save a draft"/>
  66 </figure>
  67
  68 <h2 id="promotional-metadata">Add promotional materials</h2>
  69
  70 <p>Before you can publicly publish your app, you need to add promotional assets and extra meta information about your application.You should see a screen that looks like this:</p>
  71
  72 <figure>
  73   <img src="{{static}}/images/app_codelab/webstore-promotional.png" alt="Add meta information for your app"/>
  74 </figure>
  75
  76 <p>The below fields are mandatory:</p>
  77
  78 <ul>
  79   <li>A <strong>detailed description</strong> of your application. Write your description to entice users to download your app.</li>
  80   <li>A 128x128 <strong>icon</strong> to display in the store. You may re-use your app icon here.</li>
  81   <li>At least one 1280x800 or 640x400 <strong>screenshot</strong> or YouTube <strong>video</strong> to show off what your app does.</li>
  82   <li>A 440x280 <strong>small tile icon</strong> that will be displayed on the Chrome Web Store wall.</li>
  83   <li>The <strong>primary category</strong> where your app should be listed.</li>
  84   <li>Your app's <strong>language</strong> to help users find it.</li>
  85 </ul>
  86
  87 <p>Once you are happy with everything, you can now publish your application to the public.</p>
  88
  89 <figure>
  90   <img src="{{static}}/images/app_codelab/webstore-publish.png" alt="Publish your changes"/>
  91 </figure>
  92
  93 <h2 id="view-in-webstore">View your app in the Chrome Web Store</h2>
  94
  95 <p>You are done Step 7! You should have a link to your public Chrome App that you can share with the world.</p>
  96
  97 <figure>
  98   <img src="{{static}}/images/app_codelab/step7-completed.png" alt="The Todo app in the Chrome Web Store"/>
  99 </figure>
 100
 101 <p>Congratulations on completing this Chrome Apps codelab!</p>
 102
 103 <!-- <p>Ready to continue onto the next step? Go to <a href="app_codelab_mobile.html">Step 8 - Package your app for mobile &raquo;</a></p> -->