021-88881776

آموزش توسعه برنامه‌های موبایل در .NET

آموزش .NET یکی از بهترین راه‌ها برای ورود به دنیای برنامه‌نویسی مدرن است، به‌خصوص اگر هدف شما ساخت اپلیکیشن‌های کاربردی و قدرتمند باشد. در این مقاله، به موضوع توسعه برنامه‌های موبایل در .NET می‌پردازیم که یکی از جذاب‌ترین حوزه‌های برنامه‌نویسی امروزی است. با استفاده از ابزارها و فریم‌ورک‌هایی که مایکروسافت ارائه داده، می‌توانید اپلیکیشن‌هایی برای پلتفرم‌های مختلف مانند اندروید و iOS بسازید، بدون اینکه نیاز به یادگیری چندین زبان یا ابزار جداگانه داشته باشید. این مقاله از سطح مبتدی شروع می‌شود و شما را تا مفاهیم پیشرفته‌تر همراهی می‌کند. اگر تازه‌کار هستید یا تجربه‌ای در برنامه‌نویسی دارید، اینجا نقطه شروع مناسبی برای شماست.

توسعه برنامه‌های موبایل

توسعه برنامه‌های موبایل در .NET فرآیندی است که در آن از ابزارها، تکنولوژی‌ها و فریم‌ورک‌های ارائه‌شده توسط مایکروسافت استفاده می‌شود تا اپلیکیشن‌هایی خلق شوند که روی دستگاه‌های موبایل مانند گوشی‌های هوشمند، تبلت‌ها و حتی ساعت‌های هوشمند اجرا شوند. این رویکرد به توسعه‌دهندگان این امکان را می‌دهد که با استفاده از یک پلتفرم واحد، برنامه‌هایی بسازند که نه‌تنها روی یک سیستم‌عامل خاص، بلکه روی چندین پلتفرم مثل اندروید، iOS، و حتی ویندوز یا مک، به‌خوبی کار کنند. این قابلیت، نقطه عطفی در دنیای برنامه‌نویسی موبایل است، چون در گذشته، توسعه‌دهندگان با چالش‌های بزرگی روبه‌رو بودند. برای مثال، اگر می‌خواستید یک اپلیکیشن برای اندروید بسازید، باید از جاوا یا کاتلین استفاده می‌کردید و برای iOS به سراغ سوئیفت یا Objective-C می‌رفتید. این یعنی برای هر پلتفرم، باید یک پروژه جداگانه تعریف می‌کردید، تیمی جداگانه داشتید و زمان زیادی صرف هماهنگی و مدیریت این پروژه‌ها می‌شد. اما با ورود .NET به این حوزه، همه‌چیز تغییر کرد. حالا می‌توانید با یک کدبیس مشترک، اپلیکیشن‌هایی بسازید که روی پلتفرم‌های مختلف اجرا شوند و این یکی از مهم‌ترین دلایلی است که توسعه برنامه‌های موبایل در .NET این‌قدر محبوب شده است.

