Category Archives: Technology

jQuery Mobile and AngularJS Working Together

Both jQuery Mobile (jQM) and AngularJS are awesome at what they do, but getting them to play nicely together can be tricky. As you may have discovered, both want to manipulate the URL/routes and DOM such that it’s very easily to get them in conflict. Having been through this recently, I wanted to share some recommendations to get them working together:

Load jQM libs before AngularJS

Because both frameworks heavily manipulate the DOM, it’s important to get the load order right. I found that loading AngularJS first led to some interesting (and annoying!) UI functionality. The correct order should be jQuery first, followed by jQM, and then AngularJS:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
Let jQM handle the URL routing

I’m likely to get flamed for this by MV* purists, but I recommend letting jQM handle all of the URL routing – and not using AngularJS for any routing. Firstly, I spent a lot of time trying it the other way (disabling routing for jQM, and configuring various routes, templates, partial files, etc.). Even when it did work, it was just a mess – it looked like someone had taken a shotgun to my jQM app and blown it into several pieces. Secondly, I would argue that URL routing really shouldn’t be a primary consideration for a mobile Web app. The app is more likely launched by an icon on the home screen vs. a search or link with any type of query string. Even if it does, a simple check for a null scope is all that’s required.

Create a single Angular controller for a group of jQM pages

Conforming to #2 means that you can create a single controller that spans a number of individual jQM pages. This usage results in very elegant single HTML page together with a single controller – yet has the advantage of offering multiple pages to the user.

To demonstrate this in more detail, and because you can’t have enough Todo list apps, I’ve put together a sample using jQM, AngularJS, speaking to a service using Node, Mongoose, and MongoDB. (To run, you’ll need a local Mongo DB called “todo” with a collection called “tasks”). It definitely shows the power of both frameworks running together. In just 75 lines of HTML and 29 lines of JavaScript for the controller, I have a mobile app with full CRUD support. Hope you find it useful.

NewImage

On-Demand VPN using OpenVPN for iOS

9 Replies

Many large organizations have existing VPNs in place, and the rise in development of enterprise mobile applications often requires that apps running outside the firewall need to “VPN in” before they are allowed to access any corporate resources.

While enabling a VPN is fairly easy on most mobile devices, I’ve found that many IT organizations would like to automate this such that the device automatically connects to the VPN when the Enterprise App or an internal Website is launched. Having gone through this with a couple of customers, I’ve put this post together to highlight how this can be done.

Which VPN types support On Demand for iOS?

iOS 4.2 introduced features designed for the enterprise. These features included several VPN clients (L2TP, PPTP, Cisco IPSEC), many of which can be configured to automatically initiate the connection based upon DNS requests for certain domains.

While this on demand feature has been around for a while, it does have a couple of caveats. Firstly, it’s only available for SSL based VPNs. An SSL-based VPN is a connection that relies on a client/server side certificate for authentication. Having an SSL-based VPN means that the connection can be established without asking the user for credentials (e.g. a password or RSA token). Because an on-demand VPN could be connecting and disconnecting every few minutes, this makes sense as prompting the user could cause a jarring user experience. Secondly, the on demand VPN can only be setup using the iPhone Configuration utility. While you can create a VPN connection on iOS devices (under general/settings), it’s not possible to create an SSL-based VPN or specify any of the on demand domains.

With this in mind, I’ll be showing how to establish an On Demand VPN using OpenVPN and the OpenVPN client for iOS that was released earlier this year.

Server-Side Setup

The first step is of course to setup an OpenVPN server. If you don’t have access to one already, there are plenty of guides to help you set one up. If you don’t have access to a spare machine on the network, you can also use a Linux VM instance hosted on EC2, Azure, or any other hosting provider. This article is a pretty good guide for setting this up on EC2 and the instructions should be able to be tailored to other hosting environments.

Generating Certficates and Keys

Once you have your OpenVPN server running, you’ll need to either import or generate certificates and keys required to establish the connection. If you don’t have access to certificates already, you can find some great documentation here on how to create your own using the EasyRSA project on Github. (Scroll down and look for instructions on using easy-rsa)

These are the certificates you’ll need to generate using EasyRSA:

ca.crt (CA certificate required for both server and client)
dh2048pem (A 2048bit Diffie Hellman key that is required on the server)
server.crt (The server-side certificate)
server.key (The key for the server-side certificate)
client1.crt (The client-side certificate)
client1.key (The key for the client-side certificate)

Configuring OpenVPN

Place the certificates in a folder called keys (under /etc/openvpn/keys) and modify your /etc/openvpn.conf file to look similar to the following:

tls-server port 443 proto tcp-server dev tun ifconfig 192.168.2.1 192.168.2.2 keepalive 10 120 comp-lzo persist-key persist-tun verb 3 push "ifconfig 192.168.2.2 192.168.2.1" push "redirect-gateway" dh keys/dh2048.pem ca keys/ca.crt cert keys/server.crt key keys/server.key

This should be fairly straightforward to understand from the documentation, especially if you’ve used OpenVPN before. As you can see, we are creating a peer to peer connection using two private IP addresses (192.168.2.1 and 192.168.2.2). Don’t worry if these don’t match your internal network on the OpenVPN box – they don’t need to in order to get this up and running.

For the purposes of this article, I have the VPN running on a tcp:443 connect, but feel free to adjust the protocol and port to match your own environment (assuming that you have the necessary ports open on your Firewall).

Once you have the server configured, you can start OpenVPN:

openvpn --config /etc/openvpn/openvpn.conf

Assuming that the server starts OK, you can move to the next step.

Installing and Configuring the Client

The OpenVPN client can be found on the AppStore. At the time of writing it’s version 1.0 build 47, which has a few bugs here and here, but still seems to work well.

