Ionic

We have decided to make the project a mobile application instead of the PC-based software it has been so far, during the first semester of its developing. That means abandoning JavaFX and finding a way do develop it as an application. After some research, we've decided to work with Ionic framework. This wiki page will explain our choice, the advantages of Ionic and how to use it.

What is ionic?

Ionic is a framework for developing hybrid mobile apps, using HTML5. It is used to create applications that would run on any device, no matter if the operating system is IOS, Android, Windows or any other OS that allows running web services. Hybrid apps are small websites running in a browser shell in an app. These apps have access to the native platform layer. Their benefits over regular apps include greater speed of development, better platform support and a wide array of design options.

Ionic is actually the GUI of the app you are building. It is responsible for the interactions between the user and the app. As such, it has a broad range of common native mobile components, animations, slick designs of buttons and other elements, and practically everything needed in order to create the perfect comfortable app that is smooth and satisfying to use.

So what is special about Ionic?

Up until recently, you could not get the native-style mobile UI elements by designing a web- based service. Now, ionic came and changed the rules. Using Ionic, all of the native element options are kept, and it even allows some basic opinionated skeletons for your design.

As an HTML5 framework, Ionic needs native wrapper in order to run as a native app on the device. We chose to use Cordova, as the Ionic creators recommend it, and it got good reviews by other designers on the web.

Shortly about Cordova

Apache Cordova is a framework for developing mobile applications using CSS3 and HTML5 for rendering, and JavaScript for the logic part - instead of platform-specific APIs. By wrapping CSS, HTML or JavaScript around the platform code, it enables extending their features to create a hybrid application with more possibilities than a native code based application. The hybrid app can run on more than one operating system, and therefore is developed much faster and with fewer bugs than when creating an app for each OS separately.

Installing Ionic

Instead of copying the guide, here is a link to the Ionic official website, explaining how to install: http://ionicframework.com/docs/v1/guide/installation.html

In addition, Yael Amitay created a great manual for installing and starting to work with ionic here: https://github.com/TechnionYP5777/SmartCity-Accessibility/issues/223
In the end of the issue there are some FAQs that might help in case of faults.

Also, for those who prefer their studying more visual, I've found a very intuitive youtube tutorial for getting started with Ionic: https://www.youtube.com/watch?v=0jamhGf-8ww&list=PLYxzS__5yYQljbuGjaeugpqs9U07gS5P5

I recommend editing the Ionic-y code using SublimeText. A link for download: https://www.sublimetext.com/