App development using Ionic Framework

I’ve long been a fan of PhoneGap/Cordova, the web and mobile app systems used to build “native-like” apps using web languages of HTML, CSS and Javascript, and this appreciation extends to Ionic too.

Ionic has been around for a while now, and I thought I’d learn it to improve my skill set with Angular JS. For those who don’t know, Ionic is a framework for developing mobile apps which feels native with the use of platform (iOS, Android) styled headers and footers, fonts, positioning of elements etc. It also has an array of excellent Javascript components such as modals and slide boxes.

In order to learn Ionic and expand on Angular JS I decided to start a making an app from scratch which included a lot of features which would push the boundaries of learning as many parts of Angular as I could. I began the project in December 2015 and have now almost completed it. With only spending a few hours per week on the app design and development I’m excited to finally get it out there!

The app is a recipe finder for all types of great food recipes.

I’ll be finishing and sending the app to Apple and Android in the next month or two, but I thought I’d share this blog post to show the main features I’ve included and how they helped teach me Ionic and Angular JS:

• Authentication

  User registration and log in systems are a great way of getting to the nitty-gritty of any new language or framework, so this was a great way to get introduced to deep Angular concepts.

• Web scraping

  Getting all of the recipes available to the app was one of the biggest challenges. One reason was because of the legal/copyright issues of using other peoples’ recipes in the app. I approached many websites and magazines about asking for permission, and most were willing to feature their recipes on the app when I mentioned the user would be directed to their website within my app using the In App Browser plugin. Everyone’s a winner!

  The other reason was actually managing the vast number of recipes I wanted to be featured. Making a web scraper was an early option which would go through the sites and pull out relevant info to add to the app, but when half way through developing this feature I realised it was not feasible.

• Front end MVC

  MVC has been a great developing paradigm over the years with my PHP background, and this stays true to how Angular works with Ionic. It has great separation of concerns in the code which is useful when developing such a complex app as this.

• Working offline

  Another great way to explore how an app using Ionic can store objects in temporary and permanent locations for access later on. The app actually stores the bare minimum of all recipes so once the app has downloaded this info, people can still use while offline. This only provides half of the desired functionality though, as the user is not able to navigate to the original recipe’s website to see the whole thing.

• Social API’s

  With most apps now, the idea is to try and make it as easy for the user as possible to connect. For this reason, a Facebook login feature was created. This is a great way of automatically logging in with the users credentials of their native Facebook app.

  Users can also share their recipes to Facebook, all of which has been a great way to explore the ever-changing Facebook API.

• Graphic design

  The design of the app has been a great experience and there have been many ideas thrown in the bin throughout the last year. It’s been kept as simple as possible so the features of the app are intuitive to the user, drawing on a lot of UX skills has helped here.

Let me know your thoughts, and I’d be happy to help anyone who’s getting into Ionic development.