3 ارسال در این موضوع قرار دارد

Main.PNG

 

از امروز می خواهیم آموزش برنامه نویسی یکپارچه(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 کنید:

 

clip_image002.png

پس از Extract با این روبه رو می شوید:

clip_image004.png

فایل vs_community.exe را اجرا کنید(در نسخه های دیگر vs_enterprise.exe یا vs_professional.exe خواهد بود).

clip_image005.png

چنانچه به اینترنت دسترسی نداشته باشید با این تصویر روبه رو می شوید:

clip_image006.png

چنانچه روی Continue کلیک کنید می توانید به صفحه بعدی نصب بروید، اما پیشنهاد می شود به اینترنت وصل شوید و روی Retry کلیک کنید. پس از انجام این کار با این صفحه مواجه میشوید:

clip_image007.png

ویژوال استودیو از شما می خواهد مسیری را برای آن انتخاب کنید به صورت پیشفرض در تصویر معلوم است که چه مسیری را انتخاب کرده است.

نوع نصب را ما باید Custom انتخاب کنیم تا بتوانیم هر چیزی را که می خواهیم نصاب برایمان نصب کند و هر چیزی که نمی خواهیم را نصب نکند. پس از کلیک بر روی Custom در قسمت Choose the type of installation روی Next کلیک کنید.

clip_image008.png

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

Universal Windows App Development Tools



که خودکار موارد زیر را برای شما تیک میزند:

 

Tools (1.3) and Windows 10 SDK (10.10586)
Windows 10 SDK (10.010240)


اگر این موارد تیک نداشت آنها را تیک بزنید، در تصویر بالا چون من برای ویندوز/فون 8.1 و ASP هم برنامه نویسی میکنم دو گزینه زیر نیز تیک خورده اند:

 

Microsoft Web Developer Tools
Windows 8.1 and Windows Phone 8.0/8.1 Tools


ویژوال استودیو در زیر صفحه برای شما می نویسد که چه فضای آزادی در پارتیشن برای نصب نیاز دارد. مثلا در تصویر بالا 23 گیگابایت برای نصب نیاز دارد.

روی Next کلیک کنید تا با تصویر زیر مواجه شوید:

clip_image009.png

مواردی که می خواهد نصب کند را برای شما نشان می دهد، روی Install کلیک کنید.

clip_image010.png

پس از اتمام نصب ویژوال استودیو آنرا را اجرا کنید، در اولین اجرا تصویری مانند تصویر زیر را نشان می دهد (نکته چون من یادم رفته بود از این قسمت عکس بگیرم، دو عکس زیر مربوط به نصب ویژوال استودیو 2013 است، اما در این قسمت چندان تفاوتی ندارند)

clip_image011.png

ویژوال استودیو از شما می خواهد که به حساب مایکروسافت خود وصل شوید، نیازی نیست که حتما به حساب خود وصل شوید، اگه می خواهید به ویژوال استودیو حساب خود را دهید روی Sign In کلیک کنید، در غیر اینصورت زیر Not now, maybe later کلیک کنید تا این صفحه را نادیده بگیرد.)

صفحه بعدی:

clip_image012.png

از شما می خواهد زبان پیشفرض پروژه ها و پوسته ویژوال استودیو را انتخاب کنید، در قسمت Development Settings گزینه Visual C# را انتخاب کنید، من چون پوسته تاریک ویژوال استودیو را بیشتر می پسندم گزینه Dark را در انتخاب پوسته، انتخاب می کنم.

در آخر روی Start Visual Studio کلیک کنید تا تنظیماتی را برای شما انجام دهد و سپس ویژوال استودیو را برای شما باز کند.

 

 

 

آنلاک کردن موبایل یا کامپیوتر برای نصب و اجرای برنامه ها

برای آنلاک کردن موبایل یا کامپیوتر به Settings بروید، سپس به Update & security رفته و گزینه For developers را انتخاب کنید. پس از باز شدن این قسمت گزینه Developer mode را تیک بزنید. به همین راحتی موبایل یا کامپیوتر ویندوز 10یی شما آنلاک شد.

clip_image014.png

 

 

 

ساخت اولین پروژه یکپارچه

ویژوال استودیو را باز کنید و پروژه جدید Windows Universalـی به نام Hello World ایجاد کنید.(طبق شماره ها پیش بروید)

clip_image016.png

پس از ایجاد پروژه ویژوال استودیو از شما می خواهد که نسخه ویندوز 10 ای که می خواهید برای آن برنامه نویسی کنید و کمترین نسخه ای که برنامه شما می تواند روی آن اجرا شود را انتخاب کنید. در اینجا هر دو را روی نسخه 10240 قرار میدهیم و روی OK کلیک میکنیم:

clip_image018.png

 

صفحه اولی که بعد از آن نشان می دهد این است. کلاس App.xaml.cs برای شما به صورت پیشفرض هر بار که پروژه جدیدی ایجاد کنید باز خواهد شد. در این کلاس می توانید تعیین کنید که کدام صفحه، صفحه اول برنامه شما باشد، تعیین کنید که برنامه بتواند از بیرون و با استفاده از OpenWith فرمتی را با استفاده از برنامه شما باز کند و خیلی کارهای دیگر... .

 

clip_image020.png

کلاس App.xaml.cs را ببندید و روی MainPage.xaml در پنجره راه حل دو بار کلیک کنید تا صفحه طراحی آن باز شود:

clip_image022.png

چنانچه مانند تصویر بالا خطای بالا را مشاهده کردید روی گزینه اول یعنی Click here to reload the designer کلیک کنید، اگر دوباره این خطا را نشان داد روی مورد دوم کلیک کنید، اگر باز هم این اتفاق افتاد، صفحه را ببندید و دوباره باز کنید، اگر باز هم این خطا را مشاهده نمودید ویژوال استودیو را ببندید و دوباره آنرا باز کنید، سپس پروژه را باز کرده و روی MainPage.xaml کلیک کنید تا با این صفحه رو به رو شوید:

