ساخت یک اپلیکیشن دسکتاپ برای ویندوز معمولاً ما را به سمت فناوری‌هایی مانند C#، .NET، WPF یا WinUI هدایت می‌کند. اما در سال‌های اخیر روش دیگری هم مورد توجه قرار گرفته است: استفاده از فناوری‌های وب برای رابط کاربری و یک Backend بومی برای اجرای منطق برنامه روی سیستم‌عامل.
در این مجموعه آموزشی قرار است یک مسیر عملی را دنبال کنیم و یک اپلیکیشن دسکتاپ واقعی را با ترکیب Rust، Tauri، React، Tailwind CSS و SQLite بسازیم.
در این مسیر فقط با چند ابزار مختلف آشنا نمی‌شویم؛ هدف این است که در نهایت یک برنامه دسکتاپ قابل اجرا روی ویندوز داشته باشیم و مرحله‌به‌مرحله اجزای مختلف آن را پیاده‌سازی کنیم.
چرا Tauri؟
اگر قبلاً با توسعه وب کار کرده باشید، احتمالاً با React، Vue یا سایر فریم‌ورک‌های JavaScript آشنا هستید. این ابزارها برای ساخت رابط کاربری بسیار قدرتمند هستند، اما به‌صورت مستقیم برای ساخت یک برنامه دسکتاپ بومی طراحی نشده‌اند.
اینجاست که فریم‌ورک‌هایی مانند Electron و Tauri وارد می‌شوند.
هر دو فناوری این امکان را فراهم می‌کنند که از فناوری‌های وب برای ساخت رابط کاربری یک برنامه دسکتاپ استفاده کنیم.
اما معماری آنها یکسان نیست.
در Electron، برنامه دسکتاپ معمولاً همراه با موتور Chromium و Node.js اجرا می‌شود. در مقابل، Tauri از WebView سیستم‌عامل برای نمایش رابط کاربری استفاده می‌کند و منطق بومی برنامه می‌تواند با Rust نوشته شود.
به همین دلیل Tauri برای پروژه‌هایی که به یک رابط کاربری مدرن وب در کنار منطق بومی و سبک‌تر نیاز دارند، گزینه‌ای قابل بررسی است.
Electron چیست؟
Electron یکی از شناخته‌شده‌ترین فناوری‌ها برای ساخت برنامه‌های دسکتاپ با استفاده از فناوری‌های وب است.
ایده اصلی ساده است:
HTML
CSS
JavaScript
↓
Electron
↓
Windows / macOS / Linux
یعنی شما رابط کاربری برنامه را مانند یک وب‌سایت یا Web App می‌سازید، اما Electron محیط لازم برای اجرای آن را به شکل یک برنامه دسکتاپ فراهم می‌کند.
Electron از Chromium برای نمایش رابط کاربری و Node.js برای دسترسی به قابلیت‌های سیستم استفاده می‌کند.
به همین دلیل توسعه‌دهنده وب می‌تواند بدون یادگیری کامل فناوری‌هایی مانند WPF یا WinUI، وارد توسعه دسکتاپ شود.
برنامه‌های شناخته‌شده‌ای نیز با Electron ساخته شده‌اند؛ بنابراین Electron یک فناوری آزمایشی یا ناشناخته نیست.
اما این معماری یک هزینه مهم دارد: برنامه باید اجزای لازم برای اجرای Chromium و Node.js را نیز همراه خود داشته باشد.
Tauri چیست؟
Tauri رویکرد متفاوتی دارد.
در Tauri رابط کاربری همچنان می‌تواند با فناوری‌های وب ساخته شود:
React
↓
HTML / CSS / JavaScript
↓
WebView
اما قسمت بومی برنامه می‌تواند با Rust نوشته شود:
React
↓
Tauri
↓
Rust
↓
Operating System
در نتیجه می‌توانیم از React برای ساخت رابط کاربری استفاده کنیم و وظایفی که نیاز به دسترسی بومی یا منطق Backend دارند را در Rust پیاده‌سازی کنیم.
این ترکیب یکی از دلایل اصلی انتخاب Tauri در این مجموعه است.
Tauri و Electron چه تفاوتی دارند؟
مقایسه این دو فناوری باید بر اساس معماری آنها انجام شود، نه صرفاً حجم فایل خروجی.
| ویژگی | Electron | Tauri |
|---|---|---|
| رابط کاربری | Web Technologies | Web Technologies |
| زبان Backend | JavaScript / Node.js | Rust |
| موتور نمایش | Chromium | WebView سیستم‌عامل |
| دسترسی به سیستم | Node.js / APIs | Rust / Tauri APIs |
| زبان اصلی Backend | JavaScript | Rust |
| مناسب برای توسعه‌دهنده وب | بسیار مناسب | مناسب |
| نیاز به یادگیری Rust | خیر | بله |
| حجم برنامه | معمولاً بیشتر | معمولاً کمتر |
| امنیت | وابسته به معماری Electron | مدل امنیتی Tauri |
این جدول به‌تنهایی نباید باعث شود نتیجه بگیریم که یکی همیشه بهتر از دیگری است.
انتخاب فناوری به نوع پروژه، نیازمندی‌ها، تجربه تیم و معماری برنامه بستگی دارد.
اما در این مجموعه یک دلیل مهم برای انتخاب Tauri وجود دارد:
می‌خواهیم هم توسعه رابط کاربری مدرن React را داشته باشیم و هم Rust را به‌عنوان بخش بومی برنامه یاد بگیریم.
چرا Rust؟
Rust زبان اصلی Backend در پروژه ما خواهد بود.
اگر تاکنون با JavaScript یا PHP کار کرده باشید، Rust در ابتدا ممکن است کمی سخت به نظر برسد.
دلیل آن این است که Rust برخلاف بسیاری از زبان‌های سطح بالا، کنترل بیشتری روی مالکیت حافظه، Borrowing و طول عمر داده‌ها دارد.
برای مثال در Rust مفهومی به نام Ownership اهمیت بسیار زیادی دارد.
نمونه ساده:
fn main() {
let name = String::from("Ali");
println!("{}", name);
}
در ادامه مجموعه به‌صورت جداگانه مفاهیمی مانند:
- Variables
- Data Types
- Functions
- String و
&str - Ownership
- Borrowing
- References
- Struct
- Enum
- Result
- Option
- Error Handling
را یاد خواهیم گرفت.
بنابراین قرار نیست Rust را فقط در حد چند دستور موردنیاز Tauri یاد بگیریم.
هدف این است که مبانی Rust را به اندازه‌ای یاد بگیریم که بتوانیم Backend واقعی برنامه را با آن توسعه دهیم.
چرا React؟
رابط کاربری برنامه را با React خواهیم ساخت.
React برای ایجاد رابط‌های کاربری Component-Based بسیار مناسب است.
برای مثال می‌توانیم برنامه را به اجزای مختلف تقسیم کنیم:
App
├── Header
├── Sidebar
├── Dashboard
├── Patients
├── Reception
├── Records
├── Services
└── Reports
هر قسمت می‌تواند Component مستقل خودش را داشته باشد.
برای مثال:
function Header() {
return (
برنامه کلینیک
); }
در ادامه همین ساختار را توسعه می‌دهیم و رابط کاربری واقعی برنامه را ایجاد می‌کنیم.
چرا Tailwind CSS؟
برای طراحی رابط کاربری از Tailwind CSS استفاده خواهیم کرد.
به جای اینکه برای هر عنصر CSS جداگانه بنویسیم، می‌توانیم کلاس‌های موردنیاز را مستقیماً روی عناصر قرار دهیم:
ذخیره
این روش برای پروژه‌هایی که Componentهای زیادی دارند، امکان ساخت سریع و منظم رابط کاربری را فراهم می‌کند.
در پروژه نیز یک طراحی RTL مناسب زبان فارسی ایجاد خواهیم کرد و مواردی مانند:
- فونت فارسی
- Sidebar
- Header
- فرم‌ها
- جدول‌ها
- دکمه‌ها
- کارت‌ها
- وضعیت‌های مختلف
- Responsive Layout
را پیاده‌سازی می‌کنیم.
SQLite؛ دیتابیس برنامه
یک برنامه دسکتاپ معمولاً به دیتابیس نیاز دارد.
برای پروژه ما SQLite انتخاب مناسبی است، زیرا دیتابیس به‌صورت یک فایل محلی روی سیستم ذخیره می‌شود و برای بسیاری از برنامه‌های دسکتاپ نیازی به نصب و مدیریت یک Database Server جداگانه وجود ندارد.
ساختار کلی برنامه ما به شکل زیر خواهد بود:
React
│
│ UI
▼
Tauri
│
│ Commands
▼
Rust
│
▼
SQLite
برای مثال وقتی کاربر یک بیمار جدید ثبت می‌کند:
فرم React
↓
Tauri Command
↓
Rust
↓
SQLite
و هنگام نمایش اطلاعات:
SQLite
↓
Rust
↓
Tauri
↓
React
↓
UI
این ارتباط یکی از مهم‌ترین قسمت‌های این مجموعه خواهد بود.
معماری نهایی پروژه
در پایان مسیر، پروژه تقریباً چنین ساختاری خواهد داشت:
Desktop Application
│
├── React
│ ├── Components
│ ├── Pages
│ ├── Layouts
│ └── UI
│
├── Tailwind CSS
│ └── Styling
│
├── Tauri
│ ├── Window
│ ├── Commands
│ └── Application Bridge
│
├── Rust
│ ├── Business Logic
│ ├── Database
│ └── Error Handling
│
└── SQLite
├── Patients
├── Services
├── Records
└── ...
البته این ساختار در طول آموزش کامل‌تر خواهد شد.
آیا Tauri فقط برای برنامه‌های ساده مناسب است؟
خیر.
این تصور که Tauri فقط برای برنامه‌های کوچک یا نمونه‌های آموزشی است، دقیق نیست.
Tauri می‌تواند برای ساخت انواع مختلف برنامه‌های دسکتاپ استفاده شود؛ اما همانند هر فناوری دیگری محدودیت‌ها و ملاحظات معماری خودش را دارد.
مثلاً اگر برنامه شما به قابلیت‌های بسیار خاص سیستم‌عامل، پردازش سنگین، سرویس‌های پس‌زمینه پیچیده یا کتابخانه‌های خاص بومی نیاز داشته باشد، باید قبل از انتخاب فناوری این نیازها بررسی شوند.
در این مجموعه نیز صرفاً به دلیل محبوبیت یک ابزار، آن را انتخاب نمی‌کنیم؛ بلکه معماری برنامه را بر اساس نیازهای واقعی پروژه بررسی خواهیم کرد.
در این مجموعه چه چیزی خواهیم ساخت؟
برای اینکه آموزش صرفاً مجموعه‌ای از مثال‌های جداگانه نباشد، یک پروژه واقعی را مرحله‌به‌مرحله توسعه می‌دهیم.
برای نمونه بخش‌های اصلی برنامه شامل موارد زیر خواهند بود:
داشبورد
بیماران
پذیرش
پرونده‌ها
خدمات
گزارش‌ها
تنظیمات
برای بخش بیماران، عملیات اصلی CRUD را خواهیم داشت:
Create
Read
Update
Delete
یعنی کاربر بتواند بیمار جدید ایجاد کند، اطلاعات بیماران را مشاهده کند، اطلاعات را ویرایش کند و در صورت نیاز رکورد را حذف کند.
در ادامه نیز ارتباط این بخش با دیتابیس SQLite و Backend نوشته‌شده با Rust را پیاده‌سازی خواهیم کرد.
مسیر یادگیری در مقالات بعدی
مقالات این مجموعه به ترتیب از مفاهیم ساده‌تر به سمت ساخت قابلیت‌های واقعی حرکت می‌کنند.
ابتدا با معماری Tauri و تفاوت آن با Electron آشنا می‌شویم.
سپس مبانی Rust را یاد می‌گیریم:
Variables
↓
Data Types
↓
Functions
↓
String / &str
↓
Ownership
↓
Borrowing
↓
References
↓
Struct / Enum
↓
Result / Option
بعد از آن وارد Tauri می‌شویم و پروژه React را به بخش Rust متصل می‌کنیم.
در مرحله بعد SQLite را اضافه کرده و اولین Migration واقعی پروژه را ایجاد می‌کنیم.
سپس CRUD و بخش‌های مختلف برنامه را توسعه می‌دهیم و در نهایت پروژه را برای Windows Build خواهیم کرد.
