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
-
Install Wordpress
Follow this link to get help in installing Wordpress:
https://codex.wordpress.org/Installing_WordPress
-
Plugins
-
reactions.zip (Required)
You will find the file named
reactions.zip
inwordpress-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
-
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.You may be able to use node version lessser than 8 but we haven’t tested the app with these versions, hence 8.9.3 is recommended
-
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+
-
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- appName - Fill in your applicaiton’s name. This is one is used to display app name inside the applicaiton.
- 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
-
adminUsername - This is the admin’s username of your wordpress website, that you use while loging in admin section.
-
adminPassword - This is the admin’s password of your wordpress website, that you use while loging in admin section.
-
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.
-
contactFormId - Used in contact-form-7/v1/contact-forms/
/feedback to submit contact us forms -
oneSignalAppId - Your OneSignal app id for notificaitons, setup explained below.
-
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/
-
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/
- socialLinks - This configuration enables configuration of links to visit when clicking on social media icons in applicaiton’s side navigation panel.
-
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:
- Create an account on OneSignal if you do not already have one.
- Create a new app in OneSignal
- Grab your OneSignal App ID, available in Keys & IDs
- Install OneSingal Wordrepss Plugin on your wordpress site
- Setup the wordpress plugin you just installed in previous step. This guide may help you https://documentation.onesignal.com/docs/accounts-and-keys#section-app-id
- In
src/app/app.config.ts
set the following values:- oneSignalAppId: Your OneSignal App ID or just App ID, is the main identifier of your OneSignal app. Follow this instruction to retreive it https://documentation.onesignal.com/docs/accounts-and-keys#section-keys-ids
- oneSignalGPSenderId: A unique numerical value created when you create your Firebase project, available in the Cloud Messaging tab of the Firebase console Settings pane. The sender ID is used to identify each sender that can send messages to the client app.
Useful links
- Instructions on how to setup OneSignal for Ionic https://documentation.onesignal.com/docs/ionic-sdk-setup
-
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
-
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.
-
Useful links:
- SHA-1 key related
- Keystore
- Build - https://developer.android.com/studio/run - https://developer.android.com/studio/publish/app-signing
- Publish https://themanifest.com/mobile-apps/how-publish-app-google-play-step-step-guide
-
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