Building an app inspired by the movie Her in 24 hours

On January 24th of this year I had the fortune of attending hackTECH in Santa Monica, CA. Having been raised in LA, I thought it would be the perfect opportunity to invite my little brother Sam and his friend Matthew to come hack with me. I had been to 22 hackathons at that point and considered myself to be a hackathon veteran.

Sam, Matthew, and I arrived to hackTECH late Friday afternoon and started brainstorming ideas. We walked by a few of the sponsor tables to get an idea for some of the API prizes that were being offered. Lob and Microsoft caught my eye and I pitched them the idea of a Windows Phone app that lets you dictate and send postcards to your friends. I had just seen the movie Her earlier that week and was inspired by the main protagonist’s job in the movie. For those who haven’t seen it, Theodore is basically a love guru who writes heartfelt letters for strangers. There is a scene in the film showing him at work dictating letters with his voice that are subsequently printed and mailed. I thought this was really nifty and figured I could recreate the experience and take it to the next level by allowing users to send voice-dictated postcards on the fly.

After much discussion and a few other ideas (such as a Snapchat web client), we decided to stick with the original idea and began working on Postagram that same Friday night.

Getting Started

The Microsoft team was awesome enough to give us a Windows 8.1 sandbox VM that I happily ran on my Ubuntu laptop. We booted the VM, opened up Visual Studio, tried the Windows Phone app hello world tutorial, and got stuck. We couldn’t run the hello world app on anything. The VM didn’t come with the appropriate emulators. We couldn’t download any emulators. We tried plugging in the physical Windows Phone (that was also borrowed from the Microsoft team). That seemed to work. We could build and run apps on the physical phone. Things were going decently well so we decided to call it a night.

The next day we realized none of us had ever written a single line of C# up until that point and that Windows Phone apps are not the easiest to program. Fortunately, I knew enough about APIs and event handlers that I was able to Google my way through most of the problems we encountered. I assigned Matthew to start designing the app and Sam to start reading up on the Lob API.

Making it Work

With lots of help from the Microsoft Developer Network documentation, I figured out the Speech-to-Text API and implemented a simple modal to record the note for the postcard. C#’s await keyword actually made it very simple to work with asynchronous code without having to dive deep into callback hell.

private async void Record_Click(object sender, RoutedEventArgs e)
{
  // Create an instance of SpeechRecognizerUI.
  SpeechRecognizerUI recoWithUI = new SpeechRecognizerUI();

  // Start recognition (load the dictation grammar by default).
  SpeechRecognizerUIResult recoResult = await recoWithUI.RecognizeWithUIAsync();

  // Set the textbox to the recognized result
  Message.Text = recoResult.RecognitionResult.Text;
}

Matthew suggested we use a picture from the phone’s camera or gallery as the front and the transcribed message as the back of the card. However, at that point, we were running a little short on time and I had to figure out how to get the message into a proper format for Lob’s API. Lob’s API turned out to accept specifically sized PDFs that were to be sent as POST requests to their servers with shipping address and return address parameters. I couldn’t find a C# PDF creation library quickly enough so I decided to simply send the postcard message to a PHP server, create the PDF in PHP, and hit Lob’s API with the PDF and all of the appropriate parameters. Despite the unpleasantry of working with PHP, the PDF library happened to be battle-tested many times and was relatively simple to work with.

<?php
require('fpdf.php');

$message = $_POST['message'];

$pdf = new FPDF('L', 'mm', array(101.6, 152.4));
$pdf->AddPage();
$pdf->SetFont('Arial', 'B', 12);
$pdf->MultiCell(0, 10, $message);

$content = $pdf->Output('postcard.pdf', 'F');

With 10 minutes to spare and without any testing whatsoever, it worked! The PDF was created and Lob’s API returned a successful response! We couldn’t be happier.

Wrap Up

Mere seconds later, demos started and I made sure Sam and Matthew had a good pitch: “Send personal postcards from your phone,” “Record a message for a loved one and send it as a postcard,” and so on. Despite ultimately not making it to the top 10, I had a great time developing for Windows Phone, figuring out Lob’s API, and coaching Sam and Matthew through their first hackathon.

-Yefim