مقالات

ساختن اپلیکیشن اندروید با html css

ساختن اپلیکیشن اندروید با html css

درود به شما! در این مقاله با ساختن اپلیکیشن اندروید با html css میتوانید اولین apk خود را با phoneGap خروجی بگیرید. همانطور که مستحضر هستید, apk پسوند فایل های اپلیکیشن است. مثلا اپلیکیشن دیجیکالا digikala.apk است که در موبایل خود نصب میکنید. البته چون کافه بازار یا گوگل پلی استور برای شما نصب را انجام میدهد شما این فایل را معمولا نمیبینید.

ساختن اپلیکیشن اندروید

حتما html css بلدید!

آیا تاکنون برای دل خود با html css کمی کدنویسی کرده اید؟ آیا میدانید همین چیزی که در بروزر ساختید را میتوانید با نام فرضی یک فایل مثل name.apk خروجی بگیرید! برای ساختن اپلیکیشن اندروید یک فایل apk کافیست. این فایل نصبی اپلیکیشن اندروید است. همان فایلی که وقتی در موبایل روی آن کلیک شود اپلیکیشن نصب میشود.

پیشنیاز

باید nodejs را نصب شده داشته باشید و تجربه نصب چند پکیج با npm را داشته باشید. 

ساختن اپلیکیشن اندروید و phoneGap

میخواهیم با استفاده از phoneGap که محصول شرکت ادوبی است برای ساختن اپلیکیشن اندروید اقدام کنیم. تولید یک فایل نصبی اپلیکیشن با استفاده از android sdk و jdk که مربوط به زبان جاوا است صورت میگیرد. با این وجود ما تنها با html css که بلد هستیم و بدون جاوا داریم apk میسازیم. میدانید چرا؟ چون phoneGap قرار است تمام آن کارهای android sdk و jdk را برایمان در پشت صحنه انجام دهد و فایل نهایی را بدهد.

ساختن اپلیکیشن اندروید 

گام 1: به سایت فونگپ بروید و نصبش کنید! 

yarn global add phonegap

یه اپ برای موبایل داره اونم نصب کنید!

گام 2: یک پروژه فونگپ ایجاد کنید! 

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

phonegap create myApp --template hello-world

گام 3: پروژه را serve کنید و در موبایل آن را ببینید! 

phonegap serve

پس از وارد کردن کد بالا, اپلیکیشن را باز کنید و به همان آدرسی که در ترمینال نوشته شده در اپلیکیشن بزنید. چیزی شبیه 192.168.1.5:3000 است. آنگاه باید تصویر یک ربات را تماشا کنید. همچنین در بروزر لپتاپ خود هم در آدرس localhost:3000 میتوانید ببینید!

گام 4: اولین تغییر را ایجاد کنید و بببینید!

به پوشه myApp در دسکتاپ خود بروید و وارد پوشه www شوید. فایل index.html را ویرایش کنید, ذخیره کنید تا نتیجه را در موبایل ببینید! میتوانید کدهای html css js خود را وارد کنید و خروجی را همزمان ببینید! مثلا من در ری اکت کار میکنم و bundle.js را به پوشه js در پوشه www میریزم سپس در فایل index.html با تگ script آدرس js/bundle.js را وارد میکنم. 

گام 5: تولید apk را به فونگپ بسپارید! 

حالا ctrl+c را در ترمینال بزنید تا از حالت phonegap serve خارج شود. با وارد کردن کد زیر میتوانید ساخت apk را به فونگپ بسپارید! اگر ios میخواهید کافیست بجای android واردش کنید!

phonegap remote build android 

گام 6: اپ خود را دانلود کنید و نصب کنید!

آن apk نهایی را قرار است دانلود کنیم. به سایت build.phonegap.com بروید! باید وارد سایت شوید. باید اکانت adobe داشته باشید. همانطور که میدانید بایستی از ف-ی-ل-ت-ر ش-ک-ن استفاده کنید! اگر اکانت ادوبی ندارید یکی بسازید! به همین سادگی! 

پیشنهاد میشود برای تولید اپ بعدی, اپ قبلی را حذف کنید! هم در اکانت ادوبی هم آنیستال روی موبایل!

از مطالعه شما متشکرم, میتوانید تشویق مالی کنید!