Chrome Apps Office Hours: Hack-a-thon Results


PAUL KINLAN: Hi, guys. You don’t know the amount of
trouble that we’ve had trying to get this ready. I’m here with one of
my friends and colleagues, Ian Barber. So I hope this is working. If not, then we’re just doing
this for no reason as well. However, let’s get started
properly, shall we? My name is Paul Kinlan. I’m a developer advocate
at Google. And I can’t say advocate
at all properly. I’m an advocate, apparently. And I work on the Chrome Team,
and we’re here to talk about Chrome apps. So just before Christmas, we did
a whole series, about 12 different episodes about what’s
happening inside of Chrome and Chrome applications
and all that type of stuff. And we had a little break
over Christmas. We came back today. This is our very first one,
we came back today. And we’ve decided to show you
what’s happened since Christmas, I think is the
best thing to do. When I say since Christmas, I
think to put in context, the best thing to say is that we’ve
had two hackathons. We’ve actually had
more than that. We’ve had three hackathons
overall. We had one in London, which
was, I think, October, November time. And then we were going to plan
one in Boston and one in New York, and one in Mountain
View as well. But for scheduling conflicts
and some other reasons, the Boston and New York hackathons
got put back. But we’ve done them. We have a whole load of
great guys come along. Some of the people on the Chrome
Apps Community Group on Google+, they came
along as well. And we showed some really cool
stuff, and we did some really nice things. I think today is going to be
just really us showing you what the community, what people
inside the Chrome Apps Community have built. So I think we should start. Should we start? I think we’re good. Yes, we got a nod from my
co-producer at the back. So let’s go from
the beginning. Boston was our first
one, I think is the easiest thing to say. It was based in the
Bocoup Loft. They let us host there,
and I think about 30 developers came. It was quite cool, and we got
quite a lot of good apps. I got the first one, actually. So I basically prepared this
whole list of applications that we’re OK to talk about
a little bit more publicly, at least. And the first one, I can’t
really show you because I haven’t got my credit card
ready to go and buy it. But it was called Mad Dash. Basically, it’s not a horse
racing simulator, but you can basically place fake
bets and see which horse is going to win. The interesting thing,
actually– and I’m going to shift off this one a little
bit sooner than I planned, because this actually
wasn’t a V2 app. So we have these two different
models at the moment. We have packaged apps and
packaged apps V2. We haven’t got an official name
for the apps V2 just yet. And the main difference is that
the original packaged apps live entirely inside
the browser. So they live inside
the window Chrome. You probably can’t see on my
desktop at the moment because I don’t think it’s
being shared. Now it’s being shared. Awesome. So Mad Dash, this is the one
here, and I was showing you the screenshots before. This is Mad Dash. It’s actually a V1 app. And the thing about V1 apps,
it’s like TweetDeck. TweetDeck is a V1 app
where it lives entirely inside the browser. So it’ll live here, basically. And there’s actually quite a lot
of things that we learned from Chrome OS, is that people
want applications. They want their web
applications, but they want them to live outside
the browser. And this application is a V1
app, so it lives inside the browser still. But actually when they demoed
it, it was actually still a pretty good app. It was still pretty cool,
but it was a V1 app. So I should close that
one, and I will show you a V2 app, Trail-app. So this is one of
the contestants from the Boston hackathon. And basically, if we launch the
app– we can launch from the Chrome Web Store– you should see the fact that
it’s actually outside the browser at the moment. Now, it’s a little bit
wobbly because I’m moving it around loads. But the idea is that
you can get full control of the canvas. You can control the entire UI
that’s presented to your user. And in this case, they’ve
chosen just to go with a normal title attribute, like
a title bar, so it’s like a basic window without any extra
little bits on it. You could launch different
types of applications. You can have applications which
don’t even have this little white bar across the
top where you control and minimize, maximize, and close,
and the ability to drag the window around yourself. So you could have a Drag button
right in the middle of the application. But essentially, this was a
thoughtbot trail maps app. It was kind of cool. From what I understand, they
basically ported a traditional web application into the
offline kind of model. And that was actually one of the
things that we found from quite a lot of applications, a
lot of developers at least, is that they quite often had a
web application that they already had on the web, but they
wanted to move it into this native wrapper. And the thing about this native
wrapper is actually, it’s offline first. It’s offline throughout the
entirety of the application. And you basically try
and integrate online functionality in. And the reason why we do this
is because we want our applications to work when
the user is offline. You’ve got a Chromebook, or
you’ve got your Mac or your Windows machine, and you want
your application to work wherever you are, regardless
of connectivity. Or at least maybe not work
completely, because obviously, if it’s a Twitter app and you
have no internet connection, you can’t go and get
your tweets. But you should be able to at
least see all the tweets that have come back in the past. You should be able to reply to
a tweet and, say, queue it to be sent later on. And if you’re on the web, you
press Refresh or try and launch a bookmark when it’s
not on the web or not connected, you’re up a stream
without a paddle. I have to be really careful
how I say that one. But you’re in not a great
situation, and that’s one of the big things that a lot of
people found when they tried to port their applications to
this platform, at least, is that you have to think
differently. You have to think in much more
of a native app kind of developer mindset, where
online functionality is integrated into your app and
not offline functionality. This is a nice app. It’s basically a tutorial. It’s kind of a code quiz, from
what I remember, that lets you basically learn about different
technology, understanding the fundamentals
of JavaScript. And then by the end of it, you
should be able to understand that you can iterate
over collections. For a day’s worth of work and
getting it from a complete online website into an offline
packaged app is really good. So that’s the Trail-app. We have the next one,
the VideoPlayer. I’m pretty sure I’m allowed
to show this one. They said yes next to it. But we have the ability to play
videos, and there we are. It’s playing a video. It’s kind of cool. I think we can go more
full screen. This is the full full
screen API. And I’m hoping that we’re
allowed to show this video. I’ll get into trouble. But the idea behind it is that
you could have a full canvassed canvas
video element. So this area here is just a
custom HTML5 video player. It’s nothing extra
and special. That’s all it is, right? I mean, you might sit there and
go, well, what’s the use? Well, some of the really cool
things that you can start to do with this is that you have
access to TCP and UDP sockets. You could create a local
network for local media servers and then pull the list
in off there via the [INAUDIBLE], essentially. So you can go to your Xbox Media
Center and pull in the videos and play it. And then once you can play it
on your desktop, or whether it’s your Chromebook, well, what
happens if you wanted to go on an airplane? Well, the really cool thing was
you could basically say, well, I want to take this video
that I’ve got on my Media Center, and then bring
it onto my Chromebook or my MacBook or whatever machine that
you have, and then play it when you’re offline
as well. So I think that’s quite a
powerful demo, and to get this integrated in one day
was pretty cool. The things that we would like to
see off these type of demos is, for me at least anyways, the
removal of this title bar across the top. I want it to be full canvas,
full screen video from edge to edge regardless. And then when you go for the
Full Screen button, is actually to use the
Full Screen API. That should work and you should
be able to take that window and make it a proper full
screen like you’d expect from a native application. So that’s pretty cool. We have Happy Friday. Now this was in Boston, I
believe, and this was actually a really good app. So basically, Happy Friday is
a game that they have been working on already. So it’s not a brand new game
from the day, but they got it to work offline. And it basically is
an SVG-based– I believe it was SVG– SVG-powered game. So we launch it. Again, you can see this
nice window that’s not part of the browser. And we have this little dude. And I got confused with this. It’s not press Right to start,
it’s actually press D. So we can go through, start level. Let me see if there’s
any sound. No audio at the moment. Oh, there is. [ELECTRONIC SOUNDS] PAUL KINLAN: Pretty cool. [SHEEP BAAS] [LAUGHTER] PAUL KINLAN: Did not realize
that was on. Sorry, hoping the sound’s on,
but there was a sheep in the background. But you can at least jump. You can do these cool
things, collect. And you know, this is the thing
that we want to try and get from this platform– wow, oh, he died– is the ability to have games
that work offline, games that you install, games that users
think are games on their platform, not just these games
that live inside a full web page, inside a Flash kind
of container in the middle of the screen. We want these games to
be immersive, right? And to get this in one
day was pretty cool. I’m really pleased
with this app. I think this should sell it. I think it’s a game that you
could sell quite easily. Whee! It might use Box2D to actually
do all the physics, but it’s powered, I believe, by SVG. And I think these guys won, as
well, won the best app or the best looking app in Boston. It was a really good effort
from the guys. So let’s have a look at the
next one, LetterBrush. This was Boston as well. So this one I had
no idea existed. I didn’t even know that this
was a thing, but basically, when you’re creating a 2D game,
you want these maps. You want the ability to
basically construct a map so you can do certain things. So I press on the keyboard F
and C. And I can build a 2D map quite quickly. I can say, this is a line. I’m going to go from here, and
I can build across that way, and I’m going to square. This is my 2D map, right? That’s what you want. It’s pretty cool. Now this actually is an existing
web application. It’s not a brand new app for the
day, but what they’ve done again is they’ve taken this web
application and ported it into a native container. And it works completely
offline. I mean, you don’t have to think
about App Cache and use all these are other things. But the really cool thing that
I like about this was that they actually let you save using
the Export button and then Save to File, and you could
save directly to the user’s desktop. So that’s my web server,
so that’s OK. So Save, done. Now I believe what basically
happened in the background is it basically did Auto Save
all the way through. And then the thing that you
don’t get on the web right now is the ability to do an Auto
Save, so you can’t save a file and then keep a reference to
that file and then keep writing and writing
and writing to it, whereas you can in this. And that was pretty cool. I believe this might have won
one of our best apps. A lot of people really liked
this application in Boston, just because they took it from
a completely online app and brought it offline. Pretty cool. Now this one. Let me refresh this page
because it’s installed. This is called Chompy Ball. I’ve only played it briefly
inside New York, but I watched one of the developers,
and I can’t remember his name at the moment. Let’s see if he’s got
it on there– Raheel Khalid. And basically, this is
a really good app. Basically it’s a 2D canvas. The entirety of this surface
is a 2D canvas. Let me just play it. I like playing games, so
I’m not going to pay attention to you guys. Here we go. And so he built this game in a
day at the New York hackathon. And the entire thing
is just a canvas. And it’s a relatively
simple game. But the really cool thing was he
actually built it with just a Chromebook entirely. So he didn’t have
a normal PC– or what we’d say a
normal PC, as a Chromebook is a normal PC– a traditional desktop or a
traditional laptop, right? He built this thing with
just Chrome OS. And the really cool thing
was he used a– let me just go to
gethub.com/chromeappsamples– Mini Code Edit. I believe he used this
tool here, which is called Mini Code Edit. Essentially, Mini Code Edit is
just a normal code editor using the Ace Syntax highlighter
done by the guys who do Cloud9, I believe,
Cloud9 IDE. So he basically just used the
Ace Editor inside this Mini Code Edit, could save files out
to his desktop, open them back up again, and made this
entire game in one day just using the Chromebook, which I
think is quite impressive. There was a another guy from– actually, his tab is
here, Joe Sullivan. He built this thing. I can’t demo it today, because
I can’t just get it working. And I need some apps to show
it working properly. But Joe Sullivan actually did a
whole lot of stuff around a clone of the Web Intents API. Because obviously,
we’ve removed Web Intents from Chrome. We have people who still want
to use basically an application discovery mechanism
so that they communicate between apps
without having to know each other. And he built this thing called
Spoke, which is an API, basically, to emulate Web
Intents inside Chrome Apps. And he built that in a day. He actually did that using
the Chromebook as well. So that was really cool. I think we had two guys in New
York use Chromebooks, and one guy in Boston who’s
used a Chromebook. But the game was particularly
impressive, Chompy Ball. It was pretty cool just
for that one day. And finally, I can’t remember
the guy’s name now, but he actually did two apps. And he’s only listed one
of them at the moment. But Paycheck Calculator
was pretty cool. And again, this was, he
says, pretty much a ripoff of this one. It’s kind of cool. But the thing about this, it’s
a simple app for working out basically tips and keeping
track, in a more textual format, of expenses. And we had to do some things. The interesting thing
about this was– we’ll launch it first– dinner for 12 at $12, maybe, and
then I bought an Android Nexus 4 for $250. I don’t know the price. Multiplying by four– Nexus 4. I’ve done something wrong. My demos are failing. There we are. Basically, he actually
explained some of the algorithm of this. It basically picks the numbers
up and then tries to work out whether you should multiply. You might say, well, I gave
the clerk a 10% tip. So yeah, it’s worked out. 26.2 is the tip that
you should do. Now, I thought that
was pretty cool. I thought it was a
pretty nice app. You got it working in a day. Interestingly, we had a lot of
problems with this because as you’ve seen, if we type text
in, see the thing? A lot of it kind of
expands and moves about the actual surface. Well, this didn’t work at all. So this is like a content
editable area. And the very first time that you
start this application, it starts out with this. We had two problems, actually. First, we couldn’t
select any text. We couldn’t actually start
typing in, because it’s a content editable div– it’s a pre or a div. But it’s not a text area. It’s just something that’s
content editable. And content editable itself
doesn’t accept user clicks. So the thing about apps is that
you can’t select stuff all the time. This is the thing you see about
the web at the moment. You’re in Gmail, and you double
click on something that’s not quite the actual
email document, it might be a part of a button, and then all
of a sudden, the entire user interface is selected. So what we’ve done with apps
is we’ve inverted the selection model so only text
boxes and text input areas and places like that, where you
expect to actually input text, are things that will actually
start to receive text input. It sounds a little bit silly,
but that’s what’s happened. So content editable items aren’t
in the actual style sheet to have the ability
to actually do user selectable text. But that wasn’t too bad. We fixed that. It’s just a CSS attribute,
WebKit Text Select, I think it is. And then you can start
to type stuff in. And I think the other
interesting thing about this was we have– I think it’s a bug, but
it might not be. We have this issue where you
might set your window to 500 pixels by 500 pixels, however,
the HTML element is 0 by 0, until you start filling it with
content, so that actually wraps the content rather
than fills the window. So you have to basically put a
CSS attribute on your HTML element and your body element if
you want it to also fill to be width 100%, height 100%. And sometimes you can also put
Position Absolute, and that kind of fixes it. One big bit of feedback that
we did get, and let me just see if I can test this. See that? This is kind of interesting,
is that there’s no scroll bars. Now, we need feedback from you
guys as developers to actually say whether we should have
overflow auto straight on this thing, or whether you
want to control that yourself manually. I think it’s a little bit
of a user nightmare. I can’t scroll back up. You can get around if you just
put overflow call on Scroll X, or Overflow X Scroll, for
instance, or Overflow Y Scroll, and then you can get
the scroll bars back on. But we need to know from you
guys whether you should actually have this as a default feature inside the platform. So anyway, that was the
Paycheck Calculator. Let me see if he actually
put his other app in. No, he didn’t put his
other app in. I can’t see it there at least. So it was a color picker, so it
let you basically just have a color picker. You expect color pickers to be
part of the web, not as a web page, as a separate app,
and that’s what it was. And that was it, right? So we had quite a lot of
developers come in. I think there was 50 or 60
overall in both hackathons. Obviously, some people didn’t
want us to talk about and show off their applications,
so we haven’t done it. But if we get some permission,
we’ll ask the guys to come in as well and show some
really cool stuff. The new things that have
happened since Christmas is kind of interesting. We’ve got a couple of things
that we’re going to talk about over the next couple of
weeks on the Chrome Apps side of things. So we have rich notifications. So some of you guys might have
seen a Rich Notification Panel happening Chrome OS, and some
things on Google+ by a guy called Francis who’s found
some of the stuff that’s happened inside Chrome. So we’re going to show off the
Notification API, essentially. The Notification API is kind of
interesting because we had an HTML5 Notifications. It wasn’t HTML5 Notifications. It was a specification that’s a
SubSpec of the broader HTML5 specification, which is a
notification specification, and it had two components. We had one component, which was
Create Notification, and then we had a second proprietary
one, which was called HTML Notification, where
you could basically create an iframe that would
appear as some part in the application. A lot of user agent vendors
didn’t like it. We liked it. TweetDeck used it like crazy. We liked it, but a lot of other
user agents didn’t like it because it didn’t integrate
with the native system notification providers. So you’re Android kind of thing
that you bring down at the top, that’s not HTML. That’s just basically strings
of some images, and likewise with iOS as well. So we’ve still got HTML
Notification in Chrome Apps, but we’re going to encourage
people to use the Rich Notifications. So I think Joe Marini, I
believe, is going to show you that demo at some point
in the near future. We also have push messaging,
which I can talk about, because it’s on the Docks, make
sure it’s not secret. But we have this idea of push
messaging, basically, where you should be able to basically
send a notification to a server, and then any one of
your connected applications should be able to receive that
notification and display something to the user. So we’re going to have that. That’s kind of interesting. We’re also going to talk
about alarms as well. Some people tried to use alarms
at the hackathons to varying degrees of success. And the idea of an alarm is it’s
kind of like Set Timeout on Set Immediate where you
provide a function, tell it when in the future it’s going
to be called, and then the system will notify your
application when it should wake up and process that code. The interesting thing about this
is that it’s not exactly like set Timeout. Set Timeout will do one second
or a couple of milliseconds, you set days, right? But if your application’s not
running, it’ll never get registered and handled
when your application’s not running. The idea behind Set Alarm
is that in theory, your application could not be
running, and because Chrome is keeping track of the
registrations, you could say in five days’ time,
pop up this alert. And your application code will
be brought back to life and called and executed, and then
you can do something with the application, maybe show a richer
notification, those types of things. So that’s the summary
of what’s happened. We’re going to have a lot more
things to talk about over the upcoming weeks. As always, we want you guys to
tell us what you know you want to hear about, we can try
and start to talk to. The best place to go and contact
everyone is either the group Chrome Maps
@googlegroups.com. I haven’t got any placeholders
to overlay at the moment, because we had such a– I won’t tell you how much effort
we had to do to get this video working, but it
involved reinstalling a lot of things in the last
two minutes. We also have a Google+
community, which I believe is called Chrome Apps
and Extensions. There’s about 500 people
involved there. If you have any questions, any
feedback or things that you want to see, either leave them
on the event post that we’ve done, or just leave
it in that group. We are pretty active
there as well. We’re all members of
that community. It’s run by an external
moderator called Bruno. So yes, leave all the
feedback there. And I’m not going to
say we’re done. I’m going to jump to
some questions. I know there’s some things
that have come in. So let me just switch to
some of these now. None on the Moderator. 10 votes for one question
from 12 people. Brilliant. So we’ve got one question
in the Moderator. So the question, shall
I read it out? I’ll read it out. The question about publishing
packaged apps are still in developer preview and because of
that cannot be published in the Chrome Web Store. Are there plans of releasing
packaged apps anytime soon? From Oleg in Toronto. Really great question. Obviously, we never
comment on actual physical launch timelines. The interesting thing is that
these, you can actually put applications inside the store
today, they just can’t be discovered. So all the apps that we
showed you before– let me jump through here– these are actually all inside
the Web Store today. Paycheck Calculator, Chompy
Ball, LetterBrush, they’re all inside the Chrome Web Store. It’s just that when you search
for LetterBrush, you won’t be able to find it in Search. So if you want to make something
now, you can start pushing it off. I know one of the really big
things at the moment is you want to get that discovery, and
the funnel of the Chrome Web Store driving traffic
to your app. Right now, it’s not there. You’ll have to actually
basically direct the user to the app. It’s the only thing that
we can say right now. So that’s the question. We don’t have any kind of solid
time on that I can tell you right now, but we’re working
on it like crazy. What’s this? Silver onion, cool. Let me just jump to see. No, that’ll be it, I think. I’m going to check
one more thing. I won’t share my screen. I have some G+ notifications. Anyone asked any questions? No questions. No questions. No questions. I think we’re done. If you do have any questions
in the intermedium period, please put them on the
group or email me, [email protected], or
actually go on our Google Group as well. And with that, I thank you
very much and goodbye.

, , , , ,

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *