วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS


Ionic Framework เป็นชุดเครื่องมือโอเพนซอร์ซสำหรับการสร้างแอปมือถือและเดสก์ท็อปคุณภาพสูงที่มีประสิทธิภาพ Ionic มาพร้อมกับการผสานรวมสำหรับเฟรมเวิร์กยอดนิยม เช่น เชิงมุม, เกิดปฏิกิริยาและ ดู และเป็นหนึ่งในเฟรมเวิร์กที่ได้รับความนิยมมากขึ้นในหมู่นักพัฒนาในปัจจุบันในด้านแอพพลิเคชั่นมือถือ

ในบทช่วยสอนต่อไปนี้ คุณจะได้เรียนรู้วิธีติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS Jammy Jellyfish และการพึ่งพาอาศัยกัน สร้างโปรเจ็กต์ และเรียนรู้วิธีเริ่มแอปพลิเคชันทดสอบ

อัปเดต Ubuntu

ก่อนอื่น ให้อัปเดตระบบของคุณเพื่อให้แน่ใจว่าแพ็คเกจที่มีอยู่ทั้งหมดเป็นข้อมูลล่าสุดเพื่อหลีกเลี่ยงข้อขัดแย้งใดๆ

sudo apt update && sudo apt full-upgrade -y

ติดตั้งการพึ่งพาที่จำเป็น

ต่อไป เพื่อให้แน่ใจว่าการติดตั้งจะดำเนินไปอย่างราบรื่นตามบทช่วยสอนของเรา ให้เรียกใช้คำสั่งต่อไปนี้ ซึ่งจะติดตั้งแพ็คเกจที่ขาดหายไปที่อาจจำเป็น

sudo apt install curl gnupg2 gnupg wget -y

ติดตั้ง Node.js

เฟรมเวิร์ก Ionic จะต้องติดตั้ง Node.js Ubuntu 22.04 LTS มาพร้อมกับ Node.js ที่พร้อมใช้งาน แต่สำหรับบทช่วยสอน คุณจะต้องติดตั้งเวอร์ชัน mainline ที่เสถียรในปัจจุบันหรือเวอร์ชัน LTS ระยะยาวล่าสุด



นำเข้า Node.js เวอร์ชันปัจจุบันหรือเวอร์ชันปัจจุบัน ฉันแนะนำที่เก็บปัจจุบัน

ตัวเลือก 1 – นำเข้า Node.js – ปัจจุบัน

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

ตัวเลือก 2 – นำเข้า Node.js – LTS

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -

ถัดไป เรียกใช้การอัปเดต APT อย่างรวดเร็วเพื่อแสดงการนำเข้าที่เพิ่มใหม่

sudo apt update

ตอนนี้คุณได้ติดตั้งที่เก็บแล้ว ติดตั้ง Node.js ดังนี้

sudo apt install nodejs

ยืนยันเวอร์ชันและบิลด์ของ Node.js ที่ติดตั้ง

node --version

สุดท้าย ตรวจสอบให้แน่ใจว่า NPM ของคุณเป็นปัจจุบันโดยใช้คำสั่งต่อไปนี้ นี่เป็นสิ่งสำคัญ อย่าข้าม

sudo npm install npm@latest -g

ติดตั้ง Cordova ด้วย NPM

ก่อนดำเนินการต่อ คุณต้องติดตั้ง Cordova โดยใช้ปุ่ม คำสั่ง NPM. สิ่งนี้จะติดตั้งการพึ่งพาทั้งหมดที่จำเป็นด้วย



sudo npm install -g cordova

ติดตั้ง Ionic Framework

ในการติดตั้ง Ionic framework ให้รันคำสั่งต่อไปนี้

sudo npm i -g @ionic/cli

บันทึก, @ionic/cli เป็นชื่อใหม่ของแพ็คเกจหากคุณได้ติดตั้งไว้ก่อนหน้านี้

สุดท้าย ให้ตรวจสอบเวอร์ชันดังต่อไปนี้

ionic -v