برای اینکه بهتر درک کنید این موضوع چقدر مهم است، بیایید به یک سناریوی واقعی نگاه کنیم. فرض کنید شما صاحب یک کسب‌وکار کوچک هستید و می‌خواهید یک اپلیکیشن برای مشتریانتان بسازید تا محصولات شما را ببینند و سفارش بدهند. در روش سنتی، باید دو تیم استخدام می‌کردید: یک تیم برای اندروید و یک تیم برای iOS. هر تیم زبان خودش را استفاده می‌کرد، ابزارهای خودش را داشت و حتی ممکن بود نتیجه نهایی از نظر ظاهر و عملکرد کمی متفاوت باشد. اما با توسعه برنامه‌های موبایل در .NET، شما فقط یک تیم دارید که با یک زبان (معمولاً C#) و یک ابزار (مثل Visual Studio) کار می‌کند. این تیم یک پروژه واحد می‌سازد که هم روی اندروید و هم روی iOS اجرا می‌شود و شما هزینه و زمان کمتری صرف می‌کنید، در حالی که کیفیت کار هم حفظ می‌شود.

حالا بیایید به نقطه شروع این مسیر نگاه کنیم. برای ورود به توسعه برنامه‌های موبایل در .NET، نیازی نیست که یک متخصص باشید، اما باید با مفاهیم اولیه برنامه‌نویسی آشنا شوید. این مفاهیم مثل آجرهای ساختمانی هستند که پایه برنامه شما را تشکیل می‌دهند. مثلاً:

متغیرها: مثل جعبه‌هایی هستند که اطلاعات را نگه می‌دارند. مثلاً int age = 25; یک متغیر است که سن را ذخیره می‌کند.
حلقه‌ها: برای تکرار یک کار استفاده می‌شوند. مثلاً اگر بخواهید ۱۰ بار یک پیام را نمایش دهید، از حلقه استفاده می‌کنید.
شرط‌ها: به برنامه می‌گویند که بر اساس یک وضعیت خاص چه کاری انجام دهد. مثلاً اگر سن بالای ۱۸ بود، پیامی نشان بده.
اگر با زبان C# آشنا باشید، کارتان خیلی راحت‌تر است چون این زبان ستون فقرات .NET است. بیایید یک مثال ساده‌تر و کاربردی‌تر ببینیم:

 

using System;

namespace HelloMobile
{
    class Program
    {
        static void Main(string[] args)
        {
            string userName = "علی";
            int userAge = 20;
            if (userAge >= 18)
            {
                Console.WriteLine($"سلام {userName}، شما می‌توانید وارد شوید!");
            }
            else
            {
                Console.WriteLine($"متأسفم {userName}، شما هنوز بزرگسال نیستید.");
            }
        }
    }
}

این کد یک برنامه کوچک است که نام و سن کاربر را بررسی می‌کند و بر اساس آن پیامی نمایش می‌دهد. حالا تصور کنید همین منطق را می‌توانید در یک اپلیکیشن موبایل استفاده کنید؛ مثلاً به جای نمایش پیام در کنسول، آن را در یک پنجره پاپ‌آپ روی گوشی نشان دهید. این همان چیزی است که توسعه برنامه‌های موبایل در .NET را ممکن می‌کند.

مزایای این روش چیست؟ اول، صرفه‌جویی در زمان. وقتی یک کد می‌نویسید و روی چند پلتفرم کار می‌کند، نیازی به تکرار کارها ندارید. اگر بخواهید یک ویژگی جدید اضافه کنید، فقط یک بار آن را پیاده‌سازی می‌کنید و همه کاربران (چه اندروید و چه iOS) از آن بهره می‌برند. دوم، کاهش پیچیدگی. به جای یادگیری چندین زبان و ابزار، با یک اکوسیستم کار می‌کنید که همه‌چیز در آن هماهنگ است. سوم، ابزارهای قدرتمند. مایکروسافت با Visual Studio یک محیط توسعه کامل در اختیارتان می‌گذارد که شامل ویرایشگر کد، دیباگر (برای پیدا کردن و رفع خطاها)، شبیه‌ساز برای تست برنامه و حتی ابزارهای طراحی رابط کاربری است. مثلاً می‌توانید اپلیکیشن خود را روی شبیه‌ساز اندروید یا iOS تست کنید بدون اینکه نیاز به دستگاه واقعی داشته باشید.

برای درک بهتر، بیایید یک مقایسه ساده کنیم. توسعه سنتی مثل این است که برای هر مقصد یک ماشین جداگانه بسازید، اما توسعه برنامه‌های موبایل در .NET مثل ساخت یک ماشین همه‌کاره است که هم در شهر، هم در جاده و هم در کوه کار می‌کند. این انعطاف‌پذیری به شما اجازه می‌دهد که روی ایده‌های خلاقانه‌تان تمرکز کنید، نه روی مشکلات فنی.

یک مثال دیگر: فرض کنید می‌خواهید یک اپلیکیشن آب‌وهوا بسازید. در روش قدیمی، باید برای اندروید و iOS دو کد جدا برای گرفتن اطلاعات هواشناسی، نمایش دما و طراحی صفحه می‌نوشتید. اما با .NET، منطق اصلی (مثل اتصال به API هواشناسی) را یک بار می‌نویسید و فقط در صورت نیاز، ظاهر صفحه را برای هر پلتفرم تنظیم می‌کنید. مثلاً:

public class WeatherService
{
    public string GetWeather()
    {
        return "هوای تهران: آفتابی، 25 درجه";
    }
}

class Program
{
    static void Main()
    {
        WeatherService weather = new WeatherService();
        Console.WriteLine(weather.GetWeather());
    }
}

این کد می‌تواند پایه یک اپلیکیشن موبایل باشد که بعداً با رابط کاربری گرافیکی روی گوشی نمایش داده شود.

در نهایت، توسعه برنامه‌های موبایل در .NET نه‌تنها برای توسعه‌دهندگان حرفه‌ای، بلکه برای مبتدیان هم فرصتی عالی است. شما با یادگیری یک تکنولوژی، می‌توانید به دنیای بزرگ برنامه‌نویسی موبایل وارد شوید و پروژه‌هایی بسازید که میلیون‌ها نفر از آن استفاده کنند.

معرفی .NET MAUI

.NET MAUI (که مخفف Multi-platform App UI یا رابط کاربری برنامه‌های چندپلتفرمی است) یکی از جدیدترین و قدرتمندترین فریم‌ورک‌های ارائه‌شده توسط مایکروسافت است که به توسعه‌دهندگان اجازه می‌دهد با یک پروژه واحد، اپلیکیشن‌هایی بسازند که روی پلتفرم‌های مختلف مثل اندروید، iOS، ویندوز و مک اجرا شوند. این ابزار بخشی از اکوسیستم بزرگ .NET است و به‌عنوان جانشین Xamarin.Forms معرفی شده، اما با بهبودهای چشمگیر و ویژگی‌هایی که کار را برای توسعه‌دهندگان ساده‌تر و سریع‌تر می‌کند. هدف اصلی .NET MAUI این است که فرآیند توسعه برنامه‌های موبایل در .NET را ساده‌سازی کند و به شما اجازه دهد با کمترین زحمت، اپلیکیشن‌هایی بسازید که هم زیبا باشند، هم عملکرد خوبی داشته باشند و هم روی دستگاه‌های مختلف بدون مشکل کار کنند.

بیایید کمی عمیق‌تر به این موضوع نگاه کنیم. در دنیای برنامه‌نویسی، همیشه یک چالش بزرگ وجود داشته: چطور می‌توان یک اپلیکیشن را برای چندین پلتفرم ساخت بدون اینکه مجبور باشیم کدهای تکراری بنویسیم یا زمان زیادی صرف کنیم؟ .NET MAUI دقیقاً برای حل این مشکل طراحی شده. این فریم‌ورک به شما اجازه می‌دهد که منطق اصلی برنامه (مثل محاسبات، ذخیره داده‌ها یا اتصال به سرور) و حتی رابط کاربری را یک بار بنویسید و بعد آن را روی پلتفرم‌های مختلف اجرا کنید. این یعنی اگر یک اپلیکیشن فروشگاهی بسازید، مشتریان شما چه از گوشی اندرویدی استفاده کنند، چه آیفون، چه حتی کامپیوتر ویندوزی، می‌توانند از همان برنامه استفاده کنند بدون اینکه شما مجبور باشید برای هر کدام یک نسخه جداگانه بسازید.

حالا بیایید با یک مثال عملی شروع کنیم تا ببینید چقدر کار با .NET MAUI ساده است. فرض کنید می‌خواهید یک دکمه بسازید که وقتی کاربر روی آن کلیک می‌کند، یک پیام خوش‌آمدگویی نمایش داده شود. در .NET MAUI، این کار با ترکیب زبان XAML (برای طراحی رابط کاربری) و C# (برای منطق برنامه) انجام می‌شود. کد زیر را در فایل XAML خود می‌نویسید:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackLayout>
        <Button Text="کلیک کن" Clicked="OnButtonClicked" />
    </StackLayout>
</ContentPage>

و در فایل C# پشت آن (که معمولاً به نام کدبیند یا Code-Behind شناخته می‌شود):

namespace MyFirstMauiApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        DisplayAlert("سلام", "دکمه کلیک شد! خوش آمدید!", "باشه");
    }
}

این کدها چه کار می‌کنند؟ در XAML، یک دکمه با متن “کلیک کن” تعریف کرده‌ایم و گفته‌ایم که وقتی کلیک شد، متد OnButtonClicked اجرا شود. در فایل C#، این متد یک پیام پاپ‌آپ با عنوان “سلام” و متن “دکمه کلیک شد! خوش آمدید!” نمایش می‌دهد که کاربر می‌تواند با زدن دکمه “باشه” آن را ببندد. حالا نکته جذاب اینجاست: همین کد ساده، بدون هیچ تغییری، هم روی اندروید، هم روی iOS و هم روی ویندوز کار می‌کند! این سادگی و قدرت، دلیل اصلی موفقیت .NET MAUI در توسعه برنامه‌های موبایل در .NET است.

اما چطور این کار ممکن است؟ .NET MAUI از یک معماری هوشمند استفاده می‌کند که رابط کاربری و منطق برنامه را به لایه‌های مشترک و خاص پلتفرم تقسیم می‌کند. به این معنی که بخش‌هایی مثل دکمه‌ها، لیست‌ها و فرم‌ها به‌صورت پیش‌فرض برای همه پلتفرم‌ها یکسان هستند، اما اگر بخواهید چیزی خاص (مثل یک افکت ویژه برای iOS یا یک اعلان خاص برای اندروید) اضافه کنید، می‌توانید آن را جداگانه تنظیم کنید. این انعطاف‌پذیری باعث می‌شود که هم سرعت توسعه بالا برود و هم بتوانید تجربه کاربری بومی (Native) برای هر پلتفرم ارائه دهید.

برای شروع کار با .NET MAUI، باید چند مرحله را طی کنید:

