การสร้างแอพเดสก์ท็อปจิ๋วด้วย Tauri และ Vue.js

เผยแพร่แล้ว: 2022-03-10
สรุปอย่างย่อ ↬ Tauri เป็นชุดเครื่องมือสำหรับสร้างแอปเดสก์ท็อปขนาดเล็ก รวดเร็ว และปลอดภัยจาก HTML, CSS และ JavaScript ที่คุณมีอยู่ ในบทความนี้ Kelvin อธิบายวิธีที่ Tauri เล่นได้ดีกับ Vue.js เฟรมเวิร์กโปรเกรสซีฟโดยการผสานรวมเทคโนโลยีทั้งสองไว้ในการรวมเว็บแอปตัวอย่างที่เรียกว่า nota เป็นแอปพลิเคชันแบบเนทีฟ

เทคโนโลยีทำให้ชีวิตของเราดีขึ้น ไม่ใช่แค่ผู้ใช้ แต่ยังรวมถึงผู้สร้าง (นักพัฒนาและนักออกแบบ) ในบทความนี้ ผมจะแนะนำคุณให้รู้จักกับทอรี บทความนี้จะเป็นประโยชน์กับคุณหาก:

  • คุณได้สร้างแอปพลิเคชันบนเว็บด้วย HTML, CSS และ JavaScript และคุณต้องการใช้เทคโนโลยีเดียวกันเพื่อสร้างแอปที่กำหนดเป้าหมายไปที่แพลตฟอร์ม Windows, macOS หรือ Linux
  • คุณกำลังสร้างแอปเดสก์ท็อปข้ามแพลตฟอร์มพร้อมเทคโนโลยีอย่างเช่น อิเลคตรอน และคุณต้องการดูทางเลือกอื่น
  • คุณต้องการสร้างแอพด้วยเทคโนโลยีเว็บสำหรับลีนุกซ์ดิสทริบิวชั่น เช่น PureOS;
  • คุณเป็นคนที่คลั่งไคล้ Rust และต้องการนำไปใช้เพื่อสร้างแอปพลิเคชันข้ามแพลตฟอร์มแบบเนทีฟ

เราจะมาดูวิธีสร้างแอปพลิเคชันข้ามแพลตฟอร์มแบบเนทีฟจากโครงการเว็บที่มีอยู่ ไปกันเถอะ!

หมายเหตุ : บทความนี้ถือว่าคุณคุ้นเคยกับ HTML, CSS, JavaScript และ Vue.js

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

ทอรีคืออะไร?

เว็บไซต์อย่างเป็นทางการสรุป Tauri ได้ดี:

  • Tauri เป็น toolchain หลายภาษาสำหรับการสร้างแอพเนทีฟที่ปลอดภัยยิ่งขึ้นด้วยไบนารีขนาดเล็กและรวดเร็ว โดย "คนหลายภาษา" ฉันหมายความว่า Tauri ใช้ภาษาการเขียนโปรแกรมหลายภาษา ขณะนี้มีการใช้ Rust, JavaScript และ TypeScript แต่มีแผนที่จะให้คุณใช้ Go, C++, Python และอื่นๆ
  • ช่วยให้คุณใช้เฟรมเวิร์กส่วนหน้าที่ใช้ HTML และ JavaScript เช่น Vue.js, React หรือ Angular เพื่อสร้างแอปเดสก์ท็อปดั้งเดิม และสามารถรวมเข้ากับไปป์ไลน์ใดก็ได้
  • ช่วยให้คุณสร้างและรวมกลุ่มไบนารีสำหรับแพลตฟอร์มเดสก์ท็อปหลัก (มือถือและ WebAssembly เร็วๆ นี้)

โดยพื้นฐานแล้ว Tauri ช่วยให้คุณใช้เทคโนโลยีเว็บเพื่อสร้างแอปเดสก์ท็อปขนาดเล็กและปลอดภัย

