ionic day 2 (sec1)

1. 1. 1. ไปที่ drive d:\ เข้าไปโฟลเดอร์ของเรา แล้วพิมพ์ cmd ทับตรง address bar ด้านบนแล้วกด enter
      จะมี cmd ขึ้นมา
    2. พิมพ์คำสั่ง ionic start day2_app1 blank แล้วกด enter ไปเรื่อยๆ จนเสร็จ
      ionic start day2_app1 blank
    3. เมื่อ app Load เสร็จแล้วให้พิมพ์
      cd .\day2_app1
    4. และแสดงผลด้วยคำสั่ง
      ionic serve --browser "chrome"
    5. เมื่อแสดงผลบน chrome แล้วให้ไปที่ปุ่ม start แล้วพิพม์ visual studio code เปิดโปรแกรมขึ้นมา (หรือจะใช้ dreamwaver ก็ได้) แล้วเลือกเมนู file->open folder แล้วเปิด day2_app1 ขึ้นมา
    6. ไปที่ src->app->home เปิดไฟล์ home.page.html เพื่อแก้ไข
    7. ก่อนแก้ไขไฟล์ home.page.html ให้ไปที่ ui companent ในส่วนของ ion-card link https://ionicframework.com/docs/api/card จากนั้นให้ copy ตรง usage คือวิธีใช้มา โดยตัวอย่างจะ copy ตัวที่สอง
    8. กลับไปที่ home.page.html วางใน <div id=”contianer”>…..</div>
    9. แก้ไข title bar เพื่อแก้ไขชื่อด้านบน
    10. หลังจากนั้นแก้ไข ion-label และเพิ่มปุ่มกด ก่อนเพิ่มให้ไปที่ ui-companent ในส่วนของปุ่มกด https://ionicframework.com/docs/api/button
      ทำการ copy code ในส่วนของ usage มา
    11. กลับมาที่ visual studio code ในไฟล์ home.page.html วางโค้ดลงไป (ด้านล่างคือโค้ดทั้งหมดหน้า home.page.html)
      <ion-header [translucent]="true"> <ion-toolbar> <ion-title> Sompoch </ion-title> </ion-toolbar> </ion-header> <ion-content [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Sompoch.</ion-title> </ion-toolbar> </ion-header> <div id="container"> <ion-card> <ion-item> <ion-icon name="pin" slot="start"></ion-icon> <ion-label>ยินดีต้อนรับสู่ app ของฉัน</ion-label> <ion-button fill="outline" slot="end">View</ion-button> </ion-item> <ion-card-content> <ion-button color="warning" expand="block">go to about</ion-button> </ion-card-content> </ion-card> </div> </ion-content>
    12. ทำการปิด serve โดยการกลับมาที่ cmd ให้กด ctrl+c ย้ำๆ บนคีย์บอร์ด หลังจากนั้นจะกลับมาพิมพ์ได้ให้พิมพ์เพื่อสร้าง page about ดังนี้
      ionic generate page about
    13. กลับมาที่ visual studio code ไปที่ไฟล์ home.page.html ไปแก้ตรงปุ่ม go to about เพิ่ม href=”/about” ลงไป ดังภาพ
      หลังจาก save
    14. กลับไปที่ cmd ทำการเปิด serve โดยพิมพ์
      ionic serve --browser "chrome"
    15. กลับไปที่ visual studio code ไปที่่ไฟล์ src->app->about->about.page.html ทำการแก้ไขไฟล์โดยเพิ่มปุ่มแสดง button ลงไปดังภาพ
    16. ทำการเลือก icon จากตัวอย่างค้นหา icon home มาแล้วเอาชื่อมา
    17. แก้ไขไฟล์ about.page.html ดังนี้
      <ion-header> <ion-toolbar> <ion-title>about</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button href="/home"> <ion-icon slot="icon-only" href="/home" name="home-outline"></ion-icon> </ion-button> </ion-content>
    18. เราสามารถเปลี่ยนสี color ใน app ได้โดยไปที่ src->theme->variables.scss สามารถแก้ไขสีตามต้องการเช่น primary จากสีนำเงินเราจะเปลี่ยนเป็นสีอื่นได้โดยเปลี่ยนจาก สีตรงนี้
      
      หลังจากนั้นเวลาเรียกใช้ กลับมาที่หน้า about ปุ่มที่สร้างเพิ่ม color=”primary” ลงไป
      <ion-header> <ion-toolbar> <ion-title>about</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button href="/home"> <ion-icon slot="icon-only" name="home-outline"></ion-icon> </ion-button> <ion-button color="secondary" href="/home"> <ion-icon slot="icon-only" name="home-outline"></ion-icon> </ion-button> </ion-content>
      ขั้นตอนต่อไปจะเพิ่ม ion-list เพื่อให้สมบูรณ์ในหน้า about.page.html (ทำการ copy code ทั้งหมดได้เลย)
      <ion-header> <ion-toolbar> <ion-title>about</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button href="/home"> <ion-icon slot="icon-only" name="home-outline"> </ion-icon> </ion-button> <ion-button color="secondary" href="/home"> <ion-icon slot="icon-only" name="home-outline"> </ion-icon> </ion-button> <br> <ion-list> <ion-list-header> เกี่ยวกับเรา </ion-list-header> <ion-item> <ion-avatar slot="start"> <img src="./avatar-finn.png" /> </ion-avatar> <ion-label> <h2>Finn</h2> <h3>I'm a big deal</h3> <p>Listen, I've had a pretty messed up day...</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <img src="./avatar-han.png" /> </ion-avatar> <ion-label> <h2>Han</h2> <h3>Look, kid...</h3> <p>I've got enough on my plate as it is, and I...</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <img src="./avatar-rey.png" /> </ion-avatar> <ion-label> <h2>Rey</h2> <h3>I can handle myself</h3> <p>You will remove these restraints and leave...</p> </ion-label> </ion-item> <ion-item> <ion-avatar slot="start"> <img src="./avatar-luke.png" /> </ion-avatar> <ion-label> <h2>Luke</h2> <h3>Your thoughts betray you</h3> <p>I feel the good in you, the conflict...</p> </ion-label> </ion-item> </ion-list> </ion-content>