Hosting for your files instead of Google Drive #2 (Firebase)

In my previous blogpost I have described first alternative for hosting files instead of Google Drive - Google Storage.

Today I would like to introduce another alternative - Firebase. It is a real-time database for saving JSON objects through REST API. The Firebase also offers hosting for your files, which are served under HTTPS.  Moreover, a free plan is available. You can upload for hosting 5 GB with max. traffic 30 GB. There is also a paid plan, where you can get more storage/transfer and setup custom domain. (Firebase pricing)

Let's go!

1) First open console https://console.firebase.google.com/?pli=1 with your Google Account

2) Create new project (or import your Google Cloud project and connect to it)

3) Choose project name (I recommend to choose more memorable URL address lik apps-script-project.firebaseapp.com. Dont forget that must be unique)

4) Now you have to install firebase tools on your computer via npm.

Note. If you have never used npm to install app, please download and install nodejs https://nodejs.org/ (npm - node package manager is included)

If you have already installed nodejs, you can type into shell/command line

npm install -g firebase-tools

5) Login into your Google Account. Type

firebase login

and authorize access in opened browser

6) Type first command  to run code initialization.

firebase init

7) Then select Database row with arrows keys UP/DOWN and press SPACE key.
We want to confgure and deploy only Hosting options.

( ) Database

(*) Hosting

Press ENTER

8) Select Firebase project

9) Choose which directory will be setup as public (=contains files hosted on Firebase). Public is as a default opt

10) Don't configure as single-page app, because all assets will be redirect to index.html (press N)

11) The last step is to deploy files into Firebase by code (Rememeber, that you should be in your directory)

firebase deploy

12) Now you can access your project at URL name

http://apps-script-project.firebaseapp.com

Every deployment is logged in dashboard, where you can revert into any previous version/state.

Read More

Hosting for your files instead of Google Drive (Google Storage)

A lot of not only Google Apps Script developers and users have used Google Drive feature to host any file as webhosting. It was useful for CSS files, images, JavaScript libraries, which can be used in code. Deployment was very easy - you have just copied files into specific folder and change sharing options.

Google recently announced, that hosting feature will be deprecated (more information here). Users have, according to deprecation policy, one year to find out a new place where to store files.

I was thinking about several options, so I would like to bring some alternatives.

The first one is Google Storage, which is a part of Google Cloud platform

Google Storage allows you to host any file with advanced possibilities like control who can read/write, monitor of traffic etc.

The main advantage is connection with App Script. Every Apps Script project has also Cloud project in Developers console (http://console.developers.google.com)

From Google Apps Script editor choose Resources --> Advanced Google services

In the new window, click at link "These services must also be enabled in the Google Developers Console."

In Developer console,  select Storage - Cloud storage. If you open console for the first time, you have to click button Enable billing (In this section you will fill in credentials like your name or number of credit card)

Now it is time to Create a bucket. Have you ever heard about it? The bucket is virtual space, where your objects (files) are stored. You can have serveral buckets for one Cloud project

Select name of the bucket. Important - this name must be unique in all Google Cloud Storage platform

Now you can create a new folder inside the bucket and upload files - by clicking button or drag'n'drop like in Google Drives. It is similar, isn't it ?


The last thing is publish on the web by click on checkbox

The final URI will like:

https://storage.googleapis.com/BUCKET/FOLDER/load.gif

Now you can insert your file in your Apps Script HTMLService code or send link to someone else.

Google Storage is a paid service, but the price is low and according to using of service (=cloud).There are three main questions for you

1. How much data do you need to store ? (1GB per month = $0.026)
2. How many requests do you do? (10 000 requests for $0.01)
3. What is total traffic through your bucket ( 1GB of traffic in EMEA/AMERICA= $0.12)

So if you are planning to host 10 MB ($0.01) with total loading 100 000x ($0.01) and traffic 1GB ($0.12), you will finally get receipt $0.14 for month!

Google prepared online tool to get information about price: https://cloud.google.com/products/calculator/

Conclusion

I am just starting use this way to host files, but I have already recognize "best pattern". Its looks like, that is better to create one main project in Developer Console, which wont be connected to any GAS  project. Then for every GAS project create a new bucket.. 

Read More

Material Design into your Google Apps Script application

Google recently introduced Material Design Lite, which is library of components and templates in pure CSS, HTML and JavaScript without any Polymer implementation.

This is useful for your Google Apps Script web-apps, because you just insert CSS into your rendered HTMLSevice. You don't have to vulcanize html files

At top of your code insert this snippet

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Now you can add class name into your already written HTML elements. For example if you have created

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Send form</button>

Modularity first! Google offers customize your color scheme. There is online tool, where you can choose primary and secondary color. The generated unique URL defined your setup.

I have already implemented Material Design in public.

At AppSatori we launched free tool Google Apps Finder. If you typed domain, you get response whether company using Google Apps.

I needed create easy and fast first prototype. Instead of creating design and graphic elements, I have put together all material elements.

Live demo is available at https://script.google.com/macros/s/AKfycbxAGnsK0FcGIPB0Kfl38Bx4PbLa9hXZd4nqJ6-cqrcwr4alFllD/exec

Read More

Recursion in Google Apps Script

The recursion is very usefull and probably first hard-to-understand-knowledge for new programmers. It is usefull when you want to to call the same function again and again, but with different values as a parameter.

Well know example is calculating factorial. Factorial of 5, contains factorial  4 and its contains factorial of 3 etc.

...
5! = 5 * 4! = 5 * 4 * 3! = 5 * 4 * 3 * 1 = 120
4! = 4 * 3! = 4 * 3 * 2! = 4 * 3 * 2 * 1 = 24
...

So you can write function like

function factorial(n) {
  if (n == 0 || n == 1) return 1;
  if (f[n] > 0)  return f[n];
  return f[n] = n * factorial(n-1);  
} ​

If you run factorial(5), it will call function 5 time. Every new calling will inserted into another.

There is small limitation in Google Apps Script during recursion. You can call only 1000 inherited functions.
If your script call multiple times, you will get error:
Exceeded maximum stack depth 

Read More