App development using Ionic Framework
November 30, 2016
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:
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.
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.
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.
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.
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.
Senior Engineer at Haven