Creating your Google Hangout Applications - welikepie/asos-hangout-app GitHub Wiki
The code for the four hangout apps that were just created now need to be turned into four fully fledged hangout apps. To do this, a google hangout needs to be created for each of the four folders created in the build folder.
1.1 To create your Google+ Hangout, visit the Google API's page. After signing in with your Google account (or creating one if you do not have one), you will see the following page. Click on “Create Project...”
1.2 After clicking “Create Project...” you will be taken to the “Services” page. This is where you will choose what Google Technology your application will be using. In this case we will be using the “Google+ Hangouts API” service. Click the button to turn the API “on”. This will now allow you to use Google+ Hangouts in your application.
When you click to turn it on, you will be presented some term of services to accept to continue using the API. Accept these terms and conditions.
1.3 Before we get to creating your hangout, you need to create an access key to use the Google+ Hangouts API. To do this, go to the “API Access” link on the left-hand toolbar.
You will be presented with the screen below. Click on the blue “Create an OAuth 2.0 client ID...” button to get started.
You will be shown a screen asking you to create you “Client ID”. Input the name of your application, the link to your logo (if you want) and a link to your homepage. Then click “next” to continue.
In the next step of creating the “Client ID”, you need to make sure your “Application type” is set to “Web application”. You also need to input your website URL.
Once you’ve finished, click “Create Client ID” and you’ll be able to work with the “Google+ Hangout API”!
1.4 Now, we’re ready to start creating your Google+ Hangout.
Click on the “Hangouts” link in the left-hand sidebar and you will be presented with the following page. Fill in the details like it has been done below, but with your own URL’s and descriptions. Make sure that “Application Type” is set to “Extension”.
Your “application URL” is where your hangout.xml is stored. This is the app.xml contained in each of the folders in the build folder which have just been uploaded to the server.
It is not necessary to include links to images, but it is recommended so your app has it’s unique visual style. If you choose to add images to your application, these can be found in the hangout-app/branding folder of the build directory, with 16x16, 32x32 and 240x140 size images present. It is required that you submit links to your Terms of Service, Privacy Policy, and Contact Page.
1.5 You may have noticed that you were unable to click “save” above if you’ve ticked “Make your application available to all users”, which you should have. We just have one more step to go through before you have a fully fledged google hangout app.
You need to become a registered “Chrome Web Store Developer”. This will allow you to publish your hangout so it can be used by others.
Right click the “Chrome Web Store Developer” link to open it in a new tab, so all the information you’ve just input doesn’t get erased.
You will be presented with the following page.
In order to become a Chrome WebStore Developer, and have the ability to make your Hangout App available to use by others, you need to pay a one-time $5 fee. Click “pay this fee now” to do so. Accept the terms and conditions and you will be taken to the transaction page via Google Wallet. Once that is done, your account will now be a registered Chrome Developer.
1.6 Go back to the Hangout you were creating and you should be able to click “save”. Your settings will save and you have now created your hangout app. This must be done for all four Hangout Builds, each with a different app.xml file.
Note: As the hangouts are being created, it is necessary to take note of the hangout ID’s for the next step, as they correspond to some of the fields in the package.js file necessary for the building of the main app.
- The ID of the app in directory admin/staging-app is referenced by stagingAdminAppId and is the admin side of the Staging section which determines whether a user can join the main hangout.
- The ID of the app in directory staging-app is referenced by stagingAppId and is the public side of the Staging app which the end user accesses to communicate with the staging team.
- The ID of the app in directory admin/admin-app is referenced by hangoutAdminAppId and is the admin section of the shop along experience which the ASOS team will see.
- The ID of the app in directory hangout-app is referenced by hangoutAppId and is the user facing app for the shop along experience, which the end users will see once they have passed through the staging app successfully.