Hello and welcome to another episode of GDL IL Google
Developer Live Israel.
This episode we are going just to elaborate a bit on the
service site that we showed in the last episode of the mobile
web app with AppScript.
And basically, what I would like to do is to show you the
code that we are leveraging in AppScript inside our Google
Sheet when we are coming to build a service site that
would enable us to manage our content that later on we'll
work with and show inside the mobile web app.
So let me share my screen.
And as you could see here, this is how
a doc is look like.
And you could see here that I'm having few fields that I
will ask my editor to fill for me.
And in a minute, we'll see how easy it is to work and get an
address and basically calculate automatically from
it the [INAUDIBLE] longitude and latitude.
Here, for instance, as you could see--
let me make it bigger.
I'm just concatenating using this function.
So the value of column D will basically be derived from
column B and C, in this case.
And here I'll just go and fill the addresses I would like.
In this example, it's in Hebrew, but of course, you can
imagine that it will be in English or any other language.
The other thing about it will be that basically you'll to be
able to work with this.
And Google Geocoder will work with any language that you
will be able to be input here.
And we'll see it in a second.
So those are the input points that the editor
will fill for us.
And then, what we'll need to do is go here to File and
basically publish it to the web.
And the nice thing here is that we could choose several
things when we want to do it.
So once I'm clicking here on Start Publishing, you could
see that I have here the timestamp of when
it was first published.
And from this minute any changes that will be made will
be automatically because I clicked this check box.
And here I could basically check and see if I want it as
a web page or maybe as a Atom feed, RSS
feed, and other things.
If I'm doing things like exporting it as RSS feed, here
at the end if I'll change it from RSS to JSON,
it will also work.
So for us, in the front end development world, to work
with JSON object will be much easier and nicer.
And we don't need any library to parse Atom
feeds or RSS feeds.
Once I'm doing that, I'll go here to Tools.
And I'll basically click on the Script Editor.
And as you can see here, I'm jumping to a new tab that's
letting me work with AppScript.
Now here I'll make this code just a bit larger and we'll go
over quite quickly because it's a very simple,
self-explanatory code.
What we're doing here is basically on open I want to
add a new menu item.
And let me go back here and show you.
Here I have a new menu item that I created for my app.
So my editor, after he or she are filling the details here,
it's good to be able to show them on a map.
So when they are clicking, the script is running in the
background creating a map.
And as you can see, I have markers on the map that are
just showing visually that what we did is the correct.
And of course, at the bottom we have a widget containing a
table with all the details.
Now, in the script itself, this four or five lines of
code basically just adding this menu to the spreadsheet
and allowing me to execute the station location map function.
Actually, I need to put a better name there.
But it's OK.
In the function itself, what I'm getting is basically
getting a handler on the current sheet that I'm going
to work with.
And in our case, it's the geo one.
You can think about a scenario when you want to keep revision
of the history.
That time then maybe you will add more and more sheets to
this main doc.
After that I'm going and I'm using Get Range function.
And basically, I'm just focusing on a portion of this
spreadsheet just so I'll be able to get the station
information.
In my case, I want to get the address and then the city name
because from the combination of those two I'll be able to
compose the address.
Later on, I'm just calling a static map object and of
course, creating my UI.
The UI is the dialog that you saw that we presented the user
after we gathered all the information.
And then I'm creating another grid object that's letting me
up the raw text information below the map so it will be
very clear which marker is belonging to which station.
And then, there's the simple loop that's just going over
those lines with addresses, adding them to the map, as you
could see here, with the marker info.
In our case, that row and column, so the cell itself,
will contain the geo location.
And it's very easy to use that marker with a geo point just
to put it in a certain place on the map.
And for the grid widget, of course, we'll want the full
address and the name and all the other things.
Here there's an interesting thing that I would
love to show you.
And I'll put a break point.
And we'll go into it in a second.
And that's the newGeocoder object that will basically
allow us to get the address and to extract and gain from
it the longitude and latitude.
You could get actually more geo information out of this,
but in this example, we'll just focus on these two
because that's what we need to create our basic app.
Let me try and run it in the debug mode and show you how
it's working.
So here is a function that I choose.
And now I'll click debugging.
And the first time that you run it, you'll get a very big
dialogue that just warns you and ask your
permission to do so.
I did it in the final rehearsal to this show, so it
doesn't prompt it now to me.
But after you acknowledge it for the first time, it will
work on each and every run.
As you saw here, I just got this break point.
And if I'll, of course, go over geoResults, you could see
here that it's undefined.
But if I'll just give it permission to pass it, now you
see here that in geoResults, if I'll click on the plus
sign, basically we got two things.
One is the status.
And luckily for us, everything is OK.
So that's why here, on the next line, I'll just make sure
that it's OK.
If it's OK, I can parse the data.
If it's not, I want to log it.
And it's here.
And if it's OK, like in our case, you could see the
results object that's containing lots of different
parameters.
In our case, we have the geometry that's containing
bounds, viewports, location data, and
lots of other things.
And in our case, as you could see, I'm taking the longitude
and the latitude, just the opposite what I said, and once
I got those two, I can release it and just keep running and
getting a new point each time.
We could click on the view and then basically see the logs.
And as you could see while I'm using the logger object, as
you could see, I got the new geo point from
the specific address.
I can now just turn off the break point and resume the run
of this script.
And after it's done, you see that everything is off from
the debug mode.
I can again to the logs and see that for the three points
that I have in the spreadsheet I now have three geo points
that I could use.
One last nice little trick that we have here is that
we're using Waze web API.
And if you are basically, in your mobile web app, putting
this link and the user will open your mobile web app from
any mobile devices out there, and they already have Waze
installed, this link will basically inform the device
itself to open the Waze application with these
specific points.
So they could navigate to this point immediately.
The app itself--
just to show you how does it look like--
is live and it's here.
And we have two versions of the app.
One looks like that.
And that's basically a version that is
based on Twitter Bootstrap.
So it will work on all the major browsers out there, i.e.
Firefox, Safari, and of course, Chrome.
And another version of it is [INAUDIBLE], but just add
jQuery [INAUDIBLE]
to the picture.
And it will be here.
And as you could see, it's more themed as a mobile web
app with some nice features, like an about page that is
flipping and other things that you could do, like the buttons
that will navigate and other cool things.
Of course, the map here is fully functional.
And the user can dive into it and get direction on points
and lots of other things.
So that's basically the major three components
that I wanted to cover.
If you have any questions now it's an
excellent time to do so.
And if not, just feel free to reach out to
me on G+, on Twitter.
On both of them, it's greenido as one word.
Let's see if we have on the Hangout chat some question
that people entered.
I don't see any, so until next week be strong and bye-bye.