استارت‌آپ و کارآفرینی


شروع کار با phonegap

بوسیله میثاق آقاخانی 11

در مطلب قبلی به معرفی پلتفرم phonegap پرداختیم، اما در این بخش قصد دارم پا را فراتر بزاریم و گام به گام با هم حرکت کنیم تا بتونیم اولین پروژه فونگپی رو بسازیم و ازش اجرای بگیریم البته پروژه معروف HelloWorld منظورم هست. قبل از اینکه شروع کنم ذکر این نکته لازمه که بگم، من سیستم عاملی که انتخاب کردم برای خروجی گرفتن اندروید هست. خروجی گرفتن برای بقیه پلتفرم ها رو می زارم به عهده خودتون و مطمئن هستم که از عهدش بر میاید چون در ادامه خواهید دید که چطور برای اندروید خروجی خواهم گرفت. پس با من در ادامه کار همراه شوید.

شما برای کار با فونگپ به دو روش می تونید عمل کنید یا اینکه از دستورات خط فرمان CLI(Command Line Interface) استفاده کنید و یا اینکه فونگپ رو دانلود کنید و خودتون توی محیط های مناسب پروژتون رو ایجاد کنید و ملزومات پروژه رو اضافه کنید که یکم ممکنه برای کسایی که نمی خوان خودشون رو با اون محیط ها درگیر کنند توصیه نمی شه. ما راه اول رو انتخاب می کنیم که ساده تر هست.

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

  1. JDK
  2. Android SDK
  3. Apache Ant
  4. Nodejs

Java Development Kit (JDK)

زمانی که شما قصد برنامه نویسی اندروید دارید به JDK نیاز پیدا می‌کنید چون برنامه نویسی اندروید به زبان جاوا هست، در ضمن برخی از دستورات خط فرمان نیاز به این پکیج داره و می‌تونید از اینجا دانلودش کنید.

Android SDK

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

Apache Ant

پروژه های اندرویدی توسط این ابزار Build می شند پس به این ابزار هم نیاز پیدا می کنید اگر نصب ندارید از اینجا می تونید دانلودش کنید.

Nodejs

و سرانجام Nodejs که کلیه عملیات ایجاد پروژه‌ها برای پلتفرم های مختلف، Build پروژه‌ها و اجرای این پروژه‌ها توسط این Interface انجام می‌گیره. برای دانلود اون می‌تونید وارد قسمت دانلود این پروژه بشید.

 

پس از نصب این ابزار ها یک کار دیگه باید انجام بشه و اون اضافه کردن این ابزارها توی Path سیستم عامل هاتون هست چون من از ویندوز استفاده می‌کنم روی حالت ویندوز توضیح می‌دم. ابتدا یه System Properties بروید و تب Advanced رو انتخاب کنید و سپس روی دکمه Environment Variables بزنید.

phoneGap-01

در پنجره ای که باز می شه شما می تونید تمام Path هایی که ایجاد شده رو ببنید. حالا شما باید مطمئن بشید که ابزارهایی که نصب کردید توی Path ویندوز قرار گرفتند یا نه. این مقادیر که در زیر لیست کردم باید در Path تنظیم شده باشه.

  1. D:\AndroidSDK\tools
  2. D:\ant\bin
  3. C:\Users\misaghDroid\AppData\Roaming\npm

این مقادیر پشت سر هم و با علامت “;” از هم جدا شدند توجه داشته باشید که مسیر نصب رو متناسب با مسیر نصب خودتون تغییر بدید مثلا برای Android SDK من در درایو D خودم Extract کردم. برای ویرایش Path کافیه که انتخابش کنید و روی دکمه ویرایش بزنید.

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

  1. ANDROID_HOME که مقدارش باید مسیر نصب SDK باشه برای من هست D:\AndroidSDK
  2. JAVA_HOME باید مسیر نصب JDK باشه برای من هست C:\Program Files\Java\jdk1.7.0_67
  3. ANT_HOME باید مسیر نصب Apache Ant رو بهش بدید که برای من هست D:\ant

