August 7, 2013

Ways to share anything with anyone with Gdrive public HTML hosting!


Looking for sharing your files with the world, but just sharing Gdocs isn't good enough for you? Don't worry! Google Drive has a special service called public HTML hosting, which allows you to transform any Gdrive folder into a virtual "Web Server"! When others access the page, they see a list with all the folders public content (by default everything), if they click on the file, if it's not something Gdrive can open directly (like images or docs) the users browser will simply download the file.

Let's see an example, this Gdrive Folder contains a .rar file, since Gdrive cannot open this kind of files directly, when you click on it, your browser will start downloading it:

https://googledrive.com/host/0B_RClkFMLkcpdXlOZWdwM2JuWUk/

You can even put it inside an iframe to show its contents directly on a website!



Sweet huh? The best is that the content keeps in sync with your Gdrive, so if you change your content, the public version will be instantly updated! You can even host webpages! just throw some index.html file on that folder and when the users open the folders URL, they will receive the content of index.html instead of the default folder view.

But that's not all you can do... if instead of using the folder's URL you point to a specific file, you can use the URL to share that specific file with someone, and when they open it, the file will start downloading automatically (except for docs, html and images)... but hey, that's not the cool part! you can use this specific URLs to stream multimedia content for you webpages! You don't even need to worry about a player, you can use HTML5 video or audio tags and show your content straight away!

