These instructions will help you in setup server and mobile application.

Introduction

The app is connected with blog (WordPress) using REST APIs, the following documentation will guide you through the process to connect the app with your Blog.

Setting up your wordpress

  1. Install Wordpress

    Follow this link to get help in installing Wordpress:

     https://codex.wordpress.org/Installing_WordPress

  2. Plugins

    • reactions.zip (Required)

      You will find the file named reactions.zip in wordpress-plugins folder in the package you downloaded from envato.

    • JWT Authentication for WP REST API (Required)

      Install the wordpress plugin https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/ and follow the setup instructions mentioned in description.

Mobile App

  1. Install Node.js

    You must have Node.js installed on your system to begin building our app. Please follow the following step if nodejs is not installed on your system. If already done, you can skip this step

     Note: Install Node.js version 8 or above on your system.

    Download the Node.js as per your operating system from https://nodejs.org/en/download/ To ensure that you have correct version of nodejs installed, from the command line issue the following command

    node -v

    If you see the string containing version number 8.9.3, you are good to go. If you get command not found error, that means nodejs is not properly installed on your system. You’ll need to troubleshoot the problem.

  2. Install ionic and cordova

    In order to build our app you need to have installed ionic and cordova on your system. To install these packages issue the following command from command line:

     npm install -g ionic@3.9.2 cordova

    This will install the ionic and cordova programs on your system. To ensure that you have successfully installed both the programs, issue following command from the command line

     ionic -v && cordova -v

    If version number gets printed on the console, you are good to go. If you get command not found error, that means that these programs didn’t get properly installed on your system. You’ll need to troubleshoot the problem.

    Make sure you do not accidentally install ionic-v4+

  3. Connect the app with your blog

    In order to connect the app with your blog, you need to make changes in the src/app/app.config.ts. Update the values of the following variables

    1. appName - Fill in your applicaiton’s name. This is one is used to display app name inside the applicaiton.
    2. apiBase - Example Value: http://www.example.com/wp-json/. This is the base url of blog’s REST APIs. Few of the examples of apiBase values are as follows:
      • http://www.example.com/wp-json/
      • http://subdomain.example.com/wp-json/
      • http://www.example.com:8000/wp-json/
      • http://www.example.com/subdirectory/wp-json/

      Note: Replace www.example.com with your domain or IP address

    3. adminUsername - This is the admin’s username of your wordpress website, that you use while loging in admin section.

    4. adminPassword - This is the admin’s password of your wordpress website, that you use while loging in admin section.

    5. sliderPostTagId - This is TAG id for posts in home page slider, posts with the tag is mentioned in sliderPostTagId will appear in posts slider on home page.

    6. contactFormId - Used in contact-form-7/v1/contact-forms//feedback to submit contact us forms

    7. oneSignalAppId - Your OneSignal app id for notificaitons, setup explained below.

    8. oneSignalGPId - is your firebase messaging senderId and can be found in your firebase console. Go to Cloud messaging section in project settings of your firebase app console: https://console.firebase.google.com/

    9. admobBannerId - is your AdMob banner id. Go to your App in AdMob console, then go to your banner add(create a banner ad if not created) then copy its id. https://apps.admob.com/

    10. socialLinks - This configuration enables configuration of links to visit when clicking on social media icons in applicaiton’s side navigation panel.

  4. Push Notifications

    Your can configure our mobile app to recieve the push notifications when order’s status is updated from backend. Push notfications are integrated through One Signal. You will need an account of OneSignal before proceeding. Please follow the following steps:

    Useful links

  5. Resouces Setup

    Your applicaiton’s main resources can be configured by changing images in resources folder.

    • Please note icon.png should be 1024x1024
    • Please note splash.png should be 2732x2732

  6. Build App

    Since the app depends on various native capabilities we suggest you to check the app on physical device instead of checking it in browser. Once you have followed all the steps given above you can build the app for android and ios. But keep in mind that Ionic doesn’t bundle all of the tooling required to build an app, it relies on some additional SDKs and software provided by Apple and/or Google. You’ll need to set up the platform tooling before you can preview or emulate an application on a simulator or device.

    Once done, you can run following command to run the app on your Android device:

       > ionic cordova run android

    To build the apk, run:

       > ionic cordova build android

    Simillarly for iOS, you can run:

       > ionic cordova build ios

    If you find the given information insufficient for you to successfully build or publish the app on app/play store. Please visit https://ionicframework.com/docs/intro/deploying/ for indepth documentation.

  8. Deploy App

    Deploying apps on Google Play Store and Apple App Store is out of the scope of this document. Kindly refer to this guide for further instructions.

Note: If you are unable to understand any topic or find any topic needs more elaboration. Please raise an issue ticket at this link https://opuslabs.freshdesk.com