Kaptain Kitty
انتشار :۱۲ شهریور ۱۳۹۳
بازدید :6876 بار

PhoneGap یک فریم ورک اپلیکیشنی می باشد که به شما امکان ساخت اپلیکیشن های Native را با استفاده از HTML و جاوا اسکریپت می دهد. آسان ترین راه برای استفاده از فون گپ یک container با یک web view می باشد که دارای عرض ۱۰۰% و ارتفاع ۱۰۰% است و رابط برنامه نویسی آن جاوا اسکریپت است که به شما امکان دسترسی به ویژگی های اصلی سیستم عامل را می دهد. شما رابط کاربری خود را با استفاده از مهارت های معمول برنامه نویسی وب (HTML، CSS و جاوا اسکریپت) ایجاد می کنید و از کانتینر فون گپ برای صف آرایی اکو سیستم ها و دستگاه های اپلیکیشنی مختلف استفاده می کنید. هنگامی که اپلیکیشن فون گپ برای توزیع بسته بندی می شود، می توان آن را در فروشگاه های معمول فروش اپلیکیشن (آیتونز، گوگل اپ مارکت، آمازون مارکت و غیره) توزیع کرد.

فون گپ صد در صد اوپن سورس می باشد و با نام Apache Cordova نیز شناخته می شود. می توانید با مراجعه به وب سایت http://incubator.apache.org/projects/callback.html اطلاعات بیشتری را در مورد Apache Cordova به دست آورید. می توان از فون گپ برای ساخت اپلیکیشن هایی استفاده کرد که پلتفرم های متعددی از جمله iOS، Android، Windows Phone، BlackBerry، WebOS، Symbian و Beta را هدف قرار می دهد.

می توانید پلتفرم های قابل پشتیبانی فون گپ و ویژگی های قابل پشتیبانی آنها را در وب سایت http://phonegap.com/about/features مشاهده کنید.

ظاهر یک اپلیکیشن فون گپ

از آنجایی که موتور رندر UI، مرورگر گوشی موبایل می باشد، اپلیکیشن های فون گپ می توانند به هر چیزی شبیه باشند. شما می توانید از HTML و CSS استاندارد استفاده کنید تا ظاهر یک صفحه ی وب نرمال را به آن بدهید، می توانید از یک فریم ورک UI مانند jQuery UI، Kendo UI، Sencha، Twitter Bootstrap یا Skeleton (یا دیگر فریم ورک های HTML/CSS/JS مخصوص UI) استفاده کنید. شما همچنین می توانید از style ها یا theme های CSS استفاده کنید تا محتوای شما ظاهر اپلیکیشن های native را پیدا کند مانند iUI برای شبیه سازی iOS یا Android یا bbUI برای شبیه سازی BlackBerry.

اپلیکیشن های فون گپ می توانند از اشاره های pinch/zoom برای زوم کردن و از زوم خارج کردن استفاده کنید یا می توانید اندازه ی viewport را با استفاده از viewport metadata tag قفل کنید. شما می توانید scroll صفحه را با استفاده از رفتار های نرمال مرورگر ایجاد کنید یا از یک کتابخانه مانند iScroll استفاده کنید تا scroll لمسی المان های خاص کانتینر را فعال کنید.

در واقع راه های زیادی برای ایجاد رابط کاربری با HTML، CSS یا جاوا اسکریپت وجود دارد، بنابراین هیچ ظاهر معمول و رایجی برای آن وجود ندارد. اگر هرگز از style های CSS استفاده نکنید، تمام المان های رابط کاربری از سیستم عامل یا مرورگر پیش فرض آن پلتفرم خاص استفاده می کنند که این خود شامل دکمه ها، لینک ها و حالات رنگ و هایلایت است. این روش دقیقا مانند مرورگر پیش فرض سیستم عامل عمل می کند.

نحوه شروع کار با فون گپ 

شروع کار با فون گپ آسان است. برای ۹۰ درصد اپلیکیشن های فون گپ، تمام آنچه که نیاز دارید یک ویرایشگر متن است. فون گپ می تواند با محیط های برنامه نویسی هر دستگاه به سادگی ادغام شو.د شما می توانید دستورالعمل های شروع کار را برای تمام پلتفرم ها در لینک های زیر ببینید:

