میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript

 

 

 

 

 

 

 

 

 

 

طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript

طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript

با عرض سلام و خسته نباشید خدمت تمام کاربران عزیز امروز با آموزش طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript  در خدمت شما عزیزان هستیم .

امروزه تکنولوژی های تحت وب (مانند HTML و CSS و JavaScript) به شدت در حال توسعه و پیشرفت هستند طراحی نرم افزار موبایل توسط این تکنولوژی های نیز از موضوعات داغ دنیای آی تی امروز است.مزیت اصلی این تکنولوژی های این است که مستقل از سیستم عامل و پلتفرم بوده و قابل جا به جا کردن هستند یعنی به راحتی می توان برنامه هایی نوشت که هم در اندروید و هم در ios و هم در سایر پلتفرم ها اجرا شوند و این خود یک مزیت بسیار مهم است. اگرچه باید توجه داشت که از لحاظ قدرت هیچ گاه به اندازه کد native نخواهند بود و همیشه امکانات و قابلیت هایی وجود دارند که فقط از طریق برنامه نویسی به صورت native قابل دستیبای هستند با این وجود تکنولوژی های تولید نرم افزار موبایل با تکنولوژی های HTML و CSS و JavaScript نیز روز به روز قدرتمند تر می شوند و نمی توان از آن ها چشم پوشی کرد و یادگیری آن ها خالی از لطف نیست.

در این پست با Apache Cordova آشنا می شویم. با آن اسکلت یک برنامه اندرویدی ساده را ایجاد می کنیم ، برنامه را اجرا می کنیم و در محیط Eclipse وارد می کنیم و تغییر می دهیم و …

بیشتر
دسترسی به محتوای static و استفاده از آن در اندروید استودیو

Apache Cordova چیست؟ :

Apachce Cordova پلتفرمی برای تولید برنامه های موبایل با استفاده از HTML  و CSS و JavaScript است که در حال حاضر iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada و Symbian را پشتیبانی می کند.

Apache Cordova از کتابخانه هایی مانند jQuery Mobile و Dojo Mobile و Sencha Touch و کتابخانه های اختصاصی خودش استفاده می کند تا علاوه بر دستیابی به امکانات خاص دستگاه موبایل ظاهری قوی نیز داشته باشد.

در اکثر پلتفرم های موجود با استفاده از Apache Cordova می توان به امکانات زیر دسترسی داشت (بدون اینکه لازم باشد کد native بنویسیم).

  • Accelerometer
  • Camera
  • Capture
  • Compass
  • Connection
  • Contacts
  • Device
  • Events
  • File
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Notification
  • Splashscreen
  • Storage

برای اطلاعات بیشتر می توانید به سایت اصلی مراجعه کنید :

http://cordova.apache.org

برای مشاهده امکانات قابل دسترسی توسط Apache Cordova  و پلتفرم هایی که پشتیبانی می شوند می توانید به لینک زیر مراجعه کنید :

http://cordova.apache.org/docs/en/3.5.0/guide_support_index.md.html#Plat…

برای دسترسی به راهنمای جامع برای پلتفرم های پشتیبانی شده نیز می توانید از لینک زیر استفاده کنید :

http://cordova.apache.org/docs/en/3.5.0/guide_platforms_index.md.html#Pl…

 

نصب Apache Cordova :

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

نصب Node.js:

ابتدا به سایت

http://nodejs.org

می رویم و فایل نصب را دانلود کرده و به سادگی Node.js را نصب می کنیم.

نصب Apache Cordova :

کنسول سیستم را باز می کنیم و دستور زیر را تایپ می کنیم و اینتر می زنیم :

npm install -g cordova

 

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

سپس صبر می کنیم تا فرآیند نصب کامل شود. (به همین سادگی).

نکته : اگر پس از نصب Node.js دستور npm شناخته شده نبود باید مسیر نصب آن را به متغیر path سیستم عامل اضافه کنید

 

نصب Ant :

برای ادامه کار نیاز داریم که Ant نیز بر روی سیستم نصب باشد. نصب Ant بسیار ساده است.به آدرس http://ant.apache.org/bindownload.cgi می رویم نسخه مورد نظر را دانلود کرده و در جایی از کامپیوترمان آن را از حالت فشرده خارج می کنیم. سپس مسیر آن را به متغیر سیستمی path سیستم عامل اضافه می کنیم. (به همین سادگی).

 

ساخت اولین پروژه با Apache Cordova :

ساخت اسکلت اصلی پروژه نیز از طریق دستورات خط فرمان انجام می شود ولی این دستورات بسیار ساده هستند و جای هیچ نگرانی ای نیست.کنسول را باز کرده و به مسیری که می خواهیم پروژه در آنجا ساخته شود می رویم مثلاً من در این مثال می خواهم پروژه ای به نام HelloSafecomp در درایو E ایجاد کنم.ابتدا از طریق کنسول به درایو E می روم و سپس دستور زیر را تایپ می کنم و اینتر می زنم :

 

