Hello and welcome to another episode of GDL Israel Google
Developer Live.
We are going to touch, today, on a few interesting subjects.
First, we're going to see how easy it is to build today a
mobile web app that will work actually quite nice on all the
different mobile devices that you can find out there.
And we'll see how, with Google Docs, and specifically Google
Spreadsheets and upscript, we could create some nice server
side and actually share it with other people that will be
responsible for updating our content.
So we'll get actually two birds with one stone.
We'll create the server environment without any coding
quite quickly.
We'll be able to put it up in the air and share and control
the permission and everything because, of course, it's
coming for free when you are using Google Docs.
But moreover, it's a very nice and easy way for us to share
the content and to be able to drive the mobile app through
this server side.
The one nice thing that you could do with it is to use the
upscript, which is the JavaScript glue, if you will,
to all Google products.
And this will let you not only automate a few of the tasks,
but actually get a grasp of what you could do with this
application.
And in our case, I just choose to do something nice with
Google Maps API since from version 3.0 it's optimized for
mobile and will work quite nicely on all mobile devices
and much faster.
So without further ado, let me just share my screen with you.
And we'll go through these few slides with lots of demos.
So all these slides will be, of course, up in the air on my
blog at greenido.wordpress.com.
And of course, you have a link here to the shows that we have
every Wednesday at 2:00 PM Israel time.
So if you want to touch and ask questions in the end of
the show, feel free.
If you want to reach out to me, both on G+ and Twitter, it
will be greenido.
And let me make it even bigger.
And of course, you could just go to the blog itself and see
a summary of this talk and all the show notes.
So what we are going to do today, we are going to look at
the mobile web app that I did in the past 10 days.
And we'll see some of the best practices that you want to
start and use when you're building your own mobile web
page, site, or app.
And of course, in this case, we'll just use our server side
in Google Sheets and, of course, bundled
in them, App Script.
We're leveraging, of course, the latest and greatest API in
Google Maps.
And that, of course, will guarantee that we are getting
good performances on mobile devices.
So how does it look like?
Well, it's in Hebrew.
And that's actually another aspect.
When you want to do things here it's just a demo app.
So the route is in English, so people could play around it.
But internalization and localization is something that
you do want to pay attention, especially when you're
building mobile apps, mobile web apps,
and of course, sites.
A lots of users are coming from different countries.
And you want to be able to make them feel at home with
their own language.
If you want to see some of the best practices in design,
development, debugging, and how, basically, to work with
the mobile web, there's a nice slides in this link that will
take you to all the best practices.
And of course, if you want to see another dedicated talk
that I did with Riley a bit earlier this year that, again,
just focusing on the mobile web, this is the link as well.
Why I choose jQuery to build this mobile on top of?
Because I see jQuery Mobile as CSS frameworks that basically
save us lots of effort.
They did a lot of work in testing and making sure that
our site or app will look good on all different mobile
devices out there.
And of course, it's an HTML file based UI that is built on
top jQuery and jQuery UI, so you're getting lots of
development hours already baked in for you.
And basically, you are standing on the shoulders of
giants, if you will.
And saving you lots of work.
This is how our app look like.
And let's see a quick demo of the app itself.
So this is a live link, of course, as you could see.
And now, I just downloaded the app itself.
And you could see here a few interesting things.
If I'll open Chrome dev tools, let's see if we could change
the app itself.
And I'll make it bigger, so everyone could see.
Let's see how this app look like on Android Nexus.
So you see immediately that I got the device
metric here for me.
And this is more or less how it will look like.
If I'm enforcing it, you could see now that I don't have here
the text, but I have three dots.
And that's, of course, coming for free when I'm using this
CSS framework.
And you could see that all text is actually
in the right place.
And the buttons are still functional.
By the way, those buttons will open the [INAUDIBLE] mobile
app of Waze if you are getting this mobile web app about from
a mobile device.
And I'll show you in a minute how to do it.
And it's actually a great features for your users
because they don't need to click on a link and then copy
it or do something tedious with it.
You just give them one button.
And from this one button, they will get the directions to the
place that they need to go.
At the bottom of the page, we have a full-blown Google map.
We could zoom in.
We could open and get more information on the markers.
And some nice buttons to the official page if users want to
go and see it.
Simple things like encapsulating everything in
the real estate that you have for your app.
And making sure that you have this notion of pages of
flipping and coming to life.
Again, very, very easy to do.
Let's now just have a quick look at our code and see what
are the main aspects.
So I'll open source.
And here I'll just go to our index file.
And one of the things that you could see here is that in the
metatag I'm making sure that if the user is coming from IE,
just to open a prompt frame.
I'm making sure that the view port will stay and the initial
scale will be one.
And you could see more of why we're doing it in the link
that I put on the first slide.
And then just touching our CSS here, the JavaScript, of
course, will come at the end of the page.
And the CSS important, in this case, because we want to use
the special CSS rules that they already got for us.
Here, we're using the jQuery, of course,
and the jQuery mobile.
And we're using both of them right here, so the app itself
will load and do all the interesting stuff of styling
driven from jQuery mobile itself.
We're using Modernizer just make sure that we do the right
things on different browsers-- a bit older browsers.
And here we're just loading the Google Map API.
After that, we have our own script.
And actually as a best practice, and as a nice to do
here, we need the styling to put in another file, of
course, and separate HTML, CSS, and JavaScript.
Here, we have these organizational pages.
So the first page just includes here this table that
is actually a nice grid that we're getting for free again.
And we're just filling this grid with our JavaScript API.
And after that, we're just using the map, as you could
see here, and making sure that we are painting the map itself
on our map canvas and putting the right markers in place.
Let's see a bit of the JavaScript
code that does this.
So on the map itself, of course, we want to take these
and put them under one object and remove them from the
global scope.
But here is just a little bit of boilerplate code to
initialize the map.
And after we're doing that, this is the interesting part.
And let's just make it a bit bigger.
So what we're doing here is basically we're going to our
spreadsheet URL.
And in each and every spreadsheet URL that you have
in Google you have the ability to publish it as
a feed to the web.
And in our case, I choose, of course, to publish
it as an RSS feed.
And then the nice tweak in the end is just to put here alt
equals JSON instead of RSS.
And you're getting it as a JSON object.
And then, all we to do is just to get the JSON object.
As you can see here, we're getting the feed and we're
getting the data.
And then it's just a matter of a bit massaging the data and
making sure that we're extracting the right things
and building the main table in this one append.
And you could see here the results of this table.
There's nothing more than that.
Later on, we're doing some nice tricks like the map
should fit the bounds of the markers.
So we're just calling this.
And again, with the great Google Maps version 3.0 API
we're getting those things for free.
And of course, we're refreshing the buttons that
will take us.
This is how we're adding a marker to the map.
And an info window, the info window are those windows that
when we're clicking on them, that's what you're getting.
That's the code itself, very, very simple and quite
straightforward.
And as you could see here, when our page is ready in the
mobile world, all we're doing is calling the initialization
of the map and then fetching the points from our server
side, which is a Google spreadsheet.
Why I use this server side?
Well, it's an easy CMS, a content management system,
that's giving you great capabilities without and
coding and without worrying to security and other things that
you'll have to do if you want to put something in the air.
Not to mention that in terms of scale and performances it's
very, very nice to have it.
Last, but not least, is our API.
So the APIs are quite generous in the sense that we could
export those feeds and get it as an XML, csv, RSS, Atom, and
more and more.
And you could read more about it and how you could work with
it and actually how to do some clever things with the data
that you have on this link at the bottom.
Google Map API, we just covered basic and very simple
code that we're using.
But in this link here I just put you a shortcut to all of
the various examples that you have to work with Google Maps.
And I highly encourage you just to check them out because
they are very simple and very powerful both if you are going
to do a native app or a mobile web app.
The nice thing about the Waze web API is that it's nothing
more than a link.
And you could see here, if I'm just going and doing inspect
element on it, what we have here is
basically just a button.
And then the link to it--
As you could see here, this is just the link that will make
our mobile web browser to open the Waze native app and set
the point to this geo location.
So all you need to do is basically just create this
shortcut link of Waze dot two.
And they're just giving it the points that you want to do.
Very, very simple and
straightforward and very useful.
If there's any question and answer, this is a great time
to ask them.
If not, be strong until next time.
And just feel free to reach out to me on Google+ with
greenido or on Twitter at greenido again.
So thank you very much and bye-bye.