Saturday, June 22, 2013

MakerBot 3D Printing

WP_20130618_001

It turns out that one of the joys of my job is to be able to play and explore a lot of technologies and gadgets in a dedicated space, where I can research and create digital experiments.

WP_20130618_003

Our most recent toy, is a brand new MakerBot Replication 2X 3D printer! An awesome piece of tech that allows you to recreate 3D models. There’s a lot to talk about 3D printing, but this being the first chance I have to actually have one, has been a really cool experience.

WP_20130618_006

I already had to disassemble and clean the nozzles to change plastic colours from the extruders, a fun thing to do. I’ll hopefully be blogging a lot more and share what we can achieve with it in the short future. For now, enjoy some of the shots.

WP_20130618_011

WP_20130618_009

WP_20130618_010

Getting Started with .NET Gadgeteer

WP_20130529_013

A few weeks ago I had the change to attend a very cool and different kind of workshop in East London. I joined the event on an early start with other fellow developers, but this time, to play around with software AND hardware. Welcome to the realm of hardware prototyping and smart gadgets creation with .NET Gadgeteer!

The even took place at Modern Jago, and was hosted by Dr Steven Johnston, from Microsoft Research. The workshop was a delight and everybody who attended was having a great deal of fun.

WP_20130529_010    WP_20130529_009WP_20130529_004

We first started by creating our very own multi-led Gadgeteer module. Each of us “cooked” a multi-led circuit having a multi-led light, which we then tested with a .NET Gadgeteer main board and a simple piece of software. If you though Open Source was relevant, Open Hardware is the real deal. Justin Wilson from IngenuityMicro was our mentor here, teaching us how to build and cook our module.

WP_20130529_008  WP_20130529_006  WP_20130529_007

Next, Dr Johnston took the lead, and formally introduced us to .NET Gadgeteer. We were given starter kits and jump straight away to build our very own gadget, a touch-screen digital camera! Let me tell you, this is really cool stuff, in its easiest and most developer friendly way. Anyone who has done some fiddling with raw components, transistors and breadboard knows that making a gadget can be quite a challenge. Even working with Raspberry PI and Arduino, especially if you are trying to extend them and use them to create your own devices, can also be quite tricky.

WP_20130529_015    WP_20130529_011

.NET Gadgeteer is intended to make it really easy to create components. All modules already come with the required connectors, and you can even use extender modules to connect to other non-Gadgeteer modules. To give you an example, I was able to build my version of a fully functional touch-enabled digital camera in less that an hour, and with less than 10 lines of code! That is unbeatable!

WP_20130529_018    WP_20130529_016

I then extended it to use light sensors to trigger the pictures and even connected it to a mechanical motor just for the fun of it.

WP_20130529_021    WP_20130529_019

What is most compelling about .NET Gadgeteer is that because its solderless assembly and computer-aided design you can build things really fast. This makes it a truly rapid prototyping platform for small electronic devices. I have been enforcing rapid prototyping techniques for efficient software development at my work and with different multi-disciplinary teams for the past couple of years, and being able to apply this techniques to hardware prototyping open a huge potential for digital solutions in the short-term future.

WP_20130529_023

.NET Gadgeteer is an open source/open hardware project that uses the Microsoft .NET Micro Framework. You can learn more at Gadgeteering.net.

Make sure to check out more about .NET Gadgeteer, and start building your own gadgets and becoming part of an exciting community!

Other useful links to get started:

http://www.netmf.com/gadgeteer/get-started.aspx
http://www.gadgeteering.net/
http://www.microsoft.com/net/multiple-platform-support
http://netmf.codeplex.com/releases/view/81000
http://www.ghielectronics.com/support/.net-micro-framework
https://gadgeteer.codeplex.com/releases/view/105366

Sunday, June 16, 2013

iOS Application Distribution with TestFlight

Mobile development is becoming more and more relevant in the current digital landscape. Mobile devices are now covering a wide range of demographics, price tags and features, allowing more and more people to have access to them.

For me, being able to understand mobile platforms is important, both from business and development perspectives. I have been working on several mobile projects from different perspectives, coding, leading and facilitating mobile solutions not only on the Windows Phone platform but also on iOS.

Distribution of mobile applications is a key topic when developing a mobile application. Being able to quickly compile, deploy and share builds is highly important, particularly when working on fast phased and collaborative prototyping projects.

On one of these recent projects we set up to use TestFlight as our distribution platform. 

For those of us who develop applications, especially mobile applications, easy distribution is always a challenge. TestFlight is a brilliant tool to ease the pain and help us distribute iOS applications in a simple and straight forward way.

TestFlight is well known to iOS developers, and you should give it a try if you are developing iOS apps (promised for Android development soon).

