Monday, August 29, 2016

Polymer + Firebase + Tutorial = Awesomeness

Chat.png

I got from zero to the cool looking Internet chat application you can see above in an hour.

One hour!  

The app is hosted on Google servers. It uses Google services to let users sign and authenticate. It keeps a database of messages and images that have been sent through the application in Google storage. (All for free).

When you sign in, it sends you the messages you've missed. When someone else sends a message it pushes the new message to anyone who is connected. Just like you like.


The user interface looks super-slick and runs on modern browsers and mobile devices.


Awesome use of an hour!


If you haven't already installed the necessary tools it might take you a little longer. So maybe an hour and a half? Two? I'd be surprised if it took longer.


The secret: follow this tutorial.


It uses these technologies:


  • Front end: Polymer.  This is a web-app building technology created by Google, based on the evolving, industry-standard Web Components extensions to HTML.
  • Back end: Firebase. This a set of services provided by Google. It does hosting, authentication, a real time database, data storage and more, using Google’s cloud services under the cover. Which means it can scale up to infinity.

OK, I  Google


Following the tutorial, I downloaded the code to my desktop. I ran a local web server and served the UI to Chrome on my desktop to make sure it worked. Then created a Firebase Project (I already had an account, so add five minutes to your total -- big deal!) I changed the configuration to use that project to store the data and authenticate. I tested. It authenticated, and stored the data. Then I changed the configuration to deploy, and deployed the finished app to Firebase. And it ran.


The end.


Once it was there, it just ran: desktop, Android devices, iWhatever.


It you don’t know the technology, it looks like magic.


Even if you do, it still looks like magic.

There's actually a lot more too the application, invisible an under the covers. And using Polymer, it should be easy to add more stuff.

And so I shall.

No comments:

Post a Comment