إنشاء تطبيقات سطح مكتب صغيرة باستخدام Tauri و Vue.js

نشرت: 2022-03-10
ملخص سريع ↬ Tauri عبارة عن سلسلة أدوات لإنشاء تطبيقات سطح مكتب صغيرة وسريعة وآمنة من HTML و CSS وجافا سكريبت الموجودة لديك. في هذه المقالة ، يشرح كلفن كيف يلعب Tauri بشكل جيد مع إطار العمل التقدمي Vue.js من خلال دمج كلتا التقنيتين في تجميع مثال لتطبيق ويب يسمى nota كتطبيق أصلي.

تجعل التكنولوجيا حياتنا أفضل ، ليس فقط المستخدمين ، ولكن أيضًا المبدعين (المطورين والمصممين). في هذا المقال ، سوف أقدم لكم توري. ستكون هذه المقالة مفيدة لك إذا:

  • كنت تبني تطبيقات على الويب باستخدام HTML و CSS و JavaScript ، وتريد استخدام نفس التقنيات لإنشاء تطبيقات تستهدف أنظمة التشغيل Windows أو macOS أو Linux ؛
  • أنت تقوم بالفعل ببناء تطبيقات سطح مكتب عبر الأنظمة الأساسية باستخدام تقنيات مثل Electron ، وتريد التحقق من البدائل ؛
  • تريد إنشاء تطبيقات بتقنيات الويب لتوزيعات Linux ، مثل PureOS ؛
  • أنت من عشاق Rust ، وترغب في تطبيقه لإنشاء تطبيقات أصلية عبر الأنظمة الأساسية.

سننظر في كيفية إنشاء تطبيق أصلي عبر الأنظمة الأساسية من مشروع ويب موجود. دعنا نذهب اليها!

ملاحظة : تفترض هذه المقالة أنك مرتاح لاستخدام HTML و CSS و JavaScript و Vue.js.

المزيد بعد القفز! أكمل القراءة أدناه ↓

ما هو توري؟

الموقع الرسمي يلخص توري جيدا:

  • Tauri عبارة عن سلسلة أدوات متعددة اللغات لبناء تطبيقات أصلية أكثر أمانًا مع ثنائيات صغيرة وسريعة. أعني بكلمة "متعدد اللغات" أن توري تستخدم لغات برمجة متعددة. في الوقت الحالي ، يتم استخدام Rust و JavaScript و TypeScript. ولكن هناك خطط للسماح لك باستخدام Go و C ++ و Python والمزيد.
  • يتيح لك استخدام أي إطار عمل للواجهة الأمامية يعتمد على HTML و JavaScript ، مثل Vue.js أو React أو Angular ، لإنشاء تطبيق سطح مكتب أصلي ، ويمكن دمجه في أي خط أنابيب.
  • يساعدك على إنشاء وتجميع ثنائيات لأنظمة سطح المكتب الرئيسية (سيتم طرح الأجهزة المحمولة و WebAssembly قريبًا).

لذلك ، بشكل أساسي ، يسمح لك Tauri باستخدام تقنيات الويب لإنشاء تطبيقات سطح مكتب أصلية صغيرة وآمنة.

في صفحة GitHub الخاصة بها ، توصف Tauri بأنها سلسلة أدوات لا تعتمد على إطار العمل لبناء تطبيقات أصلية عالية الأمان لها ثنائيات صغيرة (مثل حجم الملف) وسريعة جدًا (أي استخدام الحد الأدنى من ذاكرة الوصول العشوائي).

لماذا ليس الكترون؟

تعد Electron أداة شائعة لاستخدام تقنيات الويب لبناء تطبيقات سطح المكتب.

ومع ذلك ، فإن تطبيقات Electron لها حجم حزمة كبير نوعًا ما ، وتميل إلى شغل الكثير من الذاكرة عند التشغيل. إليك كيفية مقارنة توري بالإلكترون:

  • حزمة
    يمكن أن يكون حجم تطبيق Tauri أقل من 600 كيلوبايت.
  • ذاكرة
    حجم تطبيق Tauri أقل من نصف حجم تطبيق Electron.
  • رخصة
    يمكن إعادة الترخيص مع Tauri ، ولكن ليس مع Electron. يتم شحن الإلكترون مع Chromium فور إخراجها من عبوتها. ومع ذلك ، يشتمل Chromium على نظام إدارة حقوق رقمي يسمى Widevine. إن إدراج Widevine في Chromium يجعل التطبيقات التي تم إنشاؤها باستخدام Electron مرفوضة من قبل مستخدمي الأنظمة الأساسية مثل PureOS لسبب وحيد هو أنها ليست برمجيات مفتوحة المصدر مجانية / حرة (FLOSS). يتم التحقق من الأنظمة الأساسية مثل PureOS من قبل مؤسسة البرمجيات الحرة (FSF). هذا يعني أنه لا يمكنهم نشر البرامج المجانية ومفتوحة المصدر إلا في متاجر التطبيقات الخاصة بهم.

باختصار ، إذا تم إنشاء تطبيقك باستخدام Electron ، فلن يتم شحنه رسميًا في متجر PureOS. يجب أن يكون هذا مصدر قلق للمطورين الذين يستهدفون مثل هذه التوزيعات.

المزيد من ميزات 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 وجافا سكريبت كواجهة مستخدم (UI) ، يديرها Rust وتمهيدها. المنتج عبارة عن ثنائي أحادي يمكن توزيعه كأنواع ملفات شائعة لنظام التشغيل Linux (deb / appimage) ، و macOS (app / dmg) ، و Windows (exe / msi).

كيف تصنع تطبيقات Tauri

يتم إنشاء تطبيق Tauri من خلال الخطوات التالية:

  1. أولاً ، قم بإنشاء واجهة في إطار عمل واجهة المستخدم الرسومية ، وقم بإعداد HTML و CSS وجافا سكريبت للاستهلاك.
  2. يأخذ Tauri Node.js CLI الأمر ويقوم بتثبيت عداء Rust وفقًا لتكوينك.
  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: Cargo. يقوم الأمر أدناه بتثبيت كلاً من:

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

بعد تشغيل هذا الأمر ، تأكد من أن Cargo و Rust في $PATH عن طريق تشغيل ما يلي:

 rust --version

إذا سارت الأمور على ما يرام ، فيجب أن يُرجع هذا رقم الإصدار.

وفقًا لوثائق Tauri ، تأكد من أنك تستخدم أحدث إصدار من خلال تشغيل الأمر التالي:

 $ rustup update stable

هاهو! أنت على بعد خطوة واحدة من تجهيز جهازك بنسبة 100٪ لـ Tauri. كل ما تبقى الآن هو تثبيت صندوق tauri-bundler . من الأفضل إنهاء CLI وتشغيل الأمر أدناه في نافذة CLI جديدة:

 $ cargo install tauri-bundler --force

يوريكا! إذا سار كل شيء على ما يرام ، فإن جهازك جاهز الآن لتوري. بعد ذلك ، سنبدأ في دمج Tauri مع Vue.js. دعنا نذهب اليها!

غزل

يوصي فريق Tauri بتثبيت مدير حزمة الغزل. لذلك دعنا نثبته بهذه الطريقة:

 npm install -g yarn

ثم قم بتشغيل ما يلي:

 yarn --version

إذا نجح كل شيء ، فيجب إعادة رقم الإصدار.

دمج Tauri مع Vue.js

الآن بعد أن قمنا بتثبيت Tauri ، دعنا نجمع مشروع ويب موجود. يمكنك العثور على العرض التوضيحي المباشر للمشروع على Netlify. انطلق وافترق المستودع ، والذي سيكون بمثابة قذيفة. بعد تفرعها ، تأكد من استنساخ الشوكة عن طريق تشغيل هذا:

 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 الذي يعمل بسرعة على حفر تطبيق Vue.js أحادي الصفحة (SPA) وتحويله إلى تطبيق سطح مكتب صغير يعمل على أنظمة أساسية وسريع وآمن. لنقم بتثبيت هذا المكون الإضافي:

 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-توري

ستلاحظ أيضًا أن المكون الإضافي أضاف دليل 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. يستخدم أيضًا إجراء إنشاء إصدار الذي قام به Jacob لتحقيق ذلك.

لاستخدام سير العمل هذا ، قم بإنشاء دليل .github في جذر nota 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 للشوكة. بعد الدفع بنجاح إلى GitHub ، يمكنك بعد ذلك النقر فوق علامة التبويب "الإجراءات" في GitHub ، ثم النقر فوق رابط "التحقق من الإنشاء" لمعرفة تقدم سير العمل.

عند التنفيذ الناجح للإجراء ، يمكنك مشاهدة مسودة الإصدار في "الإصدارات" على صفحة المستودع على GitHub. يمكنك بعد ذلك الاستمرار في نشر إصدارك!

خاتمة

قدمت هذه المقالة سلسلة أدوات متعددة اللغات لبناء تطبيقات أصلية آمنة ومتعددة المنصات وصغيرة الحجم. لقد رأينا ماهية Tauri وكيفية دمجها مع Vue.js. أخيرًا ، قمنا بتجميع أول تطبيق Tauri من خلال تشغيل yarn tauri:build ، كما استخدمنا إجراء GitHub لإنشاء ثنائيات لنظام التشغيل Linux و macOS و Windows.

اسمحوا لي أن أعرف ما هو رأيك في توري - سأكون متحمسًا لرؤية ما تبنيه بها. يمكنك الانضمام إلى خادم Discord إذا كان لديك أي أسئلة.

يوجد مستودع هذه المقالة على GitHub. راجع أيضًا الثنائيات التي تم إنشاؤها بواسطة سير عمل GitHub.