توسعه برنامه های Cross Platform با Xamarin Forms & Bit Framework - قسمت سوم
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: هفت دقیقه

در قسمت قبل، محیط توسعه نرم افزار مد نظرمان را ایجاد کردیم و توانستیم پروژه پیش فرض Xamarin forms را بیلد کنیم. حالا قصد داریم تا یک مثال ساده را با هم بررسی کنیم و آن را بر روی ویندوز تست کنیم. در قسمت بعدی نیز همین مثال ساده را بر روی Android و در قسمت بعدتر نیز بر روی iOS تست می‌کنیم. پس از اطمینان از اینکه امکان تست برنامه را بر روی هر سه پلتفرم یافته‌اید، بر روی آموزش موارد بیشتری از Xamarin Forms تمرکز می‌کنیم.
برای شروع، Xaml Live را از Visual Studio Marketplace دانلود کنید.
سپس در صورتیکه ابزار git را ندارید، آن را نیز دانلود و نصب کنید و بعد دستور git clone https://github.com/ysmoradi/XamApp را در Command line وارد کنید. دقت کنید پروژه را در جایی Clone نکنید که مسیر فولدر آن طولانی شود. این پروژه، یک پروژه آماده برای تست و تغییر است و ما برای بررسی نحوه اجرا آن در UWP - Android - iOS‌ از آن استفاده می‌کنیم. خود کدها در جلسات بعدتر بررسی خواهند شد. تنها چیزی که الآن اهمیت دارد اطمینان از راه اندازی شدن محیط توسعه نرم افزار شما به بهترین شکل ممکن است.
   
با ساختار پروژه و جزئیات آن در گذر زمان بیشتر آشنا می‌شویم، ولی به صورت کلی این Solution دارای 4 پروژه است:
XamApp - XamApp.Android - XamApp.iOS - XamApp.UWP
- در XamApp، تقریبا تمامی پروژه نوشته می‌شود. این مورد شامل منطق برنامه است که با CSharp نوشته می‌شود و ظاهر برنامه که با XAML نوشته می‌شود. اگر چه که می‌توان ظاهر برنامه را نیز با CSharp زد، انجام این کار به هیچ وجه توصیه نمی‌شود. در مورد Xaml نیز بعد از راه اندازی این مثال در Windows-Android-iOS صحبت خواهیم کرد.
- XamApp.Android پروژه‌ای است که اگر Set as start up project شود، به شما اجازه تست کدهای داخل XamApp را بر روی گوشی یا Emulator‌های اندرویدی می‌دهد. همچنین از طریق این پروژه می‌توانید پابلیش apk را بگیرید و به امکانات پایه Android مانند Activity - Fragment - Android XML - Intent و ... در همان زبان CSharp دسترسی داشته باشید. استفاده از این پروژه، مطلب قسمت بعدی این دوره آموزشی است.
- XamApp.iOS پروژه‌ای است که اگر Set as start up project شود، به شما اجازه تست کدهای داخل XamApp را بر روی گوشی یا Emulator‌های iOS ای می‌دهد. همچنین از طریق این پروژه می‌توانید پابلیش ipa را بگیرید و به امکانات پایه iOS مانند Delegate - Storyboard و ... در همان زبان CSharp دسترسی داشته باشید. در آموزش بعد از آموزش Android، به iOS نیز خواهیم پرداخت.
- XamApp.UWP پروژه‌ای است که اگر Set as start up project شود، به شما اجازه تست کدهای داخل XamApp را بر روی ویندوز خودتان می‌دهد. همچنین از طریق این پروژه می‌توانید پابلیش appxbundle یا msi را بگیرید و به امکانات پایه Windows در همان زبان CSharp دسترسی داشته باشید. UWP مخفف Universal windows platform است.

