Flutter: Apps Script with Google Sheet
Host your database on Google Sheet without any back-end development and server space
Flutter has been able to grab the attention of the development community by introducing a style that allows for expressive liberty making it a joy to build UIs for mobile apps. It incorporates certain concepts familiar to modern development experiences like reactive programming and widget composition while using the Dart platform as its main base of operations.
Recently I was exploring some new possibilities in flutter & I came across to Google Apps Script. After some investment of time, I come up with basic CRUD operations with scripts.
What is Apps Script?
Google Apps Script is a rapid application development platform that makes it fast and easy to create business applications that integrate with G Suite. We write code in modern JavaScript and have access to built-in libraries for favorite G Suite applications like Google Sheet, G-Mail, Calendar, Drive, and more. There’s nothing to install —Google give us a code editor right in our browser, and our scripts run on Google’s servers.
From Where To Start?
Go to your google drive and create new Google-Sheet.
Add some fields, details, sheet name you want to use.
Go to the menu: Tools > Script editor.
Write some script as per the need.
Get sheet Id from URL and set it while opening google sheet like above example. (The secure way to perform task with google sheet is with its id.)
Go to the menu: Publish > Deploy as web app…
set access to Anyone, even anonymous. and deploy.
Sign in with your google account. Go with unsafe options below.
Allow permission to get the URL of your web-app API.
All setup is done :)
How To Implement?
For Network Request: http: ^0.12.1
For showing Response: flutter_flexible_toast: ^0.1.4
To keep this simple, Let’s code by one real example.
Here we have implemented the order of product mechanism. By this example, we are ordering one product and how to manage it at back-end, database, response, etc.
We need to create some dart classes as per the following.
One OrderSubmitModel.dart
One OrderResponseModel.dart.
FYI: To create response model,
- Export Google Sheet to CSV.
- There are some websites which converts CSV to JSON.
- Copy this converted JSON data and Convert this JSON to Dart.
One ScriptRepo.dart.
One HomeScreen.dart.
One Reusable OrderCard.dart Widget
One AppScript.gs
FYI:
Keep entire script in a separate project. Like for CRUD operations above, we have to create 4 separate projects.
The implemented resultant output would be like below.
Outcome Learning:
The one who doesn’t wanna bother about database, its hosting, API development can simply implement without any cost.
The simple basic CRUD script is implemented to kick start.
It doesn’t require to keep Google Sheet to your drive. One can change it’s location whenever he wants. The only dependency is it’s sheetId.
The script is not specific to Flutter. One can implement in any language, app, websites, etc.
Keep in Mind:
Every time we change something in script, we have to deploy with it’s new version. Without this the script will not show any effect at front-end. (Without deploying as new version the execution would be same as per the previous.)
We can also debug your script by adding debug points on clicking on left side of line number in script editor, and running it in debug mode after that.
We can also check the script execution, type, status, etc. based on time via it’s execution dashboard. (To navigate: Go to My Projects > Other Options at the right of the project)
Project Links:
Share your views in comment. :)