phoneGap-02

خوب پس از نصب ابزارهای مورد نیاز و همچنین تنظیمات مربوطه تازه کار ما شروع می‌شه و با باز کردن صفحه CMD ویندوز می‌تونیم دستورات مورد نظر رو وارد کنیم تا عملیات مورد نظر انجام بشه.

اولین کاری که باید انجام بشه نصب phonegap هست که با دستور زیر انجام پذیر است.

c:\>npm install -g cordova

اگر متوجه شده‌اید، در انتهای دستور از عنوان cordova استفاده شده که تفاوتی با phonegap نداره در واقع phonegap یک توزیع دیگری از cordova هست و به شما یک سری امکانات می ده که ما بهشون نیازی نداریم پس ما هم همون cordova رو نصب می‌کنیم و ادامه کار رو با اون انجام می‌دهیم. پس از تمام شدن عملیات نصب شما نیاز دارید که اسم پروژه و مکان پروژه رو تعیین کنی.

e:\cordova>cordova create hello com.example.hello HelloWorld

مسیری که من برای ایجاد پروژم انتخاب کردم E:\cordova هست که شما می‌تونید هر مسیر دلخواهی انتتخاب کنید. پس از اجرای این دستور یک پوشه با نام hello ایجاد خواهد شد و فایل های مربوط به پروژه شما در آن قرار خواهد گرفت و یک نام منحصر به فرد به اپلیکیشنتون اختصاص می دهید به اسم com.example.hello.

معمولا برای متمایز کردن اپلیکیشن های اندرویدی از برنامه های دیگر از این فرمت برای نامگذاری استفاده می‌شود و بیشتر نام دامین سایت به صورت بر عکس انتخاب می‌شه مثل (ir.hive.sample) و در نهایت نام پروژه HelloWorld تعیین شده است. تصویر زیر بعد از اجرای دستور بالا خواهد بود.

phonegap14

اگر به مسیر پروژه برید یک سری پوشه و فایل ساخته شده است

phonegap16

در اینجا یک فایل config.xml وجود دارد که شما تنظیمات پروژه از جمله اینکه چه پلاگین‌هایی به پروژه شما اضافه شود در این فایل وارد خواهید کرد. پوشه platforms مربوط به قرارگیری هر کدام از پلتفرم هایی android، ios، windows phone و … است. پوشه بعدی www که شامل کدهای HTML، css و javascript شما خواهد بود که در اصل اپلیکیشن شما بر پایه این فایل‌ها ساخته می شود.

به پنجره command prompt یا همون CMD برگردید و وارد پوشه hello شوید و دستور زیر را اجرا کنید

e:\cordova\hello>cordova platform add android

با اجرای دستور بالا شما به cordova می گید که یک پروژه اندرویدی برای شما ایجاد کند و این پروژه در پوشه platforms ساخته خواهد شد. اگر وارد این پوشه شوید متوجه خواهید شد که یک پوشه با نام android وجود دارد.

خوب ما نیاز داریم که پروژه ای که ساخته شده رو با کدهایی که درون پوشه www نوشتیم Build بگیریم تا خروجی مورد نظر رو که یک فایل .apk است رو به ما بدهد. پس دستور زیر رو اجرا خواهیم کرد.

e:\cordova\hello>cordova build android

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

phonegap20

اگر در هنگام Build به مشکل خاصی برخورد کردید این مقادیر رو هم در Environment Variable تنظیم کنید.

  1. JAVA و مقدارش رو C:\Program Files\Java\jdk1.7.0_67\bin قرار بدید
  2. ANT و مقدارش رو D:\ant\bin تنظیم کنید

و اما این همه کار انجام دادیم تا خروجی رو ببینیم پس نیار داریم که این خروجی بر روی یک دستگاه اندرویدی اجرا بشه، اگر دستگاه اندرویدی ندارید نگران نباشید می‌تونید یکی یا چند تا دستگاه اندرویدی به صورت مجازی اجرا کنید. برای این کار چند تا گام باید بردارید.