نصب Visual Studio 2022: این محیط توسعه اصلی شماست. مطمئن شوید که نسخه Community، Professional یا Enterprise را نصب کرده‌اید و گزینه “.NET Multi-platform App UI development” را در نصب انتخاب کنید.
نصب پکیج‌ها: .NET MAUI به‌صورت پیش‌فرض با .NET 8 (یا نسخه‌های جدیدتر) کار می‌کند. می‌توانید پکیج‌های لازم را از NuGet (مدیر بسته‌های .NET) اضافه کنید.
ایجاد پروژه: در Visual Studio، یک پروژه جدید از نوع “MAUI App” بسازید. بعد از ایجاد پروژه، ساختار اولیه‌ای به شما داده می‌شود که شامل فایل‌های XAML و C# است.
تست برنامه: می‌توانید از شبیه‌سازهای داخلی Visual Studio (مثل شبیه‌ساز اندروید یا iOS) استفاده کنید تا ببینید برنامه‌تان چطور کار می‌کند.
بیایید یک مثال دیگر بزنیم تا کاربردش را بهتر ببینید. فرض کنید می‌خواهید یک برنامه ساده برای محاسبه جمع دو عدد بسازید. رابط کاربری در XAML این‌گونه خواهد بود:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <VerticalStackLayout Spacing="10" Padding="20">
        <Entry x:Name="Number1" Placeholder="عدد اول" Keyboard="Numeric" />
        <Entry x:Name="Number2" Placeholder="عدد دوم" Keyboard="Numeric" />
        <Button Text="محاسبه" Clicked="OnCalculateClicked" />
        <Label x:Name="ResultLabel" Text="نتیجه: " />
    </VerticalStackLayout>
</ContentPage>

و کد C#:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCalculateClicked(object sender, EventArgs e)
    {
        if (double.TryParse(Number1.Text, out double num1) && double.TryParse(Number2.Text, out double num2))
        {
            double result = num1 + num2;
            ResultLabel.Text = $"نتیجه: {result}";
        }
        else
        {
            DisplayAlert("خطا", "لطفاً عدد معتبر وارد کنید!", "باشه");
        }
    }
}

این برنامه دو فیلد برای ورود عدد دارد، یک دکمه برای محاسبه و یک لیبل برای نمایش نتیجه. وقتی کاربر اعداد را وارد کند و دکمه را بزند، جمع محاسبه می‌شود و نتیجه نمایش داده می‌شود. اگر ورودی اشتباه باشد، یک پیام خطا ظاهر می‌شود. این کد روی همه پلتفرم‌ها به یک شکل کار می‌کند و این نشان‌دهنده قدرت .NET MAUI در توسعه برنامه‌های موبایل در .NET است.

در مقایسه با Xamarin.Forms، .NET MAUI سریع‌تر است، ابزارهای بهتری برای دیباگینگ دارد و از قابلیت‌های جدید .NET مثل Hot Reload پشتیبانی می‌کند (یعنی می‌توانید کد را تغییر دهید و نتیجه را بلافاصله ببینید بدون اینکه برنامه را از نو اجرا کنید). همچنین، مایکروسافت قصد دارد این فریم‌ورک را به‌عنوان استاندارد اصلی برای توسعه چندپلتفرمی در آینده نگه دارد، پس یادگیری آن سرمایه‌گذاری هوشمندانه‌ای برای آینده است.

در کل، .NET MAUI با ترکیب سادگی، انعطاف‌پذیری و قدرت، به شما اجازه می‌دهد که ایده‌هایتان را سریع‌تر به واقعیت تبدیل کنید.

ایجاد اپلیکیشن‌های موبایل برای اندروید و iOS

یکی از بزرگ‌ترین و جذاب‌ترین مزیت‌های توسعه برنامه‌های موبایل در .NET این است که شما مجبور نیستید برای هر پلتفرم، مثل اندروید یا iOS، کدهای جداگانه بنویسید. با استفاده از فریم‌ورک .NET MAUI، می‌توانید یک پروژه واحد داشته باشید که همزمان برای هر دو سیستم‌عامل اندروید و iOS (و حتی ویندوز و مک) خروجی تولید کند. این قابلیت نه‌تنها زمان و تلاش شما را به شدت کاهش می‌دهد، بلکه به شما اجازه می‌دهد روی خلاقیت و کیفیت برنامه تمرکز کنید، نه روی جزئیات فنی تکراری. اما این فرآیند چطور کار می‌کند و چگونه می‌توانید از آن برای ساخت اپلیکیشن‌های خودتان استفاده کنید؟ بیایید قدم‌به‌قدم این موضوع را بررسی کنیم و با جزئیات بیشتری به آن بپردازیم.

آماده‌سازی محیط توسعه

برای شروع توسعه برنامه‌های موبایل در .NET و ایجاد اپلیکیشن برای اندروید و iOS، باید ابتدا محیط کارتان را آماده کنید. این مرحله مثل آماده کردن میز کار برای یک پروژه هنری است؛ همه ابزارها باید سر جایشان باشند تا بتوانید بدون وقفه کار کنید. مراحل اصلی عبارتند از:

نصب SDKها:

برای اندروید: نیاز به نصب Android SDK دارید. این مجموعه ابزارها توسط گوگل ارائه می‌شود و به شما امکان می‌دهد اپلیکیشن‌های اندرویدی بسازید و تست کنید. در Visual Studio، می‌توانید از قسمت “Android SDK Manager” این پکیج را نصب کنید. معمولاً نسخه‌های مختلف API (مثل API 33 برای اندروید 13) را انتخاب می‌کنید که با دستگاه‌های هدف شما سازگار باشد.
برای iOS: باید Xcode را نصب کنید که محیط توسعه رسمی اپل است. Xcode فقط روی سیستم‌عامل macOS اجرا می‌شود، پس برای خروجی گرفتن برای iOS، به یک مک نیاز دارید (یا می‌توانید از سرویس‌های ابری مثل MacinCloud استفاده کنید). Xcode شامل iOS SDK و ابزارهایی مثل Simulator برای تست برنامه است.
تنظیم شبیه‌سازها: Visual Studio به شما اجازه می‌دهد که بدون نیاز به دستگاه فیزیکی، اپلیکیشن‌تان را تست کنید. برای اندروید، می‌توانید از Android Emulator استفاده کنید که در خود Visual Studio قابل تنظیم است. مثلاً می‌توانید یک شبیه‌ساز برای گوشی Pixel 6 با اندروید 14 بسازید. برای iOS، اگر روی مک هستید، از iOS Simulator در Xcode استفاده می‌کنید که دستگاه‌هایی مثل iPhone 15 یا iPad را شبیه‌سازی می‌کند. این شبیه‌سازها به شما کمک می‌کنند ببینید برنامه‌تان روی صفحه‌ها و سیستم‌عامل‌های مختلف چطور به نظر می‌رسد و کار می‌کند.
ساخت پروژه: حالا که ابزارها آماده‌اند، وقت آن است که پروژه‌تان را بسازید. در Visual Studio 2022، گزینه “Create a new project” را انتخاب کنید و قالب “MAUI App” را پیدا کنید. بعد از نام‌گذاری پروژه (مثلاً “MyTodoApp”)، یک ساختار اولیه به شما داده می‌شود که شامل فایل‌های XAML برای رابط کاربری و C# برای منطق برنامه است. این پروژه به‌صورت پیش‌فرض برای چند پلتفرم تنظیم شده و شما فقط باید کدهای خودتان را اضافه کنید.

ساخت یک اپلیکیشن ساده: لیست کارها (To-Do List)

بیایید یک مثال عملی را بررسی کنیم تا ببینید چطور می‌توانید با .NET MAUI یک اپلیکیشن برای اندروید و iOS بسازید. فرض کنید می‌خواهید یک برنامه ساده برای مدیریت لیست کارها بسازید که کاربر بتواند وظایفش را اضافه کند و ببیند. اینجاست که قدرت توسعه برنامه‌های موبایل در .NET خودش را نشان می‌دهد.

اولین قدم، طراحی رابط کاربری با XAML است. کد زیر یک لیست ساده را نمایش می‌دهد:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackLayout Padding="20">
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>خرید نان</x:String>
                    <x:String>تماس با علی</x:String>
                    <x:String>نوشتن گزارش</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

این کد یک صفحه می‌سازد که داخل آن یک CollectionView (نوعی لیست) قرار دارد و سه کار به‌صورت ثابت نمایش داده می‌شود. اما برای اینکه برنامه کاربردی‌تر باشد، بیایید امکان اضافه کردن کار جدید را هم فراهم کنیم. کد را گسترش می‌دهیم:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackLayout Padding="20" Spacing="10">
        <Entry x:Name="TaskEntry" Placeholder="کار جدید را وارد کنید" />
        <Button Text="اضافه کن" Clicked="OnAddTaskClicked" />
        <CollectionView x:Name="TaskList">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>خرید نان</x:String>
                    <x:String>تماس با علی</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

و در فایل C#:

public partial class MainPage : ContentPage
{
    private List<string> tasks;

    public MainPage()
    {
        InitializeComponent();
        tasks = new List<string> { "خرید نان", "تماس با علی" };
        TaskList.ItemsSource = tasks;
    }

    private void OnAddTaskClicked(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(TaskEntry.Text))
        {
            tasks.Add(TaskEntry.Text);
            TaskList.ItemsSource = null; // Reset to refresh
            TaskList.ItemsSource = tasks;
            TaskEntry.Text = string.Empty; // Clear input
        }
    }
}

این کد چه کار می‌کند؟ یک فیلد متنی برای وارد کردن کار جدید، یک دکمه برای اضافه کردن و یک لیست برای نمایش کارها داریم. وقتی کاربر متنی وارد کند و دکمه را بزند، کار جدید به لیست اضافه می‌شود و لیست به‌روز می‌شود. این برنامه روی اندروید و iOS بدون تغییر کار می‌کند، چون .NET MAUI رابط کاربری را به‌صورت خودکار با هر پلتفرم هماهنگ می‌کند.

استفاده از قابلیت‌های خاص پلتفرم

هرچند بیشتر کدها مشترک هستند، گاهی نیاز دارید ویژگی‌هایی خاص به هر پلتفرم اضافه کنید. مثلاً فرض کنید می‌خواهید وقتی کار جدیدی اضافه می‌شود، یک اعلان (Notification) نمایش داده شود. برای این کار، می‌توانید از قابلیت Dependency Service یا کد خاص پلتفرم استفاده کنید. مثلاً برای اندروید:

#if ANDROID
using Android.App;
using Android.Content;

