How we developed our first mobile app for both Android and iOS reutilising our Web Development Skills - Hybrid Mobile app development with Ionic 2/3 and Cordova

photo credit: https://unsplash.com/photos/w33-zg-dNL4

Cross-posted on: https://medium.com/givebox

Aka the story of Givebox.xyz - Give Old Things Away Locally

So let's start with showing the glamour shot.

This is the most complicated view of the app. There is socket.io, push notifications, custom CSS, etc.

This is Givebox, a Mobile App to quickly give away things for free which you no longer use.

In Sept 2016 I made the first commit, 7 months later, after learning a lot more about Ionic; using Ionic 2-beta; having a friend rewriting the app from scratch using Rx.JS; and seeing the release of Angular 2 & 4 stable; we launched the Android app on March 16th 2017 and the iOS App on Tuesday 23rd 2017! 🎉

So where is the iOS app? The exact details of how the iOS has been brought to life will be released in the near future. All the issues (cough) "challenges" do due to Apple's Developer experience with certificates, push notification, etc. will be released once the app is out^[1].

The iOS app took longer because of few issues with Angular, but mainly took time to write features to comply to Apple’s Store strict rules. For example:

User-generated content must include sufficient mechanisms for blocking and reporting other users and their associated posts/ads.

That meant creating a blocking and reporting mechanism in the app and server. We didn’t think it was important to do it in the first release but now both Apps have this.

Let’s say you know JavaScript, HTML and CSS. How do you make a simple Mobile App? First of all, consider the learning curve. Learning a framework for single page applications (MVC) Angular and the Cordova platform can be challenging.

I spent significant time “learning” i.e. Googling and reading StackOverflow answers for every single piece of the application. From the development of a feature, to building an Android app to how to debug the app running on a real device, etc.

Please consider we're thinking about rewriting the App using React Native.

If you have used React in the past and you didn’t find it difficult getting your head around all the major concepts, then maybe you can skip learning Angular. At the end they’re similar frameworks¹. I believe it’s a more natural progression to go from React to React Native.

However, if you have developed websites using a little bit of Angular, jQuery, Node.JS, etc. Angular will be a bit more intuitive at the beginning and will allow you not having to relearn a bunch of concepts. Though do not that complex apps will require a lot more that just few pages and buttons to go navigate around them.

Another notice. Developing an Angular app or using another JavaScript framework inside of a WebView has limitations. It’s definitely more difficult to have an app that performs well on Angular than when using Native (Swift, Java/Kotlin/etc.) or React Native [hint hint].

Okay. So enough of comparing your stack with others. You choose a pony, now work with it and make the most out it.

Ionic Framework comes out of the box with 80% of all tools you need to make a iOS, Android and Windows mobile app. You can use the Cordova plugins to take a photo using the camera, read and write an NFC chip, get the geo coordinates of a user's device, and much more.

Once you know what you can do with the tools in front of you, the next thing I tend to is to find examples or tutorials.

Check out these resources:

• Ionic Conference demo app
• Ionic Base app
• Learn Angular 2
• Joshua Morony YouTube channel
• Official Ionic Framework Forum

If you have any extra links or Github projects or tutorials you would recommend, please add them in the comments.

Ionic has a great online community, which means that the likelihood that somebody else has run into the same issue and has asked a question on the Forums or SO is pretty high.
Ionic 2 was only released as stable in Jan 2017 so I would argue that just in the last few months the amount of blog posts, articles, and code examples for Ionic 2/3 have exceeded those for Ionic 1.

In summary, as with anything new you're learning. Pick something, try it out and think about the short term as well as the long-term benefits when picking up a technology. Don't be afraid to dive into the source code, ask for help online or offline to your fellow developers. You never know who is tinkering with a technology and might point you in the right direction.

Finally, if you have any thoughts on the Tech, App or want to help widespread Givebox give me shout at gianfranco <at> givebox.xyz or @gianpaj on Twitter.

PS: We're looking for a Community Manager.