It is a free platform intended for mobile developers, project managers and application testers. It is used to distribute beta and internal iOS applications to team members over-the-air. With it, you are able to upload and manage application builds, invite people, create and manage distribution lists and distribute applications in a simple and straight forward way. They also offer an SDK (currently for iOS only) which enables you to extend the metrics you can get from your apps.

testflight_01

Here is how to get started

  1. Go to TestFlight’s website.
  2. Sign up for an account (you should use an email address you use, or can access from your iOS device)
  3. Create a team
  4. Invite team members
  5. You can create distribution lists and add team members to them
  6. Add the team members' devices to their application build (this still has to be done via Apple's provisioning on the Developer Portal)
  7. Upload your application to TestFlight (.ipa)
  8. Distribute your app (with just a click) to everyone, or your selected lists or team members.
  9. Track downloads, installs and more through your TestFlight dashboard.

When you distribute an application, TestFlight will send an email to the registered email addresses included. People will get an email with the app’s information and a link to download and install the application’s build to the device.

TestFlight also exposes an API that can be used to automate the build’s upload. This is quite handy to setup continuous deployment mechanisms, but that will be a topic for another post.

testflight_04

Upload a Build

  1. From the dashboard you can select the 'Add a Build' button.
  2. This will take you to the upload screen. Drag and drop your .ipa file or click on the page to browse for it.
  3. Add the corresponding build notes.
  4. Click Upload to upload your app build to TestFlight.
  5. Afterwards you can select the people you want to have access to it.
  6. Send them the build.

testflight_02

Make sure to also take a look at the Permissions and Distributions features, the dashboard and the help links.

Connecting device with account

When you connect your device a small configuration profile is installed on your device which does two things. First, it sends your device's unique identifier (UDID) to TestFlight allowing a developer to include your device in future builds. Second, it adds a bookmark (web clip) to your home screen giving you quick access to the TestFlight website and your application list. No device settings are changed. The bookmark is a technical requirement in order to make the UDID sending possible.

You can view and/or remove the profile and verify what it installs by going to Settings > General > Profiles and look under the Configuration Profiles Section. Check out this page if you want to dig deeper on the subject.

How to Upload a File from a Windows Phone App

In this post I’ll share with you how to upload a files from a Windows Phone application to a web service via HTTP POST. I’ll be using ASP.NET MVC to create a simple service that allows you to post multi-part form data over HTTP, and a Windows Phone 8 project.

Surprisingly enough, seems to me that there are very few examples available on the web, about how to achieve such a basic feature. It might be because most apps will commonly use popular services like Facebook or Twitter, or established cloud services where APIs and examples exist. However, the moment you want to create your own service to upload photos or files from your mobile app, working coding samples start to mingle.

For the file upload web service, you can use WCF, Web API or ASP.NET MVC (or any other web services technology for that matter), as long as you can provide an endpoint that accepts an http POST request using multipart form data. I previously published a post on how to implement the upload service. Check it out for details and step-by-step instructions. You can also download the sample project here.

image

Let’s now create the Windows Phone 8 client application that will upload the file. In this case, we will create a simple application that will allow the user to pick a picture from the phone pictures library and upload it to the service.

image

Open Visual Studio and create a new empty Windows Phone 8 application. Modify the layout of the UI to provide a simple interface to choose a picture, display it and then upload it.

image

Next, let’s create the functionality to select an existing photo from the phone’s picture library. The code below uses the WP8 PhotoChooserTask to achieve exactly that. Notice that we are attaching an event handler to the completed event, so we know when the user chose the picture.