ในหน้า GitHub นั้น Tauri ได้รับการอธิบายว่าเป็น toolchain ที่ไม่เชื่อเรื่องพระเจ้าในกรอบงานสำหรับการสร้างแอพเนทีฟที่มีความปลอดภัยสูงซึ่งมีไบนารีขนาดเล็ก (เช่น ขนาดไฟล์) และรวดเร็วมาก (เช่น การใช้ RAM น้อยที่สุด)

ทำไมไม่อิเล็กตรอน?

เครื่องมือยอดนิยมสำหรับการใช้เทคโนโลยีเว็บเพื่อสร้างแอปพลิเคชันเดสก์ท็อปคืออิเล็กตรอน

อย่างไรก็ตาม แอป Electron มีขนาดมัดค่อนข้างใหญ่ และมักใช้หน่วยความจำมากเมื่อทำงาน นี่คือวิธีที่ Tauri เปรียบเทียบกับอิเล็กตรอน:

  • Bundle
    ขนาดของแอป Tauri อาจน้อยกว่า 600 KB
  • หน่วยความจำ
    รอยเท้าของแอป Tauri มีขนาดเล็กกว่าแอป Electron ครึ่งหนึ่ง
  • ใบอนุญาต
    การออกใบอนุญาตสามารถทำได้ด้วย Tauri แต่ไม่ใช่กับ Electron อิเลคตรอนมาพร้อมกับ Chromium ทันทีที่แกะออกจากกล่อง อย่างไรก็ตาม Chromium มีระบบการจัดการสิทธิ์ดิจิทัลชื่อ Widevine การรวม Widevine ใน Chromium ทำให้แอปที่สร้างด้วย Electron รู้สึกขุ่นเคืองใจโดยผู้ใช้แพลตฟอร์มเช่น PureOS ด้วยเหตุผลเพียงอย่างเดียวว่าไม่ใช่ซอฟต์แวร์โอเพ่นซอร์สฟรี/ฟรี (FLOSS) แพลตฟอร์มเช่น PureOS ได้รับการตรวจสอบโดย Free Software Foundation (FSF) ซึ่งหมายความว่าพวกเขาสามารถเผยแพร่ซอฟต์แวร์โอเพนซอร์ซฟรีในแอพสโตร์เท่านั้น

โดยสรุป หากแอปของคุณสร้างด้วย Electron จะไม่มีการจัดส่งแอปใน PureOS Store อย่างเป็นทางการ สิ่งนี้ควรเป็นปัญหาสำหรับนักพัฒนาที่กำหนดเป้าหมายการแจกจ่ายดังกล่าว

คุณสมบัติเพิ่มเติมของ Tauri

  • ความปลอดภัยเป็นสิ่งสำคัญมากสำหรับทีมทอรี แอปที่สร้างด้วย Tauri มีไว้เพื่อความปลอดภัยตั้งแต่เริ่มต้น
  • Tauri เข้ากันได้กับเฟรมเวิร์กส่วนหน้าใดๆ ดังนั้นคุณจึงไม่ต้องเปลี่ยนสแต็กของคุณ
  • มีรูปแบบการออกแบบมากมายที่จะช่วยให้คุณเลือกคุณสมบัติที่สำคัญด้วยการกำหนดค่าที่เรียบง่าย

ข้อดีของ Tauri

  • Tauri ช่วยให้คุณสามารถใช้ฐานโค้ดที่คุณสร้างขึ้นสำหรับเว็บและเปลี่ยนให้เป็นแอปเดสก์ท็อปแบบเนทีฟโดยไม่ต้องเปลี่ยนแปลงอะไร
  • แม้ว่าคุณจะสามารถใช้ Rust ในโครงการที่ใช้ Tauri ได้ แต่ก็เป็นทางเลือกที่สมบูรณ์ หากคุณเปลี่ยน คุณไม่จำเป็นต้องเปลี่ยนแปลงอะไรในฐานรหัสเดิมที่กำหนดเป้าหมายสำหรับเว็บ

