February 1, 2016
  • All
  • Built With
  • Ionic

Announcing the Angular Cardboard Hackathon Winners!

Katie Ginder-Vogel


The results of the Angular Cardboard Hackathon are in! Entries were judged in two categories: Most Engaging App and Best Technology Demonstration.

The first place winner was Albert Sanchez’ Space Cardboard App, and second place went to Vlado Tešanović, for an app that featured birds flying around the static image of a slackliner.

First Place: Space Cardboard, by Albert Sanchez

Sanchez’ Space Cardboard app features a tiny spacecraft that can travel around the solar system and see the Sun and the other nine planets in a 3D environment. Viewers can also see the two main planets’ movements, translation, and rotation by orbiting around the Sun.

“This app takes advantage of all the technologies,” says Ionic’s developer advocate Mike Hartington. “It’s fully immersive, to the point where I was standing up and moving all around the apartment playing with it.”

Sanchez, who lives in Tijuana, Baja California, Mexico, is in his last semester of Mechatronics Engineering at CETYS University and also works full-time as an Information Systems Analyst at a Hubbell Lighting manufacturing plant.

“I started using Angular because I got interested in creating Chrome apps for school projects, and one of the Chrome app tutorials makes use of Angular,” Sanchez says. “I tried it and I liked very much. I continued to apply this knowledge at school and work by combining technologies like nwjs, Electron, and the Chrome packaged apps, in order to power cool projects like robots and automation machines. Ionic entered my life as part of this learning process, and in simple words, I am just in love with Ionic and how easy it is to create a mobile app, a website, and a hybrid desktop app at the same time! Both Angular and Ionic have become important solutions to my everyday problems.”

Once Sanchez decided to participate in the hackathon and understood the starter template’s code, he started several samples, without knowing for sure what he was going to build. Inspired by Guardians of the Galaxy he decided to work on the concept of a spaceship traveling through space.

“I found some amazing tutorials on how to create planets and make things move,” he says. “After some research on planets, I managed to make them move and rotate, like they do in real life. Once I managed to create a solar system scenario, I added the ability to switch between cardboard mode and normal mode, for someone without a cardboard viewer. My final step was to make a multiplayer option, so that two or more spaceships could travel in the same space, but the December holidays arrived, and Mexican tamales needed my special attention.”

Sanchez would love to see teachers use his app in the classroom.

“My idea was to create a fun educational tool, where you could learn about the planets, and instead of just seeing them in pictures, you could actually travel all around them,” he says. “This would be amazing for a class session, where every student could get immersed in our solar system.”

Space Cardboard can be downloaded from Sanchez’ GitHub repo. To properly view it, use Ionic View and input ID D118CB8F.

GIT link: https://github.com/AlbertSanIza/Space-Cardboard.git
APK link: http://albertsaniza.github.io/downloads/space-cardboard-android.apk

Sanchez noted that Angular and Ionic are great for prototyping and school projects, when you need quick results.

“Angular is so fast and easy to implement that you are able to get amazing results in no time,” he says. “Both Angular and Ionic are very well documented, and there are lots of tutorials on how to use them. I believe that web technologies are changing the world, and both Angular and Ionic are leading the way.”

Second Place: Birds flying around a slackliner, by Vlado Tešanović

Vlado Tešanović’s app features birds flying around the static image of a slackliner.

“I bundled the panorama image viewer, with birds made in Three.js, and simple drum music,” says Tešanović, who lives in Pale, Bosnia, where he is a Senior Programmer at Walter BIM Solutions. “I used Cordova to build a .apk file with an NPM script. Gulp.js was my building tool for transpiling TypeScript into JavaScript, and linting code. SystemJS is the loader I used. In the app, I used Angular 2 with Three.js, with help of lot of third party libraries.”

Tešanović’s code repository is on GitHub, and he plans to publish the app to the Google Play store. He also plans to develop his initial idea, a detective game for Cardboard, based on Angular 2, which is the main client-side development platform for his company’s new application.

GIT Link: https://github.com/vladotesanovic/a2cardboard
APK Link: https://github.com/vladotesanovic/a2cardboard/blob/master/builds/android-debug.apk

“What I like in Angular 2 is they started with technologies like Service Workers, taking advantage of the shadow DOM with a component-based approach and TypeScript as a main language,” says Tešanović. “The future is bright for web developers, I can’t wait and can’t imagine how much great stuff will come from Angular 2, and I will cheer for Ionic 2, which will make life easier for us.”

Katie Ginder-Vogel