cordova create HelloSafecomp com.safecomp.hello HelloSafecomp

ستور create سه پارامتر دریافت می کند.

  • پارامتر اول نام پوشه ای است که پروژه در آن قرار خواهد گرفت. در این مثال پوشه ای به نام HelloSafecomp در درایو E ایجاد می شود و شامل ساختار اصلی پروژه است.
  • پارامتر دوم آی دی برنامه است و بهتر است منحصر به فرد باشد.
  • پارامتر سوم عنوانی است که در برنامه نمایش داده می شود و بعداً می توان آن را از داخل فایل config.xml تغییر داد.
بیشتر
کلمه کلیدی Let در جاوا اسکریپت

 

اضافه کردن اندروید به پلتفرم های برنامه :

همانطور که بالاتر گفتم Apache Cordova برای توسعه برنامه به صورت مستقل از پلتفرم است. اسکلتی که در محل قبل ایجاد کردیم به هیچ نوع پلتفرمی وابسه نیست و اگر بخواهیم از پلتفرم خاصی پشتیبانی کنیم (برای آن برنامه بنویسیم) باید پلتفرم مورد نظر را به پروژه اضافه کنیم. در اینجا ما اندروید را به پروژه اضافه می کنیم (چون قصد داریم از Apache Cordova برای توسعه برنامه های اندرویدی استفاده کنیم و کاری با سایر پلتفرم ها نداریم).

برای اینکار از طریق خط فرمان وارد محلی که پروژه ایجاد شده است می شود. (در این مثال باید وارد پوشه HelloSafecomp در داخل درایو E شویم).

با تایپ دستور زیر اندروید را به پلتفرم های تحت پوشش پروژه اضافه می کنیم :

cordova platform add android

ساخت پروژه :

تا اینجا فقط اسکلت اصلی پروژه ساخته شد و پلتفرم اندروید به آن اضافه شد برای ساخت کامل پروژه در این مرحله نیاز داریم تا دستور زیر را تایپ کنیم :

cordova build android

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

 

اجرای پروژه روی سخت افزار واقعی :

برای اجرای برنامه روی سخت افزار واقعی موبایل تبلت یا هر وسیله سخت افزاری اندرویدی ای که در اختیار دارید را از طریق کابل USB به کامپیوتر متصل کنید پس از شناسایی سخت افزار دستور زیر را در کنسول در مسیری که پروژه قرار دارد تایپ می کنیم و اینتر می زنیم :

cordova run android

برنامه به خوبی و خوشی روی سخت افزار حقیقی اجرا می شود :

بیشتر
انیمیشن لرزش یک ویو(مانند EditText) در بیسیک۴اندروید
طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript
طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript

اجرای برنامه روی شبیه ساز :

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

cordova emulate android

 

ولی من استفاده از این دستور را چندان توصیه نمی کنم. به جای استفاده از این دستور بهتر است (البته به نظر من) که پروژه را وارد محیط Eclipse کنید  سپس از آنجا به راحتی می توانید تصمیم بگیرید که پروژه چگونه اجرا شود.(روی شبیه ساز یا سخت افزار واقعی)

 

وارد کردن پروژه در محیط Eclipse :

Eclipse را اجرا می کنیم ، از طریق منوی File گزینه Import را انتخاب می کنیم.در پنجره باز شده از بخش Android  گزینه Existing Android Code Into Workspace را انتخاب می کنیم و روی دکمه Next کلیک می کنیم .

در پنجره بعدی روی دکمه Browse کلیک می کنیم و به پوشه ای که پروژه در آن ساخته شده است (در این مثال پوشه HelloSafecomp در درایو E) می رویم و آن را انتخاب می کنیم.

روی دکمه Finish کلیک می کنیم.کار تمام است.

الآن می توانیم مانند یک پروژه معمولی اندرویدی تحت Eclpse با این پروژه برخورد کنیم.

برای شروع می توانید فایل index.html که در پوشه www قرار دارد را تغییر دهید. به عنوان مثال در اینجا فایل index.html را به صورت زیر تغییر می دهیم :

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Hello coderschool.ir</title>
    </head>
    <body>
        <div class="app">
            <h1>safecomp.ir</h1>
        </div>
        
    </body>
</html>

از برنامه اجرا گرفته و خروجی را مشاهده نمائید .

بیشتر
رنگ ها در Html

اگر خروجی برنامه مثل بالا تغییر نکرد و همچنان خروجی قبلی نمایش داده شد ابتدا از طریق کنسول به مسیر پوشه پروژه بروید و سپس دستور زیر را اجرا کنید :

cordova prepare android

 

سپس به محیط Eclipse برگردید و مجدداً پروژه را اجرا کنید.

 

در صورت داشتن هر گونه سوال انتقاد و پیشنهاد در زیر همین پست کامنت بگذارید  .
 در صورت نیاز به ارتباط مستقیم بعد از ثبت نام و ورود می توانید تیک ارسال نمائید  .
ارسال دیدگاه

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

×

سلام کاربر عزیز

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

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