After you have this installed, go ahead and install the iPhone Configuration Utility on your Mac. This can be found on the Enterprise iPhone Support page (http://apple.com/support/iphone/enterprise). Don’t worry – although it’s called the iPhone Configuration Utility, this will also work for setting up a VPN on an iPad device also.

After launching the utility, create a new configuration profile. In the general tab, enter the mandatory fields for name and identifier. Then, click on the credentials tab. We need to import the client certificate and key that was generated earlier using EasyRSA.

Unfortunately, the iPhone Configuration Utility (which we’ll call IPCU from now on) doesn’t support importing .CRT and .KEY files directly, so we’ll need to generate a PKCS#12 file for use here. To do this, in the Terminal locate your client certificate and key files, and run the following command:

openssl pkcs12 -export -in client1.crt -inkey client1.key -out client1.p12

The result of this should be a .p12 file, that you can now import into the credentials section of IPCU.

Note: When you generate the .p12 file, you will be asked for an export password for the file. Enter something, and use the same password in IPCU (there is a field just under the certificate picture). If you don’t enter a password, you will likely get a profile error when you try to deploy this to the device.

With this done, now navigate to the VPN tab and create a new VPN connection. IPCU doesn’t support including an OpenVPN config file, so we’ll have to create the majority of the settings in this tab – this is where things get fun

Give the connection a name, and select “Custom SSL” for the connection type. For the identifier, use the following:

net.openvpn.OpenVPN-Connect.vpnplugin

This is telling the VPN client that a specific bundle ID (the OpenVPN app) should be used for this connection.

Next, in the Server field, enter the DNS name or IP address for your OpenVPN server.

The Custom Data contains keys and strings that replicate what would have normally gone into a config.ovpn file. These are the entries that you will need:

ca – This is a tricky one to get right. We can’t point it to a ca.crt file, because there is no way of bundling a file using the IPCU tool. To overcome this, open the ca.crt file in TextEdit and replace all of the newline/carriage returns with \n. What you should end up with is a single (long) line of text that starts with —–BEGIN CERTIFICATE—– and has several lines delimitered by \n ending with —–END CERTIFICATE—–. Once you have this, paste this entire line into the value for the ca key.

comp-lzo - enter the key, but you don’t have to give it a value.

dev – set this to tun

port – set to 443

proto – set to tcp

(Again if you are using something other than TCP port 443, feel free to change)

remote – set to [your server name] 443

(replace your server name with the DNS name or IP address of your OpenVPN server)

verb – set to 3

Here’s a quick screenshot of my profile:

NewImage

That should wrap up the custom data piece.

Under User Authentication, select Certificate – and then under Credential select the client certificate from the drop down.

Finally, check the “Enable VPN On Demand” box, and in the below table enter the domain names or IP addresses for the hosts that VPN is required for. For this tutorial, I have a single entry for 192.168.2.1 with “Always Establish”.

That’s it!

This configuration should be enough to get VPN On Demand working with OpenVPN on the iOS client. To test, deploy the configuration profile to the device. Assuming that this works, open a browser and browse to 192.168.2.1 – this should invoke the VPN connection and forward the requests to the OpenVPN server. If you have a test page running on the OpenVPN server then this should be displayed in the browser.

If it didn’t work…

There’s a good chance that things won’t work first time, just due the complexity of the setup. Here are some of the common tips/tricks that I found during the process.

- Firstly, the console window in IPCU will be your best friend. The most common error I saw was related to the CA certificate. If you get these, it likely means that your CA entry in IPCU is wrong. Go back and make sure you’ve correctly replaced the linebreaks with \n’s and retest.

- There are a few “bugettes” in the iOS client. As of build 47 these include:

The tcp-client param is not supported in the iOS client. Use tcp instead.

The client expects ifconfig information to be pushed to it (using the push lines in the server config). It doesn’t seem to be possible to configure ifconfig lines locally.

The “redirect-gateway” seems to be required for the iOS client – whereas Tunnelblick connects without it.

- Workflow. Getting VPN On Demand working right off the bat can be hard, especially if multiple parts of the configuration are wrong. If you are new to OpenVPN, you might want to setup a VPN with a the following configurations (in terms of complexity just to get working):

OpenVPN w/ Secret Key – using Desktop machine (use Tunnelblick for the Mac)
OpenVPN w/ Certificate – using Desktop machine
OpenVPN for iOS w/ Certificate – using the actual OpenVPN for iOS Client (not IPCU)
OpenVPN for iOS w/ Certificate – using IPCU

- Browser Refresh. If it looks like everything is working (VPN established, etc.) but you still don’t get your Web page, try refreshing the browser/making a 2nd request. I’m not sure whether this is something in the config, or a “feature” of the OpenVPN client for iOS – but I’ve found that refreshing often helps brings the page to life after the VPN connection has been established.

QCamera

Uploading Photos from Mobile Web Applications

2 Replies

Here at Neudesic, we’re fortunate to be involved in many exciting HTML5/Mobile Web applications for different organizations. For many of these projects, one of the common requests, especially for field-facing mobile applications, is the ability to upload a photo from within a web page in a mobile browser.

If you are not familiar with the space, you may think this should be default behaviour, but surprisingly uploading media is one of those areas that is still going through the standardization process. Eric Bidelman has a great overview of the three “rounds” of standardization that have taken place so far as part of the Device API working group.

What can you do today?

While Eric’s article gives a great overview of what’s likely to come, the purpose of this post is to explore what’s possible today, outlining the relative pros and cons of each approach.

Firstly, let’s take a look at what’s supported out of the box:

Android

If you are using Android 3.x+ (i.e. either Android tablets running Honeycomb or later, and Android phones running ICS) – or users are running Chrome or Firefox Mobile for Android, the browser will support an input element that can invoke the camera:

<input type="file" accept="image/*" capture="camera">

Simply add this element to your web page, and together with some server-side processing for the upload, users can upload the image from their device.

Android Image Upload

As Eric mentions in his article, it does look like things are heading towards getUserMedia() instead. Although this new API works with latest versions of the desktop version of Chrome, we haven’t found anything that works on mobile browsers as of yet.

iPhone/iPad

Unfortunately, the input element above does not work on Mobile Safari on iOS5 today – the experience for the user is just a disabled button. This is true for the recently released version of Chrome for iOS also (as it’s just a wrapper over UIWebView).

Things are changing however. At WWDC this year, Apple publicly announced support for photo and video uploads within Mobile Safari shipping with iOS 6. It’s difficult to say much more about the implementation here (as the developer/beta programs are under NDA), but if you have access to Apple’s developer program, it’s definitely worth checking out.

Apache Cordova (PhoneGap)

If you want to support earlier Android versions, and/or can’t wait for iOS 6, arguably the most popular choice is Apache Cordova (previously known as PhoneGap). Apache Cordova provides a native wrapper around HTML-based content, and supports several platforms today – including iOS and Android. The Cordova API supports media capture, and with a couple of lines of JavaScript, it’s possible to instantiate the camera or invoke the camera rolls within your Mobile Web application.

Camera Roll on iOS

Pros: Works with the most popular versions of mobile browsers, and as of now, Cordova provides a good user experience for the user. The user presses a “add photo” button in the HTML application, and the native wrapper invokes the camera control without the user needing to know whats going on. If using the camera roll, the API also supports the option of uploading multiple photos.

Cons: Using Cordova does however change the deployment model for the application. No longer can you just visit a Web site to use your application – you now need to think about distributing your application – either via the AppStore for public-facing applications or through another channel for enterprise apps.

In addition to the deployment, Cordova also introduces several options that need to be considered for actually transfering the image to the site. The default is to use Base64 encoding, which is good for small images, but we’ve experienced performance problems on large images from 5MP+ cameras. The Cordova API does support a File Transfer API, which works well except it doesn’t yet support authentication, so you’ll need to create an anonymous area to post your photos to. If you do need authentication, you’ll want to send the photo directly after capture, which will likely mean writing a custom Cordova plug in and using NSUrlConnection to send your photo to the server.

Companion Application

An alternative approach to wrapping your HTML content with native code is to ship a “companion application” responsible for uploading the photo.

Both iOS and Android support custom URL schemes, which means that applications can respond to different URL requests from the browser. For example, I can create a native application responsible for taking and uploading pictures, using a custom URL scheme called simonphoto:// which I can then pass various parameters – for example, the ID of a project that I’m uploading photos for. Once the user clicks on the simonphoto:// link within the mobile browser, the application launches and I can take and upload as many photos as I want.

Pros: The biggest draw to this approach is that the HTML application doesn’t need to be wrapped with any native code.

Cons: While I don’t have to wrap my HTML, the user still needs to obtain the companion application, which will likely involve a trip to the AppStore or other link for download. In addition, even when the companion application is downloaded, the user experience isn’t quite as slick as the the PhoneGap approach. For example, in iOS there is no natural way of getting back to the Web app once the native application is ready to hand back control (unless you pass a return or app id in the parameters). Also, there is no way of checking whether the companion application is installed or not from the Web page.

Picup

Picup is an example of a free companion app that works in a similar way as outlined above. It uses the fileupload:// URL scheme to invoke the Picup app, which much be installed.

Picup Application

Pros: As above.

Cons: As above. No version for Android (although I’m sure there are equivalent apps available).

Email

Finally, a very simple approach, but one that I’ve seen a couple of people use is sending the photo via email. Your application has a “mailto” link which includes a subject (maybe the ID corresponding to the application) and body that reads “Please remember to attach your photo”. The user attaches the photo manually and it’s sent to a server-monitored email store for processing.

Pros: Nothing native here, and deployment model stays the same.

Cons: Funky experience for the user. You’ll also need to setup a server side environment to handle the incoming emails, strip the attachments, and correlate with your application.

Summary

A lengthy post, but hopefully it gives you an overview of how to do photo upload from mobile devices today. To summarize:

If you are writing an application that won’t be released for a few months, and will primarily target Android ICS and iOS6, you should be able to use the <input/> element outlined above to invoke the camera and upload a picture. If you do this, make sure you understand the transition to getUserMedia as the specifications mature.

If you are writing an application that needs to target today’s platforms – namely Android 2.x and iOS5, you’ll either need to use Cordova to create a wrapper or a companion application (either hand crafted, or something like Picup). Choosing between Cordova and a companion application is a balance of user experience vs. deployment. A Cordova application will keep the user experience seamless, but you will be responsible for the deployment of the application as a result.

If you don’t want to do any device development, and are just looking to provide a shortcut for users to send photos, you could consider the basic mailto: / email link approach.

Upgrading your Windows Phone 7 to Mango RC

1 Reply

In late July, Microsoft announced availability of a new build of Mango, build 7712 – also commonly known as the RC Build. Given that we are close to RTM, yet it may still take carriers some time before deploying Mango to your device, you might be itching to try out the new bits. If you are, but don’t know where to start, I’ve put together this quick guide based on my own experience of updating my phone, an AT&T Samsung Focus. Note: As you would expect, if you do decide to upgrade your phone, this is entirely at your own risk.

Before you begin, you’ll need a few things:

1. A Windows Phone 7 device with all of the current updates (a.k.a. NoDo) installed. Double check the updates in the Zune application to make sure everything is up to date. You should see that your WP7 build number is 7390.

2. Zune Software 4.7.1404. Although 4.8 was released yesterday, you won’t be able to do the update with this version (yet). Download 4.7.1404 from here if needed.

3. Windows Phone 7 Support Tools. You can download this from here (32bit, 64bit). Run the installer, but you don’t need to run the application.

4. Enough battery power to get you through several updates (when the phone is updating, your device isn’t being charged). I would avoid trying this with anything less than 50% charge.

5. The mango update tools. If you are a registered Windows Phone 7 developer, you can supposedly download these from the Microsoft Connect site. If you are not (or like me you are, but couldn’t find the tools on Connect), you can find a version of the tools on this site. (Note: Follow Step 1, and yes, you have to wait for 45 seconds for the download link to work).

With all of the above in place, run the Update.bat from the Mango update tool download. Assuming there are no errors, you should see something similar to the following.

Firstly, the tool will make a backup of your device to the c:\PreMangoState2 directory, and install the updates necessary for your device to receive the pre-release Mango bits. The time this will take may vary, but on my machine it took 112 seconds to backup, and 70 seconds to update the device.

Once the batch file completes, and the device reboots, the Zune software should automatically launch. You’ll be shown that an update is available (likely build 7403).

Choose to install this, which will then download the Zune 4.8 software. After the Zune software has been updated, the phone will be updated to 7403, which should be a fairly quick update.

As the phone reboots once more, the Zune software will do another check – and this time will pick up the 7712 build, which is Mango RC. Choose to download and install this one. This is where the battery power is important, as this install can take quite a bit of time to complete (let’s just say that I’ve been able to pen this blog post, and it’s still not 75% of the way there!).

Be patient though – one final reboot, and you’ll be running the latest Mango RC (Build 7712) bits! Enjoy!

Running Visual Studio 2010 on the Mac

6 Replies

Following a few recent presentations, I’ve had a couple of people ask how I run Visual Studio on the Mac.

You’ll be sad to hear that I don’t have a special version of Visual Studio for Mac OSX – instead I am using VMWare Fusion 3.1 to run a copy of Windows 7 in a virtual machine. Fusion has a mode called “Unity” which allows windows from the virtual machine to interact with windows on the host operating system (even to the point where I can put icons for Windows-based applications in the dock on the Mac). There is a little performance hit running applications in this way vs. a full screen virtual machine, but it’s certainly useful for presentations where you are flipping between both environments.

iPhone and iPad Security

Targeting iPhone, iPad, and Android – WebCast Recording

2 Replies

Thanks to all that attended the Neudesic Mobility Webcast this morning on “Building solutions on the Microsoft platform that target iPhone, iPad, and Android devices”. It was fun to put together, and even though we went over time, the feedback was great.

For those that couldn’t make it, we’ve posted the recording of the session, together with the slides below. Hope you enjoy the material!

Building solutions on the Microsoft platform that target iPhone, iPad, and Android devices

View more presentations from Simon Guest.

Getting Authentication Working with WCF and WP7

1 Reply

Although Windows Phone 7 (WP7) has support for a Windows Communication Foundation (WCF) client, connecting to Web services that require authentication can be a little quirky.

After working on a project over the holidays putting together a WP7 client to connect to a Web service requiring authentication, this is what I found:

1. NTLM/Kerberos is a no go…

As of today, the WCF client on WP7 does not support NTLM or Kerberos authentication. If you are accessing Web services from a device, you’ll want to make sure that the your server is setup to handle Basic authentication (preferably over SSL).

2. And even Basic authentication needs a helping hand…

Even with Basic authentication enabled on the server, I was noticing that the client was still not sending the right HTTP headers – even when setting the ClientCredentials property on the client and playing with the config file. No matter what I tried, I couldn’t get it to work.

To overcome this however, you can force the Basic authentication details to be written as part of the request header. To do this, first create a method that generates a UTF8 encoded string for your domain, username, and password:

public static string GetCredentials(string domain, string username, string password)

{     
    return Convert.ToBase64String(Encoding.UTF8.GetBytes(String.Format(@"{0}{1}:{2}",domain,username,password)));       
}

Then, you’ll need to create a new property with your credentials:

HttpRequestMessageProperty request = new HttpRequestMessageProperty();
request.Headers[System.Net.HttpRequestHeader.Authorization] = "Basic " + GetCredentials;

Finally, add the header to your outgoing request:

OperationContextScope clientScope = new OperationContextScope(client.InnerChannel);
OperationContext.Current.OutgoingMessageProperties.Add(HttpRequestMessageProperty.Name, request);

(in the above client is your service reference)

And voila! You should now have Basic authentication headers as part of your client requests, and you can access username/password protected Web services from your WP7 device!

One final tip – during all of this you will likely need to use a tool like Fiddler to trace your requests and responses from the device. If you are having troubles getting Fiddler working with the WP7 emulator, here is a great post that outlines what to do.

Feeling the Pulse at Neudesic!

2 Replies

I’ve just passed the two week mark here at Neudesic. As anyone who has changed companies knows, getting up to speed with the internal workings of a new organization can be like drinking from a firehose!

One of the most interesting things I’ve come across to date is an application called Pulse.

In essence, Pulse is Facebook for the enterprise. If you’ve ever used Facebook or another social networking site, the feeds, profiles, walls, likes, follows, etc. will all feel very similar.

One of the main differences however is that because the social network is inside the walls of an enterprise, the possibilities for extending become so much more interesting. Not only can you “friend” other colleagues, but you can also “friend” systems. Like to know when business is won or lost? “Friend” the CRM system, and if someone updates an opportunity, you get a pulse notification. Similarly, if someone joins or leaves the company, the HR system “pulses” about the change. Are the IT Systems going down for routine maintenance? You’ve guessed it… another pulse! I’m sure there are many additional directions that this could be taken – just think of the countless internal systems that we habitually visit every day. What if each of them could send push notifications into a central social network?

Another feature of Pulse is the ability to converse on external feeds. Pulse can monitor external feeds (anything exposed through RSS or ATOM) and bring them within the walls of the company. The beauty here is not the ability just to subscribe to this external information, but the ability to comment on these within the organization. For example, last week, a few colleagues and I were chatting about a post on Engadget. Rather than the “old way” where someone forwards the link via email to a closed group of people, we were discussing this via a thread in Pulse. Not only does this allow the topic to be shared with others, but it also makes it available for future subscribers to find. If someone new joins the company and subscribes to the Engadget feed via Pulse, they can discover the exact internal conversation that happened around that post. This is something that would be near impossible to do with email.

Of course, my favorite feature of Pulse has to be the mobile client. Our product team has done a phenomenal job publishing clients for iOS, Android, Blackberry, and will have a WP7 version available very soon.

Finally, you may be interested to know that Pulse is not only an internal system here at Neudesic, but is a commercial product that can be used for organizations of all sizes – from a few users to tens of thousands.

If you are interested in learning more, I would recommend going to this site – alternatively just drop me a line, and I’ll connect you with the right people!

simonguest.com

The only person allowed to login as 'guest'

Category Archives: Technology

jQuery Mobile and AngularJS Working Together

On-Demand VPN using OpenVPN for iOS

QCamera

Uploading Photos from Mobile Web Applications

Upgrading your Windows Phone 7 to Mango RC

Running Visual Studio 2010 on the Mac

iPhone and iPad Security

Targeting iPhone, iPad, and Android – WebCast Recording

Getting Authentication Working with WCF and WP7

Feeling the Pulse at Neudesic!