public void ShowNotification(string title, string message)
{
    var intent = new Intent(Android.App.Application.Context, typeof(MainActivity));
    var pendingIntent = PendingIntent.GetActivity(Android.App.Application.Context, 0, intent, PendingIntentFlags.UpdateCurrent);

    var builder = new Notification.Builder(Android.App.Application.Context)
        .SetContentTitle(title)
        .SetContentText(message)
        .SetSmallIcon(Resource.Drawable.icon)
        .SetContentIntent(pendingIntent);

    var notificationManager = NotificationManager.FromContext(Android.App.Application.Context);
    notificationManager.Notify(1, builder.Build());
}
#endif

این کد فقط در اندروید اجرا می‌شود و یک اعلان ساده نمایش می‌دهد. برای iOS هم می‌توانید از APIهای خاص اپل استفاده کنید. این انعطاف‌پذیری به شما اجازه می‌دهد که هم از کد مشترک بهره ببرید و هم تجربه بومی برای هر پلتفرم ارائه دهید.

گرفتن خروجی برای اندروید و iOS

بعد از نوشتن کدها، نوبت به خروجی گرفتن می‌رسد:

برای اندروید: در Visual Studio، پروژه را روی حالت “Release” تنظیم کنید و گزینه “Build” را بزنید. نتیجه یک فایل APK یا AAB (برای انتشار در گوگل پلی) خواهد بود. می‌توانید آن را روی شبیه‌ساز یا دستگاه واقعی تست کنید.
برای iOS: به یک مک و Xcode نیاز دارید. پروژه را به مک منتقل کنید، در Visual Studio for Mac یا از طریق Pair to Mac در ویندوز، آن را باز کنید و با Xcode بیلد کنید. خروجی یک فایل IPA است که می‌توانید برای App Store یا تست استفاده کنید.

چرا این روش بهتر است؟

ایجاد اپلیکیشن برای اندروید و iOS با .NET MAUI یعنی شما یک کد می‌نویسید، اما به دو (یا بیشتر) پلتفرم دسترسی دارید. این یعنی هزینه کمتر، زمان توسعه سریع‌تر و نگهداری آسان‌تر. مثلاً اگر بخواهید یک باگ را رفع کنید، فقط یک بار کد را تغییر می‌دهید، نه دو بار برای دو پروژه جداگانه. این ویژگی، توسعه برنامه‌های موبایل در .NET را به گزینه‌ای ایده‌آل برای استارتاپ‌ها، تیم‌های کوچک و حتی پروژه‌های بزرگ تبدیل کرده است.

در نهایت، با این روش می‌توانید ایده‌هایتان را سریع‌تر به دست کاربران برسانید، چه روی اندروید باشند و چه iOS، و این همان جادوی .NET MAUI است! اگر آماده‌اید، همین حالا Visual Studio را باز کنید و اولین اپلیکیشن چندپلتفرمی خودتان را بسازید

طراحی رابط کاربری واکنش‌گرا

طراحی رابط کاربری (UI) یکی از مهم‌ترین و حساس‌ترین بخش‌های توسعه برنامه‌های موبایل در .NET است، زیرا اینجاست که کاربر مستقیماً با برنامه شما تعامل می‌کند. یک رابط کاربری خوب نه‌تنها باید زیبا و جذاب باشد، بلکه باید کاربردی، ساده و قابل استفاده در شرایط مختلف باشد. در دنیای امروز، کاربران از دستگاه‌های متنوعی مثل گوشی‌های هوشمند با صفحه‌های کوچک، تبلت‌ها با صفحه‌های بزرگ‌تر و حتی دسکتاپ‌ها استفاده می‌کنند. اینجا مفهوم رابط کاربری واکنش‌گرا (Responsive) وارد می‌شود. یک رابط کاربری واکنش‌گرا باید بتواند خودش را با اندازه‌ها و جهت‌های مختلف صفحه (عمودی یا افقی) تطبیق دهد و همیشه بهترین تجربه را به کاربر ارائه کند. .NET MAUI با ارائه ابزارهایی مثل Grid، StackLayout و قابلیت‌های پیشرفته دیگر، این کار را برای توسعه‌دهندگان بسیار ساده‌تر کرده است. بیایید با جزئیات بیشتری به این موضوع بپردازیم و ببینیم چطور می‌توانید رابط کاربری‌هایی بسازید که هم زیبا باشند و هم انعطاف‌پذیر.

چرا رابط کاربری واکنش‌گرا مهم است؟

تصور کنید یک فرم ورود در اپلیکیشن‌تان طراحی کرده‌اید که روی گوشی‌های کوچک عالی به نظر می‌رسد، اما وقتی روی تبلت باز می‌شود، همه المان‌ها در گوشه‌ای جمع می‌شوند و بقیه صفحه خالی می‌ماند. یا برعکس، روی دسکتاپ آن‌قدر بزرگ می‌شود که کاربر باید مدام اسکرول کند. این تجربه کاربری ضعیف می‌تواند کاربران را ناامید کند و حتی باعث شود اپلیکیشن شما را کنار بگذارند. در توسعه برنامه‌های موبایل در .NET، هدف این است که با یک کد واحد، تجربه‌ای یکپارچه روی همه دستگاه‌ها ارائه دهید. .NET MAUI این امکان را می‌دهد که رابط کاربری شما به‌صورت خودکار با اندازه صفحه و رزولوشن دستگاه سازگار شود، بدون اینکه نیاز به کدنویسی جداگانه برای هر دستگاه داشته باشید.

