آموزش ساخت اپلیکیشن برای سایت‌های وردپرس

آموزش ساخت نرم افزار 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 برای شما نمایش داده شود.

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

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

wpionpic6

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

wpionpic7

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

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

ساخت فایل ها و فولدها :

خوب در پوشه js فایلی به نام controllers.js ایجاد کنید ، سپس در پوشه www پوشه ای به نام templates ساخته و 3 فایل menu.html , menuContetn.html, post.htmlرا در آن ایجاد کنید

wpionpic8

در صفحه index.html بعد از <script scr=”js/app.js”></script> فایل control.js را نیز به همین شکل اضافه کنید .

wpionpic9

حالا وارد فایل app.js شوید و یک state جدید ایجاد کنید به این شکل :

من سه صفحه html دارم و 3state برای آنها ایجاد کردم ، url آدرسی که در نوارآدرس به نمایش در می آید می باشد ، templateUrl آدرس فایل html ما و controller نام کنترلی است که باید این صفحه را کنترل کند ، $urlRouterProvider.otherwise(‘main/lastPosts’); مشخص می کنیم اگر آدرس دیگری به غیر از این آدرس ها وارد شد برو به main/lastPosts به index.html برید و تمام تگ هایی که در تگ <body ng-app=”starter”> وجود دارد را پاک کنید سپس تگ <ion-nav-view> را به آن اضافه کنید .

wpionpic10

حال بیاید controller های خود را ایجاد کنیم ، برای این کار به فایل controllers.js که با هم ساختیم برید و 3 کنترلر مانند من ایجاد کنید.

این کنترلرها را با هم خواهیم ساخت ، اما ابتدا به صفحه شبیه ساز خود در مرورگر نگاه کنید ، کلیک سمت راست کنید و inspect elemet را انتخاب ، سپس به سربرگ console برید در این صفحه نباید خطایی داشته باشید مانند من .

wpionpic11

ساخت Menu

بیاید منو را بسازیم و کتگوری های خود را در منو نمایش دهیم .

به آدرس http://ionicframework.com/docs/api/directive/ionSideMenus/

مراجعه کنید می بینید که کد های مربوط به منوو توضیحات آن در این صفحه موجود است من از همین کدها استفاده خواهم کرد ، به فایل menu.html می روم و این کدها را مینویسم .

منو ما فعلا چیزی نمایش نمی دهد ، سوال اینجاست چگونه category های سایت را بگیرم ، بسیار ساده است به یاد دارید گفتم plugin Json Api را نصب و فعال کنید ؟!

خوب حالا مثل من در نوار آدرس ، آدرس سایت خود را وارد کنید وبعد از آن بنویسید /api/get_category_index باید مشابه شکل زیر را ببنید .

wpionpic12

همان طور که می بینید ، کتگوری های من همراه با مشخصات آن نمایش داده شده است .

حالا باید از همین آدرس استفاده کنیم ، به controllers.js برید و در داخل کنترلر menu همان menuController کدهای زیر را وارد کنید :

در فانکشن بالا ما به $scope, $http نیاز مندیم و از آنجا که باید تعداد بسیاری داده را بگیریم ، آنها را در آرایه ای به نام categories قرار می دهم .

$http دو فانکشن دارد یکی وقتی داده را گرفتیم و دیگری و قتی خطایی دریافت می کنیم .

داده های را با dataReceive.data.categores می گیریم و در داخل آرایه categories می ریزیم

سپس در داخل فایل menu.html در داخل تگ ion-item تغییرات زیر را اعمال کنید :

Ng-repeat مانند حلقه for عمل می کنید و چون از $scope در داخل کنترلر استفاده کرده ایم می توانیم به داده ها و متغییر ها در هر جایی درسترسی داشته باشیم ، حالا مرورگر خود را مشاهده کنید

اگر سرور را خاموش کرده اید با دستور ionic serve –lآن را دوباره روشن کنید و این بار خاموش نکنید .

ممکن است مانند من در consoleبه خطای No access control allow origin برخورد کنید در این صورت اکستنشن Allow-Control-Allow-Origin را برای کروم نصب کنید .

wpionpic13

بعد از نصب اکستنشن و راه اندازی آن می بینید که اطلاعات برایشما به نمایش در می آید مانند تصویر زیر.

wpionpic14

همان طور که مشاهده می کنید موفق شدیم دسته بندی های سایت را داخل منو نمایش دهیم ، و در کنسول هم هیچ خطایی نیست ، در کنسول دو آبجکت داریم دلیل آن این است که ما یک پیش نمایش برای اندروید و یک پیش نمایش برای ای او اس داریم .