ทอรีในโลกแห่งความเป็นจริง

หากคุณเคยเป็นส่วนหนึ่งของชุมชน Vue.js มาสักระยะ คุณจะเคยได้ยินชื่อ Guillaume Chau สมาชิกทีมหลักของ Vue.js เขารับผิดชอบส่วนต่อประสานบรรทัดคำสั่ง Vue.js (CLI) รวมถึงไลบรารี Vue.js ที่ยอดเยี่ยมอื่นๆ เขาเพิ่งสร้าง guijs ซึ่งย่อมาจาก "อินเทอร์เฟซผู้ใช้แบบกราฟิกสำหรับโครงการ JavaScript" เป็นแอปเดสก์ท็อปเนทีฟที่ขับเคลื่อนโดย Tauri เพื่อจัดการโปรเจ็กต์ JavaScript ของคุณแบบเห็นภาพ

Guijs เป็นตัวอย่างของสิ่งที่เป็นไปได้กับ Tauri และความจริงที่ว่าสมาชิกหลักของทีม Vue.js ทำงานบนแอปนี้บอกเราว่า Tauri เล่นได้ดีกับ Vue.js (ในกลุ่มเฟรมเวิร์กส่วนหน้าอื่นๆ) ตรวจสอบที่เก็บ guijs บน GitHub หากคุณสนใจ และใช่มันเป็นโอเพ่นซอร์ส

ทอรีทำงานอย่างไร

ในระดับสูง Tauri ใช้ Node.js เพื่อสร้างหน้าต่างการแสดงผล HTML, CSS และ JavaScript เป็นอินเทอร์เฟซผู้ใช้ (UI) ที่ได้รับการจัดการและบูตโดย Rust ผลิตภัณฑ์นี้เป็นไบนารีแบบเสาหินที่สามารถแจกจ่ายเป็นประเภทไฟล์ทั่วไปสำหรับ Linux (deb/appimage), macOS (app/dmg) และ Windows (exe/msi)

วิธีสร้างแอป Tauri

แอป Tauri ถูกสร้างขึ้นโดยใช้ขั้นตอนต่อไปนี้:

  1. ขั้นแรก สร้างอินเทอร์เฟซในเฟรมเวิร์ก GUI และเตรียม HTML, CSS และ JavaScript สำหรับการใช้งาน
  2. Tauri Node.js CLI ดำเนินการและติดตั้ง Rust runner ตามการกำหนดค่าของคุณ
  3. ในโหมดการพัฒนา จะสร้างหน้าต่าง WebView พร้อมการ ดีบัก และการ โหลดโมดูล ใหม่
  4. ในโหมดบิลด์ มันจะทำการริกตัวบันเดิลและสร้างแอพพลิเคชั่นขั้นสุดท้ายตามการตั้งค่าของคุณ

การตั้งค่าสภาพแวดล้อมของคุณ

ตอนนี้คุณรู้แล้วว่า Tauri คืออะไรและทำงานอย่างไร ให้ฉันแนะนำคุณตลอดการตั้งค่าเครื่องจักรสำหรับการพัฒนากับ Tauri

หมายเหตุ : การตั้งค่านี้มีไว้สำหรับเครื่อง Linux แต่มีคำแนะนำสำหรับ macOS และ Windows ด้วย

การติดตั้ง Linux

ลักษณะหลายภาษาของ Tauri หมายความว่าต้องมีการพึ่งพาเครื่องมือจำนวนมาก มาเริ่มกันเลยโดยการติดตั้งการพึ่งพาบางส่วน เรียกใช้สิ่งต่อไปนี้:

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

เมื่อขั้นตอนข้างต้นสำเร็จ ให้ดำเนินการติดตั้ง Node.js (หากคุณยังไม่มี) เนื่องจาก Tauri ต้องการรันไทม์ คุณสามารถทำได้โดยเรียกใช้สิ่งนี้:

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