public partial class MainPage : PhoneApplicationPage
{
    // Image stream variables
    private MemoryStream photoStream;
    private string fileName;
    // PhotoChooserTask definition
    PhotoChooserTask photoChooserTask;
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        // initializes the PhotoChooserTask
        photoChooserTask = new PhotoChooserTask();
        photoChooserTask.Completed += 
            new EventHandler<PhotoResult>(OnPhotoChooserTaskCompleted);
    }
    // Launches the photo chooser. 
    private void OnChoosePicture(object sender, 
                     System.Windows.Input.GestureEventArgs e)
    {
        photoChooserTask.Show();
    }
    // Called when an existing photo is chosen with the photo chooser.
    private void OnPhotoChooserTaskCompleted(object sender, PhotoResult e)
    {
        // Hide text messages
        txtError.Visibility = Visibility.Collapsed;
        txtMessage.Visibility = Visibility.Collapsed;
        // Make sure the PhotoChooserTask is resurning OK
        if (e.TaskResult == TaskResult.OK)
        {
            // initialize the result photo stream
            photoStream = new MemoryStream();
            // Save the stream result (copying the resulting stream)
            e.ChosenPhoto.CopyTo(photoStream);
            // save the original file name
            fileName = e.OriginalFileName;
            // display the chosen picture
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(photoStream);
            imgSelectedImage.Source = bitmapImage;
            // enable the upload button
            btnUpload.IsEnabled = true;
        }
        else
        {
            // if result is not ok, make sure user can't upload
            btnUpload.IsEnabled = false;
        }
    }
    // calls the UploadFile method
    private void OnUpload(object sender, System.Windows.Input.GestureEventArgs e)
    {
        UploadFile();
    }
    // uploads the file
    private async void UploadFile()
    {
        try
        {
            // Make sure there is a picture selected
            if (photoStream != null)
            {
                // initialize the client
                // need to make sure the server accepts network IP-based
                // requests. 
                // ensure correct IP and correct port address
                var fileUploadUrl = @"http://<IPaddress>:<port>/fileupload";
                var client = new HttpClient();
                // Reset the photoStream position
                // If you don't reset the position, the content lenght
                // sent will be 0
                photoStream.Position = 0;
                // This is the postdata
                MultipartFormDataContent content = new MultipartFormDataContent();
                content.Add(new StreamContent(photoStream), "file", fileName);
                // upload the file sending the form info and ensure a result.
                // it will throw an exception if the service doesn't return 
                // a valid successful status code
                await client.PostAsync(fileUploadUrl, content)
                    .ContinueWith((postTask) =>
                    {
                        postTask.Result.EnsureSuccessStatusCode();
                    });
            }
            // Disable the Upload button
            btnUpload.IsEnabled = false;
            // reset the image control
            imgSelectedImage.Source = null;
            // Display the Uploaded message
            txtMessage.Visibility = Visibility.Visible;
        }
        catch
        {
            // Display the Uploaded message
            txtError.Visibility = Visibility.Visible;
        }
    }
}

When the picture is chosen, we want to display it on screen, and then enable the Upload button. We will want to notify the user when the image was successfully upload it, and if there was any error uploading it. Finally, we will clear the image on screen when it is successfully uploaded.


For the upload functionality, I’ll be using a package that allows to use the HttpClient on Windows Phone. To add the required DLLs, open the NuGet Package Manager and search for Microsoft.Net.HttpClient. Install the library on your project.


image


If you compile the project, you will get an error because of one of the package dependencies, which can only compile for x86 or ARM.


image


To fix this, just change the target platform to x86 in the configuration manager if you are deploying in the emulator, or ARM if you are deploying on your device.


image


Although the code is straight forward in terms of functionality, there are a few things to notice that could get you wasting a lot of time trying to solve. You have to pay attention to the way you work with streams. Once you read a stream, the position will change. You have to reset it to “0” when you want to read it again. Then, you need to initialize it if you want to replace it with a new photo stream.


You also need to configure your file upload web service if you want it to work locally. Either the Windows Phone 8 emulator or the device itself will appear as separate devices, so you will need to use your local machine IP address and configure your web server (in my case IIS Express) to accept HTTP requests, and also make sure the Windows Firewall is allowing the private or domain incoming requests on the web service assigned port.


Finally, you have to control the exception thrown by the HttpClient post task if the request is not successful. Remember that if you want to modify the UI from the request task, you will need to use a dispatcher, since the request is running on a non-UI thread.


Here are some screenshots of the running app. I tested the code running both in the Windows Phone 8 emulator and on the actual device.


wp8_upload_01wp8_upload_08wp8_upload_03wp8_upload_04wp8_upload_05wp8_upload_06wp8_upload_07wp8_upload_11wp8_upload_09


Special thanks to my colleague Herber Madrigal who was kind enough to put together the initial proof of concept and point me into the right direction.


Make sure to read my initial post on how to implement the File Upload Web Service, and then afterwards, make sure to check my post on how to enable the Windows Phone 8 Emulator and your network devices to connect to your local web services. Without this, you won’t be able to test and debug your apps and services locally!


Finally, you can grab the complete sample code for the WP8 File Upload from my Github repo here.

How to Connect to Local Web Services from the Windows Phone 8 Emulator

In this post I want to share some tips on how to enable locally hosted web services connectivity, so you can connect to them from the Windows Phone 8 emulator or any devices in your network.

The best way to demonstrate this is with a sample web service and a WP8 applications. For this post I’ll be using a File Upload MVC Service and a File Upload WP8 app. Check the articles on my blog post for implementation details and source code.

The code required for the service and the mobile app is actually quite straight forward. On the other hand, being able to connect to your local service from your emulator or device, and test locally, is actually tricky. This gave me quite a few hours of wall banging since although I had some code in place, I could not figure out how to test it. My good colleague Herber Madrigal gave me a hand, and put together a prove of concept for me.

It turned out, that there are a couple vital steps your need to take to be able to run your service so the emulator and devices can connect and use the service based on the local machine IP.

