Ionic Framework

Ionic 4: วิธีการ export โปรเจค iOS และ Android เป็น Web Application

เรื่องที่เกี่ยวข้อง - ,

สำหรับพวกเราที่ได้ใช้งาน 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/

แต่ต้องการให้เข้าจาก

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

Loading Facebook Comments ...

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

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

Menu