PolARbits Christmas Card 2017

, , ,

After last years’ crazy IoT, live streaming experimental Christmas Card we’ve decided to build something different this year. We organized a small internal hackathon in our office. Challenge was to create an experimental Christmas card in less than two days using Syncano (done by Grzegorz) and web augmented reality (done by Maciek).

Syncano backend part

by Grzegorz Bielecki

It was our first project in syncano. We were very curious to test this technology. Its main idea is to create real-time apps faster and easier with use of already defined components. All defined components are available in Syncano Sockets Registry. This is how syncano creators encourage us to try their product:

Our scalable platform helps developers build complex apps with only frontend code. Focus on what excites you – we’ll handle your backend.

In Syncano whole backend and frontend communication uses API. Endpoints are defined in a socket. For our project we created new socket:

As you can see it’s built with two endpoints:

post-wishes:


– called by wishes sender after submitting the form

get-wishes:


– gathering wishes from Syncano database to display them on our card.

Each endpoint has its logic defined in a separate js file. To post/get data we use syncano built-in database. And here comes first great advantage. We do not have to configure any connection string, nor define a query or open/close connection. All this is done within Syncano. All we had to do is to create/read object based on parameters sent from the client.

Our “wishes” object consist of sender(string), receiver(string), wishText(string) and cryptoId(string). These properties are defined by type and name only. Syncano by default adds some fields like id(integer) or date of creation(datetime).
“Wishes” object is defined next to the endpoints definitions in YAML file. YAML is pretty self-explaining. This socket.yml file is actually a definition of a socket where we have all of our classes, events, and endpoints. Because of that, we have description, definition and documentation of socket in one place. Getting back to project after long time? Just open socket.yml to get all you need to know to start working with it. New socket? Take a look in the socket.yml to find out if it fits your requirements.

Syncano offers another great feature: hosting. Just one command in terminal and after short configuration our site is deployed. You don’t have to think about buying a server space or configuring it. Syncano allows you to use custom domain name – just set it in your project and place a cname record in your name server configuration.

Completing backend part for Christmas time took less than one and a half man-day (total newbie to Syncano, with basic knowledge of JavaScript). The biggest problem for me was documentation which is not up-to-date in many parts and some malfunctioning in Windows terminal and syncano CLI cooperation (but this is a result of using the beta version, I guess). Despite those, I was really pleased how fast it was.

In my opinion, Syncano should be considered as a chance for a big revolution in development. Even though it is still in active development, sometimes documentation is not up-to-date and there are not many of ready sockets, it is definitely a time saver. No need to establish a connection to the database, create users/member all over again and repeating code in different projects. Just use already created sockets and Syncano backend! You can read more about Syncano here: https://syncano.io & here: https://github.com/Syncano/syncano-node (It would be really nice if you give them a star ;))

 

A-Frame

by Maciej Korsan

A-Frame is a web framework for building virtual reality experiences. Originally from Mozilla, A-Frame was developed to be an easy but powerful way to develop VR content. It gives you the possibility to create VR & AR apps with just a few lines of custom HTML, and it works pretty well in most of the modern browsers. Last year I gave a short talk about A-Frame on meet.js Białystok meetup. Here you can check two really simple examples: http://vr.polarbits.co & http://vr.polarbits.co/index-2.html – everything created in minutes.

My idea was to create a card that uses your smartphone & displayed/printed marker. After going to the website and pointing phone’s camera at the marker, user should see his custom wishes in AR.

via GIPHY

The main usage flow is:

  1. Open marker on your computer
  2. Open custom URL pointing to your wishes on your phone
  3. Allow camera access
  4. Enjoy your card 🙂

To make an AR experience I’ve used several tools:

The biggest challenge wasn’t to make the whole scene working, but to work with latin extended characters in wishes text. Unfortunately, the default font supports only limited number of characters, so I had to find a way to create a custom font. After few hours of trials, I’ve found and used  Hiero tool and successfully generated working font files. To use the custom font you have to use this method:

As you can see above, a-frame elements can be treated as they were in regular DOM, this gives you a possibility to modify your scene with external data – this is what we did in our card project. To receive data from Grzegorz’s sockets I had to add only two lines of JS:

That’s all! Everything I need is an instance name, and in this case the ID of wishes I’d like to display. MAGIC.

After putting everything together we’ve prepared a landing screen to generate your own wishes – you can try it here: https://xmas2017.polarbits.co.




Having a nice project to code?

pawel@polarbits.co // +48 606 115 330