ساخت اپلیکیشن اندروید با HTML,CSS,JavaScript به روش خیلی ساده ولی کارآمد

[AliShini]

دوستان سلام،
امروز می خواستم کمی درمورد ساخت اپلیکیشن های اندروید باهاتون حرف بزنم پس اگر تاحالا توسعه دهنده وب بودید از این به بعد برای موبایل هم اپلیکیشن بسازید.
**دوستان توجه داشته باشید که این آموزش هیچ ربطی به فونگپ نداره و اصلا نیازی به اکلیپس هم نیست!
نرم افزار های مورد نیاز برای ساخت یک اپلیکیشن اندرویدی
1- ادوب دریم ویور
2-WebSite 2 APK Build 2.1 Pro
نرم افزار اول رو فکر کنم همه باهاش آشنایی داشته باشید ولی نرم افزار دوم کارش تبدیل html,css,JavaScript به فایل اجرایی اندروید یا همون apk هست این رو هم بگم که هیچ تبلیغات و بک لینکی هم نداره.
دوستان فکر نکنن که WebSite 2 APK Build یه نرم افزار ضعیفه بلکه این نرم افزار توسط جاوا نوشته شده و از هسته مرورگر گوشی استفاده می کنه و تمام قابلیت های یه مرورگر کامل رو داره، خیلی قابلیت های اضافه مثل ساخت صفحه اسپلاش،اسم پکیج ،کد پکیج و.... داره و یه نرم افزار بی نظیره!!!!!!! قیمت این نرم افزار 25 دلاره ولی شما از لینک زیر دانلودش کنید فایل Keygen هم همراهشه.

برای دانلود نسخه 2.1 به لینک زیر برید:
http://p30download.com/fa/entry/65414/
لینک سایت سازنده نرم افزار WebSite 2 APK Build (http://html2apk.praveshagrawal.com/index.html)

این هم اسکرین شات از WebSite 2 APK Build

141197

ممکنه سوال برای دوستان پیش بیاد که اطلاعت رو چطوری ذخیره کنیم؟؟؟ مثلا تنظیمات متن ، رنگ و...
این کار از طریق شی localStorage در جاوااسکریپت امکان پذیره.برای آموزش به لینک زیر برید.
http://www.developer1.ir/HTML_5/local_Storage.aspx

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

[AliShini]

دوستان سلام،
پیرو آموزش قبلی تو این قسمت می خوام بخش های مختلف نرم افزار WebSite 2 APK رو بهتون معرفی کنم.

توجه کنید هر چیزی که توی طراحی وب با کمک HTML,CSS,JavaScript میشه طراحی و اجرا کرد اینجا هم میشه پیاده سازی و اجرا کرد فقط باید حالت ریسپانسیو بهش بدید.خروجی های گرفته شده به اندازه توانایی های مرورگر کروم اندروید توانایی دارن ولی در قالب فایل apk اجرا میشن.امیدوارم خوب متوجه شده باشید.

تصویر زیر رو شماره گذاری کردم،توضیحات هم پایین نوشتم.

141203

شماره 1 : تو این قسمت شما نوع سایت برای تبدیل شدن به apk رو انتخاب می کنید به این صورت که شماره 1 "Local HTML Website" یعنی سایتی که می خواهید به apk تبدیل کنید رو به صورت محلی دارید که این قسمت بیشتر به کار ما میاد ولی شماره 2 "Web URL" یعنی شما آدرس می دید بعد اپلیکیشن تحویل می گیرید.

شماره 3 : اسم اپلیکیشنتون رو می نویسید.

شماره 4 : تو قسمت Package Name اسم پکیج برنامه تون رو می نویسید ، تو قسمت Version Name شماره ورژن برنامه رو وارد می کنید و توی Version Code کد ورژن برنامه رو می نویسید.

شماره 5 : در این قسمت جهت برنامه تون رو انتخاب می کنید."Auto-Rotate" یعنی به صورت خودکار حالت افقی و عمودی بگیره."Portrait" یعنی جهت صفحه گوشی فقط به صورت عمودی باشه."Landscape" یعنی جهت صفحه فقط تو حالت افقی باشه.

شماره 6 : محل خروجی برنامه (فایل APK) رو مشخص می کنید.

شماره 7 : متن درباره ما رو اینجا وارد کنید.

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

شماره 9 : تو این قسمت شما باید صفحه اسپلاش برنامه وارد کنید.

شماره 10 : خوب اگه تو قسمت 1 گزینه "Local HTML Website" زده باشید اینجا باید مسیر دایرکتوری وب سایتتون رو انتخاب کنید.توجه داشته باشید که اولین صفحه اجرایی برنامه فایل index.html هست.پس اولین صفحه رو با اسم index ذخیره کنید.

شماره 11 : آیکون برنامه رو انتخاب کنید.

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

شماره 13 : اینجا یه تصویری از صفحه اسپلاش اپلیکیشنتون نشون میده.

شماره 14 : مدت زمان نمایش صفحه اسپلاش رو اینجا باید تنظیم کرد.

شماره 15 : آیکون لودینگ وب سایت رو اینجا انتخاب کنید(بیشتر برای سایت های آنلاین خوبه).با گزینه "From files" میتوند خودتون آیکون لودینگ رو انتخاب کنید.آیکون های پیشفرض به صورت متحرک هستن.

شماره 16 : محل قرارگیری آیکون لودینگ رو انتخاب می کنید.پیش فرض روی center هست.

شماره 17 : با کلیک رو این دکمه عملیات گرفتن خروجی آغاز میشه.

شماره 18 : اگه روی "Enable" قرار بدید می تونید داخل برنامه تون تبلیغات نمایش بدید.

شماره 19 : یکسری تنظیمات اضافه مثل گذاشتن یا نگذاشتن دکمه های زوم،گذاشتن یا نگذاشتن App Title Bar ، جلوگیری از قابلیت انتخاب متن و...

.بقیه آموزش ها بعدا.

[AliShini]

دوستان سلام،
پیرو آموزش قبلی تو این قسمت می خوام یکمی بیشتر شما رو با ساخت اپلیکیشن اندرویدی از طریق html,css,Js آشنا کنم.

من به شما پیشنهاد می کنم که برای تست اسنادتون از مرورگر گوگل کروم استفاده کنید چون از موبایل جی کئوری پشتیبانی میکنه و می تونید یه صفحه رو تو سایز های مختلف مشاهده کنید که این مهمترین کاربردش برای ما هست که بتونیم حالت ریسپانسیو بودن وب سایتمون رو تو سایز های مختلف گوشی ها تست کنیم و چند قابلیت دیگه هم داره که بعدا بهشون اشاره می کنم.
فایر فاکس هم چندان مناسب نیست و توصیه نمیشه.
استفاده از IE هم اکیدا ممنوع :چشمک:.

در زیر چندتا سوال که ممکنه برا همه پیش بیاد مطرح کردم و بهشون پاسخ دادم:

1) اصلا جی کوئری موبایل یعنی چی ؟

