Playing with Ionic 2
After reading the announcement of the new Ionic 2 beta I started to look for an opportunity to use it in real life. On the Internet I found some great ideas about how to create a hologram projector that works with a smart phone and decided this would make a cute, techie present for my wife. So having put together a hologram projector by following this video tutorial, I made a small app on Ionic 2 using Angular 2 and Typescript with a set of hologram ready videos to complete the project (just search on youtube for ‘3d hologram videos’). I’m pretty pleased with the results and even more importantly, the wife thought it was really sweet! This picture shows a Jellyfish hologram playing in the projector.
Getting ready
I installed the new Ionic CLI using the command:
npm install -g ionic@beta
Here we have some changes:
1. now we work with Typescript;
2. instead of Gulp we have Webpack (module bundler).
I started the project with the ready-command:
ionic start myApp –v2 –ts
As usual I used ionic serve for developing and then ionic run android for running on the real device.
Time to code the hologram projector
So, let’s take a look at what an Ionic 2 app’s code looks like:
app.ts (main file):
videos.ts (service):
home.ts (controller):
home.html (template – view):
You can look at the source code for the project here.
Also, very useful for me was this cheat sheet for Angular 2.
Of course there’ll be many more projects to come, but this was a fun little app to get to grips with the new Ionic version. Enjoy!