Last week I spoke at OKCjs about Ionic. Ionic is a framework used to write hybrid mobile apps. The thing I really love about Ionic is how easy it is to get started writing apps.

The app I wrote for the lightning talk was just a silly joke app to countdown to see the new Star Wars movie. It’s a pretty simple app, you can see the code here. You can also run the app in your browser here.

Getting started building an Ionic app is fairly simple. Once you’ve figured out what you want to build, just navigate to their Getting Started page, and you can download a starter app. They have three different types of apps – a blank app, a tabs app, and a side menu app.

Being able to download a starter app and Ionic’s documentation are two things that I really love about Ionic. These starter apps have everything you need wrapped into them. And if you aren’t familiar with building a side menu or a tabs menu, you can download their starter apps to delete, add, and change things around to get a better understanding of how these work.

And I can’t say enough for Ionic’s documentation and community. Nearly all of their features are well-documented and if you have a question, the Ionic community is very helpful.

My app is very simple. The app.js file uses UI-Router (Ionic uses UI-Router by default). Basically, the app.js file routes the app to the correct page based upon the tab that the user clicks.

The rest of the functionality is handled in the controllers.js file. The home page has two inputs, one input will accept a string. The user inputs a movie title, and then the user selects a date. I used a plugin for the calendar which you can find here.

Both of the inputs are stored in localStorage. The only downside I saw in storing these in localStorage is that if the user clears the data off of their phone, the data is lost and they would have to reenter their countdown information. I wasn’t sure that was very likely – especially since this was just a little toy project I made for lightning talks.

Within the controllers file there is also a small countdown timer I wrote. Someday I’ll pull this out and build a plugin for it so I don’t have to copy/paste the code over and over again.

The html files are stored in the templates folder. I hardcoded the questions into the tab-home.html file, while the tab-countdown.html file uses variables that are attached to $scope to populate the page. Those variables, of course, are grabbed from localStorage.

There are a few more things I’d like to do with this project. I’d like to add in some better error handling. At the moment, the calendar will allow you to choose a date that has already past. In addition, I want to have the countdown page stop displaying after the movie date has past.

I plan to polish this up and put it on the Google Play store for practice, so stay tuned for a blog post about that too!

I had a really great time speaking at lightning talks and showing off this goofy app. If you’re near OKC, you should definitely check out OKCjs. It’s a great group and you’ll hear from really smart people about really interesting projects.

If you have any feedback or suggestions about this app, please let me know in the comments!

Questions? Tweet me!

I would also like to note that I had a lot of help from two really great people on this app. They are Josh Bavari and Rick Yoesting. You should definitely check these guys out because they are way smarter than me. Thanks so much, guys!