به مسیر Android SDK که قبلا دانلود کرده بودید برید و SDK Manager.exe رو اجرا کنید. یک توضیح در مورد SDK manager بدم اینکه شما می‌تونید تمام نسخه های اندروید به همراه پکیج‌‌های مربوط به هر نسخه رو از این قسمت دانلود کنید و ازشون برای ساخت دستگاه‌های مجازی برای نسخه‌های مختلف استفاده کنید. در صورتی که SDK رو از لینکی که داده بودم دانلود کنید آخرین نسخه از اندروید درون آن قرار داره و نسخه‌های قدیمی‌تر رو خودتون باید دانلود کنید و اضافه کنید. فقط حواستون باشه که قبل از اجرای SDK Manager حتما ف+ی+لتر ش+ک+ن‌تون فعال باشه.
پس از اجرای SDK Manager شما آخرین نسخه از اندروید را خواهید داشت. توصیه من این هست که یک نسخه از ورژن‌های قدیمی‌تر اندروید رو نصب داشته باشید بعضا دستگاه‌های مجازی که ایجاد می‌کنید با ورژن‌های جدید مشکل دارند، مثلا خود من با ورژن جدید اندروید یعنی ۵٫۰٫۱ روی nexus 4 مشکل داشتم اما با ورژن ۴٫۱٫۲ اندروید دستگاه مجازی رو بدون مشکل ایجاد کردم.

به مسیر Android SDK برید و فایل AVD Manager.exe رو اجرا کنید. سپس تب Device Definitions رو انتخاب کنید و از بین دستگاه های موجود یکی رو انتخاب کنید پیشنهاد من nexus 4 هست. و بعد از اون روی دکمه Create AVD بزنید تا دستگاه شما ساخته شود.

در پنجره باز شده اگر ورژن ۴٫۱٫۲ اندروید رو نصب کردید تنظیماتتون رو مثل من انجام بدید در غیر این صورت هر ورژنی از اندروید رو دوست دارید انتخاب کنید.

phonegap24

سپس دستگاه ساخته شده رو انتخاب و دکمه start رو بزنید در پنجره باز شده بعدی هم روی دکمه launch بزنید

phonegap25

و در نهایت شما می تونید یک دستگاه اندرویدی داشته باشید

phonegap-26

خوب الان وقت اون رسیده به صفحه سیاه رنگ command prompt برگردیم و با استفاده از دستورات خط فرمان برنامه رو اجرا کنیم. پس به مسیر پروژتون برید و دستور زیر رو اجرا کنید.

e:\cordova\hello>cordova emulate android

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

phonegap-28

بهتون تبریک می گم شما اولین برنامه خودتون رو با phonegap نوشتید امیدواردم از این بخش آموزش لذت برده باشید.

