آموزش ساخت اپلیکیشن برای ویندوز 8

ha88an · Jan 28, 2014

-

به نام خدا
In The Name Of God

برای یادگیری ابتدا باید نرم افزار ویژوال استدیو 2012 رو تهیه کنید.
و حتما باید ویندوز 8 هم نصب کرده باشید

منبع : MSDN - The Microsoft Developer Network

منبع : آموزش قدم به قدم ساخت اپلیکیشن برای ویندوز 8

ha88an · Jan 28, 2014

-

1.مقدمه

برای ساخت اپلیکیشن باید با زبان سی شارپ , جاوا اسکریپت , اچ تی ام ال وسی اس اس آشنایی داشته باشید.

::::موارد لازم برای یادگیری::::

ایجاد یک پروژه جدید
اضافه کردن محتوای HTML به صفحه شروع خود
دسته لمسی، قلم، و موس ورودی
سوئیچ بین شیوه نامه نور و تاریکی
ایجاد سبک های سفارشی خود
استفاده از کتابخانه ویندوز برای کنترل جاوا اسکریپت

چیکار کنیم برای ساخت APP توسط HTML , JAVA Script , CSS , C ؟

قبل از شروع...

برای تکمیل این آموزش، شما نیاز به ویندوز 8 و مایکروسافت ویژوال استودیو اکسپرس 2012 برای ویندوز 8 است. آنها را دانلود کنید،

ha88an · Jan 28, 2014

-

ایجاد یک پروژه جدید در ویژوال استودیو

ایجاد یک برنامه جدید به نام HelloWorld.

1.ابتدا ویژوال استدیو 2012 را باز نمایید.

2.از منو File پروژه جدید را انتخاب نمایید.
در سمت چپ نوار درختی پروژه شما می توانید نوع قالب پروژه را انتخاب کنید.

3.برای اینجاد پروژه همانند شکل عمل کنید.

برای این آموزش انتخاب کنید یک قالب خالی را انتخاب کنید.
4.نوع قالب را Black App انتخاب کنید.
5.دز قسمت (Name) نام برنامه را وارد کنید ما ، در اینجا نام (HelloWorld) را می نویسیم.
6.تیک گزینه (Create directory for solution) را بردارید.
7.در آخر سر هم بر روی دگمه (OK) کلیک کنید تا پروژه ایجاد شود

همچنین برای دیدن فایل های ساخته شده می توانید آن ها را در قسمت (Solution Explorer) ببینید.

فایل های ایجاد شده عبارت هستند از:

فایل مانیفست (package.appxmanifest) که برنامه را توصبف می کند مانند (نام و نام خانوادگی، توضیحات، کاشی، صفحه، صفحه نمایش چلپ چلوپ، و غیره).
مجموعه ای از عکس ها مانند لوگو بزرگ و کوچک (logo.png و smalllogo.png) برای نمایش در صفحه شروع.
یک تصویر (storelogo.png)، که اگر در استور باشد نشان دهنده عکس برنامه است.
یک صفحه نمایش چلپ چلوپ (splashscreen.png) نشان می دهد که برنامه شما شروع می شود.
فایل های CSS که در کتابخانه ویندوز قرار دارد.
صفحه شروع (default.html) و یک فایل همراه با جاوا اسکریپت (default.js) که زمانی که شما برنامه را اجرا کردید اجرا می شود.

تمامی این فایل ها ضروری هستند

ha88an · Jan 28, 2014

-

مرحله 2: راه اندازی APP

برای این کار دگمه (F5) را بزنید تا برنامه به صورت خودکار اجر بشه البته قبل از اینکار رنگ پس زمینه و هم عکس پس زمینه رو عوض کنید

بعد از اجرای برنامه برای بستن آن از دگمه های (Alt +F4) استفاده کنید.
برای عوض کردن تصویر پس زمینه می توانید فایل (splashscreen.png) را ویرایش و یا عوض کنید تاکید می کنم که اگر فایل را عوض کردید نام و پسوند فایل باید همانند فایل قبلی باشد.

ha88an · Jan 28, 2014

-

مرحله 3: ویرایش صفحه شروع

در هنگامی که شما یک پروژه جدید می سازید برنامه ویژال استادیو یه یک فایل پیشفرض که از قبل کد های ساده در اون نوشته شده رو ایجاد می کنه فایل پیشفرض (default.html) است که شامل کد های زیر است (در صورت تغییر اسم فایل ، برنامه باز نمی شود) :

کد:

[COLOR=#454545][FONT=Segoe UI][FONT=tahoma][SIZE=2][COLOR=#454545][FONT=Segoe UI][FONT=tahoma][COLOR=#000080]<!DOCTYPE html>[/COLOR]
[COLOR=#000080]<html>[/COLOR]
[COLOR=#000080]<head>[/COLOR]
    [COLOR=#000080]<meta charset=[COLOR=#0000FF]"utf-8"[/COLOR] />[/COLOR]
    [COLOR=#000080]<title>[/COLOR]HelloWorld[COLOR=#000080]</title>[/COLOR]

    [I][COLOR=#000080]<!-- WinJS references -->[/COLOR][/I]
    [COLOR=#000080]<link href=[COLOR=#0000FF]"//Microsoft.WinJS.2.0.Preview/css/ui-dark.css"[/COLOR] rel=[COLOR=#0000FF]"stylesheet"[/COLOR] />[/COLOR]
    [COLOR=#800000]<script src=[COLOR=#0000FF]"//Microsoft.WinJS.2.0.Preview/js/base.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]
    [COLOR=#800000]<script src=[COLOR=#0000FF]"//Microsoft.WinJS.2.0.Preview/js/ui.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]

    [I][COLOR=#000080]<!-- HelloWorld references -->[/COLOR][/I]
    [COLOR=#000080]<link href=[COLOR=#0000FF]"/css/default.css"[/COLOR] rel=[COLOR=#0000FF]"stylesheet"[/COLOR] />[/COLOR]
    [COLOR=#800000]<script src=[COLOR=#0000FF]"/js/default.js"[/COLOR]>[/COLOR][COLOR=#800000]</script>[/COLOR]
[COLOR=#000080]</head>[/COLOR]
[COLOR=#000080]<body>[/COLOR]
    [COLOR=#000080]<p>[/COLOR]Content goes here[COLOR=#000080]</p>[/COLOR]
[COLOR=#000080]</body>[/COLOR]
[COLOR=#000080]</html>[/COLOR][/FONT][/FONT][/COLOR][/SIZE][/FONT][/FONT][/COLOR]

اگر کمی با (HTML) آشنایی داشته باشید متوجه خواهید شد که خیلی کد های ساده ای هستند.شما می تونید هر تگ دیگه مثل (img,url,p,font) و یا هر تگی که دوست داشتید اضافه کنید همچنین برنامه های مترو فقط از (HTML 5) پشتیبانی می کنند.
حالا اگه با (HTML) آشنایی ندارید من بعضی از قسمت های مهم را در پست بعدی توضیح میدم.

ha88an · Jan 28, 2014

-

برای مثال اگر شما می خواهید اسم برنامه رو عوض کنید می تونید از این تگ استفاده کنید.

کد:

[FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][COLOR=#000080]<title>[/COLOR]HelloWorld[COLOR=#000080]</title>[/COLOR][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

در قسمت (HelloWorld) می تونید اسم برنامه رو بنویسید.
همچنین می تونید توضیحات کوتاهی هم بنویسید که باید بین دو تگ زیر باشه یعنی به جای کلمه (Here) می تونید هر جیزی که خواستید بنویسید.

کد:

[FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][I][COLOR=#000080]<!-- Here -->[/COLOR][/I][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

اما مهم ترین قسمت که تقریبا بیشتر کدها رو باید توی اون قسمت بنویسم تگ زیر هست.توی این تگ ما همه کدهای مهم مثل کدهای متن ، جعبه باکس ، کد عکس و چیزهای دیگه رو توی بین این دو تگ می نویسیم.

کد:

[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Segoe UI][SIZE=2][COLOR=#454545][COLOR=#000080]<body>[/COLOR]

[COLOR=#000080]<body/>[/COLOR][/COLOR][/SIZE][/FONT][FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545][FONT=Segoe UI][SIZE=2][COLOR=#454545]