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.

باتشکر.

پاسخ دهید

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