How to send Push Notifications using PHP / Google Android

Google Cloud Messaging (GCM) for Android 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, and it is completely free.

The only thing you will need is a Google_Api_key:

To create a Google API project:

  1. Open the Google Developers Console.
  2. If you haven’t created an API project yet, click Create Project.
  3. Supply a project name and click Create.Once the project has been created, a page appears that displays your project ID and project number. For example, Project Number: 670330094152.
  4. Copy down your project number. You will use it later on as the GCM sender ID.

To obtain an API key:

  1. In the sidebar on the left, select APIs & auth > Credentials.
  2. Under Public API access, click Create new key.
  3. In the Create a new key dialog, click Server key.
  4. In the resulting configuration dialog, supply your server’s IP address. For testing purposes, you can use0.0.0.0/0.
  5. Click Create.
  6. In the refreshed page, copy the API key. You will need the API key later on to perform authentication in your app server.

Continue reading “How to send Push Notifications using PHP / Google Android”

Advertisements

setInterval not working in iOS 8 – Home Screen Apps Lose Timing Functions After Lock/Wake

ios_8_logo

If your application is being used as a homescreen web application, you’ll find yourself in a sorry state. Of course, any web app can be converted into a home screen app by the user, so I guess technically this affects anyone making a remote web application. This bug is easily reproduced by simply calling setTimeout(callback, 1) or requestAnimationFrame(callback) via some button or event. When you first open your application, you’ll notice all timing functions are working fine. However if you lock your phone and then unlock to return to your application, you’ll see none of the timing functions can call callbacks anymore. They are simply broken at a native level. There is no reset, no bringing your application back to life, it’s a kill it and restart situation.

These timing functions are crucial to pretty much every other JavaScript framework/library ever made. Definitely head over to Apple as soon as you can, and let them know that you would like to have all of your JavaScript functions, all the time.

Radar Bug Report: http://www.openradar.me/radar?id=5895945212395520

 

Alternative to setInterval and setTimeout

JavaScript’s setTimeout and setInterval are evil and not precise…

  1. both have a delay of various milliseconds http://www.andrewduthie.com/post/a-self-correcting-setinterval-alternative/
  2. both are very resource intensive as they execute several times every second.

A new alternative is requestAnimationFrame. it’s less resource=intensive, does not slow down other stuff and it is disabled on page blur.

This makes it the perfect substitute for a modern setTimeout and setInterval.

So I wrote this functions:

Description

This functions use requestAnimationframe to check if the time is passed based on the elapsed Time calculated from Date.now. The time passed is more precise than the native functions and theoretically less resource intensive. Another advantage/disadvantage(depends) is that the functions are not executed on page blur.

Good for: animations, visual effects

Bad for: timers, clock

RafTimeout

window.rtimeOut=function(callback,delay){
 var dateNow=Date.now,
     requestAnimation=window.requestAnimationFrame,
     start=dateNow(),
     stop,
     timeoutFunc=function(){
      dateNow()-start<delay?stop||requestAnimation(timeoutFunc):callback()
     };
 requestAnimation(timeoutFunc);
 return{
  clear:function(){stop=1}
 }
}

RafInterval

window.rInterval=function(callback,delay){
 var dateNow=Date.now,
     requestAnimation=window.requestAnimationFrame,
     start=dateNow(),
     stop,
     intervalFunc=function(){
      dateNow()-start<delay||(start+=delay,callback());
      stop||requestAnimation(intervalFunc)
     }
 requestAnimation(intervalFunc);
 return{
  clear:function(){stop=1}
 }
}

Usage

var interval1,timeout1;
window.onload=function(){
 interval1=window.rInterval(function(){console.log('interval1')},2000);
 timeout1=window.rtimeOut(function(){console.log('timeout1')},5000);
}

/* to clear
interval1.clear();
timeout1.clear();
*/

Demo

http://jsfiddle.net/wZ9Z6/

Generating Signing Keys for Apple iPhone Phone Gap Builds

When you are building applications that should work across multiple platforms using Phone Gap, you will need to generate a set of signing Keys to work with the different platforms:
Keys

