Get Adobe Flash player

week 5 grid

  1. ไปที่ drive d ในโฟลเดอร์ชื่อเรา พิมพ์ cmd บน address bar
  2. ใช้คำสั่ง ionic start week5_grid blank เพื่อสร้างโปรเจ็คใหม่
  3. เนื่องจากมีการอัพเดท json ระบบจะให้กด y แล้ว enter
  4. พิมพ์ cd week5_grid
  5. พิมพ์ ionic serve เพื่อจำรองแอพบน browser
    (ถ้าต้องการให้เปิดบน Google Chrome
    ionic serve –browser “chrome”)
  6. เปิด visual studio code แล้วเลือก file->open folder
    แล้วเลือก week5_grid

ionic week 4

  1. เปิด cmd ในโฟลเดอร์ฺ เราแล้วพิมพ์ ionic start week4_alert blank
  2. cd week4_alert
  3. ionic serve
  4. ให้เปิดโปรเจคที่สร้างจากโปรแกรม visual studio code (เปิด visual studio code แล้วเลือก file->open folder)
  5. สร้างปุ่มเพื่อแสดงไอคอนบนปุ่ม (สามารถใช้ไอคอนได้จากเว็บ ionicons.com)
  6. ทำการปิด serve ใน cmd (กด ctrl+c ย้ำๆ)
  7. เปิด emulator ของ android ขึ้นมา
  8. กลับมาที่ cmd พิมพ์ฺ ionic cordova run android (จะเป็นการ build app บน simulate)
  9. แก้ไข icon โดยกลับไปที่โฟลเดอร์โปรเจ็คในโฟลเดอร์ resources หา icon.png ทำการเปิดด้วย photoshop แล้วปรับแต่งไอคอนให้สวยงาม แล้วเซฟทับของเดิม
  10. หลังจากนั้นให้พิมพ์ใน cmd ดังนี้ ionic cordova resources
  11. แล้วรันอีกที พิมพ์ฺ ionic cordova run android
  12. แก้ไขชื่อแอพโดยแก้ที่ไฟล์ config.xml
    เปลี่ยน name กับ widget id เป็นชื่อแอพเรา แล้ว พิมพ์ฺ ionic cordova run android อีกครั้ง

week3 app page about home

 

ionic week 3 การทำ icon splash screen และการทดสอบบน emulator

สร้าง project ใหม่

  1. เข้าไป drive d ในโฟลเดอร์ชื่อเราพิมพ์ cmd บน address bar ด้านบน
  2. cmd ที่ขึ้นมาพิมพ์ ionic start day3_icon blank  แล้ว enter
  3. พิมพ์ cd day3_icon (หรือวิธีที่สอง copy ข้อความใน cmd โดยกด ctrl+c ในหน้าจอจะเป็น cd .\day3_icon ) แล้ว enter
  4. พิมพ์ ionic serve  แล้ว enter เพื่อรองรัน app บน browser
  5. หยุด ionic serve โดยกด ctrl+ c ย้ำๆ (ctrl ค้างแล้วกด c ย้ำๆ บน keyboard)
  6. ionic cordova platform add android แล้ว enter ถ้า error ให้พิมพ์ใหม่ ถ้าทำสำเร็จจะพบ โฟลเดอร์ platform ในโปรเจค
    กรณีที่ โฟลเดอร์ไม่มีโฟลเดอร์ android ด้านใน ต้องลบก่อนโดยพิมพ์ ionic cordova platform rm android แล้วถึงจะทวนคำสั่ง ionic cordova platform add android ใหม่
  7. กลับไปที่โฟลเดอร์ day3_icon จะมีโฟลเดอร์ resources (จะมีจากคำสั่งข้อที่ 6) ด้านในจะมี icon ให้คลิ้กขวาที่รูป icon ทำการแก้ไขโดย photoshop หลังจากนั้น save ทับอันเดิม (ชื่อ icon.png)
  8. เปิด cmd พิมพ์ ionic cordova resources แล้ว enter ระบบจะสร้าง icon ให้
  9. พิมพ์ ionic cordova run android (ต้องเปิด emu anroid ขึ้นมาก่อน)

เอกสารประกอบการเรียนการสอน วิชาการออกแบบเว็บไซต์ 2

download เอกสาร

ionic audio with HTML5

ไม่ต้องใช้ NativePlugin ก็ใช้ ความสามารถของ HTML5 เล่นเพลงได้เลย

 

natvieplugin.page.ts

 

app.module.ts

 

code day 2

 

ionic powerpoint

IONIC FRAMEWORK (1)

August 2021
M T W T F S S
« Jul    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Recent Comments