منو ما چند icon کم دارد یکی هبرگر آیکون و درگری آیکون قلب ، بیاید آنها را بسازیم ، برای ساخت آن دو به فایل menuContent.html مراجعه کنید و کدهاری زیر را مانند من بنویسید.

ابتدایک ion-view ایجاد کرده ام ، سپس یک navigation bar میسازم تا دکمه ها در آن جایی گیرند برای این کار ازion-nav-bar استفاده شده ، برای ساخت دکمه از ion-nav-buttons استفاده کردم و همان طور که می بینید با استفاده از side یکی را سمت چپ و دیگری را سمت راست قرار دادم توجه کنید که هر دکمه داخل یک ion-nav-buttons قرار داده شده است.

برای نوشتن hear ابتدا با استفاده ار ion-header-bar جایگاه آن را می سازیم ، سپس با استفاده از div class=”title” متن هدر را می نویسم ، در انتها باید تصوریری مشابه تصویر زیر را ببنید.

wpionpic15

wpionpic16

منو تیتر آن و icon ها را ساختیم ، حالا نویت قسمت جستوجو است ، به همان فایل menuContent.html بروید و کد زیر را بنویسید .

برای ایجاد جایگاه جستوجو من از div class=”bar bar-subheader item-inout-insert” استفاده کردم درون آن برای ایجاد icon زربین از i class=”icon ion-ios-search استفاده کرده ام و در آخر درون label یک اینپوت برای گرفتن مقادیر وارد شده توسط کابر ساختم .

wpionpic17

حالا وقت آن است که پست ها رابگیرم و سپس نمایش دهیم :

ابتدا در نوارآدرس آرس سایت خود را بنویسید و سپس /api/get_posts را تایپ کنید مانند من

wpionpic18

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

ابتدا به controller.js برید و در postsController ابتدا باید به این آدرس درست رسی پیدا کنیم سپس اطلاعات مورد نظر خود را از آن استخراج کنیم .

خوب با استفاده از $http.get به url موردنظر دسترسی پیدا می کنم سپس در فانکشن اول که مربوط به داده های دریافتی می باشد گفتم posts را داخل آرایه recent_posts قرار بده .

حالا به menuContent.html برید و کدهای زیر را مانند من بنویسید.

همان طور که می بینید درانتهای تگ ion-view کدهای مربوط را اضافه کردم ، برای ساخت ابتدا از تگ ion-content کلاس has-subheader استفاده کردم ، سپس داخل آن یک ion-list قرار دادم که این لیست را می توان از راست به چپ کشید can-swipe = “true”.

سپس ion-item بعد از اضافه کردن کلاس های مربوطه یک ng-repeat در آن قرار دادم و این حقله post هارا یکی یکی از آرایه ما recent_posts می گیرد در داخل img برای آدرس دهی از {{post.thumbnail}} ، برای گرفتن title و قرار دادن در h2 از {{post.title}} و برای گرفتن متن هر پست و قرار دادن آن در داخل تگ p از {{post.excerpt}} استفاده کردن تمام این اطلاعات در داخل خمان فایل json که برای ما ارسال شده می باشد و بارفتن به آدرس سایت خود و سپس تایپ /api/get_posts می توانید آنها را ببنید ، من عکس آن را برای شما قبلا گذاشتم .

خوب به مرورگر خود مراجعه کنید و باید شکلی مانند شکل زیر ببینید .

wpionpic19

همان طور که می بیند متن بسیار طولانی است و علامت های html در آن دیده می شود برای رفع این مشکل از $sce استفاده کی کنیم ، به controllers.js برید و تغییرات زیر را اعمال کنید.

برای تایتل و همچنین برای کنترلرmenuController نیز این کاررا انجام دادم ، به مرورگر خود توجه کنید باید مشکل برطرف شده باشد.

برای فعال کردن search کافیست در menuContent.html تگ ion-item از filter استفاده کنید به یاد داشته باشید که می خواهیم تایتل را جستوجو کنیم :

wpionpic21

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

اگر مانند من در کنسول خطایی مشابه خطای بالا در یافت کردید به فایل menuContent.html مراجعه کنید و در تگ img از ng-src به جای src خالی استفاده کنید.

wpionpic22

مشکل دیگر این است اگر صفحه را یه پایین اسکرول کنید و سپس سرچ را انجام دهید صفحه خود به خود به بالا نمیرود تا نتایج را ببینیم برای رفع این مشکل در فایلmenuContent.html از ng-change و delegate-handel استفاده می کنم

wpionpic23

خوب در ng-change نام یک فانکشن را وارد کردم که همین الان با هم می سازیم .

به controller.js برگردید و در کنترلر postController فانکشن را مانند من ایجاد کنید هم چنین در فانکشن اصلی باید $ionicScrollDelegate را اضافه کنیم .

و این مشکل هم حل شد .

