1.2.0 - 10/25/2016

  • Upgrade to ionic RC.1

1.1.0 - 09/30/2016

1.0.1 - 08/08/2016

  • fixed broken zip file
  • Updated to the latest ionic 2 beta 11
  • Enabled Cache by default
  • Hide Tutorial after the first view
  • Added some use cases in the documentation

1.0 - 08/03/2016

  • initial release

ionWordpress2

ionWordpress2 is a fully functional high performance app perfect for apps who need maps with different categories of locations. This starter is built with Angular 2, Ionic 2, Typescript and SASS to take advantage of the future web standards.

Demo: http://preview.orlyapps.de/ionWordpress/ Documentation: http://preview.orlyapps.de/ionWordpress/documentation/

Features

  • Cordova/PhoneGap
  • Latest Technologies Ionic 2 (RC 0) + Angular 2 (Final) with Typescript
  • Full Wordpress Integration: Posts, Pages, Locations and your custom post types
  • Easy Configure App – just edit one file config.js and build app
  • Google Analytics Tracking
  • Beautiful Tutorial
  • App Rating
  • Share on Facebook, Twitter, WhatsApp, SMS or E-Mail
  • Link to Facebook App
  • In-App-Browser for external links
  • Beautiful, readable and maintainable Sourcecode
  • Powerful live customization
  • Icon and Splashscreen PSD templates with automatic generation of ALL ion sizes
  • Automatic compilation
  • WordPress WP API V2

What In Archive

  • ionWordpress 2 Source Code
  • Wordpress Plugins
  • Documentation with Use Cases

Support

If you have any questions, please send us an email to info@orlyapps.de. We’ll get back to you as soon as possible.

Getting Started

Quick Start

To just run the app in your browser you have to put the App\www Folder on a Webserver.

Example: Apache / NGINX

  • Move the files of the www folder to the htdocs root e.g. /var/www/ionWordpress
  • Open http://localhost/ionWordpress in your browser

Example: node.js

npm install nws -g
cd App/www
nws .

Now open http://localhost:3030/ in your browser

Example: python

cd App/www
python -m SimpleHTTPServer 3030

Now open http://localhost:3030/ in your browser

Build

Requirements: You need node.js installed. Please go to https://nodejs.org/en/ to install the latest version of node.

Run the following commands to install the build environment

Important: if you have installed the beta cli you should run npm uninstall -g ionic first. You need version 2.1.0 for this release. Check your cli version by running ionic -v in the command line.

cd App
npm install npm -g
npm uninstall -g ionic
npm install ionic -g
npm install

Run

Browser

To run your app, cd into App folder and then run the ionic serve command:

ionic serve

Browser Preview

You can play with it right in the browser!

The serve command also has a live reload. You can now change html, ts or sass files and the page gets reloaded.

Building to a Device

After you have Ionic installed, you can build your app to a physical device. If you don’t have a physical device on hand, you can still build to a device emulator. Check out the iOS simulator docs if you are on a Mac, or the Genymotion docs if you are looking to emulate an Android device. You will also need Cordova to run your app on a native device. To install Cordova, run:

npm install -g cordova

Once you have Cordova installed and a device or emulator ready to go, you can move on and begin building your app!

Building for iOS

To build for iOS, we need to add the iOS platform module to Cordova:

ionic platform add ios

Next, you’ll need to install Xcode. Xcode allows you to build compile to a target device running iOS.

From there, you should be able to run the iOS emulator using the following command:

ionic emulate ios

Building for Android

To build for Android, you’ll need to add the Android platform module to Cordova:

ionic platform add android

Next, you’ll need to install the Android SDK. The Android SDK allows you to build compile to a target device running Android. Although the Android SDK comes with a stock emulator, Genymotion is recommended, since it’s much faster. Once installed, start an Android image and run:

ionic platform add android

$ ionic run android

Wordpress

Install Plugins in folder wordpress/plugins

  • geo-my-wp
  • orlypress-rest-image
  • rest-api
  • orlypress-location
  • orlypress-rest-subtitle

Only geo-my-wp need some easy configuration

geo-my-wp

  • Activate Addon
  • Go To wp-admin/admin.php?page=gmw-add-ons in your wordpress backend
  • Activate the first Add-on Post Types Locator
  • Activate Locator for custom post type. Go to wp-admin/admin.php?page=gmw-settings
  • Select Post Types and check Locations (orlyapps_location)
  • Save

Used Cordova Plugins

cordova-plugin-device
cordova-plugin-console
cordova-plugin-whitelist
cordova-plugin-splashscreen
cordova-plugin-statusbar
ionic-plugin-keyboard
cordova-plugin-crosswalk-webview
cordova-plugin-appavailability
cordova-plugin-apprate
cordova-plugin-inappbrowser
cordova-plugin-geolocation
cordova-plugin-app-version
cordova-plugin-network-information
uk.co.workingedge.phonegap.plugin.launchnavigator
cordova-plugin-email-composer
cordova-plugin-google-analytics
cordova-plugin-x-socialsharing

