• info@happli.be

Monthly ArchiveSeptember 2015

Phonegap – Local Notifications plugin

If you ever need to display notifications to the users of your mobile app, you’ll need a plugin. The one I’ve used is Local notifications (https://github.com/katzer/cordova-plugin-local-notifications). So far, I’m satisfied with it. The picture below illustrates the notification appearing in the notification center (iOS).

INSERT PICTURE HERE

The following screenshot show it when it’s received.

INSERT PICTURE HERE

Don’t be surprised if you don’t see the notifications you schedule when the app is in foreground. It depends on the platform used. Under iOs it’s “by design”. See https://github.com/katzer/cordova-plugin-local-notifications/issues/625 for more information.

You can use a simple trick to make sure your users will be notified, regardless they’re in your app (in foreground) or not (in background). This SO post explains it all: http://stackoverflow.com/questions/29606012/how-to-check-app-running-in-foreground-or-background-in-ionic-cordova-phonegap. Basically, it all comes down to declaring a boolean variable (e.g. isInForeground) and changing its state in the “pause” and “resume” event handlers.

Tested and approved 🙂

 

Adding Android platform to an existing Cordova app

Today, I tried adding a platform to an existing cordova app, which used to work under iOS  was developed on a Macbook Pro. This post lists the things I had to do in order to get it working and the bumps I hit.

Setup the environment

You have to follow the Android platform guide. It’s very well explained and easy to follow. I found it pretty annoying that I’ve had lots of timeouts during the download of the several packages (through the SDK manager). Just keep on trying and you’ll end up with a working environment.

I’ve had another problem when I tried to run the emulator. I was told that Intel HAXM wasn’t installed, so I installed it.

But I couldn’t get the emulator running, I didn’t have much info through the avd manager, so I created a blank project in Android Studio, then I tried to run it in the emulator. And then I was able to read more info about the problem:

Failed to sync vcpu reg.

I was just one google search away from getting it running This SO post helped me. This message seemed to be in relation with the VirtualBox that was running on my Mac at the same time. Shutting down the VirtualBox VM allowed me to get the Android emulator running.

Add the Android platform to the cordova project

cordova platform add android.

So far so good, but when trying to compile the app like below, I had a problem.

cordova build android

I was told that

Screen Shot 2015-09-28 at 22.28.33

Multiple dex files define Landroid/support/annotation/AnimRes;

I found the solution in this post. I simply had to remove the android v4 support from my project’s plugins. I don’t know how this one got there.

Debug the project

Once able to build the project and to make it run, I needed a way to debug it. Just launch chrome and type chrome://inspect/#devices in the address bar (the app must be running first).

Conclusion

It took me less than 2 hours to make my project run on Android. Most of that time was linked to the setup of the environment.  So I’m still convinced that cordova was the right choice to build this cross-platform mobile app.

Migrating a Phonegap app to iOS 9

I installed the iOS 9 update as soon as Apple offered me to and … what a journey! The phone update process was smooth, as was installing the latest version of XCode (7).

But I’ve lost a lot of time making my phonegap app work again on iOS 9. Here’s a note on the things I’ve lost a lot of time on.

Not installing OS X El Capitan

Not installing OS X El Capitan on my Mac. It made the debugging experience awful. I couldn’t get anything written to Safari Web Inspector. Installing OS X El Capitan made it ok again.

App not initializing properly

Not having any clue why my Angular app wasn’t initializing properly. I first thought that I had the window.location bug which you can read about on the web: http://stackoverflow.com/questions/32719631/how-to-fix-window-location-issue-in-ios9-uiwebview. I read that Angular had to be fixed, that there was a patch out there and that the patch was included in AngularJS 1.4.6 => Had to migrate my angular components (cookies, route, google-maps) to that version. Still I had no result. ng-view not showing and nothing written on Web Inspector console. I’ve had to make two pages: one index.html (loading cordova) and a second one app.html (angular app). And by doing that I was able to get all the errors written to the console and could solve them one by one.

HTTP Request headers problems

I’ve had this problem as well with my services adding authentication headers to their http requests.

Apache hosting

I also had a web ui hosted on my Mac OS dev machine, under Apache, which I needed to use because it’s the “admin way” to the system’s data. It used to run under Yosemite, but didn’t any longer after El Capitan upgrade. I guess Apache got upgraded as well. I had to re-check all that config and was helped by this post. And indeed I think some of my previous customizations to Apache config files had been discarded by the upgrade process.

Phonegap – APNS push notifications with PushPlugin, Azure Notification Hub

There are a many plug-ins out there to help you with push notifications. I’ve used PushPlugin:  https://github.com/phonegap/phonegap-plugin-push

I’ve spent quite a lot of time getting the whole APNS-Azure Notification Hub-iPhone flow working. Just getting started requires quite a lot of prerequisites:

  • An Apple Developper Account (99$/year)
  • A Mac, so that you can generate certificates using KeyChain
  • A Windows Azure subscription (free trials exist), with a Notification Hub
  • An iPhone (I didn’t try, but it looks like you won’t get it working on iOS Simulator)
  • A phonegap project.

Here are a few things that have been time-consuming:

Not having a Mac

Working on the sources on a PC, Uploading the sources to phone gap build, waiting for the build to finish, downloading the IPA package, importing it to iTunes then synchronising it with the iPhone is… as you guess very time consuming. Yes, I’ve tried to work with Phone Gap’s hydration. Still it remains a lot to package everything in a zip, then upload it to PhoneGap Build. Yes, there exists a Phone Gap Build REST API that one could use to automate an upload-then-build process (and maybe such tools already exist, I haven’t searched for them). Even though you automate that step, it’s still slower than compiling locally from a Mac. Moreover, not having a Mac prevents you from having a decent debugging experience (see that post to find out how to debug your phone gap App using Safari).

All-in-all I’ve lost a lot of time trying to do without one, but I finally resorted to getting a Mac.

Get a Mac.

Getting the token

Getting the token from APNS isn’t hard if you get the correct certificates. Pay attention to your phone gap projet name. It must match the Application Identifier you create in the Apple Developer portal. Can cost a lot of time

Registering the token

Passing the token to the intermediate push server (the notification hub in our case) hasn’t been easy. I couldn’t find an easy-to-use javascript client for their API. I’ve used the Azure Mobile Service phone gap plugin. Indeed, with every Azure Mobile Services you get a Notification Hub associated. The phone gap plugin lets you access that Notification Hub, as shown below.

Azure notification hub apns token registration

Note:

  1. I used to call registerTemplate for APNS. It never worked. I had to call registerNative. It took me quite long before I tried that.
  2. There might be a better way to register the token with Notification Hub. Leave a comment in case you know of one.

 

 

Setup Git on Synology through webdav

Suppose you want to use git for one of your projects. Suppose you don’t want to open your sources to everyone. You could resort to GitHub and get a private repository, but you’d have to pay for it and you want to limit the expenses.

If you own a NAS, then you might want to host your sources on it. I own a Synology Diskstation and I was able to host git repositories on it, working through Http (ssh was not an option because of non-configurable firewalls between me and my NAS in some scenarios). It’s using WebDav and works a threat.

Here are some of the tasks you’ll need to go through:

  • Add the Git package to your DiskStation (an official package exists)
  • Configure WebDav on your DiskStation
  • Open ports (to allow webdav in)
  • Setup your DiskStation with an SSL certificate (don’t want everyone on the wire see what you’re working on)
  • Configure DDNS on your DiskStation (so that you can use a DNS instead of your probably dynamic IP in order to reach your repositories)

The following tutorial has been of great help and I strongly recommend it:

http://blog.osdev.org/git/2014/02/13/using-git-on-a-synology-nas.html

Don’t forget the part related to post-update!!!

I found myself in troubles in the opening ports part, so I keep a copy of my findings here. Maybe it’ll help you as well!

Opening Ports => Beware of CGN and double NATs

Opening ports requires going to your router’s setup and adding rules to the port forwarding. I faced a problem with this: Even though everything seemed correctly configured, I couldn’t reach my repositories.

I was able to connect to the DiskStation remotely, using QuickConnect. So I thought that I could use QuickConnect and simply suffix the hostname (XXXXX.quickconnect.to) with the port number. It didn’t work. QuickConnect is designed to work with only a few applications, not including WebDav. So I had to use a DDNS.

After setting that DDNS up and making it look good (normal state in Diskstation DDNS management view), I added port forwarding rules to my router. And then I tested => didn’t work.

 

I have searched for hours and suspected something wrong with port forwarding. But I was able to connect to the DiskStation through QuickConnect. I couldn’t understand why the port forwarding that I had configured for Diskstation remote access (through QuickConnect) was working and that the one I was trying to configure for webdav (through DDNS) wasn’t. The answer wasn’t so obvious: connecting to DiskStation through QuickConnect doesn’t require ports forwarding (http://blog.synology.com/?p=2283), that’s simply not the way it works. I thought that ports forwarding was working, and it never had worked. I had defined useless port forwarding rules. Shame on me.

After browsing the web for a while, I discovered that I was in a double-NAT configuration (http://www.practicallynetworked.com/networking/fixing_double_nat.htm). My ISP, Voo, a Belgian ISP, seems to be putting the low contracts under a double NAT situation, through the use of a Carrier-grade NAT (CGN). Maybe they’re running out of IP Addresses.

No luck at the first phone call. Maybe the operator didn’t understand my request, maybe he didn’t wan’t to help, maybe he had received orders (trying to limit CGN related operations). I don’t know. I gave a second phone call later in the day and the operator did something that allowed me to get a public IP. No more double NAT => webdav working!!!

 

SSL Certificate

You can configure your diskstation with a self-signed one, but you’ ll need to install the CA on the different machines on which you’ll want to clone the repository.

If you don’t want/can’t install the CA, the following post shows how to trust temporarilly the self-signed certificate when cloning the repository : http://blog.decayingcode.com/post/temporarily-ignore-ssl-certificate-problem-in-git-under-windows

First post

Happli is a small Belgium-based software development company focusing on training and taylor-made solutions.

This blog was set-up as a way for Happli to keep track of all the little things (problems faced, tips and tricks) that can occur when you develop software in which you integrate more and more third-party components (most of which are open source). And who knows, maybe you’ll find a little help in the posts.

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!