shortcuts - FORUM - Ning Creators Social Network2024-03-29T13:04:35Zhttps://creators.ning.com/forum/topics/feed/tag/shortcutsHow-to Create A Google Chrome Web App for Your Ninghttps://creators.ning.com/forum/topics/howto-create-a-google-chrome2011-02-27T22:55:06.000Z2011-02-27T22:55:06.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p><span style="font-weight: normal;">In the past, i showed you <a target="_self" href="http://creators.ning.com/forum/topics/how-to-turn-your-network-into">how to create a desktop extension for your Ning network using chrome</a>, but that was just too easy. Now I am going to show you a trick that takes only a few minutes and in the end you'll have a Google Chrome Web App of your Ning network and can submit it to the Chrome Web Store for your members to download and use. Here is a look at the finished product as seen in the Google Chrome Browser (along with a custom theme I made for my <a rel="nofollow" target="_blank" href="http://landsurveyorsunited.com">network for land surveyors</a>, which may become a future how-to post):</span></p>
<p><span style="font-weight: normal;"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/545879?profile=original"><img class="align-center" width="350" src="http://storage.ning.com/topology/rest/1.0/file/get/545879?profile=RESIZE_480x480"></a><br></span></p>
<p><span class="font-size-5" id="more-11140"> What the heck is a Chrome Web App?</span></p>
<p>You can create application shortcuts to websites that you regularly visit, as well as apps that you've installed from the <a rel="nofollow" href="http://www.google.com/support/chrome/bin/answer.py?answer=1047776">Chrome Web Store</a>. These shortcuts can be placed on your computer desktop and menus for quick and easy access.</p>
<p><span class="font-size-5">What is required to make a CWA?</span></p>
<p>A Chrome Web App requires two components, the Manifest and an Icon.</p>
<p>The <strong>Manifest</strong> is a JSON file with the name<strong>manifest.json</strong></p>
<p>The <strong>Icon</strong> is a 128px x 128px image that will be used on the New Tab page.</p>
<p>To create the Manifest, copy the following into a text editor like Notepad or TextEdit:</p>
<p>{<br> "name": "Your-Network-Name",<br> "description": "Your Description of Your Network",<br> "version": "1.0",<br> "icons": {<br> "128": "128.png"<br> },<br> "app": {<br> "urls": [<br> "http://www.yournetwork.ning.com/"<br> ],<br> "launch": {<br> "web_url": "http://www.yournetwork.ning.com/"<br> }<br> },<br> "permissions": [<br> "unlimitedStorage",<br> "notifications"<br> ]<br> }</p>
<p> </p>
<p>You will need to make the appropriate changes (replace text and urls with red line beside them with your own) to the areas indicated below (name, description, urls, and launch):</p>
<p><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/545926?profile=original"><img class="align-center" width="470" src="http://storage.ning.com/topology/rest/1.0/file/get/545926?profile=original"></a></p>
<p>Once this is done, save the file as <strong>manifest.json</strong> (NOT manifest.json.txt!!!)</p>
<p>Next, you need to have created an icon for your web app. You can use any graphics application such as photoshop or GIMP or web app that allows you to save it as a 128×128 png file. Save the file with the name 128.png.</p>
<p> </p>
<p>NOW...Create a new folder somewhere on your computer and give it a name (connecting the words in the name with either an _ or - for example: Your_Network )and give it the name that you will call your Web app and place both the manifest and icon files inside the folder.</p>
<p><strong>Now it’s time to install the Web App into Chrome.</strong></p>
<p>1. Open Google Chrome.</p>
<p>2. Click the <strong>wrench</strong> in the upper-right corner of the application.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/gprint_1.jpg"></p>
<p>3. Click <strong>Tools</strong> and select <strong>Extensions</strong>.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_ext1.png" title="chrome_ext" width="450" height="398" class="alignnone size-full wp-image-11150"></p>
<p>4. On the right side of the Extensions page, click the <strong>+</strong> that is next to Developer mode.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_devmode.png" title="chrome_devmode" width="151" height="47" class="alignnone size-full wp-image-11143"></p>
<p>5. Click the <strong>Load unpacked extension</strong> button.</p>
<p><img src="http://www.tech-recipes.com/wp-content/uploads/chrome_loadext.png" title="chrome_loadext" width="401" height="158" class="alignnone size-full wp-image-11144"></p>
<p>6. Browse to the Web App’s folder and click <strong>OK</strong>.</p>
<p>BOOM!! Your web app should now be created for your network, any errors are likely a manifest typo. Go back and check the manifest for any missed character(or an unnecessary ones).</p>
<p>Now when you click on the<strong> New Tab page in Chrome Browser</strong>, your new web app will appear with the others as shown above.</p>
<p> </p>
<p>Whew..this post got long....i will create a follow up post soon to show you how to submit it to the Chrome Web store and share with your members. For now, you have all you need to run your new app on your computer.</p></div>