Welcome to our project Google Developers Hackademy,
where Spanish-speaking experts from Latin America
will show you some of our tools,
developer products, APIs and new tricks.
This course is divided into five parts.
We invite you to watch it and learn along.
Here we go.
Hi. Welcome back to the HTML web development
with Google Drive introduction course.
I'm Cesar Anton Dorantes,
Google Developer Expert for the Google Drive platform.
In the previous lesson
we learned how to develop an HTML5 app
hosted in Google Drive, capable of converting data
into charts using Google Charts.
In this lesson we'll see the following subjects:
Introduction to Google Spreadsheets;
Connecting your app with Google Spreadsheets;
and finally, a practice where we connect your HTML5 app
with Google's cloud.
Are you ready? Let's go!
INTRODUCTION TO GOOGLE SPREADSHEETS
Google Spreadsheets is a spreadsheet app
based on Google's cloud that presents
several important features that sets it apart
from other spreadsheet software,
starting with the fact that no additional software
needs to be installed to be able to start working,
since Google Spreadsheets runs straight on your browser.
Another important feature
is that your file is saved in real time,
therefore there's no need to be saving all the time anymore.
It also saves a history
of the changes performed to a document,
including time, date and user that performed the changes.
Google Spreadsheets boasts of Google Docs'
characteristic collaboration tools,
so up to 10 users can work at the same time
and on the same document,
and they all can see what the rest are doing in real time.
It even lets you open a chat window on the right
when several people are connected simultaneously.
This allows for a much more efficient and dynamic work flow.
Not only Google Spreadsheets offers the typical functions
you expect from a spreadsheet app,
but it also goes beyond and allows developers
to use those spreadsheets as databases in the Cloud.
But that's not all, they stand out from other databases
because the data is easily visible y editable
at any moment,
even by inexperienced people on programming
or on databases, which turns out to be very useful
for companies, since they don't need to train people
on how to access and edit the data in the system.
All this considered, Google Spreadsheets is,
by far, the friendliest database format until now.
You must be wondering what its storage limits are,
and it's actually very important to have that in mind
when a database based on this system is being implemented.
Google Spreadsheets' latest version allows you to store
up to 10 million cells per document,
with a maximum 256 columns in each sheet.
The platform lets you use up 40 thousand cells
with formulas to calculate its contents,
and 50 cells importing their data from external sources.
In case you exceed any of these limits,
your sheet will stop taking in new data,
to avoid the loss of them.
It's worth noting that if a sheet is too big,
it could show a lower performance than expected,
so it's not recommended to use them as databases
for big volumes of information.
If your project requires a broader database,
I recommend you try some of Google's other databases,
like Script DB or DataStore.
Remember you always have the highly advisable option
of doing programmatic backups for your databases
on a Google Spreadsheet.
This is possible by using Google App Script,
which includes an extensive function library
specially designed to work with Spreadsheets,
as well as several methods to import
your external data sources.
CONNECTING YOUR APP WITH GOOGLE SPREADSHEETS
An interesting feature for developers
is that Spreadsheets lets us publish the spreadsheets
on the Internet transformed into different formats,
which allows us to choose the one that bets adapts
to our needs.
The supported formats now are web page,
HTML code to insert in a page,
comma-separated values,
.txt, PDF, Atom,
RSS, Microsoft Excel
and Open Document spreadsheets.
Now that you know the options to publish
a Spreadsheet, it's time to put your knowledge to the test.
For that we'll use the app we created in lesson 2,
but we'll replace the part in which we manually declared
the data with a method that allows us to import them
from Google Spreadsheets.
You will be surprised with how easy it is to do it.
First we need to create a new Spreadsheet,
which we use to save the information
we're going to pass to our app.
You can do it from Google Drive's web app
by clicking on "Create" and then choosing "spreadsheet."
You can also create it by entering
docs.google.com/spreadsheet.
In order to use a Spreadsheet as a database
you need to publish it first.
For this, go to File menu and pick "Publish on the Web."
This will lead you to the publishing on the Web options.
The first thing to do is click on "Start publishing,"
then just copy the address that shows up
down on the "Obtaining a link to published data" section.
The information obtained by this mean
is updated approximately every 5 minutes.
Should you need updated-by-the-second data,
you'll need to create a Google App Script JSONP servlet.
I invite you to Google on how to create these backends
for your web apps.
For this lesson's example,
feel free to use the address that is shown onscreen,
which contains the chart I'm using for the example.
Notice that if you open it straight with your browser,
you'll see a representation of the chart data.
If you want to see the example chart from Spreadsheets,
use the address that is now being shown onscreen.
It is now time to start programming.
I recommend you use the code we built in lesson 2
and just apply the changes on JavaScript.
Remember that code-recycling is a highly recommended practice
and Visualization API is designed so your code
is easily recyclable.
Since the change we're going to apply
will only be on our app's logic,
we just need to modify a few lines
in the file charts.js
we built in last lesson.
We first create a new function called handleQueryResponse,
to which we'll assign the argument (response.)
Remember arguments are for importing
external data to our function when we're calling it.
Let's now pass all the contents of function drawVisualization
to our new function, handleQueryResponse.
In drawVisualization, let's add a variable called
"query," which we'll use to import
and store our external data.
In order to do so, you just need to use the command
new google.visualization.Query
and put in the parenthesis the address published
for the Spreadsheet, whose data we want to import.
Now, let's pass the data we imported from query
to our function handleQueryResponse.
Nailing this is as easy as putting the variable's name,
in this case, query, followed by the command "send"
and between parenthesis, the function to which
we'll pass the data, in this case,
handleQueryResponse.
Time to delete the data we manually declared
in last lesson and to replace them with the dynamic data
we just programmed.
For this, we'll delete everything in the variable data
and we will put instead the argument response
and we will add the method getDataTable.
Although our app is ready to run,
every time we call data from an external source,
it is advisable to add a method that sounds an alarm
in case something goes wrong.
To do so, in the beginning of the function
handleQueryResponse we add a simple "if" that triggers
in case there is an error and to alerts the user
by using window. alert.
That's it. Our app can now receive data in real time
from a Google Spreadsheet.
It was quite easy, wasn't it?
PRACTICE: CONNECTING YOUR APP WITH GOOGLE'S CLOUD
I invite you to watch this lesson again,
this time pausing it to follow the steps
and copy the code that is shown.
For a comparison, you can see an already built example
by entering to:
Once your app works correctly,
I suggest you make a Spreadsheet with your personal info
about how you usually distribute your day
and connect it to your app.
If you wish to share your new baby with the world,
I invite you to post its address on Twitter
next to the hash tag Hackademy Drive.
This will be it for now.
See you next time with:
"Using the G+ Login button for HTML5 sites and apps,"
when we'll learn how to make our app
show the login button when a user
hasn't signed in with his Google account.
I say goodbye for now but remember:
keep on programming!