از امروز می خواهیم آموزش برنامه نویسی یکپارچه(UWP) را به زبان فارسی شروع کنیم. این آموزش ها بر پایه سی شارپ و XAML می باشد.
توی کتاب پیشین که برای ویندوزفون 8.1 نوشته شده بود، سی شارپ نیز آموزش داده بودم برای همین هم توی این کتاب سی شارپ آموزش داده نمیشه و فرض بنده بر این هست که شما تا حدودی با سی شارپ آشنایی دارید و می توانید کدهای نوشته شده آنرا بخوانید و درک کنید. البته بعضی از کدها توضیح دار خواهند بود.
اهداف ما بر این است که برنامه نویس های جامعه ویندوزی را افزایش دهیم.
اگر مشکلی پیش نیاید، آموزش ها هفتگی یا حداکثر هر ماه به روز رسانی می شوند.
امیدوارم با ما همراه باشید...
Universal Windows Platform یا به اختصارUWP به معنای پلتفرم یکپارچه ویندوز است، یکپارچه شدن کدها و نوشتن یکبار کد و خروجی گرفتن از آن برای ویندوز و ویندوز فون از زمان ویندوز و ویندوز فون 8.1 شروع شد، در پروژه یکپارچه ویندوز/فون 8.1 که به WinRT نیز معروف است، هنگامی که یک راه حل ایجاد میکردیم سه پروژه ایجاد میشد، یکی ویندوزی، یکی ویندوزفونی و دیگری نیز پروژه ای به نامShared یا مشترک بود که اگر کد، عکس یا فایل، صفحه جدیدی را در پروژه Shared ایجاد می کردیم در هر دو پروژه قابل استفاده بودند، همچنین نیز می توانستیم برای هر کدام در پروژه های خود(پروژه ویندوزی یا ویندوزفونی) کدهایی را بنویسیم که فقط میشود در همان پروژه استفاده کرد. بدی پروژه های یکپارچه ویندوز/فون 8.1 این بود که بعضی از کدها در ویندوز وجود داشت و در ویندوزفون نمیتوانستیم از آن استفاده کنیم و همچنین بعضی از کدها در ویندوزفون قابل استفاده بود و در ویندوز قابل استفاده نبود و باعث دوگانگی کدنویسی برای ویندوز و ویندوزفون میشد.
اما در ویندوز 10 مایکروسافت همه کدها را یکی کرده است، هنگامی که یک راه حل جدید برای ویندوز یکپارچه توسط ویژوال استودیو ایجاد می کنیم، فقط یک پروژه در آن ایجاد می شود که قابل اجرا بر روی هر دستگاهی که از سیستم عامل ویندوز 10 استفاده می کند، می باشد. یک بار کدنویسی را انجام میدهیم و در هر دستگاهی برنامه ـمان را اجرا می کنیم. پایه و اساس کدهای UWP نیز همان WinRT است، پس نمی توانیم ازSilverlight که در ویندوزفون 8.0 و 8.1 نیز وجود داشتند استفاده کنیم.
نرم افزاری که ما در اینجا از آن استفاده می کنیم ویژوال استودیو 2015 نسخه Community به روز رسانی دوم می باشد.
دانلود نسخه های مختلف ویژوال استودیو 2015 به همراه آپدیت دوم:
دانلود ویژوال استودیو 2015 نسخه Community به همراه آپدیت دوم| حجم: 6.95 گیگابایت
دانلود ویژوال استودیو 2015 نسخه Professional به همراه آپدیت دوم| حجم: 7.04 گیگابایت
دانلود ویژال استودیو 2015 نسخه Enterprise به همراه آپدیت دوم| حجم: 7.08 گیگابایت
نکته: در هنگام نصب ویژوال استودیو ممکن است به اینترنت نیاز داشته باشید، پس حداقل حجم اینترنت 2 گیگابایت داشته باشید تا در هنگام نصب به مشکل برنخورید.
نکته: این آموزش ها بر پایه ویژوال استودیو 2015 نسخه Community به روز رسانی دوم می باشد.
نکته: ویندوز رایانه شما حتما حداقل باید ویندوز 10 نسخه 10240 یا بالاتر باشد.
نکته: اگر می خواهید شبیه ساز ویندوز 10 موبایل روی کامپیوتر شما نصب شود، حداقل رم کامپیوتر شما باید 4 گیگابایت یا بالاتر باشد.
نکته: برای نصب شبیه ساز یا Emulator نیاز به فعال سازی Hyper-V دارید.
نکته: چنانچه رم کامپیوتر شما کمتر از 4 گیگابایت است، نگران نباشید، تنها نیاز دارید که یک موبایل ویندوز 10ـی داشته باشید(فرقی نمی کنید Insider باشد یا رسمی) تا به صورت مستقیم از ویژوال استودیو برنامه را در گوشی خود با کابل USB اجرا کنید.
آموزش نصب ویژوال استودیو 2015 و نصبSDK ویندوز 10
پس از دانلود فایل ISO مربوط به ویژوال استودیو آنرا با استفاده از نرم افزارهای فشرده سازی مانند WinRAR آنرا Extract کنید:
پس از Extract با این روبه رو می شوید:
فایل vs_community.exe را اجرا کنید(در نسخه های دیگر vs_enterprise.exe یاvs_professional.exe خواهد بود).
چنانچه به اینترنت دسترسی نداشته باشید با این تصویر روبه رو می شوید:
چنانچه روی Continue کلیک کنید می توانید به صفحه بعدی نصب بروید، اما پیشنهاد می شود به اینترنت وصل شوید و روی Retry کلیک کنید. پس از انجام این کار با این صفحه مواجه میشوید:
ویژوال استودیو از شما می خواهد مسیری را برای آن انتخاب کنید به صورت پیشفرض در تصویر معلوم است که چه مسیری را انتخاب کرده است.
نوع نصب را ما باید Custom انتخاب کنیم تا بتوانیم هر چیزی را که می خواهیم نصاب برایمان نصب کند و هر چیزی که نمی خواهیم را نصب نکند. پس از کلیک بر روی Custom در قسمت Choose the type of installation رویNext کلیک کنید.
همانطور که تصویر بالا می بینید فقط نیاز است مورد زیر را تیک بزنید:
Universal Windows App Development Tools
که خودکار موارد زیر را برای شما تیک میزند:
اگر این موارد تیک نداشت آنها را تیک بزنید، در تصویر بالا چون من برای ویندوز/فون 8.1 و ASPهم برنامه نویسی میکنم دو گزینه زیر نیز تیک خورده اند:
ویژوال استودیو در زیر صفحه برای شما می نویسد که چه فضای آزادی در پارتیشن برای نصب نیاز دارد. مثلا در تصویر بالا 23 گیگابایت برای نصب نیاز دارد.
روی Next کلیک کنید تا با تصویر زیر مواجه شوید:
مواردی که می خواهد نصب کند را برای شما نشان می دهد، روی Install کلیک کنید.
پس از اتمام نصب ویژوال استودیو آنرا را اجرا کنید، در اولین اجرا تصویری مانند تصویر زیر را نشان می دهد (نکته چون من یادم رفته بود از این قسمت عکس بگیرم، دو عکس زیر مربوط به نصب ویژوال استودیو 2013 است، اما در این قسمت چندان تفاوتی ندارند)
ویژوال استودیو از شما می خواهد که به حساب مایکروسافت خود وصل شوید، نیازی نیست که حتما به حساب خود وصل شوید، اگه می خواهید به ویژوال استودیو حساب خود را دهید روی Sign In کلیک کنید، در غیر اینصورت زیرNot now, maybe later کلیک کنید تا این صفحه را نادیده بگیرد.)
صفحه بعدی:
از شما می خواهد زبان پیشفرض پروژه ها و پوسته ویژوال استودیو را انتخاب کنید، در قسمت Development Settings گزینه Visual C#را انتخاب کنید، من چون پوسته تاریک ویژوال استودیو را بیشتر می پسندم گزینه Dark را در انتخاب پوسته، انتخاب می کنم.
در آخر روی Start Visual Studio کلیک کنید تا تنظیماتی را برای شما انجام دهد و سپس ویژوال استودیو را برای شما باز کند.
آنلاک کردن موبایل یا کامپیوتر برای نصب و اجرای برنامه ها
برای آنلاک کردن موبایل یا کامپیوتر به Settingsبروید، سپس به Update & security رفته و گزینه For developers را انتخاب کنید. پس از باز شدن این قسمت گزینه Developer mode را تیک بزنید. به همین راحتی موبایل یا کامپیوتر ویندوز 10یی شما آنلاک شد.
ساخت اولین پروژه یکپارچه
ویژوال استودیو را باز کنید و پروژه جدیدWindows Universalـی به نام Hello Worldایجاد کنید.(طبق شماره ها پیش بروید)
پس از ایجاد پروژه ویژوال استودیو از شما می خواهد که نسخه ویندوز 10 ای که می خواهید برای آن برنامه نویسی کنید و کمترین نسخه ای که برنامه شما می تواند روی آن اجرا شود را انتخاب کنید. در اینجا هر دو را روی نسخه 10240 قرار میدهیم و روی OK کلیک میکنیم:
صفحه اولی که بعد از آن نشان می دهد این است. کلاس App.xaml.cs برای شما به صورت پیشفرض هر بار که پروژه جدیدی ایجاد کنید باز خواهد شد. در این کلاس می توانید تعیین کنید که کدام صفحه، صفحه اول برنامه شما باشد، تعیین کنید که برنامه بتواند از بیرون و با استفاده از OpenWith فرمتی را با استفاده از برنامه شما باز کند و خیلی کارهای دیگر... .
کلاس App.xaml.cs را ببندید و رویMainPage.xaml در پنجره راه حل دو بار کلیک کنید تا صفحه طراحی آن باز شود:
چنانچه مانند تصویر بالا خطای بالا را مشاهده کردید روی گزینه اول یعنی Click here to reload the designer کلیک کنید، اگر دوباره این خطا را نشان داد روی مورد دوم کلیک کنید، اگر باز هم این اتفاق افتاد، صفحه را ببندید و دوباره باز کنید، اگر باز هم این خطا را مشاهده نمودید ویژوال استودیو را ببندید و دوباره آنرا باز کنید، سپس پروژه را باز کرده و روی MainPage.xamlکلیک کنید تا با این صفحه رو به رو شوید:
روی Toolbox کلیک کنید تا پنجره آن باز شود، سپس مانند عکس روی شماره 2 که مشخص شده است کلیک کنید:
تا همیشه پنجره Toolbox باز باشد:
حال از Toolbox روی کنترل دکمه (Button) ـی یکبار کلیک کرده و آنرا بکشید و روی صفحه طراحی قسمت سفید رنگ رها کنید:
کد زیر که XAML است به صورت خودکار برای این دکمه نوشته شد:
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="161,255,0,0" VerticalAlignment="Top" />
حال مقدار Content که در واقع متن این دکمه است را از پنجره تنظیمات به Click here! تغییر دهید:
یا به سادگی از در قست XAML آنرا تغییر دهید:
<Button x:Name="button" Content="Click here!" HorizontalAlignment="Left" Margin="161,255,0,0" VerticalAlignment="Top" />
نکته اگر قسمت کدهای XAML شما به مرتبی عکس بالا نیست، کافی است روی منو Toolsویژوال استودیو کلیک کنید و گزینه Settings را انتخاب کنید:
سپس روی مثلث کوچک کنار Text Editor در قسمت سمت چپ کلیک کنید و به دنبال XAMLبگردید و روی مثلث کنار آن نیز کلیک کنید و سپس روی مثلث کنار Formatting نیز کلیک کرده و گزینه Spacing را انتخاب کنید. در قسمت سمت راست گزینه Position each attribute on between attributes را انتخاب کنید و گزینه زیر آن یعنی Position firs attribute on same line as start tag را نیز تیک بزنید و روی OK کلیک کنید. اکنون در قسمت XAML دکمه های Ctrl+Aرا بزنید و Ctrl+X را بزنید و در آخر Ctrl+V بزنید (یعنی کدها را Cut کرده و سپس Paste کنید). به همین راحتی!
برگردیم به آموزش، حال روی دکمه دو بار کلیک کنید یا در پنجره تنظیمات مربوط به آن روی علامت رعد کلیک کنید تا رویداد ها را ببینید زیرا می خواهیم رویداد Click دکمه را بسازیم:
حال روی جعبه متنی روبه روی Click دوبار کلیک کنید تا رویداد کلیک برای آن ایجاد شود:
پس از این کار خودکار تابع رویداد Click دکمهbutton در صفحه MainPage.xaml.cs برای شما ساخته می شود، همچنین این صفحه به صورت خودکار برایتان باز می شود و اولین خط این تابعانتخاب شده است را به شما نشان می دهد:
حال کد زیر را بنویسید:
اگر به تصویر بالا نگاه کنید، می بینید کهMessageDialog به رنگ سفید در آمده است و زیر آن یک خط قرمز رنگ کشیده شده است، به خاطر این است که فظای نامی مربوط به آن به صفحه اضافه نشده است، در سمت چپ تصویر در خط MessageDialog… یک آیکون چراغ وجود دارد، چند ثانیه موس را روی آن بگیرید تا مثلث کوچکی در سمت راست آن ظاهر شود، روی آن مثلث کلیک کنید و سپس اولین گزینه یعنی using Windows.UI.Popups; را انتخاب کنید تا فضای نامی MessageDialog به صفحه اضافه شود:
پس از این کار، رنگ MessageDialog ها باید به رنگ سبز در آیند:
حال باقی کد را زیر آن بنویسید:
await md.ShowAsync();
زمانی که این کد را بنویسید، همانند کدMessageDialog خطایی دریافت خواهید کرد:
اما این خطا مربوط فضای نامی نیست، این خطا مربوط به استفاده از کلمه کلیدی await است، برای استفاده از این کلمه کلیدی باید در تعریف تابع کلمه کلیدی async را به کار ببریم. برای اضافه کردن کلمه کلیدی async می توانیم آنرا پیش از تعریف تابع (قبل یا بعد از private یاpublic) بنویسیم، یا اینکه روی آیکون چراغ اول خط چند ثانیه موس را بگیریم و اولین گزینه یعنی Make the containing scope ‘async’. را انتخاب کنیم:
که این گونه خواهد شد:
پس کل کدهای شما باید اینگونه باشد:
private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) { string text = "Hello world!" + Environment.NewLine + "Powered by Win Nevis"; MessageDialog md = new MessageDialog(text); await md.ShowAsync(); }
یا:
async private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) { string text = "Hello world!" + Environment.NewLine + "Powered by Win Nevis"; MessageDialog md = new MessageDialog(text); await md.ShowAsync(); }
حال وقت اجرای برنامه است، روی Local machine در نوار ابزار کلیک کنید تا برنامه اجرا شود( یا از منو ویژوال استودیو، گزینه DEBUG را انتخاب کرده و روی Start Debugging کلیک کنید):
این کار باعث می شود برنامه روی هر معماری که است اجرا شود، در اینجا x86 انتخاب شده است پس در خود کامپیوتر برنامه ما اجرا می شود:
اگر روی Click here! کلیک پیغامی به ما نشان میدهد:
به همین سادگی اولین برنامه یکپارچه خود را نوشتیم! اگر می خواهید برنامه را روی موبایلخود اجرا کنید، کافی است روی مثلث کوچک کنار x86 کلید کنید و گزینه ARM را انتخاب کنید، سپس موبایل خود را با کابل USB به کامپیوتر وصل کنید و صفحه آنرا باز کنید(نگذارید صفحه خاموش یا قفل شود) حال روی Device کلیک کنید تا برنامه مستقیما از ویژوال استودیو روی موبایل ویندوز 10یی خود اجرا شود:
پس از اجرا در موبایل:
این درس به اتمام رسید، امیدوارم همچنان همراه ما باشید... .
کتاب الکترونیک (PDF) این آموزش پیوست شد.
سورس کد این پروژه پیوست شد.
نظر شما چیست ؟