ViziApps Operations - Registering the API

Your app can read data from or write data to Google Drive spreadsheets using four commands - insert, select, update, and delete. You set up these commands in the Manage Data page in ViziApps and associate them with an object, such as a button, in the app.

Before your app can connect to the spreadsheet, you must assign a registered API to your Google Drive account and specify some API information to authenticate it for the app. You should only need to do this once for the spreadsheet for a particular project. (The previous sentence may sound like a huge leap in complexity, but the process is largely mechanical and covered step-by-step in this section.)

Note - Google can change processes unexpectedly. If a step in these instructions is wrong, see the DIY Mobile blog at http://diymobileblog.blogspot.com/ and the ViziApps help. (To be notified of updates, follow me on Twitter at NeilEric.)

Note – Before starting this process, enable popups in your browser. (In IE, select Tools > Internet Options, select the Privacy tab, and deselect Turn On Popup Blocker.)

Follow these steps, starting in ViziApps:

1. Select any page in your app that uses data in the spreadsheet to start the process.
2. Click the Manage Data button. The Manage Data... screen opens.
3. Click the New App Data Source icon to the right of the All App Data Sources field. The New Data Source Type field displays to the right of the icon.
4. Open the New Data Source Type pulldown and select Google Spreadsheet. The Google Spreadsheet Data Source dialog box displays.
5. In the Data Source ID field, type an ID, such as GoogleDataSource. This is important because ViziApps lets you use multiple data sources for the objects on an app page, and the ID is what you’ll use to select the source when you click on the Select a Data Source... field pulldown on the Manage Data page.
6. Click the help icon in the upper right corner of the dialog box. The help displays.
7. Right-click the URL in step 3 of the help and select Open Link in New Window. The Google Developers Console displays.

8.       If this is your first API registration, click the Create Project button and follow the instructions on the screen. You only need to do this once no matter how many spreadsheets you have.

If you have already registered the API, go to step 9.

9. Click APIs & auth in the navigation list on the left. After a few seconds, you’ll see a list of service options to the right of the navigation list.
10. Scroll down the services list and set the status for Drive API and Drive SDK to ON. These two items will move to the “Status ON” section at the top of the list of services.
11. Click on Web Application (this is required) and click the Register button.
12. Click Credentials in the navigation list on the left. A large red Create New Client ID button displays.
13. Click on the red Create New Client ID button. The Create Client ID dialog box displays.
14. Click on Web Application under Application Type.
15. In the Authorized JavaScript origins text box, enter "https://viziapps.mobi".
16. In the Authorized Redirect URI text box, enter "https://viziapps.mobi/PageData/GoogleSpreadsheetsAuthorize.aspx".
17. Click the Create Client ID button. After a few seconds, the API Access window opens and lists settings for “Client ID for web applications” and several “Key for browser applications”.
18. Copy the Client ID value, return to the Google Spreadsheet Data Source dialog box (shown below for reference and still open in another browser window), and paste the Client ID value into that field.
    
    Note – Copy the Client ID value exactly as it appears, including any part that wraps onto a second line. Do not add spaces before or after the value.
    
        
19. Return to the Google Developers Console (still open in another browser window).
20. Copy the Client Secret value, return to the Google Spreadsheet Data Source dialog box, and paste the Client Secret value into that field.
    
    Note – Copy the Client Secret value exactly as it appears, including any part that wraps onto a second line. Do not add spaces before or after the value.
21. Click the Login to Google button and login to your Google Drive account. (You may not see this if you’re already logged into your Google Drive account.)
22. A Request for Permission window displays.
23. Click the Accept button. You return to the Google Spreadsheet Data Source dialog box, which now displays a Selected Spreadsheet field.
24. Open the Get Spreadsheets field pulldown and select the spreadsheet you want for your data. The list will show all spreadsheets in all folders, so be sure each spreadsheet has a unique name.
25. Click the Save button and wait until the “Your Database Info has Been Saved” confirmation message appears.
26. Click Close. You return to the Manage Page Data screen.
27. Click the green + sign to the right of the Select a Data Source... field.
28. Select GoogleDataSource (the ID you entered in step 5).
29. Open the Select a Page... pulldown and select the object for which you want to define the query. You can now define the query for that object using any of the four query commands.

You can now specify the data handling for the pages in your app.