Book Image

Hybrid Mobile Development with Ionic

By : Gaurav Saini
Book Image

Hybrid Mobile Development with Ionic

By: Gaurav Saini

Overview of this book

Ionic is an open source, front-end framework that allows you to develop hybrid mobile apps without any native-language hassle for each platform. It offers a library of mobile-optimized HTML, CSS, and JS components for building highly interactive mobile apps. This book will help you to develop a complete, professional and quality mobile application with Ionic Framework. You will start the journey by learning to configure, customize, and migrate Ionic 1x to 3x. Then, you will move on to Ionic 3 components and see how you can customize them according to your applications. You will also implement various native plugins and integrate them with Ionic and Ionic Cloud services to use them optimally in your application. By this time, you will be able to create a full-fledged e-commerce application. Next, you will master authorization, authentication, and security techniques in Ionic 3 to ensure that your application and data are secure. Further, you will integrate the backend services such as Firebase and the Cordova iBeacon plugin in your application. Lastly, you will be looking into Progressive Web Applications and its support with Ionic, with a demonstration of an offline-first application. By the end of the book, you will not only have built a professional, hybrid mobile application, but will also have ensured that your app is secure and performance driven.
Table of Contents (9 chapters)

Directory structure and modularity

Previously in Ionic 1x, we didn't have the best directory or project structure. Slowly as Ionic and Angular evolved, developers tended to move towards the modular approach for organizing their files and folders. There were many different ways to manage your files and folders in Ionic 1x. Usually the default structure you will see in the Ionic 1x build can be used in many small projects where we don't have to deal with many files and for small projects; mainly two structures are followed for Ionic 1x based projects: byFolderType and byFeatureType. With Ionic 3, one of the best things is that we have the project structure set up in a modular way where you will have pages, providers, pipes, theme folders, and respective subsequent folders in them. Let's go through some important files inside Ionic 3 projects:


In this folder we have our entire application code base and it is the most important:


Here we have all our dependencies and NPM packages that are required to run the application:


Here we have specific platform-based folder entries, which our app is using. When we run the ionic platform add command, you will see a specific folder created inside the platform folder:


All the plugins used in our application are hosted here:


An entire set of icons and splash screens are inside this folder, organized according to various platforms and devices:


Here is our index.html file, and after compilation of the code base in the src folder bundle, files, images, and SASS compiled css files are placed inside www:


This is the entry point to our application or we can say every hybrid application. We mainly have scripts and style sheets declared in this file to run the application. As in Ionic 1 we use ng-app, here in Ionic 3 we check for <ion-app></ion-app> inside your index.html file:


This defines the project metadata and dependencies that will be added to the node_modules folder. It also has information about the Cordova platform and plugins used in the application:


This file contains project-specific settings such as names, IDs, proxies, and other information:


This is where we start towards the code base and also we bootstrap our application inside this file:


In this file we declare the pages, directives, and providers used inside our application:


We set the root page here and root-component is called first, which controls the application, similar to what the app.js file does in Ionic 1. However, this component is not different from other components in our application; it is just declared in the app folder. As we start to build applications in upcoming chapters, we will get to know more closely how we work around all these files and code bases.