برای شروع پروژه‌های XamApp.Android و XamApp.iOS را Unload کنید، زیرا در این قسمت با آنها کاری نداریم. همچنین پروژه XamApp.UWP را Set as start up project کنید. 
فقط برای یکبار از منوی Tools در ویژوال استدیو، Options را باز کنید و در قسمت جستجوی آن، عبارت Intellitrace را بنویسید و اگر چیزی پیدا شد، تیک Enable Intellitrace را بردارید تا غیر فعال شود. همچنین مجدد Suppress JIT optimization را جستجو کنید و تیک آن را بزنید تا فعال شود.
دکمه F5 را بزنید و برنامه را اجرا کنید. یک دکمه می‌بینید که Text آن عبارت + است. اگر بر روی آن کلیک کنید، می‌بینید که متن Label بالای آن می‌شود Button tapped 1 time
فایل HelloWorldView.xaml را در فولدر Views در پروژه XamApp، پیدا کنید و نگاهی به کد Label و Button بیاندازید که درون StackLayout هستند و StackLayout خود داخل ContentPage است که در نتیجه صفحه اول ما کل فضایی را که دارد، به StackLayout اختصاص یافته‌است.
    <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
        <Label Text="{Binding StepsCount, StringFormat='{}Button tapped {0} times!'}" />
        <Button Command="{Binding IncreaseStepsCountCommand}" Text="+" />
    </StackLayout>
StackLayout نوعی Layout ساده‌است که بسته به تنظیم Orientation اش، می‌تواند Vertical یا Horizontal باشد. آیتم‌های داخل‌اش را که در این مثال Label و Button هستند، یا عمودی یا افقی می‌چیند که پیش فرض‌اش عمودی است. Horizontal Options و Vertical Options اش هم که هر دو Center هستند باعث می‌شود آیتم‌ها دقیقا در وسط StackLayout بنشینند. چون تمامی فضای ContentPage به StackLayout اختصاص یافته‌است، عملا Label و Button در وسط برنامه ظاهر می‌شوند.
Label ما دارای Text ای است که به StepsCount متصل یا Bind شده است ( به کمک Binding StepsCount).
StepsCount عددی است که در ابتدا صفر است و با کلیک دکمه، مقدار آن یکی یکی افزایش می‌یابد. این کد در HelloWorldViewModel.cs و به زبان CSharp نوشته شده‌است. StringFormat نیز در اینجا عملکردی معادل StringFormat در CSharp را دارد.
‌Button دارای Command ای است که به متدی در CSharp به نام IncreaseStepsCount متصل شده‌است.
حال نگاهی به کد CSharp بیندازیم:
    public class HelloWorldViewModel : BitViewModelBase
    {
        public int StepsCount { get; set; }

        public BitDelegateCommand IncreaseStepsCountCommand { get; set; }

        public HelloWorldViewModel()
        {
            IncreaseStepsCountCommand = new BitDelegateCommand(IncreaseStepsCount);
        }

        async Task IncreaseStepsCount()
        {
            StepsCount += 1;
        }
    }
ظاهر برنامه در فایل Xaml ای نوشته شده به نام HelloWorldView.xaml و منطق برنامه در کلاسی است به نام HelloWorldViewModel که این View و ViewModel انتهای نام این دو، از معماری MVVM یا Model - View - View Model می‌آید که در سال 2006~2007 و با معرفی WPF کم کم معروف شد و ما نیز از آن در این مثال داریم استفاده می‌کنیم.
StepsCount که در View به Text آن Label وصل شده بود، در CSharp یک Property از جنس int است. Command ما با نام IncreaseStepsCountCommand به متدی وصل شده‌است که کارش اضافه کردن یکی یکی StepsCount است.

در حالت عادی اگر بخواهید این برنامه را تغییر دهید که مثلا به جای یکی یکی بالا بردن StepsCount، آن را یکی یکی کم کند، ابتدا برنامه را Stop می‌کنید و سپس در Xaml برای Button مربوطه، Text را از + به - تغییر می‌دهید. همچنین کد CSharp را نیز عوض می‌کنید که می‌شود:
StepsCount -= 1
و مجددا F5 را می‌زنید. این روش قطعا خیلی Productive نیست و زمان زیادی را از شما می‌گیرد. شما می‌توانید با Break کردن اجرای برنامه به تغییر کدهای CSharp بپردازید. همچنین بدون Break کردن می‌توانید کدهای Xaml را تغییر دهید و به این روی، خیلی سریع‌تر پروژه را پیش ببرید.
با مشاهده این ویدئو می توانید درک بهتری از عملکرد Edit & continue داشته باشید. دقت کنید که در زمان تغییر ظاهر و منطق، اگر مثلا عدد، تا 17 افزایش داده شده بود برای تست، روی 17 می‌ماند و به صفر بر نمی‌گردد. در واقع کل برنامه Reload نمی‌شود و این تفاوت Edit & continue با Hot reload موجود در سایر ابزارهاست.