สิ่งนี้จะติดตั้ง nvm (ตัวจัดการเวอร์ชัน Node.js) ซึ่งช่วยให้คุณจัดการรันไทม์ Node.js ได้อย่างง่ายดายและสลับระหว่างเวอร์ชันของ Node.js ได้อย่างง่ายดาย หลังจากติดตั้งแล้ว ให้เรียกใช้เพื่อดูรายการเวอร์ชันของ Node.js:

 nvm ls-remote

ในขณะที่เขียน เวอร์ชันล่าสุดคือ 14.1.0 ติดตั้งดังนี้:

 nvm install v14.1.0

เมื่อ Node.js ได้รับการตั้งค่าอย่างสมบูรณ์แล้ว คุณจะต้องติดตั้งคอมไพเลอร์ Rust และ Rust package manager: Cargo คำสั่งด้านล่างจะติดตั้งทั้งสองอย่าง:

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

หลังจากรันคำสั่งนี้ ตรวจสอบให้แน่ใจว่า Cargo และ Rust อยู่ใน $PATH ของคุณโดยเรียกใช้สิ่งต่อไปนี้:

 rust --version

หากทุกอย่างเป็นไปด้วยดี สิ่งนี้ควรส่งคืนหมายเลขเวอร์ชัน

ตามเอกสารของ Tauri ตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชันล่าสุดโดยเรียกใช้คำสั่งต่อไปนี้:

 $ rustup update stable

โว้ว! คุณเข้าใกล้ขั้นตอนเดียวในการทำให้เครื่องของคุณพร้อม 100% สำหรับราศีพฤษภ เหลือเพียงการติดตั้งลัง tauri-bundler ร์ เป็นการดีที่สุดที่จะออกจาก CLI และเรียกใช้คำสั่งด้านล่างในหน้าต่าง CLI ใหม่:

 $ cargo install tauri-bundler --force

ยูเรก้า! หากทุกอย่างเรียบร้อย ตอนนี้เครื่องของคุณก็พร้อมสำหรับ Tauri แล้ว ต่อไป เราจะเริ่มต้นการผสานรวม Tauri กับ Vue.js ไปกันเถอะ!

เส้นด้าย

ทีม Tauri แนะนำให้ติดตั้ง Yarn package manager มาติดตั้งด้วยวิธีนี้:

 npm install -g yarn

จากนั้นเรียกใช้สิ่งต่อไปนี้:

 yarn --version

หากทุกอย่างทำงาน ควรส่งคืนหมายเลขเวอร์ชัน

การรวม Tauri กับ Vue.js

ตอนนี้เราได้ติดตั้ง Tauri แล้ว มารวมโปรเจ็กต์เว็บที่มีอยู่กัน คุณสามารถพบการสาธิตสดของโครงการบน Netlify ไปข้างหน้าและแยกที่เก็บซึ่งจะทำหน้าที่เป็นเชลล์ หลังจากทำการ Fork แล้ว ให้ทำการโคลน Fork โดยรันสิ่งนี้:

 git clone https://github.com/[yourUserName]/nota-web

หลังจากลอกแบบโปรเจ็กต์แล้ว ให้รันสิ่งต่อไปนี้เพื่อติดตั้งการพึ่งพา:

 yarn

จากนั้นเรียกใช้สิ่งนี้:

 yarn serve

แอปพลิเคชันของคุณควรทำงานบน localhost:8080 ฆ่าเซิร์ฟเวอร์ที่ทำงานอยู่ และมาติดตั้งปลั๊กอิน Vue.js CLI สำหรับ Tauri กัน

vue-cli-plugin-tauri

