Ionic App Development: Building the Buisness App

Image Source
Repository: Ionic FrameWork Open Source Repository

Software Requirements: SublimeTextYou can get it here, browser preferably chrome, nodeJs

What you will learn:
In this tutorial, you will learn how to:

• Develop android/Ios mobile application from scratch

• Use html, css and Javascript for design and Logic of this app

• Using nodeJS for development

Difficulty: Beginner

Tutorial
In the modern world app development is imperative to a better and easier society. In this tutorial, we will leatn how to use the ionic framework in a non-conventional way to develop a mobile application from scratch.
Note: For understanding, you need to have the basic knowledge of HTML, CSS and Typescript(Which is very similar to Javascript). You should also note that any part not explicitly covered in this tutorial is already well documented in the ionic framework documentation.

In this tutorial series we will be developing a mobile application which should be workable on both Andriod and Ios platforms with web framework languages. Ionic framework uses Angular and a modified but extremely similar form of javascript called typescript.
Make sure you install ionic cordova

npm install ionic cordova

To start up this project with all software dependencies simply type the following code in your command prompt or nodejs module.

#This starts up a new blank template for our project
ionic start buisnessapp blank

After the cordova dependencies have been duly installed it should prompt you on the following questions all of which you should answer 'yes'.

do you want to integrate cordova for andriod/Ios
do you want to add sdk to connect your app
do you want to link your app to any other existing app #Answer No
which repository would you like to use#Advisably github

After this all you need to do is navigate to the folder created by ionic in your user page in your local disk and open the folder with sublime text to begin work.
Use this piece of code to serve your development area to your browser.

ionic serve

Note:This must be within your directory. Image below

Ionic would serve this to your default browser and we can begin development.

In our editor(Sublime text in this case)
We have the following directories

So we navigate to the index.html which is the entry point for our app.
Ionic uses angular directive and uses cordova to integrate our whole framework to look really similar to and application built with native Java.

Next thing were going to be doing today is navigating to

pages/home/home.html

This contains the html content which will be served at the start. When we navigate here we will change the heading of our app to the desired name which in this case will be The Buisness App.
Ionic uses styling similar to html to differentiate between headers, content and footers of pages. So to change this well simply change the text within our header file like this

pages/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      The Buisness App
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
</ion-content>

When you save this you should note how in your chrome browser your app builds and then updates within the browser.
The next thing we want to do is to create a sort of slide menu that comes up when the application is started. For a more advanced developer, making this to come up just once would be better but instead lets make it come up every time the application is started. To do this simply use the slide directive that ionic already has in place.
To do this, erase all the code within your pages/home.html and replace with the following piece of code

<ion-content>
  <ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>
Tabs
</ion-content>

Note: Dont forget to remove the padding to give the app a full screen look.
Swipe and see how by default your app slides through the menus given. Try to modify this by adding your custom html within each slide and saving to see how ionic builds immediately and serves to the browser.

Add a custom message that tells you a thing or two about your application and in the next tutorial we will deal with adding more pages,tabs and images to our application.

You can find my proof of work done in Github