This works even for large videos, here is a video of one of my cats (he's name is Volt) playing zelda:


Right on huh? But no, you cannot have my cat... but you can host your pet's video and share it with us in the comments section at the bottom of this article!

To make things easier, I also added a copy of a very nice HTML5 video converter for windows (there is a version for Mac OS users on the authors site), it does a great job getting your video ready for some HTML5 action.

Just remember, you are responsible of what you share on the internet, so be careful with how you use this tool, never distribute proprietary material like music, movies or videoclips.

Happy coding!

July 26, 2013

How to send data to Spreadsheets using Apps Script UI.

@reicek

One really cool thing about Google Spreadsheets is that you can effectively use them as an extremely user-friendly cloud Data Base for your WebApps.

Unlike a normal Data Base, spreadsheets can pre-process the information it receives and automatically keep calculated values updated (like total, averages, etc...) they are extremely flexible and with proper planning they can be a great alternative in small-medium applications.

Tip: You can programmatically create new spreadsheets to keep the information light and organized (remember Spreadsheets has a limit quota of about 400,000 cells), its like having a new Database each week/quarter/month. You can even have an extra one that keeps the totals for each year (storing only totals taken from smaller Spreadsheets), and on top of that, a "Global" one that keeps the totals of all the yearly ones... And by being stored that way, creating reports and charts its very easy.

Extra tip: For the "Central" Databases, use Spreadsheets for simple Data, Fusion for advanced central data or Big Query if you need fast processing on very, very large amounts of data.

The easiest way to store and administer the information flow to a Spreadsheet its via Apps Script, and the easiest way to send information to Apps Script it's using UI services. For more advanced applications I suggest the use of servlets, which are basically small Apps Script programs acting as very specialized servers to query, process and deliver specific data to and from your Webapp (using the Content Services) or even JDBC-compliant data base (Google Cloud SQL, MySQL, Microsoft SQL Server, Oracle, étc.) using Jdbc Services, you can call it a "trusted-robot-in-the-middle" approach to make things easier and faster.

Advanced Professional Tip: Properly using Servlets along with your usual JDBC-compliant Database it's extremely useful since it lets you greatly improve performance because Apps Script Servlets has fast, direct access to all Google Services and once authorized, they don't need to deal with oAuth every time they make a request, which is very convenient. Also, when Google makes updates, you don't need to update your server's code to regain functionality, only the servlet and you can do that from virtually any modern browser (even some mobiles!). Also it's easy to identify the servlet that needs updating. Since the output from the servlet will remain constant through time (any text array like JSON or a binary blob), you don't need to worry about updating your servers code. Also, all this parallel processing will greatly reduce the load on your server, saving you a lot of money on hardware and bandwidth. Additionally, Google Spreadsheets, if published, can provide direct RSS or ATOM feed.

So, first let's Manually create a Spreadsheet, for this example I created one called "spreadsheetDatabase" and then I set it's access to "public on the web" so it gets a public URL, you can be more restrictive and allow only specific users to interact with the spreadsheet. For now, you only need the "Key-ID" of the spreadsheet, you get it from the URL in your browser while you have it open, in our example, the key is the part highlighted in red.

https://docs.google.com/spreadsheet/ccc?key=0AvRClkFMLkcpdDZ4VHlGd016cTQ1dUo4LXVaenhYSWc#gid=0

Now we need to pre-fill the spreadsheet with the name of the fields we want to use, it's not necessary for the script to work, but will make your Spreadsheet DB as readable as any normal spreadsheet, it can also be used to automatically apply headers to charts and reports based on the Spreadsheet. For our example we will only need a field for "name" and a field for "comment", its a best practice to delete all the unused rows and columns from your spreadsheet, so it stays as short as possible. Our example will look like this:


So far no sweat right? Ok, then let's hit the code!

So first things first, you need to create a new Google Apps Script project. In it, we are going to need 2 functions, one that's going to create and deliver the Webapp's U.I. and another one to send the data to Google Spreadsheets.

Let's start with the U.I, for this we are going to be using Google Apps Script U.I. Services, our code will look like this:


Note that sendData it's the name we choose for the function() that we will use to send our data to our spreadsheets, let's see how it looks for our example:


Now let me explain a little more about what's going on that last piece of code... First the e you see on sendData(e) is called an event object, we use it to pass information from one function to another.

We start with the .insertRowAfter() method to add a new row to the sheet (so we can keep it always using the exact number of cells we need).

Then we use the .appendRow() method to insert the data carried by the event object (e) data into the new row.

Then we open a Popup telling the user that the information has been sent, this is very important both, for the user to confirm that the information was sent, and secondly to give the Spreadsheet time to process properly the new row.

Important Note:  In this scenario, Spreadsheets are not very good at handling multiple insertions at the same time, ScriptDB and (and JSON) it's a better alternative as described on this other article.

Now let's see it all together:


Tip:  To save you the trouble later, go to File -> Upgrade authorization experience...

Now let's give it a first run so it get's your authorization to access Spreadsheets.

And finally it's time to deploy the app, to do so go to: Publish -> Deploy as Webapp...


Since it's the first time, you are going to need to Save a new version (you can give it any name you like, tip: try to be descriptive with your version names).

Then you need to say the identity the app its going to use when making requests, in this case it need to me as me so the information is sent on my name (and with my permissions!), if you choose that the App is run as the User accessing the app then the spreadsheet will either need to be publicly editable, or only users with edit rights could use the Webapp, pretty convenient huh?

And last but definitely not least, we need to set up who has access to the app, Only myself works great for private apps and beta testing, Anyone means that any user with a Google Account can use the App, this is important if you need to know the user's identity or if your App requires to act on behalf of the other user and finally, Anyone, even anonymous in this case the App will need to run as you to get access rights to Google Services (or you can use a publicly editable spreadsheet).

When you hit the Deploy button you'll get 2 different URLs, the Current webapp URL which is the published version of your webapp, this shows the code saved under the Project Version tag, and a special developer link were it says: Test web app for your latest code, which runs the current version of your script code, this way you can make (and save) changes to the code, and once you get the desired behaviour, you save a new version and change the published version.

The user's will get an instant update of the code when you change the published version! Something went wrong with the latest update to your code? Don't worry, you can always go back to a previous version until you make the necessary changes to the code and save a new version. If necessary, you also get a special link to disable the Webapp, so you can quickly plug it on and off if necessary.

And now its finally time for our first run! Let's take a look at it:


It's probably not so flashy, but it works like a charm, plus you can always use HTML services (for advanced users) or embed the Webapp on a Google Site to add some styling.

Why don't you try out our example and leave me a comment? Here you can see the spreadsheet that stores all the data, remember it gets updated every 5 minutes, so feel free come back later to see your comment on this post!


Remember that besides the embeddable iframe you saw before, Spreadsheets can also be served as (click on the name to launch that versions feed!):









So, I hope you liked using Spreadsheets as Database with Apps Script, feel free to post your doubts, comments, ideas, etc. at the bottom of this article.

Happy Coding!

July 25, 2013

How to easily embed (iframe) Google Docs on your Web Pages!

Google Docs are pretty neat, they save as you type, you can easily share them with other gDrive users and even use them as a collaboration platform with up to 10 people working on it at the same time!

But sharing a Google Doc can go beyond simply sharing it with other gDrive users, if you go to:
FilePublish on the Web...


And click the Start Publishing bottom you'll get a Document Link and an Embeddable Code.


The Document Link its basically a special webpage that shows the contents of your Google Doc, and it gets automatically updated every 5 minutes! So anyone with the link can see it on their web browser, no extra software needed! And don't worry, unless you specifically allow public editing, no one can edit or delete your document.

This is very convenient, and to make it even more convenient, daddy Google is a big spoiler and added a few gadgets at the bottom so you can easily share your new and super cool Doc on a Webpage via G+, Gmail, Facebook or Twitter and save you some precious time!

But if you feel this is way too common user for your standards, there are more fancy ways to use this feature so you can use them embedded on your Webpage or Blog thanks to iframes, you can use this to show your Doc in 2 ways, with or without the "embedded" tag:

This is how it looks without the embedded tag:


Note that when the embedded tag isn't active, the background of the document its transparent and it shows the Doc's name on a speacial header and a footer from Google.

And this is how it looks with the embedded tag:


Note that when the embedded tag is active, the iframe height only affects the container, but not the document itself, so a scrollbar appears in case the document needs more space, the advantage is that you can use it without the document's title and footer.

Feel free to change the width and height to best fit your needs, you can also choose to use it with or without a frameborder.

So, what's the advantage of using an embedded Doc inside a webpage? Well they are great for content you wish to be able to update easily, it's way easier to update a Google Doc than a normal webpage, you can even do it from your mobile... also you can choose to allow specific people to be able to do edit the Doc and the copy on your site will get updated automatically. You can even choose to place different documents on a single page, each one with access to different users and you can even add some that can be edited by anyone!

So all this dynamic content doesn't sound appealing enough for you? Well, you can add some CSS3 goodness to your site and can make those Docs look like announcement boards with some cool animations and/or 3D effects... Also remember that with CSS3, all this special iframes can get this effects automatically, you just need to plan your code carefully.

Use Google Draws instead of Docs and you might find a new way to create easily updated banners for your pages...

Hope you liked this article, feel free to post your comments, thoughts or share your ideas at the bottom of the article. Happy coding!