همچنین با کوچک و بزرگ کردن برنامه اجرا شده به سایز گوشی‌ها و تبلت‌های مختلف عملا می‌توانید برنامه را در سایزهای مختلف تست کنید. توجه داشته باشید که در Xamarin Forms مقدار دهی به طول و عرض و ... در تمامی پلتفرم‌ها و Device‌ها فارغ از Resolution یکسان است و در همه جا Width=64 عملا به یک سانتی متر اشاره دارد. علاوه بر این بدون اینکه صفحه مانیتور شما Touch باشد، می‌تواند حتی Touch را نیز تست کنید که برای این کار می‌توانید از Simulator استفاده کنید. به این صورت که به جای Local Machine گزینه Simulator را انتخاب می‌کنید.
 

 

برای پابلیش پروژه نیز می‌توانید از آموزش‌های بر روی وب استفاده کنید که شامل ارائه برنامه به استفاده کنندگان با یا بدون Microsoft Store است که از فرمت نه چندان جالب appxbundle استفاده می‌کند و ما از این آموزش عبور می‌کنیم و به ذکر این نکته بسنده می‌کنیم که نسخه بعدی Visual Studio 2017 یعنی 15.9 قابلیت ساختن msix یا Windows installer را نیز دارد که از هر چیزی بهتر است و برای پابلیش بهتر است تا ارائه نسخه Stable بعدی ویژوال استودیو که احتمالا در طی کمتر از یک ماه دیگر ارائه می‌شود، صبر کنید. دقت کنید علاوه بر کامپیوتر، لپ تاپ و تبلت‌های ویندوزی، برنامه‌ی شما بر روی XBox نیز می‌تواند کار کند.

