بایگانی برچسب: s

apache-cordova-300x188

آموزش cordova – آموزش jquery – mobile

با سلام.
با یکی دیگر از آموزش های گروه برنامه نویسی پنگوئن در خدمت شما هستیم.
همان طور که در جلسه قبل مشاهده کردیم برای بهبود کارایی و جلوگیری از مشکلات ثانویه ، نیاز به استفاده از فریمورک های بهینه شده وب برای موبایل داریم.
بدین منظور jQuery Mobile را استفاده میکنیم.
در توضیح این که jQuery Mobile چیست باید گفت : jQuery Mobile یک فریمورک بهینه شده برای محیط های لمسی و برای ساخت نرم افزارهای موبایل تحت وب می باشد ، و بر روی تمام مرورگر های متداول گوشی های هوشمند از قبیل iOS , android , Windows Phone و… کار می کند . البته ما که می خواهیم تحت کوردوا (apache cordova) از آن استفاده کنیم مشکلی از جهت عدم پشتیبانی پیش نخواهد آمد.
خوبی jQuery Mobile این است که خودش توابع و کلاس های لازم را برای ساخت انواع صفحات و شکل ها و کنترل ها و… دارا می باشد و ما به سادگی میتوانیم از آن ها استفاده کنیم ، و این کار باعث کد زدن کمتر می شود. در واقع کاری که jQuery Mobile برای ما انجام می دهد این است که ما کمتر کد می زنیم و بیشتر کار انجام شده به دست می آوریم.
همانگونه که تاکنون باید متوجه شده باشید ، برای کاربا jQuery Mobile نیاز به آشنایی با HTML , CSS , JQUERY دارید که می توانید از آموزش های گروه برنامه نویسی پنگوئن استفاده کنید.
مزیت استفاده از jQuery Mobile و تلفیق آن با Apache Cordova این است که ما به جای استفاده از زبانهای مختلف مانند:
• Java برای Android و Blackberry
• Objective C برای iOS
• #C و سایر زبان های خانواده .NET برای Windows Phone
که زبان های مخصوص برای برنامه نویسی این سیستم عامل ها می باشند تنها با کمک HTML , CSS , JavaScript بتوانیم نرم افزار تولید کنیم.

 

آماده سازی محیط برنامه نویسی برای jQuery Mobile
بدین منظور می توانید از هر IDE (محیط یکپارچه توسعه نرم افزار) مانند Visual Studio , NetBeans , Eclipse و… که با آن راحت هستید استفاده کنید.
برای استفاده از jQuery Mobile باید لینک فایل های css وjs مربوط به jQuery Mobile را در صفحه خود قرار دهید. که این لینک دادن هم میتواند آنلاین باشد (لینک به یک فایل موجود در یک سرور) و هم آفلاین (استفاده از فایل های دانلود شده در سورس پروژه ).
در روش دوم که راحت تر می باشد و ما استفاده می کنیم باید چند عدد فایل js و css را به صفحه وب لینک دهیم که در ادامه آن ها را برای دانلود قرار داده ایم.
این فایل ها عبارتند از:
• jquery.mobile-1.4.5.min.js
• jquery-1.11.3.min.js
• jquery-1.11.3.min.js
همچنین برای مطمئن شدن از رندر مناسب و زوم لمسی کدهای زیر را  در <head> می نویسیم:

که در کل می شود:

 

برای ایجاد یک صفحه مینویسیم :

همانطور که دیدید خاصیت data-role را باید مشخص کنیم . اینجا برابر page قرار دادیم.
برای ایجاد header و footer و content باید

هایی با این خاصیت ها را در در داخل این page تنظیم کنیم.

در ادامه نیز برای بستن بقیه تگ ها می نویسیم :

در انتها کل کد می شود :

 

 

امیدواریم این آموزش مفید واقع گردد.
با تشکر.

در این لینک فایل پروژه برای دانلود قرار داده شده است.

apache-cordova-300x188

ساخت یک نرم افزار ساده با cordova برای اندروید (android)

با سلام

در این آموزش می خواهیم یک نرم افزار بسیار ساده تبدیل کننده مقادیر (Measurement Converter) برای اندروید به کمک cordova تولید کنیم.
کار این نرم افزار این هست که فرضا ما تعداد روز را وارد می کنیم و متناظر آن در ماه و سال محاسبه می شود.
مثل ۳۶۵ روز که معادل ۱ سال و…
همانطور که در آموزش قبلی گفتیم ، عمده کار ما با پوشه www و فایل index.html می باشد ، یعنی اینکه به طور خلاصه ما یک front end application می سازیم (یعنی نرم افزاری که در یک مرورگر مدرن به راحتی اجرا می شود) و بعد به کمک cordova آن را تبدیل به نرم افزار (apk و …) و قابل نصبی بر روی گوشی های هوشمند android – iphone – windows phone و… می کنیم.
برای تست کارکرد کدها هم فعلا در داخل مرورگر اجرا می گیریم.
برای راحت تر کد زدن ، به یک ویرایشگر ساده نیاز داریم . در این جلسه فعلا ++notepad کفایت می کند.
حال قدم به قدم جلو می رویم :

۱- یک فایل به نام index.html ایجاد می کنیم.

۲- داخل آن این کد ها را اضافه می کنیم:

۳- حال در داخل تگ باز و بسته body مینویسیم :

خروجی کار تا این مرحله می شود :

001

توضیح این قسمت :
– سه عدد input گذاشتیم که مقدایر روز – ماه – سال را دریافت کند و پس از حساب کردن نمایش دهد.
کار کرد این طور است که ما فرض در انتها مقدار روز را وارد می کنیم ۱۰۰۰۰ و با زدن دگمه محاسبه مقادیر متناظر سال و ماه برای ما داخل input ها نمایش داده می شود.

۴- حال بایستی دستورات جاوااسکریپت را بنویسیم تا محاسبات و فرایندهای مربوطه انجام گردند.
در داخل تگ باز و بسته head می نویسیم:

که اینجا محل نوشتن توابع جاوا اسکریپت javascript می باشد.

۵- نوشتن تابع ()calculate:
این تابع کارش دریافت مقادیر از فیلدهای ورودی و محاسبه مقادیر متناظر جدید می باشد.

– اگر توجه کنید می بینید که تابع ;(……,……..)inject_values در داخل کد ها بکار رفته ، این تابع را نوشتیم تا راحت تر بتوانیم مقادیر محاسبه شده را در صفحه نمایش دهیم .
۵- نوشتن تابع (inject_values(id, value :
این تابع دو آرگومان ورودی دارد یکی id یکی هم مقدار و کارش بدین صورت است که با id فیلد را پیدا می کند و value را داخل آن قرار می دهد ، و ما آن را در صفحه مشاهده می کنیم.

۶- تابع ()reset_values :
برای اینکه کاربر پس از انجام یک محاسبه دوباره بتواند مقادیر جدید وارد کند بایستی همه فیلد ها خالی شوند ، و این کار را این تابع انجام می دهد.

هم اکنون کارها درست انجام میشود :

002

003

 

در این مرحله میرویم سراغ stylesheet یا همان css برای زیباتر شدن .
۷- نوشتن css
– در داخل تگ باز و بسته head می نویسیم:

داخلش دستورات css را اضافه می کنیم:

۸- در انتها این مقادیر را به موارد موجود در ربط می دهیم.
– کل کد ها را داخل یک div گذاشته و به آن کلاس css را اضافه می کنیم:

– به button ها ی داخل نیز همینطور :

ظاهر کار در انتها این طور می شود :

 

004

 

• حال تبدیل این پروژه به یک نرم افزار اندروید به کمک cordova :
– طبق آموزشات قبلی به کمک خط فرمان یک پروژه cordova ایجاد می کنیم.
– موار موجود در پوشه www را حذف کرده و فایل index.html تولید شده خود را داخلش قرار می دهیم.
– پلنفرم اندروید را اضافه و پروژه را بیلد می گیریم:

مشاهده می شود که نرم افزار در تبلتها و … در کل به صورت landscape درست نمایش پیدا می کند :

 

005

 

اما در گوشی های کوچکتر و یا به صورت portrait بد نمایش داده می شود.

 

006

اینجا لزوم استفاده از library های بهینه شده وب ، برای موبایل مثل jquery Mobile یا موارد مشابه برای فریمورک cordova ، روشن می شود.

در جلسات پیش رو می رویم سراغ آموزش jquery mobile.

باتشکر.