Generating a Key for Apple iOS from MacOS

To manually generate a Certificate, you need a Certificate Signing Request (CSR) file from your Mac. To create a CSR file, follow the instructions below to create one using Keychain Access.

Create a CSR file.

In the Applications folder on your Mac, open the Utilities folder and launch Keychain Access.

Within the Keychain Access drop down menu, select Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

  • In the Certificate Information window, enter the following information:
    • In the User Email Address field, enter your email address.
    • In the Common Name field, create a name for your private key (e.g., John Doe Dev Key).
    • The CA Email Address field should be left empty.
    • In the “Request is” group, select the “Saved to disk” option.
  • Click Continue within Keychain Access to complete the CSR generating process.

Generating a Key for Apple iOS from Windows

I have a Windows computer and I found it very hard to generate a key. If you follow the steps below, you might find it easier:

  1. Install Visual C++ 2008 Redistributables
  2. Download Open SSL for Windows. http://slproweb.com/products/Win32OpenSSL.html and install it onto c:OpenSSL-Win32
  3. Make sure the bin folder is installed in c:OpenSSL-Win32bin
  4. Change your PATH variable to have this path:
    • Select Computer from the Start menu
    • Choose System Properties from the context menu
    • Click Advanced system settings > Advanced tab
    • Click on Environment Variables, under System Variables, find PATH, and click on it.
    • In the Edit windows, modify PATH by adding the location of the class to the value for PATH. If you do not have the item PATH, you may select to add a new variable and add PATH as the name and the location of the class as the value.
  5. The first thing you need to do is generate a private key. Go to the command line and navigate to whatever directory you want to store the generated files in. Then type in the following to generate the key:
    openssl genrsa -des3 -out ios.key 2048

    Keys2
    The result will be a new file called “ios.key” in this folder.

  6. Next you need to generate a Certificate Signing Request or CSR file. You can do this by running the following command, which uses the ios.key file generated earlier:
    openssl req -new -key ios.key -out ios.csr -subj "/emailAddress=contact@carra-lucia-ltd.co.uk, CN=CARRA-LUCIA-LTD, C=UK"

    Change the items in red to match your needs.
    Keys3

  7. Now you need to go to your Apple Developer iOS Provisioning Portal in order to generate an iOS Development Certificate, using the ios.csr file you’ve just generated. Click on “Certificates” in the left hand side, and then “Request”.
    iOSCertificatesAdd Ios Certificate

    You will be prompted to upload a .csr file, and then wait for the certificate to be issued, which it will quite quickly, refresh the browser if you need to.
    csr file

  8. Now download the development certificate that was issued and save it in the same directory where the other generated files are.
    app_distribution
  9. You now need to convert it to a PEM file which you can do with:
    openssl x509 -in ios_distribution.cer -inform DER -out ios_distribution.pem -outform PEM

    Where ios_development.cer is the name of the development certificate created on the Apple Provisioning Portal and ios_development.pem is the PEM file that we want to generate.

  10. Next file is the P12 file, which uses both our private key (ios.key) and the iOS distribution certificate (ios_distribution.pem):
    openssl pkcs12 -export -inkey ios.key -in ios_distribution.pem -out ios_distribution.p12

    You will be asked to enter the access phrase for the ios.key file (which you noted from earlier) and you will need to generate an export password for the P12 file and verify it. The ios_distribution.p12 file is then generated.
    keys4

  11. The last file you need to generate is the provisioning profile, which again requires you to return to the Apple Provisioning Portal.
    iOsProvisioning
  12. If you plan to use services such as Game Center, In-App Purchase, and Push Notifications, or want a Bundle ID unique to a single app, use an explicit App ID. If you want to create one provisioning profile for multiple apps or don’t need a specific Bundle ID, select a wildcard App ID. Wildcard App IDs use an asterisk (*) as the last digit in the Bundle ID field. Please note that iOS App IDs and Mac App IDs cannot be used interchangeably.
  13. Select the certificates you wish to include in this provisioning profile. To use this profile to install an app, the certificate the app was signed with must be included.
  14. Bear in mind that such certificates need to be tied to your iOS testing devices via their UDIDs, and again there is documentation on how to do this.
    provisioning profile
    Once the provisioning profile is generated, download it (e.g. iOS_Development.mobileprovision) and save it in the same place as the other files. This file will also need to be installed on each of your iOS testing devices.

You should now have everything that you need to generate an iOS signing key for PhoneGap Build:

  • P12 certificate file
  • provisioning profile
  • certificate password

These steps can also be used to generate a distribution key for the iTunes Store.

Run iPad Web Application Full Page (Bookmark)

Building an iPhone or iPad Web App is not an easy endeavor. However, if you have any experience in HTML 5, Javascript and CSS its a lot easier to accomplish than you would think. Apple has built a lot of tags and templates into the building of there mobile safari browser. I am going to go over many of the things that I have found that have really helped me build my webapp.

Meta Tags Used By Mobile Safari

To make your app full screen when it is added to the iPhone /iPad home screen using the + button on the browser, the below meta tag will remove all buttons and the url bar and will give it the “native” app look that we are going after. To use any of the meta tags below just add them somewhere in your head tag.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

Now when you pinch on the app it will still zoom and scale. Now, native apps will not zoom or scale, so when need to do something to stop that. Luckily Apple has designed a Meta tag to do that also..

<meta name=”viewport” content=”user-scalable=no, width=device-width” />

The last thing that you may notice is when you tug the app up or down it kinda zooms down and you can see the “background” of the browser. Apple has also designed a meta tag to get rid of that. However, you do need to add a tag to your body tag also. Below is an example…

//

Making Links Open Fullscreen and Not In Safari

Now this was one of the most frustrating problems I had with making my web app in the beginning. If you use…

<a href=”link.html”>Your Link</a>

that tag will take you straight out of your fullscreen app and right into the normal safari, we don’t want that. So the solution to get past this is to use a little bit of Javascript. Now, how we would do this using the Javascript is below…

<a ontouchstart=”window.location=yourlink.html’ “>Your Link</a>

Now some of you familiar with Javascript will see that we are using the ontouchstart instead of onclick. This is a iPhone/iPad only event trigger that will only work on iOS devices. Its a lot smoother on iOS devices but will not work on computers. You can use that event trigger anywhere in your web app. Since onclick takes about one extra second for the device to read, ontouch start is a great asset to have on our side.

IOS7 and above – Show Links in App

if((“standalone” in window.navigator) && window.navigator.standalone){

var noddy, remotes = false;

document.addEventListener(‘click’, function(event) {

noddy = event.target;

while(noddy.nodeName !== “A” && noddy.nodeName !== “HTML”)

{ noddy = noddy.parentNode; }

if(‘href’ in noddy && noddy.href.indexOf(‘http’) !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))

{ event.preventDefault(); document.location.href = noddy.href; }

},false);
}

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

  • To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
    <link rel="apple-touch-icon" href="/custom_icon.png">

    In the above example, replace custom_icon.png with your icon filename.

  • To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

    The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

  1. apple-touch-icon-76×76.png
  2. apple-touch-icon.png

See “Icon and Image Sizes” for webpage icon metrics.

Now what if your user wants to take a certain element and drag it around with there finger? How are we going to do this? Well the technique that I am using is called Drag Drop Library. Its very simple to use, go to this website http://www.gotproject.com/blog/post2.html, download their javascrupt Library using the green button. Then link to that JavaScript file on any page where you would want to use drag and drop. Now, the syntax for getting an element to be able to be dragged is below…

  • //To make an element draggable
  • var D = new webkit_draggable(‘id_of_element’, {options});
  • //To stop an element from being draggable
  • D.destroy();

So what you are going to do is give an element that you want to be able to be dragged a unique ID using css. Then take that css and input it into the above code that reads ‘id_of_element’. So that sample code would find and html element that has a id=”id_of_element” and make it be able to be dragged around by the users finger. It’s fairly simple and creates an awesome “WOW” affect with your apps.

iPhone and iPad web apps are slowly becoming more wide spread around the world. Especially now that Apple is finally giving us Web Designers and Developers the required tools. Now every iOS developer doesn’t have to be an Obj C wizard and have a mac, any person with a little HTML know how can create easy, good looking apps.

Getting iPad Web App to Work Offline Using Localhost, not Cache-Manifest

I spent so much time looking around trying to figure out how I was going to get my web app to work offline. My client will be using the app at large conferences to showcase there product and give a presentation. Wifi is very very unstable at large conferences so it is necessary to make it work offline. What I finally decided to do was to Jailbreak each iPad, and install a server on the localhost of the iPad. To do that I used a program on Cydia called PHPod. This creates a server on that iPad and gives me access to files stored directly on the iPad. What I did next was SSH into the iPad and copy my entire Web App into the WWW directory. Next, I went to localhost on safari on the iPad, clicked my web app and boom there it is right on the iPad. It runs fast, my JQuery still works, all my forms work, its perfect. Now I am looking to make my own Cydia repo where I can host the web app so that the clients wont have to ssh into the iPad every time there is a change. It will just update the package and the site will be updated by the Repo. Yes there is the option to use Cache Manifest and all that but it doesn’t really work all the time and there’s a limit so I couldn’t cache all my videos and larger files etc.

How to build your first PhoneGap application

I recently started looking into PhoneGap again (been a few months and the upgrade from 2.7 to 3.3 went smoothly).

PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari. (Browser geeks, please allow me the affordance of this analogy and I’ll buy you a beer later.)

Over time, the PhoneGap distribution may contain additional tools that tie into other Adobe services, which would not be appropriate for an Apache project. For example, PhoneGap Build and Adobe Shadow together make a whole lot of strategic sense. PhoneGap will always remain free, open source software and will always be a free distribution of Apache Cordova.

Currently, the only difference is in the name of the download package and will remain so for some time.Cordova Logo

What is Apache Cordova to a PhoneGap developer? (i.e. someone who just wants to build apps)

As a developer building PhoneGap applications, nothing has changed. PhoneGap is still free, openly licensed, and the main focus of the PhoneGap team. If your goal is to build cross platform apps with HTML, JS and CSS then keep on using PhoneGap for everything you need. This isn’t to say the transition has been perfect. We messed up the last release by not correctly updating the documentation to reflect the name change which confused new users. Future releases will have checks in place to ensure our documentation has the correct references. If you happen to be reading this and nodding in frustration, I encourage you to use http://docs.phonegap.com as the canonical source for edge documentation. If you want to help us keep this stuff on point, please read on.

 

he Command-Line Interface

This guide shows you how to create applications and deploy them to various native mobile platforms using the phonegapcommand-line interface (CLI). This tool allows you to create new projects, build them on different platforms, either locally or on a remote server, and run them within an emulator or device. You can also use the CLI to initialize project code, after which you use various platforms’ SDKs to develop them further.

Prerequisites

Before building projects locally, you need to install SDKs for each platform you wish to target. (See the Platform Guides for details on how to install each.) Otherwise, you can use the cloud-based PhoneGap Build service to compile apps for the following platforms remotely:

  • Android
  • iOS
  • BlackBerry 6
  • Windows Phone 7
  • WebOS
  • Symbian

Unlike PhoneGap Build, local builds support BlackBerry 10. The WebOS and Symbian platforms are only available when building remotely. The following platforms are only available when building locally:

  • Windows Phone 8
  • Windows 8

See Platform Support for an overview of all available options. See below for details on how to use PhoneGap Build to build remotely.

If building locally, you need to run the command-line interface from the same machine that supports the platform’s SDK. The CLI supports the following combinations:

  • iOS (Mac)
  • Android (Mac, Linux)
  • BlackBerry 10 (Mac, Linux, Windows)
  • Windows Phone 7 (Windows)
  • Windows Phone 8 (Windows)

On the Mac, the command-line is available via the Terminal application. On the PC, it’s available as Command Prompt underAccessories.

The more likely it is that you run the CLI from different machines, the more it makes sense to maintain a remote source code repository, whose assets you pull down to local working directories.

To install the phonegap command-line tool, follow these steps:

  1. Download and install Node.js. Following installation, you should be able to invoke node or npm on your command line.
  2. Install the phonegap utility. In Unix, prefixing the additional sudo command may be necessary to install development utilities in otherwise restricted directories:
    $ sudo npm install -g phonegap
    

    The installation log may produce errors for any uninstalled platform SDKs. Following installation, you should be able to run phonegap on the command line.

Create the App

Go to the directory where you maintain your source code, and run a command such as the following:

    $ phonegap create hello com.example.hello HelloWorld

The first argument specifies a hello directory to be generated for your project. Its www subdirectory houses your application’s home page, along with various resources under cssjs, and img, which follow common web development file-naming conventions. The config.xml file contains important metadata needed to generate and distribute the application.

The other two arguments are optional: the com.example.hello argument provides your project with a reverse domain-style identifier, and the HelloWorld provides the application’s display text. The -i and -n command-line options and their corresponding flags make these explicit:

    $ phonegap create hello -n HelloWorld -i com.example.hello
    $ phonegap create hello --name HelloWorld --id com.example.hello

Alterately, you can edit both of these optional values in the config.xml file later during development.

 WHAT I GOT

I went through all the steps and I got a few errors:

apache_errors
Obviously – this comes from disregard of the prerequisites: iOS native environment requires Mac OSX.
Second, I did not install any Java tools (Android SDK).

To get the Android SDK, you need to go to the Android Developer Website: http://developer.android.com/sdk/index.html and download the Android SDK Zip for your computer (in my case, Windows, X64). The zip file is quite big (400Mb+) and unarchived, goes up to a staggering 2GB. Once you apply all the updates that you need, it will go close to 2.5GB.

How I found places to Visit in London Using Nokia's Here City Lens

I’ve had a Nokia Lumia for a while now. Started with a 920 and because it would not fit completely in my coat top pocket, I went for a smaller version – the 720. There were two things that made me buy a Nokia compared to an iPhone.

  1. My FastHosts Business Email was hard to setup on the iPhone and it would not validate the server POP settings. No such issues with the Nokia.
  2. The camera picture quality is amazing. It made my little Canon Ixus redundant within weeks.

I travel a lot and when I do get to a city I do not know, I like to see the best attractions in one clean sweep. While I try to map out my journey steps in advance, this it is a bit of a challenge if you are visiting a major metropole like London. There are so many attractions like The Big Ben, The Houses of Parliament, The London Eye and Buckingham Palace. The problem is, all these tourist hot spots are far from each other and you will lose time on the Underground or with Cabs if you are trying to see them all in one day.

Here City Lens

Here’s where I found City Lens from Here to be a massive help. It’s free – which is always a good thing when you are getting an app from the Windows Store and it’s super friendly and easy to use. You fire it up (an Internet Connection is needed, 3G, 4G), you lift your phone up and start moving around from the position you are in. The screen will soon start showing you points of interest based on the category you picked when you loaded up the application.

Lumia-620-Nokia-City-Lens
Nokia Lumia 620 City Lens Menu Example Featuring San Francisco

I usually choose Sights and Museums and this is an actual screenshot I took yesterday close to Buckingham Palace, London.

wp_ss_20140306_0001

The white spots in the circle on the right are actual interest points (hotspots). As you move around, they move with you. If you turn to the right or to the left, the light zone shines on new interest points, bringing them on the screen.

If you tap on any of the zones, you can see further detail – like address (directions), telephone number, website, opening hours and feedback received. This is especially useful when going to a restaurant!

You can even save a place for later or share it with friends.

One thing I did not know about the app, is when you point your phone towards the ground – the camera shuts off and you see a Road Map with all the interest points as pins.

here-city-lens-07-700x420

 

It was a great experience – I got to visit three interest points next to Buckingham Palace I did not know about and I loved it!

No more wandering around for a café. No more looking for street signs.

If you wish to find out more, check out the Here website for more information.