میثاق آقاخانی
ممکن است شما دوست داشته باشید بیشتر از نویسنده
11 نظرات
  1. بهزاد شیرانی می گوید

    میثاق جان عالی بود، واقعا کاربردی و خوب، ممنونم ازت

    پاسخ
    1. میثاق آقاخانی می گوید

      خواهش می کنم خوشحالم که دوست داشتی

      پاسخ
  2. amin می گوید

    سلام ممنون بابت توضحات عالیتون
    فکر کنم خیلی وقته از انتشار این مطلب گذاشته ولی یه سوال داشتم
    وقتی برنامه نویسی تحت وب انجام میدیم علاوه بر js , css , Html زبان php , Query هم استفاده میکنیم
    الان برای استفاده از فون گپ بجای این دوزبان باید چیکار کرد ؟
    مثلا من میخوام یه اپ واسه سایتم بسازم همون کدهای js , css , Html رو با فون گپ برای موبایل تبدیل میکنم الان جای توابعی php که در سایت اصلی ازش استفاده میشه چی باید گذاشت بجاش ؟
    باتشکر

    پاسخ
  3. حسین می گوید

    سلام وقتی که می خوام کامپایل کنم این خطا رو میده مشکل از کجاست همه راه ها رو چک کردم.
    No installed build tools found. Please install the Android build tools version
    ۱۹٫۱٫۰ or higher.

    پاسخ
  4. عاطفه می گوید

    سلام من هر وقت دستور cordova build android رو میزنم این ارور ها رخ میده. چیکار باید بکنم؟

    FAILURE: Build failed with an exception. Where: Script ‘H:\prjPath\prjName\platforms\android\CordovaLib\cord ova.gradle’ line: 64 What went wrong: A problem occurred evaluating root project ‘android’. > No installed build tools found. Please install the Android build tools version 1 9.1.0 or higher.

    Try: Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.
    BUILD FAILED
    Error: Error code 1 for command: cmd with args: /s,/c,””H:\prjPath\prjName\platforms\android\gradlew” cdvBuildDebug -b “H:\prjPath\prjName\platforms\android\build.gradle” -Dorg.gradle.daemon=true -Pan droid.useDeprecatedNdk=true”

    پاسخ
    1. بهروز خضری می گوید

      سلام،
      برنامه SDK Manager‌ رو باز کنید، و مراحل این لینک رو دنبال کنید https://goo.gl/rsn32e
      بعدش تیک مربوط به Android Build Tools‌ رو بزنید برای مثال ۲۳.۰.۳ رو. بعد نصبش کنید و مراحل اینجا رو دنبال کنید،‌ مشکل‌تون حل میشه.

      پاسخ
  5. مجید می گوید

    با سلام
    ممنون از آموزشتون
    چند تا سوال داشتم :
    ۱- با دستور c:\>npm install -g cordova چقدر طول میکشه یا چند مگ دنلود میشه ؟
    ۲ – راه دیگه ای برای نصب غیر از دستور c:\>npm install -g cordova هست؟؟منظور به صورت آف لاین؟
    ممنون

    پاسخ
  6. کوروش کاظمی می گوید

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

    Error: cmd: Command failed with exit code 1 Error output:
    FAILURE: Build failed with an exception.

    * What went wrong:
    A problem occurred configuring root project ‘android’.
    > Could not resolve all dependencies for configuration ‘:classpath’.
    > Could not resolve com.android.tools.build:gradle:2.2.3.
    Required by:
    project :
    > Could not resolve com.android.tools.build:gradle:2.2.3.
    > Could not get resource ‘https://repo1.maven.org/maven2/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.pom’.
    > Could not GET ‘https://repo1.maven.org/maven2/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.pom’.
    > This is usually a temporary error during hostname resolution and means that the local server did not receive a response from an authoritative server (repo1.maven.org)
    > Could not resolve com.android.tools.build:gradle:2.2.3.
    > Could not get resource ‘https://jcenter.bintray.com/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.pom’.
    > Could not GET ‘https://jcenter.bintray.com/com/android/tools/build/gradle/2.2.3/gradle-2.2.3.pom’.
    > This is usually a temporary error during hostname resolution and means that the local server did not receive a response from an authoritative server (jcenter.bintray.com)

    * Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.

    پاسخ
    1. مهدی می گوید

      سلام
      منم همین مشکل رو دارم.
      شما این مشکل روچجوری حل کردی آقا کوروش؟
      کسی اگه می دونه ممنون می شم راهنمایی کنه.

      پاسخ
  7. علی اکبر می گوید

    سلام ببخشید بیلد سیستم Cordova مگه ant نیست؟؟ این چرا از من میخاد گریدل نصب کنم؟ تازه اونم نصب و معرفی کردم باز یه خطای دیگه میده unable to start daemon process

    پاسخ
  8. محمدرضا می گوید

    سلام
    برای من این اخطار رو میده کارهایی که گفته رو هم کردم ولی بازم مشکل حل نشده!
    F:\cordova\hello>cordova build android
    ANDROID_HOME=F:\Android\AndroidSDK
    JAVA_HOME=F:\jdk
    Error: Could not find an installed version of Gradle either in Android Studio,
    or on your system to install the gradle wrapper. Please include gradle
    in your path, or install Android Studio

    پاسخ

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.