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

به سادگی و تنها با html css میتوانید اپلیکیشن اندروید بسازید. برای پیش نمایش هر تغییر در موبایل از phonegap و برای بیلد گرفتن apk از Cordova استفاده میشود. همانطور که میدانید, apk پسوند فایل نصب اپلیکیشن اندروید است. علاوه برhtmlcss میتوان از باندل React هم استفاده کرد.

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

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

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

پیشنیاز

باید nodejs نصب شده باشد.

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

گام 1: phonegap را از ترمینال نصب کنید! 

yarn global add phonegap

یک اپ برای موبایل هم دارد که به اپلیکیشن bazar میروید و سرچ میکنید phonegap developer و نصب میکنید.

گام 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 با Cordova

حالا ctrl+c را در ترمینال بزنید تا از حالت phonegap serve خارج شود.

متاسفانه دیگر phonegap محصولاتش را build نمیکند و ذخیره نمیکند. بنابراین برای تولید APK از Cordova استفاده میکنیم. کافیست به مقاله اش در سایت رسمی اش مراجعه کنید.

طبق ان باید کردوا را نصب کنید.

yarn global add cordova

گام 6: با Cordova یک اپ بسازید!

کافیست کامند زیر را استفاده کنید!

cordova create hello com.example.hello HelloWorld

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

گام 7: افزودن پلتفرم اندروید

برای افزودن اندروید به ان از کامند زیر استفاده میکنیم.

cordova platform add android

در داخل پروژه یک فولدر به نام platforms ساخته میشود و فولدر android هم داخلش!

گام 8: جایگزین کردن فایل های فولدر www

حالا نوبت ان رسیده که کدهایی که در Phonegap نوشتیم را به داخل این پروژه بیاوریم.

گام 9: پیشنیاز ها نصب شده اند؟

قبل از اینکه build بگیریم و apk تولید شود باید مطمئن شویم تمام پکیج ها و ابزار های مورد نیاز نصب شده اند.

cordova requirements

اگر ارور داد باید پکیجی که نصب نشده را نصب کنید.

برای اطلاعات بیشتر از چگونگی نصب پکیج ها باید بعضی از ویدیوهای مقاله ی “ساخت apk اندروید با ری اکت نیتیو و گردل” را تماشا کنید.

کلا اگر به ارور خوردید به مقاله “ساخت apk اندروید با ری اکت نیتیو و گردل” بروید انجا همه ارور ها و راه حل ها امده اند.

اگر در گام 10 همین مقاله (گام بعدی) هم در هنگام build گرفتن به ارور خوردید احتمالا باید از پروکسی استفاده کنید که در مقاله ای که در پاراگراف قبلی اشاره شد بیان شده است که باید این کدها در platforms/android/gradle.properties اضافه شوند:

systemProp.http.proxyHost=fodev.org
systemProp.http.proxyPort=8118
systemProp.http.nonProxyHosts=*.jitpack.io, *.maven.org
systemProp.https.proxyHost=fodev.org
systemProp.https.proxyPort=8118
systemProp.https.nonProxyHosts=*.jitpack.io, *.maven.org

گام 10: بیلد گرفتن apk

به مرحله نهایی رسیدیم. کافیست این کامند را استفاده کنید.

cordova build

گام 11: نصب apk در موبایل

حالا از مسیری که در ترمینال بیان شده apk را بردارید و به گوشی خود ببرید. سپس نصب کنید.

به همین سادگی!