1. เปิด cmd ขึ้นมา
    เราต้องอัพเดท ionic ก่อนถ้ามันเป็น version เก่า (จะทำเฉพาะที่เราต้องการ)
  2. npm i -g @ionic/cli
  3. ionic -v
  4. เริ่มสร้างแอพ ด้วยคำสั่ง ionic start bmi blank
  5. กด enter เรื่อยๆ จนเสร็จ
  6. cd bmi
  7. ionic serve
  8. เปิด VS Code แล้วเปิด file open folder -> BMI
  9. เข้าไปที่ src->app->home แก้ไขไฟล์ home.page.html
  10. home.page.html
    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          BMI
        </ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content [fullscreen]="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">BMI</ion-title>
        </ion-toolbar>
      </ion-header>
    
     
      <!--------CODE BMI----------> 
      <form novalidate>
        <ion-item>
          <ion-label>
            ส่วนสูง
          </ion-label>
          <ion-input name="txtH" [(ngModel)]="txtH">
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-label>
            น้ำหนัก
          </ion-label>
          <ion-input name="txtW" [(ngModel)]="txtW">
          </ion-input>
        </ion-item>
        <ion-button expand="block" (click)="CalBMI()" >คำนวน</ion-button>
      </form>
      <!------------------> 
    
    </ion-content>
    
  11. home.page.ts
    import { Component } from '@angular/core';
    import { AlertController, IonicSafeString } from '@ionic/angular';
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
      txtH:any;
      txtW:any;
      constructor(public alertController:AlertController) {}
      async CalBMI(){
        //alert("ส่วนสูง:"+this.txtH+" น้ำหนัก:"+this.txtW);
        /*
    comment multiline
        */
       //แปลงค่าส่วนสูงจาก CM เป็น M
       //this.txtH=this.txtH/100;
       let h=this.txtH/100;
       let x=this.txtW/(h*h);//bmi น้ำหนัก/ส่วนสูงยกกำลังสอง
       //alert("bmi="+x);
       let y;//แปลผล
       if(x>=30){
        y='อ้วนมาก';
       }
       else if(x>=25){
        y='อ้วน';
       }
       else if(x>=23){
        y='น้ำหนักเกิน';
       }
       else if(x>=18.6){
        y='น้ำหนักปกติ เหมาะสม';
       }
       else{
        y="ผอม";
       }
    
    
       const alert=await this.alertController.create({
         header:'ผลลัพธ์',
         subHeader:'',
         message:y,
         buttons:['ปิด']
       });
       await alert.present();
      }
    }
    

    12. กลับมาที่CMD กด ctrl+c ย้ำๆ เพื่อ stop ionic serve
    13. npm install @capacitor/android

    14. npx cap add android  (แทนคำสั่งเดิม ionic platform add android)

    15. ionic build

    16. npx cap sync

    17.npx cap open android

    18. กดเครื่องหมาย play เพื่อรัน emulator

    19. สมมุติว่าแก้ไขไฟล์ home.page.html ให้กด stop แล้วกลับไปแก้ไข

    20. พอแก้เสร็จกลับมาที่ cmd ให้พิมพ์ ionic build

    21. พิมพ์ npx cap sync แล้ว ลอง play อีกครั้ง

    กรณี android studio แสดง Error สีแดงเต็มไปหมดให้ลองแก้ตามนี้ดู ใน android studio

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.