clip_image024.png

روی Toolbox کلیک کنید تا پنجره آن باز شود، سپس مانند عکس روی شماره 2 که مشخص شده است کلیک کنید:

clip_image025.png

تا همیشه پنجره Toolbox باز باشد:

clip_image026.png

حال از Toolbox روی کنترل دکمه (Button) ـی یکبار کلیک کرده و آنرا بکشید و روی صفحه طراحی قسمت سفید رنگ رها کنید:

clip_image027.png

کد زیر که XAML است به صورت خودکار برای این دکمه نوشته شد:

 

        <Button x:Name="button"
                Content="Button"
                HorizontalAlignment="Left"
                Margin="161,255,0,0"
                VerticalAlignment="Top" />

حال مقدار Content که در واقع متن این دکمه است را از پنجره تنظیمات به Click here! تغییر دهید:

clip_image028.png

یا به سادگی از در قست XAML آنرا تغییر دهید:

 

  
      <Button x:Name="button"
                Content="Click here!"
                HorizontalAlignment="Left"
                Margin="161,255,0,0"
                VerticalAlignment="Top" />

نکته اگر قسمت کدهای XAML شما به مرتبی عکس بالا نیست، کافی است روی منو Tools ویژوال استودیو کلیک کنید و گزینه Settings را انتخاب کنید:

clip_image029.png

سپس روی مثلث کوچک کنار 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 دکمه را بسازیم:

clip_image030.png

حال روی جعبه متنی روبه روی Click دوبار کلیک کنید تا رویداد کلیک برای آن ایجاد شود:

clip_image031.png

پس از این کار خودکار تابع رویداد Click دکمه button در صفحه MainPage.xaml.cs برای شما ساخته می شود، همچنین این صفحه به صورت خودکار برایتان باز می شود و اولین خط این تابع انتخاب شده است را به شما نشان می دهد:

clip_image032.png

حال کد زیر را بنویسید:

clip_image033.png

اگر به تصویر بالا نگاه کنید، می بینید که MessageDialog به رنگ سفید در آمده است و زیر آن یک خط قرمز رنگ کشیده شده است، به خاطر این است که فظای نامی مربوط به آن به صفحه اضافه نشده است، در سمت چپ تصویر در خط MessageDialog… یک آیکون چراغ وجود دارد، چند ثانیه موس را روی آن بگیرید تا مثلث کوچکی در سمت راست آن ظاهر شود، روی آن مثلث کلیک کنید و سپس اولین گزینه یعنی using Windows.UI.Popups; را انتخاب کنید تا فضای نامی MessageDialog به صفحه اضافه شود:

clip_image034.png

پس از این کار، رنگ MessageDialog ها باید به رنگ سبز در آیند:

clip_image035.png

حال باقی کد را زیر آن بنویسید:

            await md.ShowAsync();

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

clip_image036.png

اما این خطا مربوط فضای نامی نیست، این خطا مربوط به استفاده از کلمه کلیدی await است، برای استفاده از این کلمه کلیدی باید در تعریف تابع کلمه کلیدی async را به کار ببریم. برای اضافه کردن کلمه کلیدی async می توانیم آنرا پیش از تعریف تابع (قبل یا بعد از private یا public) بنویسیم، یا اینکه روی آیکون چراغ اول خط چند ثانیه موس را بگیریم و اولین گزینه یعنی Make the containing scope ‘async’. را انتخاب کنیم:

clip_image038.png

که این گونه خواهد شد:

clip_image039.png

پس کل کدهای شما باید اینگونه باشد:

 

        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 کلیک کنید):

clip_image040.png

این کار باعث می شود برنامه روی هر معماری که است اجرا شود، در اینجا x86 انتخاب شده است پس در خود کامپیوتر برنامه ما اجرا می شود:

clip_image041.png

اگر روی Click here! کلیک پیغامی به ما نشان میدهد:

clip_image043.png

به همین سادگی اولین برنامه یکپارچه خود را نوشتیم! اگر می خواهید برنامه را روی موبایل خود اجرا کنید، کافی است روی مثلث کوچک کنار x86 کلید کنید و گزینه ARM را انتخاب کنید، سپس موبایل خود را با کابل USB به کامپیوتر وصل کنید و صفحه آنرا باز کنید(نگذارید صفحه خاموش یا قفل شود) حال روی Device کلیک کنید تا برنامه مستقیما از ویژوال استودیو روی موبایل ویندوز 10یی خود اجرا شود:

clip_image044.png

 

clip_image045.png

پس از اجرا در موبایل:

clip_image047.pngclip_image049.png

 

این درس به اتمام رسید، امیدوارم همچنان همراه ما باشید... .

 

کتاب الکترونیک (PDF) این آموزش پیوست شد.

سورس کد این پروژه پیوست شد.

 

منبع: وین نویس

Windows 10 Introduction S01E01.pdf

Hello World.zip

پسند شده توسط 10 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر


ممنون

اگه میشه قسمت های بعدی رو هم سریع بزارید

پسند شده توسط 2 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام و وقت بخیر،

با عرض پوش خدمت دوستان عزیز،

متاسفانه بنده از چهارشنبه هفته پیش تا امروز ظهر توی پادگان بودم و مرخصی هم نمیدادن، امروز امدم ولی فردا باید دوباره برم...

بگذریم قسمت دوم حاضره تا چند دقیقه دیگه میره روی انجمن

با تشکر از صبرتون.

پسند شده توسط 2 کاربر

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
مهمان
این موضوع برای عدم ارسال قفل گردیده است.