1. ไปที่โฟลเดอร์เราในไดรฟ์ D
2. พิมพ์ cmd บน address bar
3. ionic start week6_bmi blank
4. cd week6_bmi
5. ionic serve
6. เปิด visual studio code ขึ้นมาเลือก file->open folder->week6_bmi แล้ว open
7.home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      คำนวณ BMI
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-item>
      <ion-label position="stacked">
        ส่วนสูง (cm.) <ion-text color="danger">*</ion-text>
      </ion-label>
      <ion-input [(ngModel)]="txtH" type="number"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label position="stacked">
          น้ำหนัก (kg.) <ion-text color="danger">*</ion-text>
        </ion-label>
        <ion-input [(ngModel)]="txtW" type="number"></ion-input>
      </ion-item>
    <ion-button (click)="CalBMI(txtH,txtW)" expand="block">คำนวณ</ion-button>
    </div>
</ion-content>

8.home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public alertController:AlertController) {}
  async CalBMI(txtH,txtW){
    //การสร้างตัวแปร จะใช้คำสั่ง let x
    //การใช้บวก (+) ลบ (-) คูณ (*) หาร (/)
    // BMI=น้ำหนัก [kg.]/ (ส่วนสูง [m] ยกกำลังสอง)
    txtH=txtH/100;
    let x=txtW/(txtH*txtH);//เก็บค่า BMI
    let y;//เก็บค่าแปรผล
    if(x>=30){
      y="อ้วนมาก";
    }
    else if(x>=25){
      y="อ้วน"
    }
    else if(x>=23){
      y="น้ำหนักเกิน"
    }
    else if(x>=18.6){
      y="น้ำหนักปกติ เหมาะสม"
    }
    else
    {
      y="ผอม";
    }
    //alert('คำนวณ BMI แล้วนะ');
    const alert=await this.alertController.create({
      header:'ผลการคำนวณ',
      subHeader:'bmi='+x.toFixed(2),
      message:y,
      buttons:['ปิด']
    });
    await alert.present();
  }

}

9.หลังจากนั้นให้ไปที่ cmd ทำการปิด serve โดยกด ctrl+c ย้ำๆ

10. เปิด android studio -> config-> เปิด emulator android device มา

11. กลับมาที่ cmd พิมพ์ ionic cordova run android –emulator

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.