حال بیاید refresh صفحه را ایجاد کنیم .

برای این کار کافیست در فایلmenuContent.html بعد از تگ ion-content تگ ion-refresher را اضافه کنید و یک جمله مثلا بروز رسانی و یک فانکشن به آن بدهید.

wpionpic24

من نام فانکشن را doRefresh گذاشتم با مراجعه به آدرس http://ionicframework.com/docs/api/directive/ionRefresher/

می توانید اطلاعات بیشتری در این مورد کسب کنید ، حالا وقت آن است تا فانکشن را ایجاد کنیم ، به controllers.js برگردید و در کنترل postsController مانند من فانکشن را ایجاد کنید .

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

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

خوب یه controllers.js برید و در داخل کنترلر postsController فانکشن ها را مانند من ایجاد کنید ، فانکشن ها ساده هستند و نیازی به توضیح نیست. هم چنین من داخل کد توضیحات کوتاهی داده ام

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

حال به app.js بروید و یک state جدید برای این صفحه ایجاد کنید مانند من .

ioniccnist

می بینید که نام کنترلر را categoryController گذاشتم ، حالا به controllers.js مراجعه کنید و مانند من controller را بسازید .

کنترلر را در انتهای کنترلر بعدی اضافه کنید ، می توانید نام فانکشن doRefresh را تغییر دهید ، این کد نیز مشابه کدهای قبلی است که با هم نوشتیم .

به postsByCategory.html مراجعه کنید و مانند من آن را ایجاد کنید .

{{categoryTitle}}

 

 

 

به menu.html برید و مانند من href در تگ ion-item را بازنویسی کنید .

دسته های من

 

حالا به مروگر خود مراجعه کنید باید چیزی شبیه به تصویر زیر را ببنید.

wpionpic29

در تصویر بالا می بینید دسته بندی Javascript را اینتخاب کردم و تمام پست های آن دسته بندی برای من به نمایش در آمده.

فعال کردن favorite در صفحه :

برای ایجاد favorite ابتدا در cmd یا git bash دستور npm install bower-g را تایپ می کنم تا نصب شود بعد از نصب ، وارد مسیر نرم افزار شده و دستور bower install ngstorage را تایپ می کنم ،تا نصب شود ، برای اطمینان از اینکه ngstorage نصب شده است یا نه ، وارد پوشه www شوید سپس lib را باز کنید باید پوشه ای به نام ngstorage را ببینید ، باید فایل ngStorage.min.js را که داخل این پوشه است را به صفحه index.html اضافه کنیم این کار درست بعد از ionic-bundel.js قرار می دهیم

wpionpic30

در تصویر بالا پوشه ngstorage را مشاهده می کنید .

در پوشه templates فایلی به نام favorites.html می سازم ، سپس در app.js آن را معرفی می کنم

حالا به favorites.html بر می گردم و مکان هایی برای نمایش اطلاعات ایجاد می کنم این کد مانند کد های پیشین است پس نیازی به توضیح نیست.

پستهای مورد علاقه

 

{{post.title}}

 

 

ساخت Favorite Post :

خوب وقت آن است کنترولر favoriteController را ایجاد کنیم ، هم چنین باید در menuControllerفانکشن favorite Post پست را اضافه کنم هم در این قسمت و هم در menuController.html

menuContent.html:

من 3 پست را پست محبوب می کنم سپس به صفحه صفحات محبوب میرم تا ببینم پست های من آمده اند یا نه.

wpionpic31

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

 

Share Posts :

پرای فعال کردن share posts در نرم افزارمان از پلاگین socialsharing استفاده می کنیم به آدرس https://github.com/eddyverbruggen/socialsharing-phonegap-plugin

برید.

wpionpic33

همان طور که در تصویر بالا مشاهده می کنید برای نصب این پلاگین از دو دستور cordova plugin add cordova-plugin-x-socialsharing و cordova prepare استفاده کنیم اما قبل از آن باید با استفاده از دستور ionic platform add android پلتفرم اندروید را نصب کنیم بعد از آن این دو دستور را در cmd وارد می کنیم .

اگر به یاد داشته باشید هنگامی که صفحه post.html را ایجاد کردیم فانکشنی به نام share() را معرفی کردیم :

wpionpic34

به controllers.js برید و داخل کنترلر postController فانکشن share را ایجاد کنید .

خوب تمام شد .

برای تست نرم افزار برروی گوشی می توانید از دستور ionic run android –l –c استفاده کنید ، هم چنین برای ساخت apk می توانید از دستور ionic build android استفاده کنید .

برای اطلاعات بیشتر به سایت :

https://ionicframework.com/getting-started/

مراجعه کنید .

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

یک پاسخ

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

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

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

۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره
(ستاره دهید)
Loading...
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on facebook