ทีมงาน Tauri ได้สร้างปลั๊กอิน Vue.js CLI ที่เจาะระบบอย่างรวดเร็วและเปลี่ยนแอปพลิเคชันหน้าเดียว (SPA) ของ Vue.js ให้เป็นแอปเดสก์ท็อปข้ามแพลตฟอร์มขนาดเล็กที่รวดเร็วและปลอดภัย มาติดตั้งปลั๊กอินนั้นกัน:

 vue add tauri

หลังจากติดตั้งปลั๊กอินแล้ว ซึ่งอาจใช้เวลาสักครู่ ระบบจะถามชื่อหน้าต่างจากคุณ เพียงพิมพ์ nota แล้วกด "Enter"

มาตรวจสอบการเปลี่ยนแปลงที่ปลั๊กอิน Tauri นำเสนอ

package.json

ปลั๊กอิน Tauri เพิ่มสคริปต์สองตัวในส่วนสคริปต์ของไฟล์ package.json ของเรา พวกเขาเป็น:

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

ควรใช้สคริปต์ tauri:serve ในระหว่างการพัฒนา มาเริ่มกันเลย:

 yarn tauri:serve

ด้านบนจะดาวน์โหลดลัง Rust ที่จำเป็นในการเริ่มแอพของเรา หลังจากนั้น มันจะเปิดแอปของเราใน โหมดการพัฒนา โดยจะสร้างหน้าต่าง WebView พร้อมการ ดีบัก และการ โหลดโมดูล ใหม่!

src-tauri

คุณจะสังเกตเห็นว่าปลั๊กอินเพิ่มไดเร็กทอรี src-tauri ไปที่รูทของไดเร็กทอรีแอปของคุณ ภายในไดเร็กทอรีนี้มีไฟล์และโฟลเดอร์ที่ Tauri ใช้เพื่อกำหนดค่าแอปเดสก์ท็อปของคุณ ลองตรวจสอบเนื้อหา:

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

การเปลี่ยนแปลงเพียงอย่างเดียวที่เราต้องทำคือใน src-tauri/Cargo.toml Cargo.toml เหมือนกับไฟล์ package.json สำหรับ Rust ค้นหาบรรทัดด้านล่างใน Cargo.toml :

 name = "app"

เปลี่ยนเป็นสิ่งนี้:

 name = "nota"

นั่นคือทั้งหมดที่เราต้องเปลี่ยนสำหรับตัวอย่างนี้!

มัดรวม

หากต้องการรวม nota สำหรับแพลตฟอร์มปัจจุบันของคุณ ให้เรียกใช้สิ่งนี้:

 yarn tauri:build

หมายเหตุ : เช่นเดียวกับหน้าต่างการพัฒนา ในครั้งแรกที่คุณเรียกใช้ จะต้องใช้เวลาพอสมควรในการรวบรวมกล่อง Rust และสร้างทุกอย่าง ในการวิ่งครั้งต่อๆ ไป จะต้องสร้างกล่อง Tauri ขึ้นมาใหม่ด้วยตัวเองเท่านั้น

เมื่อเสร็จสิ้นข้างต้น คุณควรมีไบนารีของ nota สำหรับระบบปฏิบัติการปัจจุบันของคุณ สำหรับฉัน ฉันมีไบนารี .deb ที่สร้างขึ้นใน src-tauri/target/release/bundle/deb/ *

ก้าวข้ามแพลตฟอร์ม

คุณอาจสังเกตเห็นว่าคำสั่ง yarn tauri:build เพิ่งสร้างไบนารีสำหรับระบบปฏิบัติการของคุณ มาสร้างไบนารีสำหรับระบบปฏิบัติการอื่นกันเถอะ เพื่อให้บรรลุสิ่งนี้ เราจะตั้งค่าเวิร์กโฟลว์บน GitHub เรากำลังใช้ GitHub ที่นี่เพื่อทำหน้าที่เป็นสื่อกลางสำหรับแอปข้ามแพลตฟอร์มของเรา ดังนั้น ผู้ใช้ของคุณสามารถดาวน์โหลดไบนารีในแท็บ "ปล่อย" ของโครงการ เวิร์กโฟลว์ที่เราจะนำไปใช้จะสร้างไบนารีของเราโดยอัตโนมัติผ่านพลังของการกระทำของ GitHub ไปกันเถอะ

