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

Extensions
, ,
1

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:

blocksGDCV2Barebones
blocksGDCV2Barebones867×1322 143 KB

  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

gdcMethods1
gdcMethods1429×655 37.5 KB
gdcMethods2
gdcMethods2426×631 37.9 KB

gdcMethodMove1
gdcMethodMove1386×587 31.6 KB
gdcMethodMove2
gdcMethodMove2385×602 37.2 KB

gdcMethods5
gdcMethods5425×648 34 KB
gdcMethods6
gdcMethods6425×649 32 KB

gdcMethods7
gdcMethods7428×646 35.2 KB

Properties
gdcProperties1

Events

gdcEvents1
gdcEvents1428×621 35.2 KB
gdcEvents2
gdcEvents2428×627 34.3 KB

gdcEvents3
gdcEvents3425×626 34.5 KB
gdcEvents4
gdcEvents4427×572 30.5 KB

...

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

Methods

gdcUsageMethods1
gdcUsageMethods1629×626 63.6 KB

gdcUsageMethods2
gdcUsageMethods2676×630 67.4 KB

movemethods
movemethods492×727 72.5 KB

gdcUsageMethods4
gdcUsageMethods4737×624 64.7 KB

gdcUsageMethods5
gdcUsageMethods5725×566 66.2 KB

gdcUsageMethods6
gdcUsageMethods6724×203 24.9 KB

gdcUsageMethods7
gdcUsageMethods7563×715 69.8 KB

gdcUsageMethods8
gdcUsageMethods8515×600 61.4 KB

gdcUsageMethods9
gdcUsageMethods9506×586 55.3 KB

gdcUsageMethods10
gdcUsageMethods10668×706 68.4 KB

gdcUsageMethods11

Events

gdcUsageEvents1
gdcUsageEvents1533×591 45.4 KB

gdcUsageEvents2
gdcUsageEvents2682×706 65.1 KB

gdcUsageEvents3
gdcUsageEvents3570×594 46.9 KB

gdcUsageEvents4
gdcUsageEvents4529×591 45.5 KB

gdcUsageEvents5
gdcUsageEvents5553×589 47.5 KB

gdcUsageEvents6
gdcUsageEvents6583×591 49.4 KB

gdcUsageEvents7

Demo Images

GDCDemoMainMenu

GDCDemoDriveMenu
GDCDemoDriveMenu465×849 74.9 KB

GDCDemoSheetsMenu
GDCDemoSheetsMenu466×846 76.7 KB

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.
#####################################################################

11 Likes
4

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?

5

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
8

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

9

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

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

10

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

11

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.

12

please can you present an example by blocks

13

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.

14

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

15

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.