هنگام نوشتن اپلیکیشن های فون گپ، به یاد داشته باشید که شما در حال اجرای کد در داخل نمونه ای از مرورگر وب هستید. شما اپلیکیشن های خود را با استفاده از HTML و جاوا اسکریپت ایجاد می کنید نه کد native، بنابراین نیاز به چیز خاصی ندارید. در واقع اکثر برنامه نویسان پروسه ی برنامه نویسی خود را با استفاده از یک ویرایشگر HTML و مرورگر کروم بر روی دسکتاپ انجام می دهند. هنگامی که نیاز به کارایی خاصی در یک دستگاه باشد یا نیاز به تست بر روی یک دستگاه باشد، در آن مورد می توان به محیط مخصوص هر دستگاه سوئیچ کرد.

نحوه ی Debug کردن اپلیکیشن هایی فون گپ

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

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

از آنجایی که اپلیکیشن های فون گپ با HTML، CSS و جاوا اسکریپت نوشته می شوند، می توانید اکثر آنها را با استفاده از ویرایشگر HTML توسعه داده و در یک مرورگر وب دسکتاپی آن ها را debug کنید. آخرین نسخه های تمام مرورگر های بزرگ (مانند Chrome، IE، Firefox، Opera و Safari) دارای ویژگی های کامل debug کردن هستند. در بخش Developer Tools مرورگر، شما می توانید المان های HTML DOM را inspect کنید، style های CSS را inspect کنید، breakpoint ها را در جاوا اسکریپت مشخص کنید و به درون متغیر های حافظه و جاوا اسکریپت به بررسی بپردازید. می توانید در لینک های زیر اطلاعات بیشتری را در مورد Developer Tools مرورگر های دسکتاپی به دست آورید:

هنگامی که شما جنبه های اصلی اپلیکیشن خود را با استفاده از ابزار های دسکتاپی ایجاد کنید، می توانید برای افزودن رفتار خاص هر دستگاه و ادغام شدن با API های فون گپ می توانید به محیط هر دستگاه سوئیچ کنید.

لازم است که حتما اپلیکیشن های خود را بر روی دستگاه های واقعی تست کنید. دستگاه های واقعی دارای اجرای متفاوتی از مرورگر های دسکتاپ و شبیه ساز ها می باشند و می توانند بسیاری از bug ها و مشکلات را که شامل تفاوت های API و سناریو های متفاوت UX میباشد را آشکار کند.

Debug کردن اپلیکیشن ها با استفاده از debug.phonegap.com

فون گپ یک سرویس میزبان ارائه می دهد که به شما امکان دیباگ کردن از راه دور و بر روی دستگاه را از طریق debug.phonegap.com می دهد. این سرویس از ابزار Weinre (Web Inspector Remote) استفاده می کند تا شما امکان inspect کردن DOM، بارگذاری منبع، استفاده شبکه، timeline و خروجی console از دور را داشته باشید. اگر شما هر کدام از developer tools های بالا را استفاده کرده باشید، این مورد برای شما بسیار آشنا خواهد بود. شما نمی توانید breakpoint ها را بر روی گوشی موبایل تنظیم کنید اما باز هم این روش بهتر از هیچ است.

Remote Web Inspector از طریق iOS 5

