Implement Push Notifications for android and iOS (phonegap) – part 2

In the 1st Part we prepared required key for android. In this we’ll start adding for ios . This tutorial is only for those using mac or hackintosh OS.

Open Keychain Access. Then go to Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority.

keychain access

keychain access

Enter certificate information on following details, User Email Address, Common Name and  CA Email Address. Then click Continue.

certificate information

certificate information

Click Save.

CertificateSigningRequest

CertificateSigningRequest

Go to Keys category and select IonicPush private key. Right click and export the key.

export private key

export private key

Save as IonicPushKey.

export private key

export private key

Enter your password that will be used to protect the exported key. Click OK.

password p12 key

password p12 key

Enter your machine password and click Always Allow.

password p12 private key

password p12 private key

Firstly you need to have apple developer account for this tutorial. You can register here, https://developer.apple.com/register/index.action .It costs $99 per year.

register as apple developer

register as apple developer

After you registered, you may login into apple developer site, https://developer.apple.com/devcenter/ios/index.action .

iOS Dev Center

iOS Dev Center

Then go to member center page, https://developer.apple.com/membercenter . Choose Manage your certificates, App IDs, devices, and provisioning profiles.

Member Center

Member Center

Choose Certificate under iOS Apps.

Certificates, Identifiers & Profiles

Certificates, Identifiers & Profiles

Click Add icon on right top to create a new iOS certificate for iOS App Development.

iOS Certificates

iOS Certificates

Select iOS App Development and click Continue.

Add iOS Certificate

Add iOS Certificate

Click Continue.

create a CSR file

create a CSR file

Choose file.

upload a CSR file

upload a CSR file

Select CertificateSigningRequest.certSigningRequest file that you already generate it from previous step.

CertificateSigningRequest.certSigningRequest

CertificateSigningRequest.certSigningRequest

Then click Generate.

generate iOS certificate

generate iOS certificate

Click Download. Click ios_development.cer file and will show up inside your keychain access.

download iOS certificate

download iOS certificate

Go to Identifiers > App IDs. Click add icon to add identifier app id.

iOS App ID

iOS App ID

Enter App ID Description.

App ID Description

App ID Description

Scroll down and select Explicit App ID. Enter your bundle ID.

App ID Suffix

App ID Suffix

Scroll down and tick Push Notifications under App Services. Then click Continue.

App Services

App Services

Click Submit to confirm.

iOS App ID

iOS App ID

Click Done.

iOS App ID

iOS App ID

Then Add iOS certificate one more time. This time we create iOS certificate for Apple Push Notification service SSL (Sandbox). Select Apple Push Notification service SSL (Sandbox). Then click Continue.

Apple Push Notification service SSL (Sandbox)

Apple Push Notification service SSL (Sandbox)

Select com.revivalx.ionic.push and click Continue.

Add iOS Certificate

Add iOS Certificate

Click Continue.

About Creating a Certificate Signing Request (CSR)

About Creating a Certificate Signing Request (CSR)

Choose CertificateSigningRequest.certSigningRequest from previous step.

upload a CSR file

upload a CSR file

Click Generate.

generate iOS certificate

generate iOS certificate

Click Download and Done.

Apple Development iOS Push Services: com.revivalx.ionic

Apple Development iOS Push Services: com.revivalx.ionic

You will see your APNS certificate already there.

iOS Certificates

iOS Certificates

To make sure your app correctly configureable with APNS, go to Identifiers > App IDs and select IonicPush. You will see your Push Notifications (Development) is green light indicator. If yellow it means you incorrectly setup your APNS iOS certificate.

iOS App IDs

iOS App IDs

Then go to Devices > All to setup your device. Click Add icon to add your device.

iOS Devices

iOS Devices

Enter your device name and UDID. If you don’t know how to get your UDID number, you can refer to this website.

http://www.wikihow.com/Obtain-the-Identifier-Number-(UDID)-for-an-iPhone,-iPod-or-iPad

Click Done to finish.

Add iOS Devices

Add iOS Devices

Now you need Provisioning Profiles to make sure your app can be run on your device. Go to Provisioning Profiles > Development and click Add icon.

iOS Provisioning Profiles

iOS Provisioning Profiles

Select iOS App Development and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select com.revivalx.ionic.push and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select iOS Development certificate and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Select your devices and click Continue.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Enter profile name and click Generate.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Click Download to get your provisioning profile. Click the provisioning profile to install. Then click Done.

Add iOS Provisioning Profile

Add iOS Provisioning Profile

Your provisioning profile.

iOS Provisioning Profiles

iOS Provisioning Profiles

Making a PEM file.

So now you have three files:

  1. The CSR
  2. The private key as a p12 file (IonicPushKey.p12)
  3. The SSL certificate, aps_development.cer

Open your terminal or command prompt. Convert the .cer file into a .pem file using this command.

openssl x509 -in aps_development.cer -inform der -out IonicPushCert.pem

Convert the private key’s .p12 file into a .pem file.

openssl pkcs12 -nocerts -out IonicPushKey.pem -in IonicPushKey.p12

Finally, combine the certificate and key into a single .pem file

cat IonicPushCert.pem IonicPushKey.pem > ck.pem
Making a PEM File

Making a PEM File

At this point it’s a good idea to test whether the certificate works. Execute the following command:

telnet gateway.sandbox.push.apple.com 2195

This tries to make a regular, unencrypted, connection to the APNS server. If you see the above response, then your Mac can reach APNS. Press Ctrl+C to close the connection. If you get an error message, then make sure your firewall allows outgoing connections on port 2195.

Let’s try connecting again, this time using our SSL certificate and private key to set up a secure connection:

openssl s_client -connect gateway.sandbox.push.apple.com:2195 
    -cert PushChatCert.pem -key PushChatKey.pem

You should see a whole bunch of output, which is openssl letting you know what is going on under the hood.
If the connection is successful, you should be able to type a few characters. When you press enter, the server should disconnect. If there was a problem establishing the connection, openssl will give you an error message but you may have to scroll up through the output to find it.

Next tutorial will be push notifications integration for android and iOS. http://blog.revivalx.com/2014/11/14/implement-push-notifications-for-android-and-ios-phonegap-part-3/

Implement Push Notifications for android and iOS (phonegap) – part 1

In this tutorial I will show you how to implement push notifications in your phonegap app (cordova) for android and iOS platform.

Google Cloud Messaging for Android (GCM) is a service that allows you to send data from your server to your users’ Android-powered device, and also to receive messages from devices on the same connection. The GCM service handles all aspects of queueing of messages and delivery to the target Android application running on the target device. GCM is completely free no matter how big your messaging needs are, and there are no quotas. Reference.

Google Cloud Messaging (GCM)

Google Cloud Messaging (GCM)

Apple Push Notification service (APNs for short) is the centrepiece of the push notifications feature. It is a robust and highly efficient service for propagating information to iOS and OS X devices. Each device establishes an accredited and encrypted IP connection with the service and receives notifications over this persistent connection. If a notification for an application arrives when that application is not running, the device alerts the user that the application has data waiting for it. Reference.

Apple Push Notifications Service (APNS)

Apple Push Notifications Service (APNS)

For this tutorial, we will using ionic framework to create the app. Open your terminal (mac), cmd (windows) . Create an app using this command,

ionic start com.revivalx.ionic.push blank
ionic framework

ionic framework

Install PushPlugin phonegap plugin into your project.

cd com.revivalx.ionic.push blank
cordova plugin add https://github.com/phonegap-build/PushPlugin
PushPlugin phonegap plugin

PushPlugin phonegap plugin

Open your config.xml and change it to like this.

ionic directory

ionic directory

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.ionic.push" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>IonicPush</name>
    <description>
        IonicPush.
    </description>
    <author email="mohammadnrdn@gmail.com" href="http://revivalx.com/">
      Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />

    <!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable storage
         to be sent to iCloud. Note: enabling this could result in Apple rejecting your app.
    -->
    <preference name="BackupWebStorage" value="none" />

    <feature name="StatusBar">
      <param name="ios-package" value="CDVStatusBar" onload="true" />
    </feature>
</widget>

For Android.

Now we need to get project id from google cloud. Go to  https://console.developers.google.com and create a new project. Click Create Project button and a popup will appear. Enter your project name and click Create. Mine is Ionic Push.

google cloud create project

google cloud create project

Then you will be direct to this page. Copy out your project number on the top. Click Enable API.

google cloud developer dashboard

google cloud developer dashboard

Enable Google Cloud Messaging for Android. Click Credentials under APIs and auth on left sidebar.

google developer console API

google developer console API

Create new key under Public API access.

APIs and auth

APIs and auth

Click Server key.

server key

server key

Leave it blank and click Create.

server key

server key

Below is API key details for your project. Copy your API key.

API key

API key

So next tutorial is for iOS part. http://blog.revivalx.com/2014/08/29/implement-push-notifications-for-android-and-ios-phonegap-part-2/

 

 

 

 

PHP Zero Hero 2 Batch 2 training

JOM PHP will organize PHP Zero Hero 2 Batch 2 training next week. This training is suitable for those new in programming field that require guidance and less understanding reading online tutorial. No basic programming also can learn. You will learn HTML CSS, PHP MYSQL, dan WordPress Ecommerce.

11/8/2014 – 29/8/2014
10 am to 5 pm
Monday to Friday
3 weeks
RM1300
10 peoples only

For more information –> http://jomphp.com/belajar-bina-website-dan-php-dari-zero-hero-batch-2.html
Batch 1 training summary –> http://jomphp.com/rumusan-kursus-php-zero-hero-batch-1.html

PHP Zero Hero 2 Batch 2

PHP Zero Hero 2 Batch 2

Create phonegap project that is NOT named HelloWorld

This is the correct way how to create a new project with a name of your choosing and set it up to run on Android and iOS. Edit your project name in config.xml located in your parent folder, not in platform.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.company.YourProjectName" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>YourProjectName</name>
    <description>
        YourProjectName.
    </description>
    <author email="xxxxxxxx@yahoo.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>
cordova parent folder

cordova parent folder

Then you run cordova build android command inside CLI.