สร้างการทดสอบโครงการ

วิธีทดสอบ Ionic ที่ดีที่สุดคือสร้างโปรเจ็กต์สั้นๆ สั้นๆ ซึ่งคุณจะพบได้ในขั้นตอนต่อไปนี้

ขั้นแรก เริ่มเฟรมเวิร์กไอออนิก

ionic start

หมายเหตุ คุณจะได้รับแจ้งพร้อมวิซาร์ดการสร้าง ประเภท N, และป้อน สำคัญ เพื่อดำเนินการต่อ.



ถัดไป คุณจะได้รับแจ้งให้เลือก a กรอบ.

ตัวอย่าง:

วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

เลือกเฟรมเวิร์กที่คุณต้องการใช้งาน ซึ่งจะติดตั้งซอฟต์แวร์และการอ้างอิงที่จำเป็นทั้งหมด

คุณจะได้รับแจ้งให้ ชื่อ โครงการของคุณดังต่อไปนี้

ตัวอย่าง:

วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

ป้อนชื่อโครงการของคุณและ กดปุ่มตกลง เพื่อดำเนินการต่อ.



ในส่วนสุดท้ายคุณจะได้รับแจ้งให้เลือกว่าคุณชอบ a . หรือไม่ แม่แบบเริ่มต้น.

ตัวอย่าง:

วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

เลือกเทมเพลตเริ่มต้นสำหรับโครงการของคุณ ใช้ ปุ่มลูกศร เพื่อนำทาง และกด ใส่รหัส เพื่อเสร็จสิ้น

หมายเหตุ คุณจะได้รับแจ้งหากคุณต้องการสร้าง an บัญชีฟอรั่มอิออนพิมพ์ Y or Nแล้วคุณจะพบกับผลลัพธ์ที่เสร็จสิ้นของแอพของคุณพร้อม

ตัวอย่าง:

วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

เริ่มการทดสอบการสมัครของคุณ

เมื่อแอปของคุณพร้อมแล้ว CD ลงในไดเร็กทอรีและเริ่มแอปพลิเคชัน



cd ./HelloWorld-LinuxCapable.com && ionic serve --host 0.0.0.0 --port 8100

หมายเหตุ แทนที่ ./สวัสดีชาวโลก-LinuxCapableด้วย. กับ ชื่อใบสมัครของคุณ.

เมื่อแอพทำการคอมไพล์เสร็จแล้ว คุณจะได้ผลลัพธ์ดังต่อไปนี้

ตัวอย่าง:

วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

ตอนนี้ควรเปิดเว็บเบราว์เซอร์ของคุณและเข้าถึงแอปพลิเคชันของคุณโดยอัตโนมัติ หากไม่เกิดขึ้น ให้ใช้ URL ต่อไปนี้

http://server-ip:8100

แทนที่ IP ของเซิร์ฟเวอร์ด้วย localhost หากคุณมีปัญหาในการเชื่อมต่อ

ตัวอย่าง:



วิธีการติดตั้ง Ionic Framework บน Ubuntu 22.04 LTS

นั่นคือ คุณได้ติดตั้งและสร้างโครงการทดสอบสำเร็จแล้ว

ความคิดเห็นและข้อสรุป

ในบทช่วยสอน คุณได้เรียนรู้วิธีติดตั้ง Ionic framework, การพึ่งพา Node.js, สร้างโปรเจ็กต์ และเริ่มต้น Ionic Framework เป็นเฟรมเวิร์กการพัฒนามือถือข้ามแพลตฟอร์มที่ได้รับความนิยมมากที่สุดในปัจจุบัน และควรดูว่าคุณจริงจังกับการสร้างแอปพลิเคชันบนมือถือหรือไม่

สามารถดูข้อมูลเพิ่มเติมได้โดยไปที่ เอกสารอย่างเป็นทางการ



ไม่ใช่สิ่งที่คุณกำลังมองหา? ลองค้นหาบทช่วยสอนเพิ่มเติม

แสดงความคิดเห็น