การสร้างเวิร์กโฟลว์ Tauri

ขอบคุณ Jacob Bolda เรามีเวิร์กโฟลว์ในการสร้างและเผยแพร่แอปข้ามแพลตฟอร์มโดยอัตโนมัติด้วย Tauri บน GitHub นอกเหนือจากการสร้างไบนารีสำหรับแพลตฟอร์มต่างๆ (Linux, Mac และ Windows) การดำเนินการยังจะอัปโหลดไบนารีสำหรับคุณเป็นรุ่นใน GitHub นอกจากนี้ยังใช้การกระทำ Create a Release ที่ทำโดย Jacob เพื่อให้บรรลุเป้าหมายนี้

หากต้องการใช้เวิร์กโฟลว์นี้ ให้สร้างไดเร็กทอรี .github ในรูทของ nota-web ในไดเร็กทอรีนี้ ให้สร้างไดเร็กทอรีอื่นชื่อ workflows จากนั้นเราจะสร้างไฟล์เวิร์กโฟลว์ใน . .github/workflows/ และตั้งชื่อว่า release-tauri-app.yml

ใน release-tauri-app.yml เราจะเพิ่มเวิร์กโฟลว์ที่สร้างไบนารีสำหรับ Linux, macOS และ Windows เวิร์กโฟลว์นี้จะอัปโหลดไบนารีเป็นฉบับร่างบน GitHub ด้วย เวิร์กโฟลว์จะถูกเรียกใช้เมื่อใดก็ตามที่เราส่งไปยังต้นแบบ

เปิด release-tauri-app.yml และเพิ่มข้อมูลโค้ดด้านล่าง:

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

ในการทดสอบเวิร์กโฟลว์ ให้คอมมิตและพุชการเปลี่ยนแปลงของคุณไปยัง master แบรนช์ของ fork หลังจากกดไปที่ GitHub สำเร็จแล้ว คุณสามารถคลิกแท็บ "การดำเนินการ" ใน GitHub จากนั้นคลิกลิงก์ "ตรวจสอบบิลด์" เพื่อดูความคืบหน้าของเวิร์กโฟลว์

เมื่อดำเนินการสำเร็จแล้ว คุณสามารถดูฉบับร่างได้ใน “รุ่น” บนหน้าพื้นที่เก็บข้อมูลบน GitHub จากนั้นคุณสามารถเผยแพร่ต่อได้!

บทสรุป

บทความนี้ได้แนะนำ toolchain หลายภาษาสำหรับการสร้างแอปพลิเคชันที่ปลอดภัย ข้ามแพลตฟอร์ม และมีขนาดเล็ก เราได้เห็นแล้วว่า Tauri คืออะไรและจะรวมเข้ากับ Vue.js ได้อย่างไร สุดท้ายนี้ เราได้รวมแอป Tauri ตัวแรกของเราไว้ด้วยกันโดยเรียกใช้งาน yarn tauri:build และเรายังใช้การกระทำของ GitHub เพื่อสร้างไบนารีสำหรับ Linux, macOS และ Windows

บอกให้ฉันรู้ว่าคุณคิดอย่างไรกับทอรี — ฉันตื่นเต้นที่จะได้เห็นสิ่งที่คุณสร้างด้วยมัน คุณสามารถเข้าร่วมเซิร์ฟเวอร์ Discord ได้หากคุณมีคำถามใดๆ

พื้นที่เก็บข้อมูลสำหรับบทความนี้อยู่ใน GitHub ดูไบนารีที่สร้างโดยเวิร์กโฟลว์ GitHub