در قسمت بعدی، همین پروژه را بر روی Android نیز اجرا می‌کنیم.

  • #
    ‫۵ سال و ۱۱ ماه قبل، چهارشنبه ۲۵ مهر ۱۳۹۷، ساعت ۰۲:۱۵
    فقط برای یکبار از منوی Tools در ویژوال استدیو، Options را باز کنید و در قسمت جستجوی آن، عبارت Intellitrace را بنویسید و اگر چیزی پیدا شد، تیک Enable Intellitrace را بردارید تا غیر فعال شود. همچنین مجدد Suppress JIT optimization را جستجو کنید و تیک آن را بزنید تا فعال شود. 
    میشه این بخش رو بیشتر توضیح بدید برای چه منظور این کار رو میکنیم؟
    • #
      ‫۵ سال و ۱۱ ماه قبل، چهارشنبه ۲۵ مهر ۱۳۹۷، ساعت ۰۳:۲۲
      بله. Intellitrace با Edit & Continue قسمت CSharp (و نه XAML) مشکل داره. البته این توی آپدیت بعدی ویژوال استدیو حل شده. Intellitrace خودش خیلی امکان مهم و جالبی هست. هم Network monitor هست که مثلا Http Client داره از کلاینت چه Request هایی می‌زنه و هم کلی امکانات خفن دیگه.

      در مورد Suppress JIT ... هم مسئله اینه که الآن کتابخونه‌های .NET ای دارن موقعی که Nuget package می‌سازن، سورس کدهاشون رو هم داخلشون embed می‌کنن تا موقع دیباگ بدون استفاده از چیزی مثل Resharper بتونید توی کدهاشون Step in کنید با F11 و داخل کدهای اون‌ها رو هم اگه خواستید دیباگ کنید که خیلی فوق العاده است. این امکان به صورت پیش فرض روی پروژه‌های DotNetCore کار می‌کنه، اما روی FullDotNetFramework و UWP (با این که پایه UWP هم DotNetCore هست) باید این Suppress JIT ... رو بزنید تا این امکان به درستی کار کنه. در واقع با غیر فعال سازی Optimization‌های JIT برای کدها در زمان Debug باعث از بین نرفتن این قابلیت دیباگ کتابخونه‌های 3rd party می‌شوید. این مورد بر خلاف مورد قبلی اصلا حالت هزینه به فایده نداره و فقط فایده است و انجام اش بدید. فقط هم برای دیباگ هست و ربطی به سرعت اجرای برنامه در محیط مشتری نداره.
      • #
        ‫۵ سال و ۱۱ ماه قبل، چهارشنبه ۲۵ مهر ۱۳۹۷، ساعت ۱۳:۱۳
        سپاس از راهنمایی
        یه سوال دیگه این امکان برای همه نوع پروژه هست؟ یعنی پروژه تحت وب یا ویندوز حتی موبایل هم میشه از امکاناتش استفاده کرد؟
        • #
          ‫۵ سال و ۱۱ ماه قبل، چهارشنبه ۲۵ مهر ۱۳۹۷، ساعت ۱۵:۳۰
          WPF - UWP کاملا Edit & continue دارن برای منطق CSharp و ظاهر Xaml
          Android - iOS هم Edit & continue دارن، ولی فقط برای ظاهر Xaml و نه برای CSharp
          MVC هم Edit & continue داره برای منطق CSharp ای، ولی UI اش به صورت Hot reload به روز می‌شه
          Api که فقط منطق داره و UI نداره و قسمت منطق اش Edit & continue داره.
  • #
    ‫۵ سال و ۱۱ ماه قبل، چهارشنبه ۲۵ مهر ۱۳۹۷، ساعت ۲۳:۴۲
    دکمه F5 را بزنید و برنامه را اجرا کنید. یک دکمه می‌بینید که Text آن عبارت + است.   

    سلام :)
    اگر این آموزش برای مبتدی‌هاست:
    من پروژه رو برای اندروید و ios ایجاد کردم و چنین دکمه‌، لیبل و عملکردی به صورت پیش‌فرض در Template پروژه نیست. به نظر میاد کاربر باید به صورت پیشفرض چند خط پایین بره، کنترلها رو اضافه کنه، کد رو بنویسه و چند خط بالا بیاد و از خط دکمه f5 شروع کنه به ادامه مقاله! 
    همچنین خوبه که توضیحی دقیقتر برای کلاس  HelloWorldViewModel ارائه بشه.  فکر کنم در آموزش قدم به قدم نیاز است هر مرحله که شما انجام میدید توضیح و آموزش داده بشه. مثلا  BitViewModelBase چی هست؟! و اینکه چرا به این صورت در Xamarin.Form رویدادها به دکمه‌ها نسبت داده میشه. به نظرم در بخشی از آموزش، مطالب دقیق گفته میشه و برای بعضی دیگه خیر.

    شاید خوب باشه در ابتدا گفته بشه سطح آموزش و پیش‌نیازها چیه. من دانش کافی از XAML , Csharp دارم ولی به عنوان یک مبتدی وقتی بخوام از این فناوریها در یک مبحث جدید و متفاوت استفاده کنم احتمالا سوالات زیادی پیش میاد که ممکنه برای نویسنده مقاله بدیهی به نظر برسه.

    موفق باشید :)
    • #
      ‫۵ سال و ۱۱ ماه قبل، پنجشنبه ۲۶ مهر ۱۳۹۷، ساعت ۰۰:۰۲
      صحبت شما درسته. در اکثر آموزش‌های Xamarin اعم از زبان اصلی یا فارسی نیز همین روش استفاده شده. ولی تجربه ای که من داشتم این بوده، فرد مطلب رو که دقیقا و به درستی Step by step بوده رو می‌خونه، بعد می‌ره و

      ۱- موقع نصب به مشکل بر می‌خوره.
      ۲- اولین پروژه رو حتی نمی‌تونه بیلد کنه!
      ۳- نصب می‌کنه، بیلد هم می‌کنه، بعد هر بار که کد رو تغییر می‌ده می‌بینه که چقدر کنده و کلی طول می‌کشه نتیجه تغییرش رو ببینه.
      ۴- به زحمت فرمی رو توسعه می‌ده و بعد پابلیش می‌کنه و بعد می‌بینه حجم Apk شده ۳۰ مگ!
      در هر یک از این چهار مورد ما ریزش افرادی رو داریم که می‌خوان با Xamarin کار کنن، چون CSharp کار هستن و دوست دارن CSharp رو. ولی با این مشکلات فراری می‌شن.
      من تو آموزش ام صریحا می‌گم که مثلا "در مورد Xaml نیز بعد از راه اندازی این مثال در Windows-Android-iOS صحبت خواهیم کرد."
      چرا که می‌خوام اول ببینه نصب اش احتیاج به ۲۵ گیگ دانلود نداره، و اگه داره بیش از ۵ گیگ می‌گیره اشکال داره تنظیمات نصب اش. می‌خوام ببینه که اولین پروژه رو می‌تونه به راحتی بیلد کنه. می‌خوام ببینه که Edit & continue داره و ارزش داره کارش روی UWP، حتی اگه مشتری اش فقط ازش درخواست نسخه Android / iOS کرده. تو قسمت بعدی هم می‌خوام ببینه که با ۷ مگ هم می‌تونه خروجی Apk داشته باشه. و بعد ببینه که روی iOS هم می‌تونه تست کنه. از این مرحله به بعد شاید به آموزش‌های من هم احتیاج نداشته باشه، کلی آموزش خوب برای Xaml و Prism و MVVM و CSharp هست.
      من انتظارم اینه که فرد مبتدی بتونه فقط Text اون دکمه رو از + به - تغییر بده و دستور CSharp رو هم در حد یه خط عوض کنه. همین!
      مثال ام رو هم دقیقا از صفحه اول Flutter کپی کردم. Flutter هم در صفحه اول اش نمی‌گه که Widget چیه و BuildContent چیه و Scaffold چیه. فقط می‌خواد نشون بده خیلی راحت می‌شه باهاش کد زد و یه جورایی بگه خیالت راحت.
      من تو آموزش نگفتم که کد رو به Template پیش فرض Xamarin اضافه کنید، بلکه یه پروژه آماده به اجرا رو از GitHub درخواست کردم که Clone کنید و دو خط اش رو تغییر بدید. وگرنه حتی درک Template پیش فرض خود Xamarin forms هم احتیاج به توضیح داره برای فرد مبتندی و ساختار ساده ای نداره.
      بعد از راه اندازی Android / iOS به آموزشی که شما گفتید بر می‌گردم و شروع می‌کنم می‌گم Layout‌ها چی هستن، Control‌‌ها چی هستن، View Model چیه، به سرور چجوری وصل بشیم، Entity framework core رو چجوری استفاده کنیم و از کنترل‌های Syncfusion چجوری استفاده کنیم و ... Step by step، ولی می‌دونیم که دیگه همه می‌تونن تست کنن و ته دلشون نمی‌لرزه و شاکی نیستن از این که چرا اون کنده و چرا اون سایزش زیاده و ...
      ممنون از این که این دوره رو پیگیری می‌کنید. من واقعا بابت نقد مودبانه تون ممنونم (: الآن هم اگه مشکلی تو اجرا دیدید بگید که من نکته اش رو اضافه کنم. این موردی که توضیح دادم رو سعی کردم در متن آموزش کمی Bold کنم.
  • #
    ‫۵ سال و ۱۱ ماه قبل، پنجشنبه ۲۶ مهر ۱۳۹۷، ساعت ۲۱:۰۰
    سلام :)
    نمونه برنامه‌ای که گذاشتید رو کلون کردم، برای اجرا نیاز به بسته runtime.win10-x86.microsoft.net.uwpcoreruntimesdk.2.1.2 داره، بدون VPN با VPN و حتی به صورت دستی (به این دلیل که باز نیاز به دانلود بخشهای دیگه‌ای داره) قابل نصب نیست. همچنین از اینترت خونه، همراه اول و رایتل هم امتحان کردم! پیام خطای Failed To Download میده. در نتیجه برنامه بیلد نمیشه.
    آیا راه حلی مانده که امتحان کنم، یا تنها راه سعی و تلاش در ساعتهای مختلفه؟ آیا راه حلی وجود داره که این بسته رو به صورت کامل گرفت و دستی نصب کرد؟ 
    ممنون :)
    • #
      ‫۵ سال و ۱۱ ماه قبل، پنجشنبه ۲۶ مهر ۱۳۹۷، ساعت ۲۱:۰۲
      اون پروژه پیش فرض Xamarin Forms رو تونستید بیلد کنید؟ یا یه پروژه ساده UWP‌؟
      • #
        ‫۵ سال و ۱۱ ماه قبل، پنجشنبه ۲۶ مهر ۱۳۹۷، ساعت ۲۲:۱۷
        برای پروژه پیشفرض هم همین بسته رو نیاز داره، و البته چند دقیقه پیش و بدون اغراق بعد از 6 ساعت (که هر نیم ساعت دو سه بار امتحان میکردم) این بسته نصب شد. اگر بسته نصب شده کش نشه احتمالا برای هر پروژه همین مشکل وجود داره، مگر اینکه مثلا ۶ صبح امتحان کنم! 
        الان پروژه بیلد شد.
        ممنون از توجه شما :) 
        • #
          ‫۵ سال و ۱۱ ماه قبل، پنجشنبه ۲۶ مهر ۱۳۹۷، ساعت ۲۲:۲۰
          خواهش (: خوشبختانه فایل‌ها Cache می‌شن. میآن تو این فولدر
          C:\Users\YourUserName\.nuget\packages 
          محتوای این فولدر به کسی بدید هم Ok هست. می‌تونه استفاده مجدد بشه.
  • #
    ‫۵ سال و ۱۰ ماه قبل، شنبه ۵ آبان ۱۳۹۷، ساعت ۰۳:۱۱
    به جای Xaml live، می‌تونید از Xamarin live reload  نیز استفاده کنید. بعد از نصب، در هر بار اجرای ویژوال استدیو، یکی از فایل‌های با پسوند xaml را باز کرده و از نوار زرد رنگ، دکمه Connect را بزنید.

  • #
    ‫۵ سال و ۱۰ ماه قبل، سه‌شنبه ۸ آبان ۱۳۹۷، ساعت ۱۶:۴۵

    در صورتی که به علت کیفیت پایین اینترنت، هر بار بیلد کردن پروژه عملا به بن بست می‌رسد و حتی با چند دقیقه صبر کردن هم تمام نمی‌شود، می‌توانید از منوی Tools در ویژوال استدیو، به Options رفته و سپس از قسمت Nuget Package Manager، تیک گزینه Automatically check for missing packages during build in Visual Studio رو بردارید. 



  • #
    ‫۵ سال و ۱۰ ماه قبل، پنجشنبه ۱۰ آبان ۱۳۹۷، ساعت ۱۶:۲۵
    در صورت کار نکردن edit & continue:
    از منوی Tools در ویژوال استدیو، Options را باز کنید و در قسمت جستجوی آن، عبارت Intellitrace را بنویسید و اگر چیزی پیدا شد، تیک Enable Intellitrace را بردارید تا غیر فعال شود. همچنین مجدد Suppress JIT optimization را جستجو کنید و تیک آن را بزنید تا فعال شود. همچنین اگه مشکل پابرجا موند، پروژه‌های Android/iOS را un load کرده و ویژوال استدیو را ببندید و باز کنید و مجدد تست کنید.
  • #
    ‫۵ سال و ۷ ماه قبل، دوشنبه ۱ بهمن ۱۳۹۷، ساعت ۱۶:۳۳
    زمانی که شما قصد دارید نسخه UWP را به مشتری تحویل دهید، در قسمت تنظیمات UWP، این که Min Version را روی 16299 و Target Version را روی بالاترین عدد ممکن (17763 در لحظه نگارش این نظر) بگذارید، حرکت درستی است. ولی اگر از UWP فقط برای توسعه راحت‌تر نرم افزار استفاده می‌کنید، Min & Target را روی برابر با Build Number ویندوز خود بگذارید. برای مثال اگر ویندوز شما 17134 است، هر دو را روی 17134 بگذارید. (لینک مشاهده نحوه تغییر که ممکن است برای دیدن عکس‌های آن نیاز به ابزارهای دور زدن تحریم داشته باشید)

    همچنین در صورتی که در استفاده از Xamarin Live Reload یا Xaml Live دچار مشکل شدید، خاموش کردن Firewall و از نو اجرا کردن Visual Studio و تست مجدد نیز ایده خوبی است.