یک API مستند سازی نشده که تا حد کمی شناخته شده است در iOS 5 معرفی شده است که به شما امکان اجرای عمل دیباگ را از طریق iOS5 Simulator می دهد. فقط باید قابلیت remote debugging را فعال کنید:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Uncomment to enable remote debugging
    [NSClassFromString(@"WebView") _enableRemoteInspector];
    ...
}
سپس اپلیکیشن را در iOS Simulator دسکتاپ راه اندازی کنید. هنگامی که اپلیکیشن در حال اجرا قرار دارد، مرورگر لوکال Safari را با آدرس http://localhos:9999 باز کنید. این آدرس remote debugger را راه اندازی کرده، breakpoint ها و بررسی script را کامل می کند. می توانید در آدرس http://hiediutley.com/2011/11/22/debugging-ios-apps-using-safari-web-inspector اطلاعات بیشتری را در این مورد به دست آورید.
نحوه ی معماری اپلیکیشن های فون گپ
شما معمولا معماری اپلیکیشن های فون گپ را مشابه با موبایل وب ایجاد می کنید. تفاوت در این است که در ابتدا کد های HTML به جای یک ریموت سرور، فقط به صورت Local قابل دسترسی هستند. اپلیکیشن های فون گپ HTML آغازین را بارگذاری می کنند که پس از آن می تواند درخواست منبع را به سرور یا محیط Local ارسال کند. از آنجایی که فون گپ بر پایه ی مرورگر می باشد، دقیقا به همان صورتی که از یک مرورگر انتظار دارید، رفتار می کند. شما می توانید چندین صفحه را بارگذاری کنید؛ البته به یاد داشته باشید که هر بار که صفحه ای load/unload می کنید، بخشی از داده هایی که توسط جاوا اسکریپت بر روی حافظه ذخیره شده است را از دست می دهید. فون گپ از حالت وب تک صفحه ای هم پشتیبانی می کند. قویا توصیه می شود که از روش معماری تک صفحه ای (single-page)  استفاده کنید.
معماری تک صفحه ای
معماری تک صفحه ای به معماری اشاره دارد که در آن یک صفحه ی HTML داریم که به صورت داینامیک بر اساس داده یا ورودی های کاربر آپدیت می شود. شما می توانید آن را مشابه با یک معماری واقعی کلاینت/سرور در نظر بگیرید که در آن یک اپلیکیشن کلاینت (که با HTML و CSS نوشته شده است) و یک ساختار جداگانه ی سرور برای ارائه ی داده ها وجود دارد. منطق اپلیکیشن سمت کلاینت بر پایه ی جاوا اسکریپت می باشد. اپلیکیشن سمت کلاینت می تواند در خواست داده دهد و view های خود را بدون بارگذاری مجدد صفحه ی جاری، آیدیت کند.
استفاده از معماری تک صفحه ای به شما امکان حفظ داده های موجود در حافظه را با جاوا اسکریپت می دهد که خود باعث ایجاد یک رابط کاربری داینامیک و پربار می شود. می توانید اطلاعات بیشتر را در مورد معماری های تک صفحه ای در آدرس http://en.wikipedia.org/wiki/single-page-application به دست آورید.
معماری اپلیکیشن های فون گپ را می توان با استفاده از هر یک از فریم ورک های رایج جاوا اسکریپت مثل Angular، Ember، Backbone، Mustache و غیره ایجاد کرد.
نحوه ی استفاده اپلیکیشن های فون گپ بر روی دستگاه ها و اکوسیستم های اپلیکیشنی
می توان با استفاده از دستورالعمل هایی که برای اپلیکیشن های native هر پلتفرم استفاده می شود، اپلیکیشن های فون گپ را نیز آرایش داد. شما باید قوانین پلتفرم های سخت افزاری را دنبال کنید و هیچ راهی هم برای دور زدن این قوانین وجود ندارد. شما می توانید بخش های قابل اجرای هر پلتفرم را با استفاده از فرآیند build هر پلتفرم، کامپایل کنید و یا می توانید از build.phonegap.com برای کامپایل کردن آنها برای خودتان استفاده کنید.
build.phonegap.com یک سرویس میزبانی است که فایل های قابل توزیع اپلیکیشن های خاص هر پلتفرم را برای شما کامپایل خواهد کرد. در هور صورت، خروجی فرآیند build یک فایل باینری مخصوص همان پلتفرم می باشد: IPA برای iOS، یا APK برای Andoid و غیره. شما می توانید اطلاعات بیشتر را در مورد توزیع اپلیکیشن در اکوسیستم های مختلف اپلیکیشن و نیاز های هر سیستم برای ثبت نام را در لینک های زیر به دست اورید:
تفاوت بین PhoneGap و AIR چیست؟
اساسی ترین تفاوت بین فون گپ و AIR این است که شما اپلیکیشن های AIR را با استفاده از ابزارهایی می سازید که اساس آن پلتفرم فلش می باشد (Flex، Flash، ActionScript، MXML)، اما اپلیکیشن های فون گپ را با استفاده از HTML، CSS و جاوا اسکریپت می سازید. اپلیکیشن های AIR از AIR Runtime استفاده می کنند که به شما امکان داشتن یک code base اما رفتاری کاملا مشابه در همه ی پلتفرم های پشتیبانی شده را می دهد. اپلیکیشن های فون گپ در هر یک از پلتفرم های پشتیبانی شده در درون کامپوننت مرورگر native آن پلتفرم اجرا می شوند. به همین دلیل codebase فون گپ ممکن است در پلتفرم های مختلف، با رفتار کمی متفاوت اجرا شود که باید این امر را حین پروسه ی برنامه نویسی خود در نظر داشته باشید.
اپلیکیشن های AIR را می توان برای iOS، Android، BlackBerry Playbook و دسکتاپ (mac و windows) ایجاد کرد که در آینده هم از Windows Metro (یعنی رابط موبایل Windows 8) پشتیبانی خواهد کرد. می توانید در آدرس http://www.adobe.com/products/air/teche-specs.html اطلاعات بیشتری را در مورد پلتفرم های پشتیبانی شده ی AIR به دست آورید.
اپلیکیشن های فون گپ را می توان برای iOS، Android، Windows Pone 7، HP WebOS، Symbian و Samsung Bada ایجاد کرد. می توانید پلتفرم های پشتیبانی شده توسط فون گپ را در آدرس http://phonegap.com/about/feature ببینید.
ActionScript دارای object های قدرتمندی می باشد و از مدل های برنامه نویسی ارث بری کلاسیک (classical inheritance) پشتیبانی میکند. اپلیکیشن های AIR را می توان با استفاده از فریم ورک Flex هم ایجاد نمود که به شما امکان ساخت سریع اپلیکیشن های کلاس تجاری را می دهد. کامپوننت های موجود در اپلیکیشن های AIR نیز object های منطقی هستند که دارای رفتار، خصوصیت و زمینه ی گرافیکی هستند.
اپلیکیشن هایی که اساس آنها جاوا اسکریپت می باشد از مدل های برنامه نویسی ارث بری پروتوتایپ (prototypal inheritance)  پشتیبانی می کنند و دارای ابزار ها و فریم ورک های اوپن سورس فراوانی هستند که می توان آنها را مورد استفاده قرار داد. اپلیکیشن های HTML/JS نیز از طریق المان های DOM نمایش داده می شوند.رابط های HTML را می توان از طریق زنجیره های رشته ای پایه یا تمپلیت های جاوا اسکریپت ایجاد کرد اما در انتها شما المان های DOM را ایجاد کرده اید که دارای خصوصیت و style هستند.
تفاوت های اساسی مختلفی در سینتکس سازنده ی این اپلیکیشن ها وجود دارد، البته مفهوم اولیه ی طراحی تعاملی و برنامه نویسی تعاملی یکسان است. هر دو پلتفرم دارای قدرت های مختلفی هستند که می توان هزاران مورد را نام برد. که در مقالات بعدی به آنها پرداخته خواهد شد.

