بایگانی دسته: Cordova

apache-cordova

آموزش برنامه نویسی Cordova – آیکن ها در jQuery Mobile یا jQuery Mobile Icons

jQuery Mobile یک سری از آیکن ها (icon) را برای ما آماده کرده که استفاده از این آیکن ها باعث زیباتر شدن و مطلوب تر شدن خروجی کار می شود.

 

اضافه کردن آیکن (icon) به دگمه ها در jQuery Mobile

برای اضافه کردن آیکن (icon) به دگمه از کلاس ui-icon  و همچنین برای معین کردن مکان آیکن از کلاس ui-btn-icon-pos استفاده می کنیم.

 

نکته قابل توجه این است که برای بقیه دگمه ها مثل دگمه ها در list view یا form  ها از خاصیت data-icon استفاده باید کرد که در ادامه درس ها به آن پرداخته میشود.

در قطعه کد زیر مثالی در این باره آورده شده است:

 

محل قرار گیری آیکن ها

شما می توانید با ۴ مقدار toprightbottom یا left مشخص کنید که آیکن در کجای دگمه قرار بگیرد.

 

نمایش دگمه ها فقط با آیکن

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

 

برداشتن دایره خاکستری زیر آیکن

در حالت پیشفرض یک دایره به رنگ خاکستری رنگ اطراف آیکن را احاطه کرده. برای برداشتن آن خاصیت  ui-nodisc-icon را به خود گزینه مورد نظر یا به div بالا دستش اضافه می کنیم.

 

رنگ سفید یا سیاه برای آیکن ها

در حالت پیشفرض تمام آیکن ها سفید می باشند. برای تبدیل این رنگ به مشکی ، خاصیت ui-alt-icon را به خود گزینه مورد نظر یا به div بالا دستش اضافه می کنیم.

این آموزش در باره آیکن در jQuery Mobile بود که به پایان رسید.

در ادامه به بقیه موارد می پردازیم.

باتشکر.

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.

باتشکر.

apache-cordova

آموزش برنامه نویسی Cordova -شروع کار برنامه نویسی با cordova

آموزش برنامه نویسی Cordova -شروع کار برنامه نویسی با Cordova

شروع کار برنامه نویسی با cordova :

Cordova شامل ابزار های گوناگونی است که به کمک آنها میتوانیم نرم افزار های مختفی تولید کنیم
یکی از این ابزار ها cli میباشد که مخفف command line interface میباشد

یعنی از طریق خط فرمان میتوانیم دستوراتی را دهیم که پروژه ایجاد شود ، کامپایل شود و…
بدین منظور :
ابتدا بایستی یک پروژه ایجاد کنیم.
برای راحتی کار و پیش نیامدن اشتباهی
– یک پوشه ایجاد میکنیم به نام دلخواه ، فرض first_cordova_project
– داخل پوشه کلیک راست میکنیم و git bash here را انتخاب میکنم.
01
– در داخل خط فرمان مینویسیم :

12-13-02

– در داخل خط فرمان مینویسیم :

12-13-03

با این کار به داخل پروژه ایجاد شده میرویم

آموزش برنامه نویسی Cordova

پروژه ای که ایجاد شده شامل دایروکتوری های زیر است
• Hooks
• Platforms
• Plugins
• www
و فایل زیر:
• config.xml

– پوشه hooks را کاری باهاش نداریم.
– پوشه platforms شامل پلتفرم هایی است که ما برای ساختن نرم افزار در نظر گرفته ایم. یعنی اگر بخواهیم پروژه اندروید را بسازیم با دستورات خط فرمان ، پلتفرم اندروید را که اضافه کنیم در زیر مجموعه این پوشه یک پوشه با نام android ساخته میشود که در عمل یک پروژه استاندارد اندروید هست و کلیه فرایندهای کامپایل و… داخل آن قرار میگیرد.
– پوشه plugin شامل پلاگین هایی است که با خط فرمان اضافه میکنیم که بعدا درباره آن توضیح خواهیم داد.
– پوشه www :
کار اصلی ما با این پوشه میباشد یعنی یک فایل index.html به اضافه یکسری پوشه ها که اگر برنامه نویسی وب انجام داده باشید با این موارد آشنایی خواهید داشت. واین فابل ها و پوشه ها نرم افزار تولید شده خواهد شد.

آموزش برنامه نویسی Cordova

– فایل config.xml را نیز فعلا دست نمی زنیم.

12-13-04

– در داخل خط فرمان مینویسیم :

12-13-05

– در داخل خط فرمان مینویسیم :

و پس از چند لحظه پروسه تولید تمام می شود.

12-13-06

با این دستور پروژه ساخته میشود و در مسیر

فایل apk قرار میگیرد

12-13-07

با برداشتن این فایل و انتقال آن به گوشی اندروید خود میتوانید اولین پروژه کوردوا را نصب کرده و مشاهده نمایید.

12-13-08

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

12-13-09

با مشاهده حالت روشن و خاموش DEVICE IS READY متوجه میشویم که تمام کار به درستی انجام شده .

برای ادامه آموزش های cordova با گروه برنامه نویسی پنگوئن همراه باشید.

apache-cordova

آموزش برنامه نویسی Cordova – نصب برنامه

آموزش برنامه نویسی Cordova

با سلام،
در این سلسله آموزشات می خواهیم تولید نرم افزار برای دستگاههای هوشمند به کمک apache cordova را آموزش دهیم.
بدون در نظر گرفتن اینکه توسعه دهنده نرم افزار از چه third party framework برای توسعه استفاده می کند بایستی SDK مربوط به هر سیستم عامل در سیستم عامل linux , windows , mac و… برای سایر نرم افزار ها در دسترس باشد یعنی به طور خلاصه بایستی در ابتدا محیط توسعه ی native برای سیستم عامل در دسترس باشد بعد از آن می توانید از Cordova استفاده کنید برای نصب محیط توسعه اندروید به لینک مربوط شود این راهنما برای شما این تنظیمات را فراهم می کند محیط و ملزومات Android SDK برای تولید نرم افزار اندروید تحت پلتفرم Android Software Development kit در سیستم عامل ویندوز می باشد.
Cordova از اندروید ورژن ۴٫۰ x به بالاتر پشتیبانی می شود API level 14 که با توجه به آمار ارائه شده اند گوگل نسخه های پایین تر از این زیر ۵% از بازار زنده دستگاه های اندرویدی را شامل می شوند بنا براین این مورد محدودیتی به نظر نمی رسد.

نصب Java Development Kit یا همان JDK :

برای تولید نرم افزارهای اندروید نیاز به نصب java development kit یا به اختصار JDK دارید.

برای دانلود به وبسایت www.oracle.com مراجعه می کنید و متانسب با سیستم عامل دانلود می کنید.

مراحل نصب

روی فایل نصب دابل کلیک کرده و به ترتیب مراحل را مطابق شکل طی میکنیم:

مرحله اول

jdk-001

مرحله دوم

jdk-002

مرحله سوم

jdk-003

مرحله چهارم

jdk-004
مرحله پنجم

jdk-005

مرحله ششم

jdk-006

حال نصب به پایان رسید بایستی environment variable  سیستم را بروز کنید تا به طور کامل در دسترس سایر نرم افزارها قرار گیرد.

در این مرحله روی start کلیک راست میکنیم و control panel  را انتخاب میکنیم

jdk-007

در search کلمه environment variable را تایپ میکنیم و edit the system environment variable ر انتخاب میکنیم:

jdk-008

این پنجره ظاهر می شود

jdk-009

دگمه new را می زنیم

jdk-010

و مقدار JAVA_HOME را مسیر پوشه jdk  که برای ما مسیر

میباشد قرار می دهیم ، البته ممکن است برای شما تفاوت داشته باشد:

jdk-011

در زیرش path را انتخاب میکنیم و edit را می زنیم

jdk-012

در انتهای path  مسیر پوشه jdk به اضافه bin را وارد می کنیم ، و در انتها یک ; می زنیم.
این مقدار برای ما مسیر

می باشد.

jdk-013

حال در cmd موارد روبرو را بررسی می کنیم

برای فهمیدن ورژن جاوا

برای فهمیدن ورژن کامپایلرجاوا

برای اطمینان از فعال شدن JAVA_HOME

jdk00.mp4_snapshot_04.07_[2015.12.11_17.05.58]zz
حال میتوان به نصب بقیه موارد پرداخت.

 

نصب Android Studio

برای تولید نرم افزار اندروید نیاز به محیط یکپارچه توسعه ای متناسب برای این سیستم عامل میباشد
بدین منظور android studio از جانب google آماده شده است که فایل نصب آن شامل ide + android sdk
می باشد
مراحل نصب بسیار ساده بوده و شامل ابزارهای مختلف از جمله maven ، gradle ، android development kit (sdk)
می باشد .

مرحله اول

android_studio_001

مرحله دوم

android_studio_002

مرحله سوم

android_studio_003

در این مرحله پیشنهاد ما تغییر محل نصب sdk می باشد.

android_studio_004

بهتر است مسیر زیر انتخاب شود

android_studio_005

مرحله بعد

android_studio_006

مرحله بعد

android_studio_007

مرحله بعد

android_studio_008

مطابق قسمت قبل که برای jdk در path مواردی را اضافه کردیم اینجا نیز باید همین کار را انجام دهیم :

پوشه های platform-tools و tools که زیرمجموعه  sdk میباشند را به path اضافه میکنیم تا در دسترس همه نرم افزارها قرار گیرند

دو مسیر زیر را به path اضافه کنید (با ; در آخرشان)

حال در cmd تایپ می کنیم

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

 

 

نصب Apache Cordova

خط فرمان cordova بر روی Node.js اجرا میشود و از طریق NPM در دسترس است.

بنابراین باید ابتدا node.js نصب شود.

با مراجعه به آدرس https://nodejs.org این نرم افزار را دانلود نمایید

پس از دانلود مراحل نصب را یکی یکی زد می کنیم.

مرحله اول

node_js-001

مرحله دوم

node_js-002

مرحله سوم

node_js-003

مرحله چهارم

node_js-004

مرحله پنجم

node_js-005

مرحله ششم

node_js-006

بعد از نصب کامل در cmd وارد میکنیم

ورژن node.js

node and git.mp4_snapshot_02.02_[2015.12.11_17.25.07]

 

حال که node js نصب شد و به تبع آن npm در دسترس قرار گرفت می توان apache cordova را نصب کرد.
در خط فرمان می نویسم


بعد از گذشت مدت زمانی که بستگی به سرعت اینترنت شما دارد دریافت و نصب این framework بر روی سیستم شما طول می کشد

 

پس از پایان

ورژن cordova را به شما نشان می دهد.

حال این framework در اختیار شما است.
برای ادامه آموزش cordova با گروه برنامه نویسی پنگوئن همراه باشید.