Tauri – قاتل فلاتر؟

تاوری چیست؟

Tauri یک چارچوب متن باز برای ساخت برنامه های دسکتاپ چند پلتفرمی با استفاده از فناوری های وب مانند HTML، CSS و جاوا اسکریپت است.

Tauri این بار در جلوی صحنه بوده است و به عنوان یکی از بهترین گزینه ها برای ساخت برنامه های دسکتاپ در امتداد Flutter در نظر گرفته می شد اما هنوز به توسعه موبایل نرسیده است!

اکنون یک دوره جدید آغاز می شود 👑! Tauri اکنون می تواند با همان پایگاه کد، اپلیکیشن هایی برای موبایل بسازد. از طریق این مقاله به شما کمک می کنم تا یک پروژه را برای ساخت دستگاه های اندرویدی پیکربندی کنید.

محیط من

برای هدف این مقاله، من از موارد زیر استفاده خواهم کرد:

• یک تراشه Macbook pro M1 ARM با MacOS Ventura 13.2
• ترمینال با پوسته ماهی و Homebrew نصب شده است
• یک دستگاه اندرویدی که روی اندروید 12 اجرا می شود

بولز موبایل

در وبلاگ Tauri، آنها نسخه آلفای تلفن همراه Tauri را اعلام کرده اند. در این مقاله، من به شما کمک می کنم اولین برنامه خود را با آن بسازید! بیایید شیرجه بزنیم! 🏊‍♀️

پیش نیاز اندروید

کیت توسعه جاوا (JDK)

برای ساخت اپلیکیشن اندرویدی خود، ابتدا باید JDK را نصب کنیم. و دوباره، با خیال راحت یکی را انتخاب کنید که مناسب سیستم عامل شما باشد.

Android SDK

همانطور که ما در حال ساخت یک برنامه برای اندروید هستیم، به ابزار اندروید SDK نیاز داریم. این به ما کمک می کند تا برنامه های Android را بسازیم و آزمایش کنیم، و برنامه تمام شده شما را در فروشگاه Google Play یا سایر بازارهای برنامه منتشر کنیم.

ساده ترین راه برای نصب آن دانلود اندروید استودیو است. به وب سایت آنها سر بزنید 👆 و روی آن کلیک کنید Download دکمه. روی دکمه توافق کلیک کنید و نسخه مناسب را برای رایانه خود انتخاب کنید، به عنوان مثال، در مورد من نسخه ای را برای مک با تراشه اپل دانلود کرده ام.

پس از اتمام دانلود، آن را با دوبار کلیک کردن روی فایل نصب کنید. گزینه all default را بگذارید و آخرین SDK را همانطور که نرم افزار از شما می خواهد دانلود کنید. برای اطمینان از اینکه همه چیز درست است، بیایید در را باز کنیم settings نشان داده شده توسط یک دکمه سه نقطه در کنار open را فشار دهید و انتخاب کنید SDK Manager.

شما باید چیزی شبیه به این را ببینید:

اگر قبلاً نصب نشده است، نسخه مربوط به دستگاه Android خود را دانلود کنید. سپس به سمت SDK Tools تب و سپس انتخاب کنید:

• ابزارهای خط فرمان Android SDK (جدیدترین)
• NDK (در کنار هم)
• Android SDK Build-Tools
• Android SDK Platform-Tools

سپس بر روی آن کلیک کنید Apply دکمه.
اکنون که این کار را انجام دادیم، می توانیم اندروید استودیو را فعلا ببندیم.

متغیرهای محیطی

حال باید چند متغیر محیطی را مشخص کنیم. لطفاً در اینترنت جستجو کنید که چگونه این کار را برای سیستم عامل خود انجام دهید.

در مورد من، من از یک مک با پوسته ماهی استفاده می کنم (اگر علاقه دارید می توانم در مورد آن مقاله بنویسم) روی آن نصب شده است، بنابراین دستور من این خواهد بود code ~/.config/fish/config.fish برای اضافه کردن متغیرهای محیطی فایل من به این صورت خواهد بود:

if status is-interactive
    # Commands to run in interactive sessions can go here
end
if status --is-login
    set -gx ANDROID_SDK_ROOT $HOME/Library/Android/sdk
    set -gx NDK_HOME $HOME/Library/Android/sdk/ndk/25.1.8937393
end

⚠️ پس از انجام این کار، به شما پیشنهاد می کنم که ترمینال خود را ببندید و ترمینال جدیدی را برای فعال کردن تغییرات باز کنید.

همانطور که می بینید، من آن 2 متغیر را اضافه کرده ام: ANDROID_SDK_ROOT and NDK_HOME. این مقادیر را با توجه به مسیرهای خود تغییر دهید.

هنوز دنبال می کنی 😅؟ من می دانم که انجام این تنظیمات می تواند خسته کننده باشد، اما باور کنید، روزهای خوبی در راه است! اکنون که پیکربندی خاص اندروید را انجام دادیم، بیایید نصب کنیم tauri 🥵

Tauri را برای موبایل نصب کنید

پیش نیازها

مستندات Tauri به اندازه کافی واضح است که بدون هیچ کمک اضافی با خودتان کنار بیایید.

Tauri را برای توسعه موبایل آماده کنید

لطفاً به اسناد آنها سر بزنید تا فضای کاری خود را آماده کنید، زیرا فکر می‌کنم شروع آن از قبل واضح و آسان است.

اپلیکیشن خود را ایجاد کنید

از اینجا، از شما می خواهم که با دقت دنبال کنید تا گم نشوید.

بیایید با ایجاد یک برنامه ساده Vite شروع کنیم:

> pnpm create vite

از شما اطلاعاتی مانند:

• نام پروژه شما (من “taurituto” را انتخاب کردم)
• چارچوبی که استفاده خواهید کرد (من React with TypeScript را انتخاب کردم)

بسته های مورد نیاز را با

> pnpm i

شما باید چیزی شبیه به این داشته باشید:

اگر با برنامه های Vite آشنا هستید، چیز خاصی نیست.

بیایید قبل از افزودن برنامه Tauri خود تنظیماتی را انجام دهیم.

پیکربندی سریع

از آنجایی که Tauri این برنامه Vite را در برنامه تلفن همراه ما اجرا می کند، باید آن را تنظیم کنیم تا بتواند محتوای ما را با استفاده از پورت رایانه و آدرس IP ما نمایش دهد.

بیایید ببینیم که چه چیزی در درون خود داریم vite.config.ts فایل فعلا:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

همانطور که در این مستندات ذکر شد، ما باید این فایل را تغییر دهیم تا Vite خود را در برنامه تلفن همراه اجرا کنیم. ابتدا باید نصب کنیم internal-ip، مته را می دانید:

pnpm i -D internal-ip

و ما را تغییر دهیم vite.config.ts برای استفاده از آن:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { internalIpV4 } from 'internal-ip'

// https://vitejs.dev/config/
export default defineConfig(async () => {
  const host = await internalIpV4();
  return {
    // prevent vite from obscuring rust errors
    plugins: [react()],
    clearScreen: false,
    server: {
      host: '0.0.0.0', // listen on all addresses
      port: 5173,
      // Tauri expects a fixed port, fail if that port is not available
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host,
        port: 5183
      },
    },
    // to make use of `TAURI_PLATFORM`, `TAURI_ARCH`, `TAURI_FAMILY`,
    // `TAURI_PLATFORM_VERSION`, `TAURI_PLATFORM_TYPE` and `TAURI_DEBUG`
    // env variables
    envPrefix: ['VITE_', 'TAURI_'],
    build: {
      // Tauri supports es2021
      target: ['es2021', 'chrome100', 'safari13'],
      // don't minify for debug builds
      minify: 'esbuild',
      // produce sourcemaps for debug builds
      sourcemap: 'inline',
    }
  }
})

خوب، اکنون ما آماده ایم تا بخش برنامه Tauri خود را اضافه کنیم!

اضافه کردن Tauri

بیایید Tauri CLI را اضافه کنیم زیرا به ما کمک می کند تا برنامه Tauri را همراه با برنامه Vite خود نصب کنیم:

> pnpm add -D @tauri-apps/cli

اکنون که آن را نصب کردیم، اجرا کنید:

> pnpm tauri init

به جز اینکه شما به یک سری سوال پاسخ می دهید:

> ? What is your app name? <yourappname>
> ? What should the window title be? <you can leave it the same as your app name>
> ? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? ../dist
> ? What is the url of your dev server? › http://localhost:5173
> ? What is your frontend dev command? › pnpm run dev
> ? What is your frontend build command? · pnpm run build

اکنون باید پوشه ای به نام را ببینید src-tauri به عنوان ریشه پروژه شما

سپس به src-tauri دایرکتوری و سپس این دستورات را اجرا کنید:

cargo add tauri@2.0.0-alpha.0
cargo add tauri-build@2.0.0-alpha.0 --build
cargo install tauri-cli --version "^2.0.0-alpha"

خوب، ما باید فایل پروژه خود را تطبیق دهیم تا بتوانیم آن را در تلفن همراه راه اندازی کنیم. خودت را باز کن Cargo.toml فایل موجود در داخل src-tauri و این خطوط را اضافه کنید:

[package]
name = "snapchat"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"

[lib]
crate-type = ["staticlib", "cdylib", "rlib"]

...

حالا برو داخل خودت src پوشه در همان سطح و اضافه کردن 2 فایل lib.rs و mobile.rs با آن خطوط:

// lib.rs

use tauri::App;

#[cfg(mobile)]
mod mobile;
#[cfg(mobile)]
pub use mobile::*;

pub type SetupHook = Box<dyn FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send>;

#[derive(Default)]
pub struct AppBuilder {
  setup: Option<SetupHook>,
}

impl AppBuilder {
  pub fn new() -> Self {
    Self::default()
  }

  #[must_use]
  pub fn setup<F>(mut self, setup: F) -> Self
  where
    F: FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send + 'static,
  {
    self.setup.replace(Box::new(setup));
    self
  }

  pub fn run(self) {
    let setup = self.setup;
    tauri::Builder::default()
      .setup(move |app| {
        if let Some(setup) = setup {
          (setup)(app)?;
        }
        Ok(())
      })
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
  }
}

// mobile.rs

#[tauri::mobile_entry_point]
fn main() {
  super::AppBuilder::new().run();
}

سپس ما را جایگزین کنید main.rs فایل برای استفاده از AppBuilder ساختار:

//main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

pub fn main() {
    app::AppBuilder::new().run();
}

اکنون ما آماده هستیم تا پروژه اندروید خود را آغاز کنیم. بیایید اجرا کنیم به پروژه ریشه خود برگردیم و این را اجرا کنیم:

pnpm update @tauri-apps/cli@next @tauri-apps/api@next && pnpm run tauri android init

با این دستور، ابزار cli تنظیماتی را برای ما انجام می دهد، بنابراین بیایید بنشینیم و منتظر بمانیم تا کامل شود.

✅ وقتی کلیپ تمام شد، به src-tauri، اکنون باید پوشه ای به نام را ببینید ژنرال با برخی از اندروید فایل های نسبی در آن یعنی این ابزار به درستی یک پروژه اندرویدی برای شما ایجاد کرده است 👍.

آخرین مورد قبل از اینکه این را روی دستگاه خود اجرا کنیم. باز کن tauri.conf.json فایل داخل src-tauri و شناسه بسته نرم افزاری را با پیروی از این الگو به یک شناسه سفارشی تغییر دهید com.$developeralias.$appname. به عنوان مثال، برای من، آن را به: com.yourname.appname.

خوب، حالا بیایید برنامه خود را اجرا کنیم، دستور را اجرا کنید: pnpm run tauri android dev [--open]

کاری که این دستور انجام می دهد این است که برنامه ما را روی شبیه ساز اندروید راه اندازی کند و اگر یکی را پیدا نکرد، اندروید استودیو را برای شما باز می کند. در مورد من، می‌خواهم آن را روی دستگاه واقعی خود اجرا کنم، بنابراین منتظر می‌مانم Android Studio ظاهر شود.

❌ من مجبور شدم این خط را در فایل build.gradle.kts تغییر دهم تا با پیکربندی من مطابقت داشته باشد:

// Change this
implementation("com.android.tools.build:gradle:7.3.1")

To this
implementation("com.android.tools.build:gradle:7.2.1")

⚠️ اگر به اشتباه در گفتن آن برخورد کردید @tauri-apps/cli-darwin-x64 وجود ندارد، سپس وابستگی مورد نیاز را توسط نصب کنید pnpm i --save @tauri-apps/cli-darwin-x64

تست

زمان اجرای برنامه ماست! همانطور که می بینید، آندروید استودیو را باز کرد و دستگاه من را کاملا شناسایی کرد. کافیست ادامه دهید و روی دکمه “Run app” کلیک کنید و منتظر بمانید تا برنامه اجرا شود.

اگر برنامه در اولین بار اجرا نشد، سعی کنید اندروید استودیو را ببندید و دستور را دوباره اجرا کنید:

> pnpm tauri android dev [--open]

آری 🎉🎉🎉

حالا سعی کنید چیزی را در داخل تغییر دهید src/App.tsx و آن را ذخیره کنید. تغییرات مستقیماً در نظر گرفته می شوند و برنامه شما را به روز می کنند! 🤯🤩

همانطور که Tauri از چارچوب مورد علاقه شما برای بارگذاری استفاده می کند، می توانید از ابزارهای مورد علاقه ما با آن استفاده کنید!

شما همچنین می توانید برنامه خود را با انجام این دستور بسازید:

> pnpm tauri android build

کلمات پایانی

Tauri برای موبایل هنوز در نسخه آلفا است، بنابراین استفاده از آن را در تولید توصیه نمی‌کنم، اما فکر می‌کنم که در حال حاضر بسیار جالب است. دفعه بعد در مورد تعامل با Rust و افزونه های موبایل بحث خواهیم کرد! 😀

اگر می خواهید آموزش های بیشتری در مورد آن انجام دهم به من اطلاع دهید! 😊

ممنون که تا آخر با من بودید! همه شما را ببینید! 👋