PENG YING: Welcome to Google Developers Live.
My name is Peng Ying, and with me today is
my colleague, Nagesh.
NAGESH SUSARLA: Hey.
PENG YING: We're here today to share with you what we built
for Google I/O. Both of us are engineers at Google.
And what we like to do is solve problems.
So today, let's first start off with the problem that
we've found.
Some of you may already be familiar with this.
And don't get me wrong, I love Costco.
Their pizza's awesome.
I love their $1.50 hot dog and drink.
And I was just this past week and probably bought enough
paper towels and toilet paper to last a year.
But every time I go to checkout, it
seems like utter chaos.
There's carts moving from left to right, from right to left.
Everybody's pretty much trying to find the shortest line.
And that was the problem that we are trying to solve--
checkout.
We think that checkout is cumbersome and a little bit
inefficient.
So what's our solution?
Well, it's what we're calling "web and mortar." And today,
we're here to talk about how it works.
How we built each of the pieces, the Android app the
interactive wall, the back end, and some of fulfillment.
And then we'll shed some light on where we hope this goes and
what we hope to see a little bit further down the road.
So what is web and mortar?
It's an idea built from the Tesco Wall.
Web and mortar is this concept of tying the online and
offline shopping experiences together.
The most amazing thing about this image isn't that people
are buying groceries in a subway station in Seoul.
But it's that they have the cell signal to do so.
I'm looking at you, San Fran.
Nagesh, can you show them what we built?
NAGESH SUSARLA: Sure.
It's nighttime, and my favorite store is closed.
But luckily, the web and mortar store is here with an
online catalog of the various products they offer.
And here, I have the top carousel, and the bottom
carousel, which can be scrolled.
And when you select a particular item, it shows the
3D view for that particular item.
In this case, it's a leather folder.
Now, when I want to buy it, I bring up the Android companion
app and I select the particular color that I want.
So in this case, there were multiple colors.
So each of them was listed in a special QR code.
Let's add a few more items.
Now, this looks interesting.
How about the squishy.
I always wanted a Chrome plushy, actually.
Looks colorful.
And I can even scroll it 3D here if I wanted.
I want to add it into my cart, scan the QR code.
There it is.
Buy with Google, choose a credit card.
Goes to the next.
And I submit the order.
And I'm done with the purchase.
Now that we've looked at the entire flow, let's
look at how it works.
Now, for the buy flow, we used Google Wallet Instant Buy API.
Now, the beauty of the API is it is seamless in the sense
that it does not require you would change your back end.
If you already have an existing payment provider, you
do not have to change it to integrate with Google Wallet
Instant Buy.
What that means is if you accept credit cards, you can
take a credit card from Google Wallet Instant Buy and pass it
through your back end without making any modifications.
Now, the other aspect which is very important is you do not
have to do the credit card entry and management, like
expiration dates.
Credit cards have expiration dates and various other
[INAUDIBLE]
which you don't have to deal with.
You can let Instant Buy take care of that.
Now, the other more interesting is that Google
Wallet Instant Buy returns a one-time virtual proxy card.
So it's not the user's actual card.
But it's actually a one-time use card, which is a credit
card which can flow through your--
PENG YING: Customer security.
NAGESH SUSARLA: It's more secure, too.
Exactly.
So with that, let's see how the code looks like if I
wanted to make a purchase, First, I would get my
estimated price for a particular item.
Call the MasketWalletRequest or newBuilder.
Set the currency code, which is USD here.
And call this loadMaskedWallet method on the Wallet client.
Now, this is giving me a call back.
Now Wallet client actually calls Google Play services,
which is installed on your Android device.
And then gives me a call back on MaskedWalletLoaded, which
gives me the masked information, like the selected
credit card that a user has.
So it shows up a screen do the user where he or she selects
the particular card that they want to use.
That is selected, and I get back that detail information.
I can get the shipping address, if I wanted.
I can get the phone number, if I wanted to.
And then, based on this information, I can calculate
the next steps.
Now, next steps.
Obviously, if I'm shipping, I need the shipping calculator.
So I would send the zip code to the shipping calculator and
get back a price.
Let's say it's within the US, so it's $5.50 or whatever.
Now, with that information, I ask the user to confirm the
purchase or to review the order and
actually press on Confirm.
Once they confirm, I can make a full Wallet request.
The full Wallet request returns me a one-time use
proxy card.
That's the card I can take and then pass to my back end,
which then puts it through the payment processor, gets back a
result like success, or failure, or whatever.
And then puts it through my order system.
Now, at the end of this, my server can then return a
signal saying it was successful and this is the
order number.
I then call Google Wallet client and say that the
transaction was successful.
And then also notify the user that their
order is being delivered.
So that's how the Instant Buy was integrated into the API.
Now, with that, let's look at how the other parts of
the app were made.
Now, the shopping cart is one of the most interesting
aspects in the entire app.
And to build it, there were several small things that were
needed, obviously.
The first one was to fetch an item feed.
Now, here it says the number of items that were there in
the catalogue were very limited.
We fetched the entire catalogue from the server
using an Intent service.
Then this was stored in our SQLite database.
And a content provider was provided to make it clean to
access these items.
Now, the scanning of the items was done using Zebra Crossing,
which is an open source library which you can
download and use.
It's a really awesome library for QR codes and barcodes.
PENG YING: Any sort of codes.
NAGESH SUSARLA: Yeah.
Any sort of codes.
It's a pretty awesome library.
Now, once you have scanned the item, you can take it and
store it in the shared preferences.
Last but not least was the swipe-to-dismiss item.
If you want to take off items from your shopping cart, I
really like the gesture way of removing it, swipe to dismiss.
And all that I had to do, thanks to my colleague Roman
Nurik, was to just add two lines into my application to
get this all done.
And in addition to this, all I had to do was add a few more
lines in a class.
And I got all of it working within 10, 15 minutes.
PENG YING: Seems pretty simple.
NAGESH SUSARLA: Yeah.
It was very easy to integrate.
Now with that said, let's move on to the interactive display.
PENG YING: Thanks, Nagesh.
So we created interactive display using a few
components.
The UI is comprised of two carousels, a top carousel and
a bottom carousel.
They contain the same amount of items--
actually, the same items.
And in the middle, there is a Detail section.
So the reason we went with two carousels is because we
thought that we wanted multiple people to interact
with the display at once.
One thing would be if you had only one person interacting,
then only one person can be purchasing.
So why not just double that?
Another thing is it's kind of interesting to see what
happens when two people are trying to interact at the same
time, and there's only one Details page.
Maybe it could lead to some sort of conversation, maybe
they could be like, oh, cool, I have that.
You should get it, too.
Or something like that.
To create these sections, what we used was--
Well, the whole thing is a web page.
This entire thing is a web page.
What we're doing is we're using Chrome Kiosk mode.
And what Chrome Kiosk mode is is exactly
what it sounds like.
It makes a web page into a kiosk.
So it removes the action bars, removes the search bars, and
all that kind of stuff.
And you just get a minimalized UI that shows a web page.
In addition to that, we did some other tricks to get rid
of the mouse cursor by replacing the cursor with a
transparent PNG.
And then what we also did was we disabled right click.
With a lot of touch screens, if you do a long press, it
actually acts as a right click.
And you don't want anybody long pressing and then
inspecting an element, or taking some sort of action on
the page that you don't want them to take.
Lastly, for all of the really nice physics space, scrolling,
inertial-based scrolling, we used the
Financial Times Scroller.
It's an open source library, and it handles touch events
really well.
What we're showing right here is a simple way
to instantiate it.
Basically what you do is you define all of the elements you
want to scroll between.
And then you instantiate the Financial Times Scroller
passing in the dom node and a few other parameters to define
which way am I scrolling?
What's the size?
Do I want it to snap?
That kind of stuff.
Once we have the interactive display, we need to feed it
and populate it with elements.
And what we're using is the same JSON that the
Android app is using.
The way that we formatted it is we have items, which are
actually the options of items.
And we have an Item Map, which is the parent item.
So in this example, let's say the t-shirt
would be the item map.
And then each of the different options.
Like hey, I want this t-shirt.
And small, medium, or large, are the items themselves.
In the past, all of this information, of
course, is in JSON.
So we're using one big JSON object that contains all of
the items and all of the item maps.
So once we have the display, people can browse through it.
They can choose the items that they're interested in and then
purchase it with their phone.
We need to be able to send this
information back to our server.
So once the person has confirmed that purchase,
what's happening is that this JSON that you see here is
encrypted over SSL or whatever you choose and then sent to
the server.
Within this JSON, we're defining things like the items
that our customer's purchasing, their shipping
address, their billing address, and their credit card
information.
Then, on our back end, we can take this information and
create a new order, maybe create a new customer, and
then charge their order, maybe send it off to fulfillment.
So that's how this all works.
And it's cool.
It's just one of the possibilities that you can do
with a really simple mobile purchasing API.
And there's a few more that we thought of.
What if you can make advertising actionable?
Let's say that I walk by this poster for Elysium.
That movie's coming out this weekend.
I have my phone, and it's a smartphone.
It knows where I am, all that kind of stuff.
I tap my phone to the poster and it shows me a listing of
showtimes around me and the theaters.
And within a few clicks, I can buy that ticket, I can save it
to my Wallet.
And then when I go to theater later that day or sometimes,
instead of going to the purchase kiosk or going to the
box office or anything like that, I just walk in, pull out
my phone, show them the ticket, and then
walk into the theater.
That's a way better experience.
What about never having to go to the checkout line again?
So today, what we showed you was somebody browsing this
interactive display.
What if you just got rid of the interactive display.
What if the store was a display?
So all the items within the store have their own barcodes.
So what if you could just take your apps, scan all the
barcodes as you add the items to your cart, and then click
Check Out and walk out of the store.
That's way better than whatever clunky self-checkout
experience exists now, where you take the item and then you
scan it, maybe it doesn't scan, and then maybe you put
it into the packing area, and it says, oh, there's some
other items in the packing area that aren't supposed to
be there, and all that kind of stuff.
We can make that experience better.
Lastly, right now, consumers come to the store.
But what if you could take the store to the consumer?
The old adage is "location, location, location." What if
you could combine instant buy with same-day delivery?
And then you would just bring this interactive display that
has all of your items, that is stylized to your store--
pretty much your store experience.
And then you put it wherever the people are.
Maybe it's a park, maybe it's a subway,
maybe it's a bus stop.
And there you have it.
You've taken your shopping experience.
You have minimal footage, you have minimal costs.
And then you deliver via same-day delivery or some
other sort of delivery service.
Our goal of this presentation has been really to give you
ideas and to inspire you to think about
what you can create.
What are the problems that you can solve?
What are the flows that you can streamline and simplify?
And basically, what you can do.
We are here to help you develop amazing things.
And with that, if you want to get started with Instant But,
go to GetInstantBuy.withGoogle.com.
And lastly, follows us on G+.
We're always doing crazy stuff like this.
We're working on samples, we're
messing around with things.
We're trying to be on the [INAUDIBLE] edge.
So follow us on Google+ to see what we're doing.
And thanks for coming and watching this with us today.
NAGESH SUSARLA: Thank you.