In WP8, the emulator configures itself as a separate device on the network, and so, it can’t connect to the development computer as localhost. Effectively, it acts as a separate device in your network.

Before you can connect successfully from the emulator or a device in the network, you will have to do two changes:

  • Configure the local web service and web server to accept connections from other devices on the network.
  • You have to configure the service in the WP8 app to connect to the service by using the IP address of the development computer on which the service is running.

Let’s start with the web service. You can use WCF, Web API or ASP.NET MVC (or any other web services technology for that matter), as long as you can provide an endpoint that accepts a HTTP request using multipart form data. I have previously published a post on how to implement the upload service. Check it out for details and step-by-step instructions. You can also download the sample project here.

Run the project and go to the /fileupload page. You should see the page displaying correctly, indicating that the request was received, but no file was sent.

image

If you want to test the upload, you can use a tool like Fiddler to emulate the file upload request, as I showed in my previous post.

image

image

image

Ok. Now that we have the service running, you need to do a couple of configuration tricks to allow the service to be reached from the Windows Phone emulator or device. You need to bind your application to your public IP address, so it can be reached by another machine, or in this case another virtual machine. Once you do that, you need to configure the Windows firewall to allow incoming connections, which are most commonly locked by default.

Remember that the Windows Phone emulator configures itself to run as a separate device on the network, so it can’t, by default, reach localhost!

Binding your IP in IIS Express

image

  1. Find IIS Express configuration file, applicationhost.config, in the folder
    %USERPROFILE%\Documents\IISExpress\config\  
  2. Duplicate the <binding> line, and replace “localhost” with your IP address (make sure to verify the port number).
  3. Save the file.

At this point, you should be able to run the web service and on the browser, go to the /fileupload using your IP address and port instead of localhost. However, that works only from the browser.

Note: you might not be able to reach out the endpoint with your IP address. If that is the case, completing the following steps, and re-running the web service should fix it.

Allow Incoming Connections

If you try to reach the endpoint on your browser using the IP address, you will most likely get a Bad Request or Service Unavailable response, since up to this point the firewall is not allowing incoming connections.

  1. Start a command prompt with administrative privileges.
  2. Run the following command making sure to include your IP address and the correct app port:
    netsh http add urlacl url=http://youripaddress:yourappport/ user=everyone
    This just tells http.sys that it’s ok to talk to this url.
  3. Add a rule in the Windows Firewall, allowing incoming connections to your app port for computers on your local subnet. To do so, run the following command including the correct port
    netsh advfirewall firewall add rule name="IISExpressWeb" dir=in protocol=tcp localport=yourappport profile=private remoteip=localsubnet action=allow

If you open the Windows Firewall manager, you should be able to see the new rule added. You can change or delete the rule from here easily.

image

Now, you can go back to the service project in Visual Studio and run the project again. Now you should be able to reach the /test or /fileupload endpoint using your IP address.

image

The easiest way to test that the web service is now allowing network devices to connect is to go to the /fileupload page from the Windows Phone emulator or the device browser. If you are able to reach the page (and also debug the incoming request from Visual Studio) you are good to go.

image

You can easily test the Windows Firewall rule by going into the Firewall’s manager and disabling the rule. If after doing it, you refresh the page on the emulator’s browser, it won’t work.

image

image

To summarize, remember that you can actually enable your locally hosted web services to be reached by local apps running on the Windows Phone 8 emulator or any other devices in your network. To do this, you will need to create an IP binding on your web server configuration to allow the apps to use the local machine’s IP address instead of localhost. Then you need to create a rule to allow inbound HTTP requests to go through the Windows Firewall. Make sure to check the IP address of your local machine when testing to make sure is the right one (it can change if your provider uses dynamic IP assignment).

Here is a helpful MSDN article on how to configure local connectivity under different scenarios. Here is a summary for IIS Express.

Finally, if you want to put together or test the WP8 File Upload application, check my post on the subject for step-by-step details and source code.

Saturday, June 15, 2013

Ray-Ban Ambermatic Wins 2013 One Show Interactive Merit Award

13150N_1

A few weeks ago, the 2013 One Show Interactive Award winners were announced and I was pleased to know that among the 15 awards that R/GA got, the Ray-Ban Ambermatic project got the 2013 One Show Interactive Merit Award in the category of Mobile Applications/Sites/Consumer Goods.

I wrote a brief post about the project some time ago, which you can read here. The project was designed by my colleagues in the R/GA Stockholm office, and it was developed in London and New York. I was responsible for co-architecting the technical solution and building the camera installation and image processing, along with running and maintaining it.

image

R/GA has done quite well so far this year on several award ceremonies, and the 2013 One Show Interactive Awards are a nice addition. In fact, the agency was honoured as Interactive Agency of the Year at One Show Interactive.

I have high expectations for the upcoming Cannes Lions Awards!