Where to start building a hybrid app using Ionic Framework | From Dilsecodie

 

let's begin with Hybrid native application development 

Using Ionic Framework with angular language.

Hybrid apps work for both cross-platform apps 

It's a free and open-source platform.

With ionic, we can use another language also like to react,vue js

ionic mainly provide us UI component. 

ionic is part of node_modules which provides different inbuilt modules

@angular module in it, node module decides ionic. config which module need to download 

 if its type is angular then its download angular modules init, or if we use react

then its download react modules with it.

So some feature we need to require to support in android or ios then we need to you 

install plugins mainly we need for android Cordova-plugin-androidx 

Cordova-plugin-androidx-adapter Cordova-plugin-app-version Cordova-plugin-splash screen

cordova-plugin-ionic-webview  cordova-plugin-geolocation these plugin provide you

all basic features of android.

for ios, there are different plugins we can install and use them ios.json.

Now let's see the structure of ionic logics 

if we need to create an HTML page then that page contains 

all pages in the same folder like  create a dashboard page

then its folder should have all pages related to it.

dashboard-routing.module.ts - in this file you should import Ngmodule from @angular/core

also include its html page - import{DashbopardPage} from './dashboard.page';

const rotes variable for routes map Routes =[{path:'';component :Dashboardpage}]; 

dashboard.modules.ts -same import your angular code package in it 

so this page provide you Ngmodule where Dashboradpage routes

import { DashboradPage } from './dashborad.page';

@NgModule({

  imports: [

    CommonModule,

    FormsModule,

    IonicModule,

    DashboradPageRoutingModule

  ],

  declarations: [DashboradPage]

})

export class DashboradPageModule {} - export the class with it 

Then your Come with UI component file 

dashboard.page.html - file 

On this page, you need to draw your ionic components which related to like HTML tag 

<ion-header> --- ion header mainly used to make a header on your page 

  <ion-toolbar --- toolbar its provide sidebar as mobile view to show menus 

<ion-content class="bg-color"> --- ist just like body of a page you need to draw 

you can write your custom CSS for this bg-colour class 

<ion-card style="border-radius: 20px;"> 

<ion-grid>

          <ion-row>

        <ion-col class="ion-align-self-start">

These tags are just like div in HTML - ion grid provides you with a blog type of page 

where you can create your own style of <p> and any other activity to show your data.

Then for the CSS page, you can create dashboard.page.scss  - this page basically have all CSS class with it like   .contentcss{--offset-top: 0px; --offset-bottom: 0px;

moving further you need to create dashboard.page.spec.ts file to declare you component  so you show  to them on UI page 

describe('DashboradPage', () => {

  let component: DashboradPage;

  let fixture: ComponentFixture<DashboradPage>;

beforeEach(waitForAsync(() => {

    TestBed.configureTestingModule({

      declarations: [ DashboradPage ],

      imports: [IonicModule.forRoot()]

    }).compileComponents();

    fixture = TestBed.createComponent(DashboradPage);

    component = fixture.componentInstance;

    fixture.detectChanges();

  }));

  it('should create', () => {

    expect(component).toBeTruthy();

  });

these examples provide you overview of this page how it should begin with a component declaration.

Let us see the most important part of any page in this framework to create a logic file.

for example, suppose - if we create a dashboard.page.ts - file for logic implementation for the component declared in our  UI page so that component can perform dynamically with reponse. 

export class DashboradPage implements OnInit {

  connectSubscription: any;

  disconnectSubscription: any;

  networkAlert: any;

  constructor(public router: Router , 

    private geolocation: Geolocation,

    private appVersion: AppVersion,

   checkInternetConnection(){

 

    // watch network for a disconnection

     this.disconnectSubscription = this.network.onDisconnect().subscribe(() => {

    console.log('network was disconnected :-(');

    alert("You are Offline");

    });

It's showing you Internet Connection working or not logic you write any logic on this page which you want to perform with UI component or you may also send a request to any API, and get a response from it to make dynamic logic.