27 |
--------------------------------------------------------------------------------
/src/declarations.d.ts:
--------------------------------------------------------------------------------
1 | /*
2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
3 | They're what make intellisense work and make Typescript know all about your code.
4 |
5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
6 | provide their own type declarations.
7 |
8 | To learn more about using third party libraries in an Ionic app, check out the docs here:
9 | http://ionicframework.com/docs/v2/resources/third-party-libs/
10 |
11 | For more info on type definition files, check out the Typescript docs here:
12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
13 | */
14 | declare module '*';
--------------------------------------------------------------------------------
/src/app/app.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/v2/theming/
2 |
3 |
4 | // App Global Sass
5 | // --------------------------------------------------
6 | // Put style rules here that you want to apply globally. These
7 | // styles are for the entire app and not just one component.
8 | // Additionally, this file can be also used as an entry point
9 | // to import other Sass files to be included in the output CSS.
10 | //
11 | // Shared Sass variables, which can be used to adjust Ionic's
12 | // default Sass variables, belong in "theme/variables.scss".
13 | //
14 | // To declare rules for a specific mode, create a child rule
15 | // for the .md, .ios, or .wp mode classes. The mode class is
16 | // automatically applied to the element in the app.
17 |
--------------------------------------------------------------------------------
/src/pages/report/report.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Match Report
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Score
13 |
14 |
15 |
16 | Report
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Check out https://googlechrome.github.io/sw-toolbox/docs/master/index.html for
3 | * more info on how to use sw-toolbox to custom configure your service worker.
4 | */
5 |
6 |
7 | 'use strict';
8 | importScripts('./build/sw-toolbox.js');
9 |
10 | self.toolbox.options.cache = {
11 | name: 'ionic-cache'
12 | };
13 |
14 | // pre-cache our key assets
15 | self.toolbox.precache(
16 | [
17 | './build/main.js',
18 | './build/main.css',
19 | './build/polyfills.js',
20 | 'index.html',
21 | 'manifest.json'
22 | ]
23 | );
24 |
25 | // dynamically cache any other local assets
26 | self.toolbox.router.any('/*', self.toolbox.cacheFirst);
27 |
28 | // for any other requests go to the network, cache,
29 | // and then only use that cached resource if your user goes offline
30 | self.toolbox.router.default = self.toolbox.networkFirst;
--------------------------------------------------------------------------------
/src/providers/http-client.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http, Headers } from '@angular/http';
3 | import 'rxjs/add/operator/map';
4 | @Injectable()
5 | export class HttpClient {
6 | constructor(private http: Http) {
7 | }
8 | // property with headers that need injected
9 | headers: Headers;
10 |
11 | addHeader(headerName: string, headerValue: string) {
12 | if (!this.headers) {
13 | this.headers = new Headers();
14 | }
15 | // (this.requestOptionArgs.headers as Headers).delete(headerName);
16 | (this.headers).set(headerName, headerValue);
17 | }
18 | // inject the header to every get or post operation
19 | get(url) {
20 | return this.http.get(url, {
21 | headers: this.headers
22 | });
23 | }
24 | post(url, data) {
25 | return this.http.post(url, data, {
26 | headers: this.headers
27 | });
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # A very simple Ionic 2/3 sample to show how to post to a WP Rest API enabled wordpress site.
2 |
3 | ## The sample requires a Rest API enabled WP site to be created, running, and have the WP JWT plugin activated (https://en-gb.wordpress.org/plugins/jwt-authentication-for-wp-rest-api/).
4 |
5 | Make sure and set your auth key in the wp-config file after activating the plugin, e.g.
6 | ```
7 | define('JWT_AUTH_SECRET_KEY', 'your-top-secrect-key')
8 | ```
9 |
10 | On some servers you will need to enable http auth in your .htaccess file
11 | ```
12 | RewriteEngine on
13 |
14 | RewriteCond %{HTTP:Authorization} ^(.*)
15 |
16 | RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
17 | ```
18 |
19 | !Remember to change the proxy address in the ionic.config.json file to point towards your own WP site!
20 |
21 | For step by step instructions please refer to https://productiveprogrammer.io/wordpress-rest-api-mobile-apps/
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Events } from 'ionic-angular';
3 | import { Login } from '../pages/login/login';
4 | import { Report } from '../pages/report/report';
5 | import { UserProvider } from '../providers/user-provider';
6 |
7 | @Component({
8 | template: ``,
9 | providers: [UserProvider]
10 | })
11 | export class MyApp {
12 | // the default root page is Login
13 | rootPage: any = Login;
14 |
15 | constructor(private events: Events, private userData: UserProvider) {
16 | // start listening to login and log out events
17 | // if the user is logged in then navigate to the Report page
18 | this.events.subscribe('user:login', () => this.rootPage = Report);
19 | this.events.subscribe('user:logout', () => this.rootPage = Login);
20 |
21 | // check to see if user has logged in before
22 | // if they have there will be a logged in event fired
23 | userData.checkedLoggedInStatus();
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, ErrorHandler } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
4 | import { MyApp } from './app.component';
5 | import { Login } from '../pages/login/login';
6 | import { Report } from '../pages/report/report';
7 | import { HttpModule } from '@angular/http';
8 | import { IonicStorageModule } from '@ionic/storage';
9 |
10 | import { StatusBar } from '@ionic-native/status-bar';
11 | import { SplashScreen } from '@ionic-native/splash-screen';
12 | import { HttpClient } from '../providers/http-client';
13 |
14 | @NgModule({
15 | declarations: [
16 | MyApp,
17 | Login,
18 | Report
19 | ],
20 | imports: [
21 | BrowserModule,
22 | HttpModule,
23 | IonicModule.forRoot(MyApp),
24 | IonicStorageModule.forRoot()
25 | ],
26 | bootstrap: [IonicApp],
27 | entryComponents: [
28 | MyApp,
29 | Login,
30 | Report
31 | ],
32 | providers: [
33 | StatusBar,
34 | SplashScreen,
35 | HttpClient,
36 | {provide: ErrorHandler, useClass: IonicErrorHandler}
37 | ]
38 | })
39 | export class AppModule {}
40 |
--------------------------------------------------------------------------------
/src/providers/word-press-provider.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Events } from 'ionic-angular';
3 | import { HttpClient } from '../providers/http-client';
4 |
5 | @Injectable()
6 | export class WordPressProvider {
7 | constructor(private events: Events, private http: HttpClient) {
8 | }
9 | createReport(score: string, report: string) {
10 | // let the app know we have started a save operation
11 | // to show spinners etc
12 | this.events.publish('wordpress:savestatus', { state: 'saving' });
13 | // set the JSON data for the call
14 | // see https://developer.wordpress.org/rest-api/reference/posts/#create-a-post for options
15 | let data = {
16 | title: score,
17 | excerpt: report,
18 | content: report,
19 | status: 'publish'
20 | };
21 | // the important bit, make a request to the server to create a new post
22 | // The Authentication header will be added to the request automatically by our Interceptor service
23 | this.http.post('/server/wp-json/wp/v2/posts', data).subscribe(data => {
24 | // tell the app that the operation was a success
25 | this.events.publish('wordpress:savestatus', { state: 'finished' });
26 | this.events.publish('wordpress:createdreport');
27 | }, error => {
28 | this.events.publish('wordpress:savestatus', { state: 'error', message: error });
29 | });
30 | }
31 | }
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ionic App
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ionic-hello-world",
3 | "version": "0.0.0",
4 | "author": "Ionic Framework",
5 | "homepage": "http://ionicframework.com/",
6 | "private": true,
7 | "scripts": {
8 | "clean": "ionic-app-scripts clean",
9 | "build": "ionic-app-scripts build",
10 | "ionic:build": "ionic-app-scripts build",
11 | "ionic:serve": "ionic-app-scripts serve"
12 | },
13 | "dependencies": {
14 | "@angular/common": "4.0.2",
15 | "@angular/compiler": "4.0.2",
16 | "@angular/compiler-cli": "4.0.2",
17 | "@angular/core": "4.0.2",
18 | "@angular/forms": "4.0.2",
19 | "@angular/http": "4.0.2",
20 | "@angular/platform-browser": "4.0.2",
21 | "@angular/platform-browser-dynamic": "4.0.2",
22 | "@ionic-native/core": "3.4.2",
23 | "@ionic-native/splash-screen": "3.4.2",
24 | "@ionic-native/status-bar": "3.4.2",
25 | "@ionic/storage": "2.0.1",
26 | "ionic-angular": "3.1.0",
27 | "ionicons": "3.0.0",
28 | "rxjs": "5.1.1",
29 | "sw-toolbox": "3.4.0",
30 | "zone.js": "^0.8.5"
31 | },
32 | "devDependencies": {
33 | "@ionic/app-scripts": "1.3.5",
34 | "@ionic/cli-plugin-ionic-angular": "1.2.0",
35 | "typescript": "~2.2.1"
36 | },
37 | "cordovaPlugins": [
38 | "cordova-plugin-whitelist",
39 | "cordova-plugin-console",
40 | "cordova-plugin-statusbar",
41 | "cordova-plugin-device",
42 | "cordova-plugin-splashscreen",
43 | "ionic-plugin-keyboard"
44 | ],
45 | "cordovaPlatforms": [],
46 | "description": "wp-rest-api-ionic3: An Ionic project"
47 | }
48 |
--------------------------------------------------------------------------------
/src/providers/user-provider.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Events } from 'ionic-angular';
3 | import { Storage } from '@ionic/storage';
4 | import { HttpClient } from '../providers/http-client';
5 | import 'rxjs/Rx';
6 |
7 | @Injectable()
8 | export class UserProvider {
9 | constructor(public events: Events, private http: HttpClient, private stor: Storage) {
10 | }
11 | // this is a unique token for storing auth tokens in your local storage
12 | // for later use
13 | AUTHTOKEN: string = "myauthtokenkey";
14 |
15 | checkedLoggedInStatus() {
16 | this.stor.get(this.AUTHTOKEN).then(output => {
17 | if (output) {
18 | console.log(`User is logged in: ${output}`);
19 | this.events.publish('user:login');
20 | }
21 | });
22 | }
23 | // determine if the user/password can be authenticated and fire an event when finished
24 | login(username, password) {
25 | let data = { username: username, password: password };
26 | // remove any existing auth tokens from local storage
27 | this.stor.remove(this.AUTHTOKEN);
28 | // the important bit, contact the WP end point and ask for a token
29 | this.http.post('/server/wp-json/jwt-auth/v1/token', data).map(res => res.json())
30 | .subscribe(response => {
31 | // great we are authenticated, save the token in localstorage for future use
32 | this.stor.set(this.AUTHTOKEN, response.token);
33 | // and start using the token in every subsequent http request to the WP server
34 | this.http.addHeader('Authorization', `Bearer ${response.token}`);
35 | // fire an event to say we are authenticated
36 | this.events.publish('user:login');
37 | },
38 | err => console.log(err)
39 | );
40 | }
41 | logout() {
42 | this.stor.remove(this.AUTHTOKEN);
43 | this.events.publish('user:logout');
44 | }
45 | }
--------------------------------------------------------------------------------
/src/pages/report/report.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { IonicPage, Events, LoadingController, Loading, ToastController } from 'ionic-angular';
3 | import { WordPressProvider } from '../../providers/word-press-provider';
4 | import { UserProvider } from '../../providers/user-provider';
5 |
6 | @IonicPage()
7 | @Component({
8 | selector: 'page-report',
9 | providers: [WordPressProvider],
10 | templateUrl: 'report.html',
11 | })
12 | export class Report {
13 |
14 | private score: string;
15 | private report: string;
16 | private loader: Loading;
17 |
18 | constructor(private events: Events, private wordpress: WordPressProvider, private user: UserProvider, private loadingCtrl: LoadingController, private toastCtrl: ToastController) {
19 | this.createLoader();
20 | this.listenToWordPressEvents();
21 | }
22 | createReport() {
23 | // pass the texbox input to our WordPress service
24 | this.wordpress.createReport(this.score, this.report);
25 | }
26 | private createLoader() {
27 | this.loader = this.loadingCtrl.create({
28 | content: "Saving..."
29 | });
30 | }
31 | private listenToWordPressEvents() {
32 | this.events.subscribe('wordpress:savestatus', (state) => {
33 | console.log(state);
34 | if (state.state === 'saving') {
35 | this.loader.present();
36 | console.log('saving');
37 | }
38 | else if (state.state === 'error') {
39 | this.loader.dismiss();
40 | this.createLoader();
41 | this.toastCtrl.create({ message: 'Error Saving Report', duration: 3000 }).present();
42 | }
43 | else if (state.state === 'finished') {
44 | this.loader.dismiss();
45 | this.createLoader();
46 | console.log('finished');
47 | }
48 | });
49 | this.events.subscribe('wordpress:createdreport', () => {
50 | this.toastCtrl.create({ message: 'Report Created', duration: 3000 }).present();
51 | this.report = '';
52 | this.score = '';
53 | });
54 | }
55 | logout() {
56 | this.user.logout();
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/v2/theming/
3 | $font-path: "../assets/fonts";
4 |
5 | @import "ionic.globals";
6 |
7 |
8 | // Shared Variables
9 | // --------------------------------------------------
10 | // To customize the look and feel of this app, you can override
11 | // the Sass variables found in Ionic's source scss files.
12 | // To view all the possible Ionic variables, see:
13 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
14 |
15 |
16 |
17 |
18 | // Named Color Variables
19 | // --------------------------------------------------
20 | // Named colors makes it easy to reuse colors on various components.
21 | // It's highly recommended to change the default colors
22 | // to match your app's branding. Ionic uses a Sass map of
23 | // colors so you can add, rename and remove colors as needed.
24 | // The "primary" color is the only required color in the map.
25 |
26 | $colors: (
27 | primary: #488aff,
28 | secondary: #32db64,
29 | danger: #f53d3d,
30 | light: #f4f4f4,
31 | dark: #222
32 | );
33 |
34 |
35 | // App iOS Variables
36 | // --------------------------------------------------
37 | // iOS only Sass variables can go here
38 |
39 |
40 |
41 |
42 | // App Material Design Variables
43 | // --------------------------------------------------
44 | // Material Design only Sass variables can go here
45 |
46 |
47 |
48 |
49 | // App Windows Variables
50 | // --------------------------------------------------
51 | // Windows only Sass variables can go here
52 |
53 |
54 |
55 |
56 | // App Theme
57 | // --------------------------------------------------
58 | // Ionic apps can have different themes applied, which can
59 | // then be future customized. This import comes last
60 | // so that the above variables are used and Ionic's
61 | // default are overridden.
62 |
63 | @import "ionic.theme.default";
64 |
65 |
66 | // Ionicons
67 | // --------------------------------------------------
68 | // The premium icon font for Ionic. For more info, please see:
69 | // http://ionicframework.com/docs/v2/ionicons/
70 |
71 | @import "ionic.ionicons";
72 |
73 |
74 | // Fonts
75 | // --------------------------------------------------
76 |
77 | @import "roboto";
78 | @import "noto-sans";
79 |
--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | wp-rest-api-ionic3
4 | An awesome Ionic/Cordova app.
5 | Ionic Framework Team
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
--------------------------------------------------------------------------------