It is predicted that there will be 4.69 billion mobile users at the end of 2019. There were 197 billion app downloads in 2017 and 149 billion in 2016. Mobility is at the centre of the digital strategy of large and small enterprises alike.
Mobile apps are the primary medium used to deliver content via mobile phones. Everyone who owns a mobile phone installs apps to achieve specific goals based on their needs.
This was made possible when Apple announced the iPhone in 2006, Android entered the market in 2008 and Windows phones became popular in 2010.
Each of the 3 platforms had their own Software Development Kits for building apps. As a large corporation,if you wished to give your customers a mobile experience, you had to build three separate teams working on three different technologies. You wouldessentially be building 3 apps, doing exactly the same thing. These apps are called NATIVE apps.
While building apps in Native is powerful, they require the team to be skilled in multiple technologies. iPhone developers - Objective C / Swift, Android developers - Java and Windows Developers - .Net.
Before mobile, web apps dominated the market and they were built using HTML, CSS & Java Script. But the web developers. at this point, could not use their skills to build mobile apps. They had to learn Java, Objective C and / or .net to be able to build even the most simple mobile app.
Apache Cordova enables a web application to be packaged as a native application and access device features like the camera. The apps built using Cordova are known as hybrid applications. PhoneGap was originally created by Nitobi which was acquired in 2011 by Adobe. This was later open sourced as Apache Cordova.
A hybrid application is a web application that lives within the container of a native mobile application.
The only difference between a web application and a hybrid application is that a hybrid application can access the internal hardware of the mobile device.
Accelerometer | Camera | Compass | Contacts | File |
Geolocation | Media | Network | Notification | Storage |
Cordova launches a web application on the phone’s web view. The app appears and behaves like a normal mobile application. Further, it has complete mobile device access.
This enables teams to have only one code base that can be used in multiple platforms. This was and still is the key differentiator for Cordova. The amount of time and effort saved is considerable.
The limitation with Apache Cordova was that apps built using Cordova did not “look” and “feel” native.
Apple works onApple design, and Android uses material design, which make apps look and feel a certain way. A lot of effort has been put by Google and Apple to offer a superior user experience This is achieved by high quality lists, headers, animations and gestures which functioned similarly in any app.
The Cordova developer had to build each of these from scratch and as one can expect, did not match Apple, Google or Microsoft. There then rises the obvious need for a centrally maintained framework of all such features which will offer consistency across apps. One of those frameworks is the IONIC FRAMEWORK.
Ionic is a framework used to build mobile apps using HTML, CSS & JavaScript. In addition, it comes with high-quality native-like components. The features that are provided by native apps - gestures, popups, etc. are provided by ionic. They can be customized for any app with ease.
Ionic works side by side with Cordova to access native features of the phone like the camera. Further, all these components are loosely coupled, giving you the ability to mix and match with ease.
Ionic provides native-like components & features like popups, swipe gestures, etc. It works along-side Cordova to access native mobile features like the camera.
Coding in plain JavaScript is one thing, but coding in Angular is totally something else. Angular is the most widely-used JavaScript framework out there. It has a wide user community and several large corporations use Angular to build their web applications.
Angular is used to build “Single Page Apps”. A single page app can be seen as a web app that behaves like a desktop app - without lags. Parts of the page can dynamically change in response to user input - without refreshing the whole page.
Angular divides a complex page like the one below into components.
It then gives powerful features that allow interaction between these components and enables sharing data and navigating across the application. Most Angular apps use Twitter BootStrap to style their components.
Angular provides a mechanism to bind data to the html, “directives” to display data by looping through an array, conditionally displaying data, etc.
Angular uses TypeScript rather than JavaScript.
Angular comes with the “http” module which can be used to make “API Calls” and fetch data from/ make updates to remote applications.
Below are a few features that Ionic offers.
Ion Card
Buttons
Fab Buttons
This is a brief sampling of the features that Ionic has to offer. It also has plugins that are JavaScript based, like Popups, Modal Windows, Tabs, Menus, etc.
Ionic uses Angular routes for navigation. It can be combined with “Lazy Loading” to load only the parts of the app that are currently being used
Invoking native functionality is simple. Here is an example. This will launch the camera and after the picture is taken you will be able to access the image and process it as per your need.
export class PhotoService { constructor(private camera: Camera) { } takePicture() { const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE } this.camera.getPicture(options).then((imageData) => { // Do something with the new photo }, (err) => { // Handle error console.log("Camera issue: " + err); }); } }
The modern approach to fetch data into your mobile app is using HTTP request. HTTP requests are made to GET (fetch) data, POST (create data/ invoke server functionality), PUT (update data) and DELETE data. Ionic uses the Angular HTTPClientmodule to achieve this.
HTTP requests depend on the network and if not done “asynchronously”, they can make the app freeze. Angular has the feature of “observables”. The HTTP request returns an observable object. The Angular compiler proceeds to the next statement after the request, while a “subscriber” waits for the data to be received. Once the data is received it is processed.
While Ionic / Angular allows you to use local storage/ cookies, data is normally persisted in a remote database. Firebase is often the choice to persist data for the app. Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your app.
In this course we have learnt
Leave a Reply
Your email address will not be published. Required fields are marked *