ابزارهای اصلی: Grid و StackLayout

.NET MAUI دو ابزار اصلی برای چیدمان المان‌ها ارائه می‌دهد که برای طراحی واکنش‌گرا بسیار کاربردی هستند:

StackLayout: این ابزار المان‌ها را به‌صورت عمودی یا افقی در یک خط قرار می‌دهد. ساده است و برای چیدمان‌های خطی مثل لیست‌ها یا فرم‌های کوچک عالی عمل می‌کند.
Grid: یک سیستم شبکه‌ای قدرتمند است که به شما اجازه می‌دهد المان‌ها را در ردیف‌ها و ستون‌ها بچینید، مثل یک جدول. این ابزار برای طراحی‌های پیچیده‌تر و واکنش‌گرا بسیار مناسب است.
بیایید با یک مثال عملی شروع کنیم. فرض کنید می‌خواهید یک فرم ورود ساده بسازید که شامل فیلد نام کاربری، رمز عبور و دکمه ورود باشد. با استفاده از Grid می‌توانید این کار را انجام دهید:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Padding="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Entry Placeholder="نام کاربری" Grid.Row="0" Margin="0,10" />
        <Entry Placeholder="رمز عبور" IsPassword="True" Grid.Row="1" Margin="0,10" />
        <Button Text="ورود" Grid.Row="2" Margin="0,10" />
    </Grid>
</ContentPage>

این کد چه کار می‌کند؟

Grid یک شبکه با سه ردیف تعریف می‌کند که هر ردیف به اندازه محتوای خودش (با Height=”Auto”) تنظیم می‌شود.
هر المان (فیلد نام کاربری، رمز عبور و دکمه) در یک ردیف جداگانه قرار می‌گیرد.
Margin فاصله بین المان‌ها را تنظیم می‌کند تا فرم مرتب و خوانا باشد.
چرا این طراحی واکنش‌گراست؟ چون اگر صفحه بزرگ‌تر شود (مثلاً روی تبلت)، المان‌ها همچنان در جای خودشان می‌مانند و فضای خالی به‌طور یکنواخت پر می‌شود. اگر بخواهید چیدمان افقی هم داشته باشید، می‌توانید ستون هم اضافه کنید:

<Grid Padding="20">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Text="نام کاربری" Grid.Row="0" Grid.Column="0" />
    <Entry Placeholder="نام کاربری" Grid.Row="0" Grid.Column="1" />
    <Label Text="رمز عبور" Grid.Row="1" Grid.Column="0" />
    <Entry Placeholder="رمز عبور" IsPassword="True" Grid.Row="1" Grid.Column="1" />
</Grid>

اینجا دو ستون با عرض مساوی (Width=”*”) داریم که لیبل‌ها در ستون اول و فیلدها در ستون دوم قرار می‌گیرند. اگر صفحه کوچک باشد، ستون‌ها فشرده می‌شوند و اگر بزرگ باشد، باز می‌شوند، بدون اینکه نظم به هم بریزد.

استفاده از RelativeLayout و AbsoluteLayout

علاوه بر Grid و StackLayout، ابزارهای دیگری هم برای موقعیت‌دهی دقیق‌تر وجود دارند:

RelativeLayout: به شما اجازه می‌دهد المان‌ها را نسبت به هم یا نسبت به صفحه والد قرار دهید. مثلاً دکمه‌ای را همیشه در گوشه پایین صفحه نگه دارید.
AbsoluteLayout: برای قرار دادن المان‌ها در مختصات دقیق (مثل x و y) استفاده می‌شود، که برای طراحی‌های خاص مثل بازی‌ها یا انیمیشن‌ها مفید است.

مثال با RelativeLayout:

<RelativeLayout>
    <Button Text="ثبت" 
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-50}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9, Constant=-50}" />
</RelativeLayout>

این دکمه همیشه در نزدیکی پایین و مرکز صفحه قرار می‌گیرد، حتی اگر اندازه صفحه عوض شود.

انیمیشن‌ها برای تجربه کاربری بهتر

یک رابط کاربری واکنش‌گرا فقط به چیدمان محدود نمی‌شود؛ تعامل و جذابیت هم مهم است. .NET MAUI از انیمیشن‌ها پشتیبانی می‌کند تا اپلیکیشن‌تان زنده‌تر به نظر برسد. مثلاً فرض کنید می‌خواهید وقتی کاربر روی دکمه ورود کلیک می‌کند، دکمه کمی بزرگ‌تر شود و بعد به حالت اولیه برگردد:

private async void OnLoginButtonClicked(object sender, EventArgs e)
{
    var button = sender as Button;
    await button.ScaleTo(1.2, 250, Easing.CubicIn); // بزرگ شدن در 250 میلی‌ثانیه
    await button.ScaleTo(1, 250, Easing.CubicOut); // برگشت به حالت اولیه
    // ادامه منطق ورود...
}

این کد را به دکمه فرم ورود وصل کنید:

<Button Text="ورود" Grid.Row="2" Clicked="OnLoginButtonClicked" />

حالا با هر کلیک، دکمه یک انیمیشن نرم و جذاب اجرا می‌کند. می‌توانید انیمیشن‌های پیچیده‌تر مثل چرخش، جابه‌جایی یا محو شدن را هم اضافه کنید:

await button.RotateTo(360, 500); // چرخش 360 درجه در 500 میلی‌ثانیه
await button.FadeTo(0.5, 200); // کم‌رنگ شدن
await button.FadeTo(1, 200); // برگشت به حالت عادی

تطبیق با جهت صفحه (Portrait و Landscape)

یک رابط کاربری واکنش‌گرا باید با تغییر جهت صفحه هم سازگار باشد. مثلاً در حالت عمودی (Portrait)، فرم ورود شما عمودی است، اما در حالت افقی (Landscape)، می‌خواهید فیلدها کنار هم باشند. می‌توانید از OnSizeAllocated استفاده کنید:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    if (width > height) // حالت افقی
    {
        MyGrid.ColumnDefinitions.Clear();
        MyGrid.RowDefinitions.Clear();
        MyGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
        MyGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
        MyGrid.Children[0].SetValue(Grid.ColumnProperty, 0); // نام کاربری
        MyGrid.Children[1].SetValue(Grid.ColumnProperty, 1); // رمز عبور
    }
    else // حالت عمودی
    {
        MyGrid.ColumnDefinitions.Clear();
        MyGrid.RowDefinitions.Clear();
        MyGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        MyGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
        MyGrid.Children[0].SetValue(Grid.RowProperty, 0);
        MyGrid.Children[1].SetValue(Grid.RowProperty, 1);
    }
}

این کد چیدمان را بر اساس جهت صفحه تغییر می‌دهد و تجربه‌ای پویا ارائه می‌کند.

نکات تکمیلی برای طراحی بهتر

فاصله‌گذاری (Padding و Margin): فاصله مناسب بین المان‌ها باعث می‌شود رابط کاربری مرتب و حرفه‌ای به نظر برسد.
فونت و اندازه متن: از واحدهای نسبی (مثل FontSize=”Large”) استفاده کنید تا متن روی صفحه‌های مختلف خوانا بماند.
رنگ‌ها و تم‌ها: .NET MAUI از تم‌های روشن و تیره پشتیبانی می‌کند. می‌توانید با Application.Current.UserAppTheme تم را تنظیم کنید.
در نهایت، طراحی رابط کاربری واکنش‌گرا در توسعه برنامه‌های موبایل در .NET یعنی ترکیبی از چیدمان هوشمند، انعطاف‌پذیری و تعامل جذاب. با تمرین و استفاده از ابزارهای .NET MAUI، می‌توانید اپلیکیشن‌هایی بسازید که روی هر دستگاهی عالی به نظر برسند و کاربران را شگفت‌زده کنند!

نتیجه‌گیری

توسعه برنامه‌های موبایل در .NET با ابزارهایی مثل .NET MAUI، رویکردی نوین و کارآمد برای ساخت اپلیکیشن‌هایی است که می‌توانند به‌صورت یکپارچه روی پلتفرم‌های مختلف مانند اندروید، iOS، ویندوز و مک اجرا شوند. در این مقاله، از مفاهیم پایه مثل آماده‌سازی محیط توسعه و نوشتن اولین کد شروع کردیم و به مباحث پیشرفته‌تر مانند طراحی رابط کاربری واکنش‌گرا و استفاده از انیمیشن‌ها رسیدیم. این مسیر نشان داد که چگونه می‌توانید با یک کدبیس مشترک، برنامه‌هایی قدرتمند و زیبا خلق کنید که هم زمان توسعه را کاهش می‌دهند و هم تجربه کاربری باکیفیتی ارائه می‌دهند. اگر به دنبال راهی هستید که هم برای مبتدیان قابل فهم باشد و هم برای حرفه‌ای‌ها امکانات گسترده‌ای فراهم کند، توسعه برنامه‌های موبایل در .NET انتخابی بی‌نظیر است. با تمرین و استفاده از منابع موجود، می‌توانید به سرعت مهارت‌های خود را ارتقا دهید و اپلیکیشن‌هایی بسازید که در دنیای واقعی تأثیرگذار باشند. پس ابزارهایتان را آماده کنید و وارد این دنیای هیجان‌انگیز شوید!

آموزش توسعه برنامه‌های موبایل در .NET

دیدگاه های شما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *