QauntumCloud Logo

WooWBot Mobile App Using PhoneGap

QauntumCloud Logo

Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email us. We truly hope our plugin increases the value of your website!

ABOUT

WooWBot Mobile App Using PhoneGap

Using WooWBot Mobile App PhoneGap package you can easily build native ANDROID and IOS app which can be submitted to Google play app store and Apple app store.



WooWBot Mobile App Using PhoneGap

INSTALLATION

Enable Mobile App Pages in Your WordPress Backend:

Go to WoowBot Pro->Mobile App and activate Create pages for WooWBot Mobile. Following pages will be created to use in WoowBot Android or IOS Mobile App.

Using PhoneGap Online Builder:

Using PhoneGap, you can choose any of the online or CLI option to build your android or IOS WooWBot Mobile App. You have to do some minor configurations with the www.zip folder. Just create an ADOBE account from https://build.phonegap.com/.

PhoneGap build docs can be found at http://docs.phonegap.com/phonegap-build/

Using CLI :

NMP package manager - after installing nodejs on your machine, you have to install PhoneGap and cordova as

  1. use
    npm install -g cordova phonegap@latest

  2. This will create a folder named WooWBot in the current path location with a default project name of Hello World and id of com.phonegap.helloworld.

    You can also specify a name and identifier to ensure the project is unique but still contains the default Hello World code project by specifying them as qualified parameters as shown below:

    $ phonegap create WooWBot --id "com.woowbot.qc" --name "WooWBot"
    TIP: Each of the create command option is documented in the help text and can be accessed with $ phonegap create help. To access general help from the CLI, type -h or help with any command.

  3. Check to be sure you see the following set of files and folders shown in the WooWBot folder:

    config.xml    hooks    platforms    plugins    www

  4. In the project folder you will find www, now replace it with our www folder.

App CONFIGURATION

In the www/assets/config.js file you have to change

  1. to Your Wordpress Installation URL
    var woowBotSiteUrl='http://dev.quantumcloud.com/woowbot';
  2. WP website pages
    var woowBotPages=[ {title: 'About us', slug:'contact-us'}, ]
  3. REST API Prefix
    var woowBotApiPrefix='wp-json';
  4. OneSignal App ID & Firebase FCM senderId for push notification.
    var twoApiKeys={ oneSignalAppId:"103ef989-1f28-4510-928f-011b2a89a5a4", fcmSenderId: "692260439502" };

Follow instructions for Push Notifications:

**Important Note : Since OneSignal is not default PhoneGap plugin, so you have to build it with PhoneGap CLI or PhoneGap Pro

App information at config.xml

Icon and Splash

To change icon and screen media file from www/res (for android / ios) According to http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

Note : please follow our config.xml file.

 

APP BUILDING

You can build and submit your phoneGap package using online build or PhoneGap CLI

Using PhoneGap Build Online :

  1. After app configurations you have to commpress www folder by confirming that it includes res folder and config.xml file as www.zip.
  2. Create an ADOBE account from https://build.phonegap.com/.
  3. After creating an app on phonegap build, you have to upload www.zip file.
  4. You have to create Signin certificate for Android or IOS. Details in docs at http://docs.phonegap.com/phonegap-build/signing/overview/

Using PhoneGap CLI :

For Android

Deploying to an Android device is a fairly straightforward process. If you have a working Android development environment, you’re ready to go.

Enabling USB debugging and Developer Mode can vary between devices, but is easy to look up with a Google search. You can also check out Enabling On-device Developer Options in the Android docs.

Production Builds

To run or build your app for production, run

phonegap cordova run android --release
		# or
		phonegap cordova build android  --release
Sign Android APK

If you want to release your app in the Google Play Store, you have to sign your APK file. To do this, you have to create a new certificate/keystore.

Let’s generate your private key using the keytool command that comes with the JDK:

keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tools’s questions and when it’s all done, you should have a file called my-release-key.jks created in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.jks android-release-unsigned.apk my-alias

This signs the APK in place. Finally, we need to run the zip align tool to optimize the APK. The zipalign tool can be found in /path/to/Android/sdk/build-tools/VERSION/zipalign. For example, on OS X with Android Studio installed, zipalign is in ~/Library/Android/sdk/build-tools/VERSION/zipalign:

zipalign -v 4 android-release-unsigned.apk HelloWorld.apk

To verify that your apk is signed, run apksigner. The apksigner can be also found in the same path as the zipalign tool:

apksigner verify HelloWorld.apk

Now we have our final release binary called HelloWorld.apk and we can release this on the Google Play Store for all the world to enjoy!

All steps can also be found here: Android SDK docs

For IOS

Unlike Android, iOS developers need to generate a provisioning profile to code sign their apps for testing. The good news is that, as of iOS9, you can develop and test your apps on your iOS device without a paid Apple Developer account. This is particularly great for developers who want to try out mobile development with PhoneGap, since it saves the cost but still provides a lot of the features of having a full Apple Developer account. For a full breakdown of the features included, check out Apple’s docs.

Requirements
Creating a Provisioning Profile

To start, you’ll need to set up a provisioning profile to code sign your apps.

Using an Apple ID
  1. Open Xcode preferences (Xcode > Preferences…)
  2. Click the ‘Accounts’ tab
  3. Login with your Apple ID (+ > Add Apple ID…)

Once you’ve successfully logged in, a new ‘Personal Team’ with the role ‘Free’ will appear beneath your Apple ID.

profiles

Using an Apple Developer Account

Creating a provisioning profile with a paid Apple Developer account is a little bit more involved. For full instructions, check out Launching Your App on Devices in the Apple Developer docs.

Running Your App
  1. Run a production build of your app with phonegap cordova build ios --release
  2. Open the .xcodeproj file in platforms/ios/ in Xcode
  3. Connect your phone via USB and select it as the run target
  4. Click the play button in Xcode to try to run your app

Oops, code signing error! No problem.

Code Signing Your App

Next, you’ll need to code sign your app. How you do this will depend on if you are running Xcode 8 or an earlier version.

Xcode 7 and Earlier

If you are running Xcode 7 or earlier, you’ll get a code signing error that looks like this when you try to run the app:

Click the ‘Fix Issue’ button, then select your ‘Personal Team’ profile.

Xcode 8

If you are running Xcode 8, the code signing error will appear as a buildtime error, rather than as a pop-up:

To select the certificate to sign your app with, do the following:

  1. Go to the ‘Project Editor’ by clicking the name or your project in the ‘Project Navigator’
  2. Select the ‘General’ section
  3. Select the team associate with your signing certificate from the ‘Team’ dropdown in the ‘Signing’ section

Trusting the Certificate

Once you’ve code signed your app, you should get a launch error that looks like this. On Xcode 7 and below you’ll see this automatically. On Xcode 8 it will appear the next time you try to run the app:

To get past this, we have to tell our iOS device to trust the certificate we code signed our app with:

  1. Open the ‘Settings’ app on your iOS device
  2. Go to ‘General > Device Management’. You’ll see the email address associated with the Apple ID or Apple Developer account you used to code sign your app.
  3. Tap the email address
  4. Tap ‘Trust <your_email>’:

Now, go back to Xcode and hit that play button or run phonegap cordova run ios from the command line to install and launch your app on your iOS device.

SUPPORT

To get instant support, you can email us at: quantumcloud@gmail.com

Any feedback or feature requests are most welcome. We will try to incorporate your valuable suggestions with our item.

 

Developed by Professional Web Design and Development Company QuantumCloud

Partner with us if you need any design or development help with your website!

Sources and Credits

We have shamelessly borrowed code and ideas from the following great open source projects (Thanks!):