برچسب‌ها, , , , ,

مطالب مرتبط

  اخیرا شاهد بحث هایی در مورد بخش خاصی از iOS SDK هستیم که به برنامه نویسان امکان تعبیه محتوای وب را در درون اپلیکیشن هایشان می دهد. این کلاس خاص، یعنی UIWebView، این فرصت را در اختیار برنامه نویسان قرار می دهد تا بتوانند از طریق تعبیه کردن (embed) اپلیکیشن های تحت وب خود در درون یک […]

فریم ورک فون گپ (PhoneGap) فون گپ فریم ورک برنامه نویسی موبایل است که توسط Nitobi تولید و در سال ۲۰۱۱ توسط Adobe Systems خریداری شد. فریم ورک فون گپ این امکان را به برنامه نویسان نرم افزار می دهد تا به جای استفاده از زبان های برنامه نویسی خاص هر دستگاه مانند Objective-C، ساخت […]

  1. هادی می‌گه:

    درود
    حیفم اومد بعد خواندن این مطالب پیغامی نذاشته برم خدا قوت امیدوارم ادامه دار باشه
    اگر درباره webview در cordova یا همان phongap هم مطلبی داشته باشید ممنون میشم

    1. summit می‌گه:

      سلام و وقت بخیر،
      امیدوارم با تغییرات مثبتی که در وبسایت در روزهای آینده به وجود خواهد آمد مطالب کامل تر و مفید تری ارائه دهیم.

  2. علی می‌گه:

    سلام
    ممنون خوب بود

    1. Summit می‌گه:

      سلام دوست عزیز،
      با تشکر

  3. itman می‌گه:

    اگر سوالی در مورد فریمورک فون گپ (phonegap) داشتید با ایمیل itman.new@gmail.com یا وبلاگ phonegap.blogfa.com در تماس باشید .

  4. حسام خامسی می‌گه:

    سلام، ما یک استارت آپ داریم راه اندازی میکنیم که قراره از فون گپ استفاده کنیم، برای اینکار هم ایده، هم فضای کار در تهران، هم سرمایه، هم سرور، هم بازار فروش و مشتری و امکانات دیگر داریم ولی تیم فنی کاملی نداریم و به فرد یا افرادی نیاز داریم که بتونن و علاقه داشته باشن به تیم ما ملحق بشن،
    شرایط کار به این صورته که در ابتدا هم حقوق پرداخت میشه و هم سود از فروش (تقسیم سهام رسمی شرکت).
    ممنون میشم اگر کسی رو میشناسین معرفی کنین،
    حسام خامسی
    ۰۹۱۲۳۱۶۱۵۰۶

    1. Summit می‌گه:

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

  5. هاشم سیلاوی می‌گه:

    عالی بود .
    موفق باشید

    1. Summit می‌گه:

      سلام
      سپاس از شما

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه