مهم آموزش خروجی Cordova به صورت مستقیم روی سیستم شخصی

[mostafanastary]

بسم الله الرحمن الرحیم

سلام به دوستان عزیز

شاید تا حالا با خودتون گفتین که چطوری یونیتی یا امثال اون، خروجی مستقیم میدن! و حتما از عنوان موضوع تعجب کردین! خب جای تعجب هم داره، اما یک واقعیت هست و ان شاء الله در ادامه آموزش اون رو بنده قرار میدم و شما هم همراهی می کنین.
امیدوارم که مورد استفاده قرار بگیره.

لازم به ذکر هست که این آموزش، کمی سخته و دوستان باید قدم به قدم جلو برن و جای هیچ اشتباهی در حین کار نیست!

شروع میکنیم:

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

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

- نصب جاوا دولوپمنت کیت ( همون JDK خودمون )
- نصب اندروید استدیو ( تقریبا لازم نیست، اما من خودم نصب داشتم و احتمالا لازم صددرصدی نباشه! )
- نصب آخرین SDK اندروید روی سیستم و SDK برای Cordova .  
- نصب NodeJS


مراحل رو دقیق جلو برید!

مرحله ی اول:

JDk رو نصب کنین.

مرحله دوم:

اندروید استدیو رو نصب کنین. ( گفتم که شاید لازم نباشه کلا )

مرحله ی سوم:

وارد اندروید استدیو بشید و به آدرس Tools > Android < SDK Manager برید و موارد زیر رو نصب کنین.

اندروید استدیو رو ببندید.

مرحله چهارم :

NodeJS رو نصب کنین.

مرحله پنجم:

کامپیوتر رو ری استارت کنین.

مرحله ششم:

به اینترنت وصل باشین!

یک پوشه ی جدید در درایو C بسازین به نام    myCordovaExporter   و MS-DOS cms رو اجرا کنین. ( یا میتونین در همون پوشه ی myCordovaExporter کلید شیفت رو نگه دارین و راست کلیک کنین و گزینه ی Open command windows here رو بزنین.)

اگه روش اول رو رفتید در cmd تایپ کنین:      cd C:/myCordovaExporter
اگه روش دوم رو رفتید که هیچی فعلا.

خب، حالا تایپ کنین:
npm install -g cordova

نصب موارد مربوط به cordova شروع میشه.

مرحله هفتم:

حالا که همه چی رو نصب کردین، تایپ کنین:

cordova create CordovaProject com.mystudio.mygame

که می تونین در قسمت پکیج نیم، هر چی دوست دارین بزنین! یعنی این قسمت ( com.mystudio.mygame ) مثل پکیج نیم کانستراکت و ... می مونه!

کوردوا پکیج های لازم رو دانلود میکنه و یه مقداری زمان میبره!
لازم به ذکر است که شما در این دستور، یه پوشه هم به نام CordovaProject ساختین!



مرحله هشتم:

باید به پوشه ی جدیدی که ساختین دسترسی پیدا کنین، برای این منظور، همونطور که پنجره ی cmd باز هست، تایپ کنین:

cd CordovaProject 

(و یا اینکه می تونین این پنجره رو ببندید و همونطور که گفتم، برید داخل پوشه ی مدنظر و شیفت رو نگه دارین و بقیه ی ماجرای بالا)


خب حالا به پوشه ی جدید متصل شدید، و تایپ کنین:

cordova platform add android

مرحله ی نهم:

از بازی یا اپلیکیشن خودتون خروجی کوردوا بگیرین! مثل همیشه، و فقط یادتون باشه که تیک مربوط به xdk رو بردارید!

مرحله دهم:
داخل پوشه ای که ایجاد شده، یعنی CordovaProject چند تا پوشه هست که یکی از اونها پوشه ی www هست، محتویات داخل اون رو پاک کنین

محتویات خروجی خودتون که شامل: عکس، فایل ها و ... میشه رو بریزید توی این پوشه www.

مرحله یازدهم:

داخل همین پوشه ی CordovaProject یه فایل config.xml هست که باید اون رو ویرایش کنین و کدهای اون رو پاک کنین و با کدهای زیر جایگزین کنین:

کد:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.mystudio.mygame" version="1.0">

<name>mygamename</name>
<description>Cordova test</description>
<author>You</author>

<icon src="icon-128.png" width="128" height="128" />
<icon src="icon-256.png" width="256" height="256" gap:role="default" />

<preference name="permissions" value="none"/>
<preference name="android-targetSdkVersion" value="21" />

<feature name="http://api.phonegap.com/1.0/network"/>

<preference name="orientation" value="default" />
<preference name="fullscreen" value="true" />
<gap:config-file platform="ios" parent="UIStatusBarHidden"><true/></gap:config-file>
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance"><false/></gap:config-file>
<plugin name="cordova-plugin-crosswalk-webview" source="npm" />

<plugin name="cordova-plugin-wkwebview-engine" />
<plugin name="cordova-plugin-file" />
<plugin name="cordova-plugin-httpd" />

<plugin name="cordova-plugin-whitelist" source="npm" />
<access origin="*" />

<!-- Optional splash screen image, e.g.: -->
<!-- <gap:splash src="splash.png" width="1024" height="768" /> -->

</widget>

فایل رو ذخیره کنین! ( دقت کنین که این فایل، فایل config.xml که مربوط به پروژه ی خودتون هست ، نیست ! )

مرحله ی دوازدهم و آخرین مرحله:

در همون پنجره ی cmd تایپ کنین:

cordova build android


خب، چند دقیقه ای طول میکشه و اگه همه چیز رو درست انجام داده باشین، فایل های armv7 و x86 که به صورت apk هستند، داخل پوشه : 

CordovaProject\platforms\android\build\outputs\apk

درست میشن.

خب، خبر عالی تر اینه که شما برای خروجی بعدی، این همه کار نمیخواد بکنین و فقط لازمه که محتویات داخل www رو عوض کنین! همین!!!!

و دوباره تایپ کنین:

cordova build android







مشکلاتی که ممکنه پیش بیاد و من خودم حدود 20 ساعتی با بعضی هاشون دست و پنجه نرم کردم و شکستشون دادم:


1: پنجره ی cmd رو اشتباهی ببندید!
راه حل: قبلا هم گفتم که فقط لازمه برید داخل پوشه ای که میخواین و شیفت رو نگه دارین و راست کلیک کنین و گزینه ی Open command windows here رو بزنین.

2- در حین کار پنجره رو بسته باشین!
راه حل: هیچی دیگه! از همون آخرین مرحله ای که تایپ کردین، کارها رو انجام بدین!

3- یه خطایی بده که بگه نمیتونه به sdk 25 دسترسی داشته باشه!
راه حل: SDk Manager رو باز کنین و 25 رو نصب کنین!

4- یه خطایی بده و بگه که مشکلی در آیکون برنامه هست و نمیتونه اون رو پیدا کنه!

راه حل:  باید فایل manifest.xml رو پیدا کنین و خط

android:icon="@mipmap/icon"

رو به

android:icon="@drawable/icon"


تغییر بدین!


5- حجم نهایی فایل، متاسفانه کمی زیاد هست، اما!

راه حل:  یه سری فایل مربوط به Splash داخل پوشه ی res هست که میتونین پاکشون کنین.
همچنین بگمتون که اگه بازی یا برنامه تون عالی باشه، و ارزش داشته باشه، کسی به حجمش نگاه نمیکنه!


6- پلاگین های پرداخت درون برنامه ای یا امثال اون نصب نمیشه!
راه حل: متاسفانه من خودم وقت نداشتم این موارد رو تست کنم و یا دوستان و اساتید زحمتشو بکشن یا اینکه در همین صد سال اینده، من خودم سعی میکنم اینکار رو انجام بدم.

7 - یه سری مشکلات عجیب و غریب و خطاهایی در هنگام گرفتن خروجی میده.
راه حل: اولین کار غیرفعال کردن انتی ویروس هست و بعد از اون، جستجو در گوگل برای رفع اون خطا!





در آخر باید بگم، چون این یه روش تازه هست ، منم مثل دوستان عزیز، با مشکلاتی مواجه شده ام، و ممکنه شما هم مشکلاتی داشته باشین، بپرسین! عیبی نداره، اما رسیدن به جواب ، مستلزم توانایی در رفع اون هست و وقتی که باید باشه!!!



( راستی!!!! اسپلش کوکون و کوردوا و ... هم دیگه وجود نداره!!!! )


در آخر آخر آخر هم باید بگم که من با همین روش، بازی Space Blaster  که تو نمونه های کانستراکت هست رو خروجی گرفتم و بدون مشکل اجرا میشه!

همچنین بازی مدافعان حرم رو خروجی گرفتم و این بازی هم کار میکنه، البته غیر از پرداخت درون برنامه و یه سری موارد دیگه!

و من الله توفیق

[mahdi_R8095]

آقا مصطفی دمتون گم عالی بود آموزش تون فقط دو تا سوال داشتم
* آیکن بازی رو داخل خود سایت کاکون تنظیم میکردیم، الان باید داخل خود کانستراکت بزاریمشون؟
* شماره ی نسخه ی بازی و برچسب نسخه ی بازی (مثلا v1.2.1) رو چطور باید تنظیم کنیم؟

[hsnpi]

سلام. ممنون از آموزش.
حجم اضافی اش مثل کراسواک تقریبا ۲۰ مگ هست ؟ 
پرفورمنس چطوره ؟ 
بنظر بیشتر بدرد تست میخوره تا خروجی اصلی.

[mostafanastary]

آقا مصطفی دمتون گم عالی بود آموزش تون فقط دو تا سوال داشتم
* آیکن بازی رو داخل خود سایت کاکون تنظیم میکردیم، الان باید داخل خود کانستراکت بزاریمشون؟
* شماره ی نسخه ی بازی و برچسب نسخه ی بازی (مثلا v1.2.1) رو چطور باید تنظیم کنیم؟

سلام. خواهش میکنم.

جواب اول: برای آیکن بازی، مثلا شما اگه در درایو C  این عملیات رو انجام دادین، آدرس:

C:\myCordovaExporter\CordovaProject\platforms\android\res

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


جواب دومی:

در مسیر
C:\myCordovaExporter\CordovaProject\platforms\android

هم یه فایل AndroidManifest.xml  هست و داخل اون کدهای زیر رو میتونین تغییر بدین که شامل: پکیج نیم، ورژن کد و ورژن میشه.

کد:

<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0" package="com.mystudio.mygame" xmlns:android="http://schemas.android.com/apk/res/android">

سلام. ممنون از آموزش.
حجم اضافی اش مثل کراسواک تقریبا ۲۰ مگ هست ؟ 
پرفورمنس چطوره ؟ 
بنظر بیشتر بدرد تست میخوره تا خروجی اصلی.

سلام
خواهش میکنم.

حجم اضافی آره تقریبا همونه!
پرفورمنس هم به نظرم عالیه تقریبا.


نه، برای تست تنها نه!  اگه روش های مربوط به پلاگین ها رو بتونم یا بتونیم انجام بدیم، دقیقا میشه خروجی کوکون!
از این روش برای خروجی گرفتن های زیادی استفاده میشه.


همین که بدون اینترنت و نیاز به آپلود و ... میشه خروجی گرفت، بسیار عالیه.

[hsnpi]

آقا مصطفی دمتون گم عالی بود آموزش تون فقط دو تا سوال داشتم
* آیکن بازی رو داخل خود سایت کاکون تنظیم میکردیم، الان باید داخل خود کانستراکت بزاریمشون؟
* شماره ی نسخه ی بازی و برچسب نسخه ی بازی (مثلا v1.2.1) رو چطور باید تنظیم کنیم؟

سلام. خواهش میکنم.

جواب اول: برای آیکن بازی، مثلا شما اگه در درایو C  این عملیات رو انجام دادین، آدرس:

C:\myCordovaExporter\CordovaProject\platforms\android\res

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


جواب دومی:

در مسیر
C:\myCordovaExporter\CordovaProject\platforms\android

هم یه فایل AndroidManifest.xml  هست و داخل اون کدهای زیر رو میتونین تغییر بدین که شامل: پکیج نیم، ورژن کد و ورژن میشه.

کد:

<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0" package="com.mystudio.mygame" xmlns:android="http://schemas.android.com/apk/res/android">

سلام. ممنون از آموزش.
حجم اضافی اش مثل کراسواک تقریبا ۲۰ مگ هست ؟ 
پرفورمنس چطوره ؟ 
بنظر بیشتر بدرد تست میخوره تا خروجی اصلی.

سلام
خواهش میکنم.

حجم اضافی آره تقریبا همونه!
پرفورمنس هم به نظرم عالیه تقریبا.


نه، برای تست تنها نه!  اگه روش های مربوط به پلاگین ها رو بتونم یا بتونیم انجام بدیم، دقیقا میشه خروجی کوکون!
از این روش برای خروجی گرفتن های زیادی استفاده میشه.


همین که بدون اینترنت و نیاز به آپلود و ... میشه خروجی گرفت، بسیار عالیه.

سلام.ممنون از پاسخ. 
فقط دو نکته عجیب : چرا در تکه کدی که گذاشتید مقدار "platform="ios هست و برابر اندروید نیست ؟ 

و نکته بعدی این خطه :

کد:

<plugin name= "cordova-plugin-wkwebview-engine" />

wkwebview رو به چه دلیل گذاشتین ؟ چون مربوط به ios هست نه اندروید.

شاید مشکل از اینه که پلاگین ها کار نمیکنه ! 

[mostafanastary]

سلام
شما کد رو اصلاح و تست کنین و خبر بدین.

ممنون

[Mojtaba]

مشکل کار نکردن پلاگین‌ها این هست که نصب نشدند.
برای مثال اگر شما از پلاگین Cordova Flash Light که داخل مجموعه پلاگین‌های CranBerry هست استفاده کنید، باید پلاگین مربوط به اون رو هم نصب کنید، یعنی در خطّ فرمان تایپ کنید:

کد:

cordova plugin add cordova-plugin-flashlight

در این صورت پلاگین‌ها بدون هیچ مشکلی کار خواهند کرد.

[mhc]

مشکل کار نکردن پلاگین‌ها این هست که نصب نشدند.
برای مثال اگر شما از پلاگین Cordova Flash Light که داخل مجموعه پلاگین‌های CranBerry هست استفاده کنید، باید پلاگین مربوط به اون رو هم نصب کنید، یعنی در خطّ فرمان تایپ کنید:

کد:

cordova plugin add cordova-plugin-flashlight

در این صورت پلاگین‌ها بدون هیچ مشکلی کار خواهند کرد.

سلام با تشکر ار آقا مصطفی که این آموزش خوبو تهیه کردن ولی من یک سول داشتم پلاگین های ارانی رو چی جوری نصب کنیم که با آدرسgit هستند؟

[mhc]

سلام من این مشکلود دارم

[mostafanastary]

سلام.

اول اینکه یک بار دیگه دقیق مراحل رو بررسی کنین

اگه درست نشد، متن ارور رو اینجا بذارید، نه عکس رو.