App Onboarding with Ionic3

Posted by Anoop Nair on October 31, 2017 Tags: Angular Ionic

Welcome to the second tutorial on ionic3 we will be learning to create an app onboarding screen. To answer the question what is app onboarding screen? It's used to introduce the functionality of the app at the beginning of the app and it looks like the image below. With ionic3 we can create it with relative ease.

output

Before we move forward and start creating it, I recommend you to read the previous blog "Starting With Ionic3"to know about ionic and the prerequisites.

So let's start by creating the ionic app. Type the following in the command line. "Focuser" is the name of the app and blank is the template that we will be using.

        
            $ ionic start focuser blank
        
    

We will be working on the "home page". It will be located in focuser/src/pages/home. So in the home.html file we will start with typing in the skeleton that we need for the slides. Here we will be creating 3 slides.

        
            <ion-content>
                <ion-slides pager>

                    <ion-slide>
                    slide 1
                    </ion-slide>

                    <ion-slide>
                    slide 2
                    </ion-slide>

                    <ion-slide>
                    slide 3
                    </ion-slide>

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

        
    

At present there is just 3 slides with text of slide 1, slide 2 and slide 3 respectively.SO lets add some html and css to make it more intresting. So change the home.html file with the following code.

        
            <ion-content class="home-page" padding>
                <ion-slides pager>
                <ion-slide>
                    <div class="logo">
                        <ion-icon name="aperture"></ion-icon>
                    </div>
                    <div class="heading">
                        Welcome To Focuser Blank
                    </div>
                    <div class="text">
                        This App Let's You Increase Your Focus And Concentration
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="logo">
                        <ion-icon name="aperture"></ion-icon>
                    </div>
                    <div class="text">
                        For Best Experience Put Your Phone On Flight Mode And Turn Off The Wifi.
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="logo">
                        <ion-icon name="aperture"></ion-icon>
                    </div>
                    <div class="text">
                        You Can Swipe Left And Select Which Theme You Like Best.
                         At Present We Have Light And Dark Theme.
                    </div>
                    <div class="button">
                        <button ion-button color="dark" (click)= "start()"> Let's Focus</button>
                    </div>
            
                </ion-slide>
            </ion-slides>
          </ion-content>
          
        
    

Now we can add some css to home.scss but if have have some global styles you can add it to app.scss

        
            @import url('https://fonts.googleapis.com/css?family=Rajdhani');
            
            page-home {
              .home-page{
                background-color: #fff !important;
                color: #373737;
                text-align: center;
                font-family: 'Rajdhani', sans-serif;
              }
              .logo{
                position: absolute;
                top: 50px;
                width: 100%;
              }
              ion-icon{
                font-size: 7em;
              }
            
              .heading{
                margin-top:20px;
                font-size: 2.6em;
              }
            
              .text{
                margin-top: 20px;
                font-size: 1.2em;
                text-align: center justify;
              }
              .button{
                margin-top: 20px;
              }
              .swiper-pagination-bullet-active{
                background:#373737 !important;
              }
            
            }
            
        
    

Now we are done with the app onboarding slides but you might have noticed a button on the third slide we have given it a function of start but not written the function for it but befor that we have to create a new page so that we can push that page on the button click.

To create a new page we will use ionic cli. So type the following in the command line.

        
            $ cd focuser
        
    
        
            $ ionic generate page main
        
    
This will generate a new page in the pages folder with the name main. Now we will have to import the the main page in the app.module.ts file in focuser/src/app/app.module.ts

        
            // other imports not shown in the code so please dont just copy paste.

            import { HomePage } from '../pages/home/home';
            import { MainPage } from '../pages/main/main';  //importing main page
    
            @NgModule({
              declarations: [
                MyApp,
                HomePage,
                MainPage //declaring the main page
              ],
              
              entryComponents: [
                MyApp,
                HomePage,
                MainPage // adding main page here too
              ]
            
        
    

We can now add the function to push the main page on the button click. If you are confused by what I mean by pushing the page then, in ionic we dont redirect instead we push and pop pages. We will write the start() function for it in home.ts file.

        
            import { MainPage } from '../main/main';  //importing main page at the top
            import { Component } from '@angular/core';
            import { NavController } from 'ionic-angular';
            
            @Component({
              selector: 'page-home',
              templateUrl: 'home.html'
            })
            export class HomePage {
            
              constructor(public navCtrl: NavController) {
            
              }
            // this is the start function. In ionic we dont redirect instead we push and pop pages.
              start(){
                this.navCtrl.push(DarkPage);
              }
            }
            
        
    



COMMENTS