🟦 [FREE] GD Connector - connect users to their own Google Drive and Google Sheets

iconGDC96

GD Connector

Note/Update: Google have "upped the ante" on requirements for app verification, even with the web app I already have verified with them. You need to decide whether you want to jump through all their hoops, or to stick with an unverified web app, which gives your users an uglier first time sign up....

This extension works with a Google Apps Script Web App to connect a user with their own Google Drive and Google Sheets. You need both entities for everything to function correctly. The extension works by using a webviewer to maintain the google sign in and authentication of the AI2 app, and all calls and responses go through the webviewer. It is in this way that the user can connect to their own google drive. There are @ 20 Drive functions and @ 20 Sheet functions available. Included in the extension are blocks to handle base64 conversion and JSON array conversion.

  • Latest Version: 1.0
  • Tested: This has been tested on App Inventor 2 using Android 10 and 12 devices, companion 2.62, and compiled apk. Also tested with a verified and unverified web app. It may work on other derivatives....e.g. Kodular/Niotron/etc.
  • Released: 4 March 2022
  • Last Updated: 4 March 2022
  • Built: Using the Rush Extension Builder by @shreyash
Instructions

Google Apps Script Web App

  1. In your google drive, create a new Apps Script project, you can name it as you wish.

  2. Paste the contents of Code.js into Code.gs, overwriting any thing that is there.

  3. Create a new script file in the project called Functions.gs.

  4. Paste the contents of Functions.js into Functions.gs, overwriting any thing that is there.

  5. Save both .gs files.

  6. Publish your apps script as a web app, with, using the Legacy editor:
    gaswpsetup1
    or using the new editor:
    gaswpsetup2

  7. Get the script url, and keep it safe.

Extension

I will advise you to try out the demo aia project first, because that will hopefully show you how everything fits together. Once a few variables are filled in with IDs or links, all the functions can be used, and everything is returned via notifiers and saved to tinyDB. The demo AIA also contains some helper variables that show the data structures required for some of the functions.

There is also a barebones starter aia project, with only the things you need to get up and running. These are the blocks required for basic setup:

  1. The extension will require the web app script url, so ensure you have a variable for that, and that you set this using the property block for the script url on initialise.
  2. Screen1.initialise will also need the following blocks to setup the webviewer correctly.
  3. You also need to setup the WebViewString Changed block, to handle all the returns from the script to the webviewer, and to deal with authentication.
  4. On first run of the aia project, you will need to authenticate with the web app. You may first be asked to sign in to your preferred google account. Once signed in, the webviewer remembers you from then on. You will then need to authenticate with the web app, and give it permission to access your google drive. Only the web app can access "your" google drive, I can't, the developer can't, only you, the user, when authenticated through the app. As the developer you will not have had the chance to get your web app verified, this will present a couple of extra "ugly" screens about the web app being unverified (you will be used to this if you have created web apps or functions with apps script). Once authenticated, the webviewer will display this page:

GDCAuthPage

and the user can press on the Close button and use your app.

...

Blocks - there are a lot of blocks ;)

Methods

Properties
gdcProperties1

Events

...

Usage - may be easier to view by loading the demo aia

Methods

gdcUsageMethods11

Events

gdcUsageEvents7

Demo Images

GDCDemoMainMenu

Credits
My thanks to Luke Gackle, Sunny Gupta and Juan Antonio for their snippets of source code that helped me put this together, and thanks to Juan Antonio and Preet Vadaliya for their support and encouragement.

Downloads

You will need to setup your own web app for the AIA projects to work

Demo AIA:
GDConnectorDemoV2.aia (60.0 KB)

Barebones AIA
GDConnectorV2BareBones.aia (42.8 KB)

Code.js

Functions.js

Extension
GDConnector

Useful Links
How to apps script project and versions links

GD Connector Site

Finally....
Enjoy :smiley: , and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

#####################################################################
This work by TIMAI2 is licensed under a
Creative Commons Attribution-ShareAlike 4.0 Unported License with attribution.
Please use name = TIMAI2 and link to this source page when giving credit.
#####################################################################

10 Likes

Wonderful. So many blocks and demo aia.

One question : is the webviewer has to visible? If not, then why not create it dynamicly in the source code?

Thank you :+1:

The webviewer doesn't have to be visible for this to work, it is made visible in the demo for the completion of the authentication process, and then checking of continued authentication. Once authentication is completed, the webviewer can be made non-visible.

If only I knew how :wink:

To be honest, with so much else going on in GD Connector, it didn't cross my mind :slight_smile:

Would need to test to ensure that the sign in and authentication cookies did not get lost on app restarts, otherwise users would have, as a minimum, to keep signing in to their google account.

[EDIT] Went off to try it, using your CompCreator extension, but realised I would have to have a WebViewer component in place anyway in order to get at the any component webviewstring Change block :upside_down_face:

3 Likes

CompCreator mainly use reflection, but this one no need reflection, you may check CustomWebviewer extension.

Awesome. This is painful work but offered us free to one and all. Epic extension
:pray:
:pray:

:+1: :+1: :+1:

how can I pick file from ASD this issue prevents me to upload any file to google drive

Your app has read write access to files in its ASD. Use the file component blocks to return a list of files in your ASD for selection.

please can you present an example by blocks

There are many examples on the community, try a search....

Also check the first post for usage, there is an example to upload a file (using base64 and the script) from the ASD.

It says error 403: disallowed_useragent
project does not comply with "use secure browsers" policy

See under the 1.2 update here:

https://community.appinventor.mit.edu/t/webviewextra-upload-download-files-with-webviewer/76346

more needs to be removed from the provided useragent now, or you need to cook your own.