Skip to main content

Build A Simple Sales System using Google Drive



Google Drive is a free-to-use cloud service with a 15 GB limit storage. 15 GB is large enough to store documents, and "program" too. Yes, it's correct. We can program Google Drive. This blog is a step-by-step tutorial to show you how to build a simple P.O.S. system on Google Drive.

Create a Google Sheets to define the products

1. Login to Google Drive using your Gmail account and create a Google Sheets:
2. Input the products in the Google Sheets

Create a Google Forms for sale input

1. Create a new Google Form

2. Edit the form and the first field
Note that leave the option field unchanged. We'll assign it programmatically in below


3. Add a quantity field


4.  Add a last field for the price input


How to copy data from Google Sheets to Google Forms?

We need to add a script to do that. Google developed Google App Script (GAS) for us to achieve that. Now go back to the Google Sheet we just created above. Then enter to the script editor

You'll see the below screen. Then change the script title

Then copy & paste the below codes to the script editor

Click the [Run] icon to run the script. For the first time, Google Sheet asks your permission. Click [Review Permissions] and sign in with your Google account. Then click the [Allow] button:

Then close the script editor. Go back to the Google Sheet. Insert a Drawing to create a button

Then the drawing board shows up

Click [Save and Close] when done. We'll need to assign the script for the button

Then type: updateFormBySheetData

After that, you can copy the product data from the Google Sheet to the Google Form when you click the button like this


Setup the Google Form Submission Data Save To the Google Sheet

Open the Google Form, and follow the below steps


Then select "Select existing spreadsheet" and select the Google Sheet we've created

Then open the Google Sheet. You'll see there's a new sheet
then we can name it freely such as Sale transaction.

Perform Daily Selling Operation

Before performing daily sell operations, we'll need to un-restrict other users can open the form. To do that, open the Google Form we've created above. Then follow the below steps

Then the settings windows popup, un-check the "Restrict to users ..." and Save the changes, as shown below


We are all set. We can perform daily selling input with the Google Form hyperlink. To obtain this hyperlink, open the Google Form we've created, and then follow the steps shown below

Then we can paste the hyperlink to the browser when perform selling every time. The form input is like this

After that, I submit several transactions. The results like below

Generate charts for sales analysis

The transactions can be aggregated and transform into meaningful reports. First, we need to make an amount column

Then we'll create a chart. First select Product and Amount columns

Then create a chart

Define the chart data

As you can see, the sales chart is more appropriate. Furthermore, we can add the product sold quantity alongside the amount

Below is the final chart

Conclusion


Google Drive is not only for store office files but a programming platform with no charge. We can program this platform with a scripting language called Google App Script (GAS). The syntax of the Google App Script is 100% Javascript because its kernel is a V8 Engine. The same Javascript engine inside the Chrome browser. So GAS is powerful, high performance, and easy to learn.

I will write more blogs on GAS to demonstrate it is very good for office automation or rapid application development. Actually, it is something like a low-code development platform. But without a monthly fee.

Comments

Popular posts from this blog

Create An Online Store Theme Used By MyCMS

MyCMS is an open-source Content Management System to generate static online shop website. You can use my hosting to input your products, or you can download the source codes and host it in your own server (running NodeJS). Please refer to my Github repo for the detailed installation instructions. This blog is a step-by-step tutorial that shows you how to create an online-shop theme. In this tutorial, it’s using my hosting to input the shop details and products. If you’re hosting the MyCMS by yourself, just change the domain name to yours will do. Introducing MyCMS Before making the theme, you’ll need to use MyCMS to configure the demo shop and input two demo products. MyCMS generates a static website via a theme. The generated static website is NO server program required. You can put the website files (HTML/CSS/JS) to any CDN, hosting. Shop Configuration You must prepare below settings Before using MyCMS: Setting Description Example Store name Your store name will be displayed in t...

How I make a web-components based dynamic Javascript page at the top of Google Search

Introduction Everybody wants their website shown at the first position of Google search. SEO (Search Engine Optimization) is a big topic. I just helped my client's website shows the database records at the top search rankings (at least several Chinese generic keywords). See the three example questions all are listed at top ranking: Website background: My client's website  popa.qa  is a traditional Chinese Q&A site that lets members ask and answer questions. All answers and questions are storing in the database server. Step 1: Create The Project This blog illustrates the problems and the steps to fix that with project source codes. Below is the description of the basic project: NodeJS backend (server.js) Develop an API ( /get-database-records ) to simulate getting database records Web-components frontend (index.html) An example component IndexPage  make use of  LitElement to render database records To start the server type: npm start Then I check the webpag...

Progressive Web App Wordpress Theme (Part 1/2)

After I read two articles: Progressive Web Apps Are The Next Big Thing and More Surprising Statistics About WordPress Usage . I decided to build a Wordpress theme which integrated Progressive Web Apps (PWA) to see how cool it is when two “Big Thing” mix together. TL;DR To avoid Too Long; Didn’t Read. I break the whole procedure into two blogs. In part 1, I will build a Progressive Web App in the local server. What PWA features to be built here? According to PWA wiki , the PWA will be progressive enhancements. The final webapp will be: Responsive design: I choose Bootstrap 4 because it’s mobile-first design. Contents retrieve from Wordpress CMS via REST API . It’s a natural way the App is developed in Javascript. Offline support: The PWA still can run and display the contents when no Internet connection. Installable on Android home screen: I w...