Modify

Android Key Store

Generate your Android Key for signing the apk

cd hooks/android/
rm production.keystore
keytool -genkey -v -keystore production.keystore -alias app -keyalg RSA -keysize 2048 -validity 10000

Edit hooks/android/debug-signing.properties and hooks/android/release-signing.properties with the password you have set in the previous step

storeFile=production.keystore
storePassword= (ENTER HERE YOUR PASSWORT)
keyAlias=app
keyPassword=123456

config.ts

The App/app/config.ts holds every important configuration for your app. Every attribute is documented. Here are the important changes you have to make:

export class Config {

    // Base URL of the Wordpress Website - This is used to detect internal links
    baseUrl: string = "wordpress.orlyapps.de"

    // REST API-Endpoint - http://yourdomain.com/wp-json/
    wordpress_endpoint: string = 'http://wordpress.orlyapps.de/wp-json/';

    // Wordpress Root Page ID
    // This is the starting page in your app. You can find the Page ID in your wordpress backend
    wordpress_rootPageId: number = 2;

    // Wordpress Page ID of your About Page
    wordpress_aboutPageId: number = 4;

    // More configurations ....
}

config.xml

Change the meta information of your app

  • <name>ionWordpress</name>
  • <description>ionWordpress</description>
  • <widget id="de.orlyapps.ionWordpress" (...)

Icons and Splashscreen

In resources/psd are Photoshop template files for iOS and Android icons.

  • Change the app icon for android resources/android/icon/icon.png and iOS resources/ios/icon/icon.png
  • Change the splashscreen resources/splash.png
  • Generate icon and splashscreenfor every resolution via command line ionic resources --icon and ionic resources --splash

Use Cases

Please start ionic with ionic serve via command line. So you have a live preview of your changes.

Enable Cache

Open the config.ts and edit the following lines

cache: boolean = true
cache_expire: number = 60 * 60 * 1000

Pre-Populate Cache

To pre-populate the cache with local data. You can put the wordpress location categories in a JSON file.

[{
    "id": 2,
    "count": 1,
    "description": "This is a description",
    "link": "http:\/\/wordpress.orlyapps.de\/location_categories\/banks\/",
    "name": "Banks",
    "slug": "banks",
    "taxonomy": "location_categories",
    "parent": 0
}]

and then load them

this.http.get('data/categories.js').toPromise().then(response => {
    this.saveCache('wp/v2/location-categories?per_page=100', response.json());
})

Add a static page in the menu

First you need to create a new page

ionic g page static

This will create under pages a new folder static with a html, ts and sass file

Add the StaticPage now to the pages/index.ts for easier integration

import {StaticPage} from './static/static'; 

export {
    MapCategoriesPage,
    PostsListPage,
    AboutPage,
    PageDetail,
    TutorialPage,
    MapDetailPage,
    MapPage,
    StaticPage /* New */
}

Now include the new static page in the sidemenu. Open the config.ts and import the StaticPage Component

import {MapCategoriesPage, PostsListPage, PageDetail, StaticPage /* NEW */} from './pages';

// Include the StaticPage in the pages property 
// Available Modules
pages: Array<{ title: string, component: any, icon: string}> = [
    { title: 'Locations', component: MapCategoriesPage, icon: 'navigate' },
    { title: 'News', component: PostsListPage, icon: 'chatboxes' },
    { title: 'Pages', component: PageDetail, icon: 'information-circle'},
    { title: 'Static Page', component: StaticPage, icon: 'information-circle'} /* ADDED */
]

Now your browser should reload and you find a new item in the sidemenu

Fetch Custom Post Types from Wordpress

When you register your custom post type in a wordpress plugin you can enable a REST API. Please make sure you have the rest-api plugin installed. The plugin is included in this package but can also installed directly in wordress (https://wordpress.org/plugins/rest-api/)

register_taxonomy(
        'location_categories',
        'orlypress_location',
        array(
            'labels' => array(
                'name' => 'Location Category',
                'add_new_item' => 'Add New Location Category',
                'new_item_name' => 'New Location Category',
            ),
            'show_ui' => true,
            'show_tagcloud' => false,
            'hierarchical' => true,
            'show_in_rest' => true, // This is for the REST-API
            'rest_base' => 'location-categories', // This is for the REST-API
        )
);

You can now call the location categories via:

http://wordpress.orlyapps.de/wp-json/wp/v2/location-categories

Now you can add a new method in the services/wordpress.ts file

getCustomPostType() {
    return this.getAll<Array<any>>('wp/v2/your-costum-post-type');
}

// Use the service in your components
this.service.getCustomPostType().then(data => {
    console.log(data);
})