สำหรับพวกเราที่ได้ใช้งาน Ionic Framework ไปแล้ว จะรู้แล้วว่าตัว Ionic ออกแบบมาให้พัฒนา Mobile Application สำหรับระบบ iOS และ Android
แต่เนื่องจาก Ionic นั้นเป็น Web Application Framework ในตัว ทำให้เราสามารถนำโปรเจคมาใช้เป็นเว็บแอพพลิเคชั่นได้ด้วย มาดูวิธีการใช้งานกันครับ
1. สร้างโปรเจค หรือเปิดโปรเจคที่มีอยู่แล้ว
รันคำสั่ง ionic build
โดยปกติเราจะรันคำสั่ง ionic buildเพื่อเอา Web Application ลง Cordova ใช่ไหมครับ?
ionic cordova build ios
ionic cordova build androidแต่คราวนี้อยากให้ลองรันคำสั่ง build แบบที่ไม่ผ่าน cordova
ionic build จะเห็นว่าในโปรเจคของเรามี directory ชื่อ www โผล่ขึ้นมา นี่คือไฟล์ Web Application ของเรานี่เอง
ข้อควรรู้เวลา export โปรเจค Ionic ไปเป็น Web Application
เวลาจะเอา Ionic ไปเป็น Web Application จริงๆ ให้ใช้คำสั่ง build โดยใส่ option --prod ตามหลังแบบนี้
ionic build --prodและเราสามารถเอาไฟล์ที่อยู่ใน directory ชื่อ www อัพโหลดไปที่ Web root ของ Hosting เราได้เลย
หากต้องการเอา Ionic Web App ไปไว้ใน path ย่อย
ในกรณีที่เราไม่ได้เอา Web Application ที่สร้างจาก Ionic Framework ไปไว้ที่ Web root โดยตรง
เช่น แทนที่จะเข้าตัวเว็บแอพเราจาก
แต่ต้องการให้เข้าจาก
https://www.nextflow.in.th/example/ionic-web/
นอกจากเราต้องไปจัดโครงสร้างไฟล์บน Web Server ของเราแล้ว ตอนสั่ง build เราต้องเพิ่ม option ชื่อ --base-href ด้วยนะ
ตัวอย่างคำสั่ง build ที่อ้างอิงจาก URL ด้านบน
ionic build --prod -- --base-href /example/ionic/ให้สังเกตว่า ค่าที่กำหนดให้ option ก็คือ path ของ URL ที่ต้องการนั่นเองครับ
เริ่มต้นเรียนรู้ Angular และ Ionic Framework สร้าง iOS และ Android Application แบบรู้จริง ต่อยอดทำโปรเจคได้
เหมาะกับคนที่มีพื้นฐานทำเว็บอยู่แล้ว เข้าใจง่าย และใช้ได้จริง สนใจมาอบรมรอบปกติคลิกดูรายละเอียดและวันเวลาอบรมที่นี่
หรือสนใจจัดอบรมเนื้อหาสำหรับทีมในองค์กร in-house/on-site โทรติดต่อ 083-071-3373 ได้เลยครับ
อ้างอิง – Ionic PWA, StackOverflow