Build The Biografy of Sultan Iskandar Muda Mobile Application with Ionic Framework [Part 1]

in utopian-io •  6 years ago  (edited)

Repository

[Ionic Repository](https://github.com/ionic-team/ionic)

 What Will I Learn?

  1.  You will learn How to start a mobile application with Ionic Framework
  2. You will learn How To Create A Project with Framework
  3. You will learn How To Add & Theming components of Ionic
  4. You will learn how generate a page & use NavPush
  5. You will learn How to test it.


Requirements

  1.  NodeJS [Download](https://nodejs.org/en ) & [How To Install](https://www.npmjs.com/get-npm)
  2. Ionic Framework
  3. Code Editor (Sublime or other)
  4. Browser (Firefox Mozilla or Chrome or Other)


Difficulty

  • Intermediate

Tutorial Contents

Today, I will show how to make a biographical application of an important figure using the Ionic Framework. The Ionic Framework is an Open Source SDK for hybrid mobile app development. With Ionic, we can develop a hybrid mobile app using HTML5, CSS & Sass technology. To work with Ionic we must first install NodeJS in our machine. NodeJS for executing server-based applications & we need the "npm" command from NodeJS to install ionic framework through command line. The features of ionic framework is AngulasJS, Css Components, JavaScript components, Cordova plugins, Ionic CLI, Ionic View & Licence.

#Step by Step :

1. Install Ionic with the npm command in the command prompt (For Windows OS). Open command prompt and type this code : 

    npm install -g ionic 

2. After that check the version of your ionic , type this code : ionic -v 

 check more information: ionic info

![ionicinfo.png]()

3. Now we can create a new project with ionic. Ionic provides several templates such as Blank, Tabs, Sidemenu & Supertabs. I will use the sidemenu template for this biography application. Select where the directory to place your new project then type this code in the command prompt: ionic start app_biografy sidemenu. 

Ionic will create a project with the app_biografy name using the sidemenu template.

4. Next, we can change this project by changing code in files with HTML, CSS & TS extensions (Script Type), this files in Name_Pages/Pages/src directory. Structure an ionic project You can see in the picture below:

![structur.png]()

5. The first step now, I will change The Home Page and Add Components like as ion-card, image, ion-list & ion-button. 

  •  i add ion-card component to good-looking
  •  to add image , you must save your image in img/assets/src directory
  •  ion-list to display various information
  •  ion-button for move to other page (using NavPush component)
  •  All this component will be place in ion-content (ion-content is the container)

6. This code below to add component ion card, image & List.

code : Home.HTML

<ion-header>

  <ion-navbar>

    <button ion-button menuToggle>

      <ion-icon name="menu"></ion-icon>

    </button>

    //title of this app

    <ion-title>

      Biografy Sultan Iskandar Muda

    </ion-title>

  </ion-navbar>

</ion-header>

//add component card, list & image in ion content

<ion-content no-padding>

  <ion-card >

      //ion-list in ion-card component

    <ion-list>

    //to add your image 

      <img src="assets/img/sultan.jpg" />

      <p class="p1"><b>Sultan Iskandar Muda</b><br>

      <b>Monday 12 RabiulAwal 999 H/Tuesday 27 Jan 1591</b><br>

      <b>The Kingdom of Aceh Darussalam</b><br><b>1606 - 1636 M</b>

      </p>

    </ion-list>

  </ion-card>

  </ion-content


Style your component in home.css by class name.

code to : home.html

//theming your paragraph

.p{

text-align:center; 

color:#ffa500; }


  • - Test app  it  with type  command ionic serve on CMD.


![serve.png]()


This command for to run app on browser

Tips : press F12 for  change to Console developing mode (Browser : Mozilla)

result : 

![satu.png]()


-  Now I will add button component. Like this code below :

<ion-header>

  <ion-navbar>

    <button ion-button menuToggle>

      <ion-icon name="menu"></ion-icon>

    </button>

    <ion-title>

      Biografy Sultan Iskandar Muda

    </ion-title>

  </ion-navbar>

</ion-header>

<ion-content no-padding>

  <ion-card class="card1">

    <ion-list>

      <img src="assets/img/sultan.jpg" />

      <p class="p1"><b>Sultan Iskandar Muda</b><br>

      <b>Monday 12 RabiulAwal 999 H/Tuesday 27 January 1591</b><br>

      <b>The Kingdom of Aceh Darussalam</b><br><b>1606 - 1636 M</b>

      </p>

    </ion-list>

  </ion-card>

  // add a button in ion-card 

   <ion-card no-padding class="cardmenu">

   //this button is "full"=100% width, and "round" have radius.

    <button  class="buttonmenu" ion-button round>

    Family Tree

   </button>

    </ion-card> 

</ion-content

  • Result :

![dua.png]()


  •  Now I will add a page, on your cmd type this code : ionic generate page familytree
  •   Next step i will make button "family tree" to go page familytree-page when I was clicked it. To do that I will use NavPush, this component to navigate to the specified component.

- just add [navpush] component in ion-button start.

code : home.html

//put this code between <ion-content>here</ion-content

 <ion-card no-padding class="cardmenu">

    <button  class="buttonmenu" ion-button round full [navPush]="familytreepage">

    Family Tree

   </button>

    </ion-card>


-  Add some components to familytreepage

 code : familytree.html


<ion-header>

  <ion-navbar>

    <button ion-button menuToggle>

      <ion-icon name="menu"></ion-icon>

    </button>

    <ion-title>Family Tree of Sultan Iskandar Muda

    </ion-title>

  </ion-navbar>

</ion-header>

<ion-content padding >

<h6>Family Tree of  Sultan Iskandar Muda</h6>

</ion-content>


  •  Now Import NavController, declaration it in constructor and export this class

         code  :  familytree.ts


import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

  selector: 'familytree-page',

  templateUrl: 'familytree.html'

})

export class FamilytreePage {


  constructor(public navCtrl: NavController) {

  } }


  • Video Result :

Finish, for next series I will show you how to style side menu, header of side menu and add list/or item components.

 Curriculum

You can read and follow this tutorial about Ionic Framework

Proof of Work Done

You can get this Project on my github : [app_biografy_sultan_iskandar_muda](https://github.com/anitatmj/biografy_app)

Thank you to Following my tutorial about ionic framework if you have a problem about following this tutorial please contact me or comment here.

 

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution.

  • Your English language and structure of your tutorial is very difficult to understand and grasp. Try to improve that in the future. Such sentences for example make no sense at all

i add ion-card component to good-looking

  • Your format of the tutorial, the code, the images, are all showing in terrible layout. You might want to work on learning some markdown format to use in your Steem editor.
  • Creating an app that just displays an image is not a good tutorial. Try to come up with more innovative and useful tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thank you for your review, @mcfarhat! Keep up the good work!

Congratulations @anitatmj! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You got your First payout
You received more than 10 as payout for your posts. Your next target is to reach a total payout of 50

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!