جی کوئری موبایل، یک فریم ورک برای ایجاد اپلیکیشن های وب برای موبایل ها می باشد. جی کوئری موبایل، بر روی تمام گوشی های موبایل هوشمند محبوب و همچنین تبلت های محبوب کار می کند. جی کوئری موبایل، از HTML5 و CSS3 برای ظاهر ساختن صفحات با حداقل برنامه نویسی استفاده می کند.

2) اصلا فریم ورک یعنی چی؟
فریم ورک به یک محیط و یا چهارچوب کاری در زبان های برنامه نویسی مختلف اطلاق می شود که برنامه نویسان را ملزم به رعایت یک سری اصول کلی می نمایند ، در فریم ورک ها توابع مفید مانند متد ها و حتی کلاس ها یی از پیش نوشته شده اند و کار را برای برنامه نویسان ساده کرده اند و به آنان این امکان را می دهند که با نوشتن کد کمتر ، امنیت و بهره وری بالاتری از نتیجه کار خود ببینند. و در صورت لزوم کلاس های از پیش تعریف شده را تغییر یا مطلبی به آن اضافه کنند.

3) من جی کوئری موبایل بلد نیستم و فقط می خوام با HTML,CSS,JS اپلیکیشن بسازم،ممکنه با چه مشکلاتی روبه رو بشم؟
شما با مشکل خاصی روبرو نمیشید ولی اگر از جی کوئری موبایل استفاده کنید رابط کاربری برنامه تون خیلی سازگاری و زیبایی بهتری هنگام اجرا روی تبلت ها و گوشی ها داره.

4) من نمیدونم چطوری سایت ریسپانسیو طراحی کنم.چکار کنم؟
نگران نباشید ،اگه کمی با طراحی وب آشنایی دارید ولی نمی دونید چطور سایت ریسپانسیو طراحی کنید تو قسمت بعدی این آموزش رو هم خواهم داد.

5) من اصلا هیچ آشنایی با HTML,CSS,JS ندارم! باید چکار کنم؟
اگه هیچ آشنایی با HTML,CSS,JS ندارید زیاد نگران نباش!.یادگیری این زبانها چندان کار سختی نیست و برای اینکه بتونید حداقل برای اندروید یه کتاب خوب و کامل بسازید لازم نیست زیاد حرفه بشید.اولین کار اینه که سری به سایت beyamooz (http://beyamooz.com) بزنید. اول با Html آشنا بشید بعد با CSS بعدش هم با JS.

6) آیا اپلیکیشن های ما میتونن مورد تایید کافه بازار،مایکت و... بشن؟
البته.حتما این کار شدنی هست.به شرطی که روی اصول صحیح کار بکنید.

7) من چطور میتونم داده های مورد نیاز مثل تنظیمات فونت،اندازه و... رو روی تلفن همراه کاربر ذخیره کنم؟
این کار رو باید از طریق زبان JS انجام بدید.اگر بلد نیستین اشکالی نداره قسمت های بعدی بتهون یاد میدم.

8) من میخوام جی کوئری موبایل رو یاد بگیریم چیکار کنم؟ --- اینجا کلیک کنید (http://beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84)---

[hanjareh_talaei]

سلام برای کار با بانک اطلاعاتی یا دریافت اطلاعات از سرور هم راهکار داره این روش؟

[Amyr mohammad1212]

سلام من میخوام با کد جاوا اسکریپ یه دکمه بزارم و وقتی روش کلیک میشه یه صفحه رو نشون فقط یک بار شون بده و دیگه هیچ وقت اون صفحه به نمایش در نیاد مثلا یک بار مصرف باشه لطفا کمکم کنید

من طرز استفاده از localStorage رو یاد نگرفتم میشه از چیزه دیگه ای استفاده کرد یا فقط باید از همین استفاده بشه

[Amyr mohammad1212]

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