عرفان
عرفان
خواندن ۲ دقیقه·۷ سال پیش

حساب‌فان (رابط کاربری)

خب بک‌اند به جایی رسید که بشه یه رابط کاربری ساده روش پیاده کرد، پس میریم سراغ انگولار و فعلا برای وب و اندروید بیلد میگیریم و بعدا آیفون، دسکتاپ و... اضافه می‌کنیم، قسمت خوب ماجرا اینه قراره بیلد اتوماتیک باشه.

اول باید یه پروژه انگولار ایجاد کنید، من از انگولار سی‌ال‌آی استفاده می‌کنم، اگه تجربه کار باهاش ندارید کافیه نگاهی به سایتش بکنید و همون چند دستور اول وارد کنید تا پروژه ایجاد بشه.

صفحه اول انگولار سی‌ال‌آی
صفحه اول انگولار سی‌ال‌آی

خیلی خب، پروژه ایجاد کردیم و گذاشتیم رو گیت‌هاب، کافیه ریپو کلون کنید و دستور npm install بزنید تا پکیج‌ها نصب بشن، حالا با دستور ng serve اپ اجرا میشه و با آدرس localhost:4200 صفحه پیش فرض انگولار می‌بینید.

 صفحه پیش فرض انگولار ۵
صفحه پیش فرض انگولار ۵

می‌خوایم همین صفحه ساده تبدیل کنیم به اپ موبایل برای انواع پلتفرم‌ها، آپاچی کوردوا این کار برامون انجام میده. (اپ قرار نیست همین شکلی بمونه بعدا شبیه تمام اپ‌های استاندارد پلی استور میشه)

در نهایت اپ این شکلی میشه
در نهایت اپ این شکلی میشه

از دستور cordova create cordova com.hesabfun.ui hesabFun برای ایجاد فایل‌های اولیه کوردوا استفاده میکنیم. حالا با دستور ng build --target=production --environment=prod --output-path cordova/www/ --base-href ./ از پروژه بیلد میگیریم به پوشه کردوا. بعد میریم داخل پوشه کوردوا cd cordova و با دستور cordova platform add browser پلتفرم وب اضافه می‌کنیم و با دستور cordova run browser اجراش می‌کنیم، اینجوری لازم نیست هردفعه برای تست اپ برای موبایل بیلد بگیریم، تو مرورگر خروجی چک میکنیم. دستورات یه دفعه دیگه مرور می‌کنیم:

cordova create cordova com.hesabfun.ui "Hesab Fun" ng build --target=production --environment=prod --output-path cordova/www/ --base-href ./ cd cordova cordova platform add browser cordova run browser

برای اضافه کردن اندروید از دستور cordova platform add android استفاده میکنیم.

نکته طلایی: اگه فقط SDK ورژن ۲۶ نصب باشه با این دستور کوردوا ۷ نصب میشه که از ورژن ۴.۱ اندروید تا ۷.۱.۱ کاملا ساپورت میکنه. ولی اگه SDK نسخه‌های پایین‌تر هم رو سیستم نصب باشه از کوردوا ۶ استفاده میکنه که اپ بسیار سنگین‌تر میکنه. با این شیوه بیلدهای من برای اندروید حدودا ۸۰۰ کیلوبایت میشه.
بعد نصب gradle برای اولین بیلد حتما VPN روشن کنید چون یه سری وابستگی داره برای دانلود تحریم هستیم و کار با پروکسی راه نمیفته.
برای کاربران مک: بعد نصب SDK این فایل دانلود کنید و تو پوشه SDK پیست کنید تا جایگزین فایلهای قبلی بشه وگرنه خطای Android target: not installed میده.
میگه JDK ورژن ۸ یا بالاتر نصب کنید، ولی اگه ۹ نصب کنید خطا میده.

با دستور cordova requirements نیازمندی‌های کوردوا برای بیلد اپ متوجه میشیم و باید نصب کنیم.

حالا با دستور cordova build android اپ اندروید بیلد میشه.

قسمت بعدی لوگو عوض می‌کنیم و اپ سبک‌تر می‌کنیم.

مثل همیشه کدها کامیت کردم، می‌تونید از اینجا تغییرات ببینید.

اندرویدآیفونانگولاربرنامه نویسیکراس پلتفرم
یه دولوپر که سعی می‌کنه عمیق و کم هزینه باشه، از هرچیزی که بلدم می‌نویسم تا مطمئن‌شم درست یادش گرفتم.
شاید از این پست‌ها خوشتان بیاید