ساخت نرم افزار موبایل با استفاده از Ionic + Cordova برای ورد پرس قسمت اول

ساخت نرم افزار موبایل با استفاده از Ionic + Cordova برای ورد پرس قسمت اول

خوب نبودخوبخیلی خوبعالیخیلی عالی (2 votes, average: 4٫50 out of 5)

آموزش ساخت نرم افزار Android و IOS برای سایت های وردپرس

در این آموزش شما خواهید دید چگورنه باری سایت وردپرس خود یک نرم افزار موبایل ایجاد کنید که هم بر روی Android و هم IOS اجراشود.

این نرم افزاردارای :

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

برای این کار ابزارهایی نیاز دارم :

  • NodeJs
  • Ionic
  • Cordova
  • Json API
  • Git
  • Bower

شما به یک TextEditor هم نیاز دارید اگر از TextEditor خواصی استفاده می کنید پیشنهاد می کنم با همان کار کنید اما اگر TextEditor ندارید می توانید از Sublim یا Atom استفاده کنید .

هم چنین بهتر است با Angular.js نیز آشنایی داشته باشید.

نصب NodeJs

NodeJs را از سایت https://nodejs.org/en/ دانلود و نصب کنید ، به یاد داشته باشد که نسخه LTS را استفاده کنید .

برای اطمینان از نصب NodeJs در cmd دستور node –v را وارد کنید باید ورژن NodeJs به شما نمایش داده شود هم چنین دستور npm –v را نیز وارد کنید باید ورژن node package manager برای شما نمایش داده شود.

READ  دانلود افزونه ورود و ثبت نام Clean Login

wpionpic1

نصب Git :

برای نصب Git به سایت https://git-scm.com/ دانلود و نصب کنید .

نصب Plugin Json API :

به سایت وردپرس خود برید و پلاگین Json Api که توسط Dan Phiffer ساخته شده است را نصب کنید .

نصب ionic و cordova :

برای نصب ionic و cordova باید از npm استفاده کنید ، می توانید از git bash یا cmd استفاده کنید .

دستور npm install ionic cordova –g را وارد کنید و منتظر بمانید تا این دو نصب شوند.

wpionpic2

ایجاد پروژه :

ابتدا یک پوشه با نام دلخواه ایجاد کنید ، سپس از طریق git bash یا cmd وارد آن پوشه شوید و دستور ionic start dwMobileApp blank را وارد کنید و صبر کنید تا پوشه ها ساخته و کتاب خوانه های مورد نیاز نصب شود می توانید با مراجعه به سایت http://ionicframework.com/

اطلاعات بیشتری در مورد این پلاگین به دست آورید .

wpionpic3

بعد از اینکه پوشه ها ایجاد شد ، با استفاده از Text Editor خود پوشه dwMovbileApp را باز کنید و وارد پوشه www شوید این پوشه ای است که با آن سروکار داریم .

در این پوشه ، پوشه هایی مانند css ، img ، js ، lib وجود دارد ، در این آموزش به توضیح این پوشه نخواهیم پرداخت ، اگر با Angular Js آشنایی داشته باشید ، می دانید چگونه با هر یک از این پوشه ها و فایل های درون آنها کار کنید .

اجرای پروژه :

برای اینکه بتوانیم پروژه را ببنیم وارد پوشه wpMobileApp شوید و دستور ionic serve وارد کنید.

wpionpic5

همان طور که در تصویر بالا مشاهده می کنید ، از من می خواهد اتخاب کنم از کدام آدرس می خواهم استفاده کنم ، من شماره ۱ را وارد کرده و Enter میزنم .

READ  قطعه کد: توابع پیوست‌ ها

wpionpic6

سپس این صفحه به صورت اتوماتیک برای ما باز می شود ، اما برای ساخت نرم افزارموبایل این شکل نمایش زیاد مناسب نیست پس در cmd حرف q را وارد کنید تا سرور خاموش شود و سپس دستور ionic serve –lوارد کنید .

wpionpic7

و شما با این صفحه مواجه خواهید شد ، می بینید که می توانیم نرم افزار را در قالب صفحه android و ios ببینیم .

در قسمت بعد خواهید دید چگونه فایل ها و فولدر های خود را ایجاد کنیم.

پوریا پرهامی

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

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

خبرنامه دارکوب وب

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

1 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

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

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

READ  معرفی افزونه Master Popups وردپرس