How to build a blog App for your WordPress site

If you have a WordPress blog and  would like to have an App and increase traffic to your site then check out my gig in fiverr and place your orders.

INTRODUCTION 

In this tutorial, I will explain you step by step how to create a modern, hybrid, mobile application (iOS and Android) of your WordPress website using the latest technologies. We'll be using Ionic Framework, ECMAScript 6, npm, web pack, and Apache Cordova.

.

we will be building something like this

At the end of this tutorial you will get the following application. It has only three modules, a Home module that displays your latest posts, a Post module that displays a specific post, and a Menu module that displays the menu

1. Tools

      Ionic Framework

Ionic framework is one of the leading frameworks for building hybrid web and mobile applications that can run on Android ,ios and Windows phone.Ionic ecosystem is large, including Ionic CLI (command line tool), Ionic Push (easy push notifications), and Ionic Platform (backend services). It is currently one of the top open-source projects on GitHub with more than 20,000 stars and over 600,000 apps created.

     ECMAScript 6 (ES6)

ECMAScript 6 gives you access to a lot of new features, many of which are inspired by CoffeeScript, including as arrow functions, generators, classes, and let scoping. Even though ES6 got approved recently, you can use it right now using a JavaScript compiler, such as Babel.

   Node Package Manager (npm)

Node Package Manager is the most popular package manager in the world. The number of packages is growing faster than Ruby, Python, and Java combined. npm runs on Node.js.

      webpack

Webpack allows you to require any type of file (.js, .coffee, .css, .scss, .png, .jpg, .svg, etc.) and pipe them through loaders to generate static assets that are available to your application.The difference with Grunt and Gulp is that the majority of your needs (minification and compilation) can be covered by just adding some configuration, there's no need to create scripts. For instance, requiring a Sass file, compiling it, auto prefixing it, and injecting the resulting minified CSS into your application.

2. Prerequisites

This tutorial assumes that you have:

• a basic knowledge of AngularJS and Ionic
• a WordPress website ready to be queried (a local installation is fine)
• a machine with Node.js, npm, Bower (we'll need it for some dependencies)
• Git installed with write access  on the project folder

3. Installation

Before we get started, you will need to install two things:

• a WordPress plugin that turns your blog into a RESTFUL API
• the application itself

RESTFUL API

To fetch the posts for your WordPress installation, you will need to install  WP REST API plugin. Make sure that you install version 2.x as version 1.2.x is no longer supported

1. In WordPress, go to Plugins > Add New.
2. Search for WP REST API (WP API).
3. Click Install Now to install the plugin.
4. If the installation is successful, click Activate Plugin to activate it.

If the installation was successful, open a browser and enter http://siteurl/wp-json. This should give you a response similar to the one below.

If the installation was successful, open a browser and enterIf the installation was successful, open a browser and enter http://siteurl/wp-json. This should give you a response similar to the one below.

1 2 3 4 5 6 7 8

{     "name": "Lorem Ipsum blog",     "description": "Just another WordPress site",     "URL": "http://yourDomainName.com/wp-json",     "routes": {},     "authentication": {},     "meta": {} }

This is a JSON response for your blog. this is what will be parsed in the app.

Application

To install the application, clone the repository, using the following commands

1 2 3 4

# Clone the repository and give it a name (BlogApp) $ git clone https://github.com/tutsplus/Hybrid-WordPressIonicAngularJS.git BlogApp # Open the project $ cd BlogApp

Next, create a configuration file and install the dependencies

1 2 3 4

# Copy the default config to your personal config $ cp config/default.config.json config/config.json # Install dependencies $ npm install

To make sure both the application and the REST API work together, open config/config.json. This is your personal configuration file, which is ignored by Git. Change the base URL of the API to the one for your WordPress installation.

1 2 3 4 5

{     "api": {         "baseUrl": "http://yourDomainName.com/wp-json"     } }

Run npm run devserver and open http://localhost:8080/webpack-dev-server/ in a browser. If everything works as expected, you should be in front of a running application that displays your WordPress posts. 

4.  Building 

   Android and iOS

Run the following commands inside the project folder and chose the platform you want to build for.

1 2 3 4

$ cp config.dist.xml config.xml $ npm run installCordova Which platforms do you want to build? (android ios):

In addition to installing platforms within the /platforms folder, the script will install one plugin. For the demo, we need the cordova-plugin-whitelist plugin. It is necessary to allow the application to query the WordPress REST API we created earlier.

If you open config.xml, you will see that we allow access to any kind of origin (). Of course, this is only for demo purposes. If you deploy your application to production, then make sure you restrict access like this:

1	<access origin="http://example.com" />

Android

Prerequisites

• Android SDK
• Ant

Running the npm run runAndroid command is a shortcut for rm -rf www/* && webpack && cordova run android. This removes everything within the www folder, dumps a non-minified version of the app in it, and runs the android command. If an Android device is connected (run adb devices to make sure), the command will load the app on the device, otherwise it will use the Android emulator.

1 2	# Run Android $ npm run runAndroid

iOS

Prerequisites

• OS X
• Xcode

If you do not have an Apple device, you should install the iOS Simulator. It's really good and better than the Android emulator.

1	$ sudo npm install -g ios-sim

Running npm run runIosEmulator is a shortcut for rm -rf www/* && webpack && cordova run ios. The npm run runIosDevice command is a shortcut for rm -rf www/* && webpack && cordova run ios --device.

1 2 3

# Run iOS $ npm run runIosEmulator $ npm run runIosDevice

Conclusion

With this tutorial, I've tried to show you how easy it is to create a hybrid, mobile application for your WordPress website.

Continue Reading