Categories
Hackathon

BattleHack Austin: PayPup Writeups!

One of the best things about winning PayPal’s BattleHack Austin was to get the word out there about using PayPup as a mobile fundraising platform for animal rescues.

I’m happy to work with animal rescue groups who want to adapt PayPup for their own needs – it shouldn’t be too much work to get this into your organization – you just have to maintain the donation goals for the dogs and cats that have special goals.

My little hackathon app got featured in the AustinStartup – Q&A Wednesday :: PayPal BattleHack Winner Jeff Linwood – one of the most interesting things about this hackathon for me was that I hadn’t built a Windows Phone 8 app before – just a Windows 8 Store app, and that was in HTML and JavaScript. C# turned out to be very straightforward, and adding events to buttons in XAML was so easy compared to Android (iOS is somewhere in the middle).

PayPal also has a great writeup on their blog – Austin Showcases Top Talent in Global Battle Hack – with a great picture of me and my “Austin Winner” battle axe.

Laura Lorek wrote a very nice piece about me in the Silicon Hills news – PayPup Wins PayPal’s Battle Hack in Austin – I was actually talking to her before I presented, and it helped me from getting too nervous before my presentation.

The Austin Business Journal also wrote up my PayPup hack here – Austin app developer is top dog – they might get the prize for wittiest headline.

Overall, I’m thrilled with how BattleHack Austin turned out – I think that if there were easy to use apps out there that you could use to view available shelter and rescue dogs, and encouraged you to help fundraise for the dogs, there could be a lot fewer animals that need to be rescued.

Categories
Hackathon iPhone Development Windows Phone 8 Development

BattleHack Austin: Won First Place with PayPup!

I won first place at BattleHack Austin – PayPal’s hackathon for developers. BattleHack is a series of competitions all over the world, in places like London, Berlin, and New York. Austin’s was held at TechShop, a great maker space up in Round Rock. PayPup Home Screen

 

I ended up building a screen scraper in Ruby, an iPhone app, and a Windows Phone 8 app. Because I made the only Windows Phone 8 app at the hackathon, I also won the Nokia app developer competition. Instead of building a server, I used Windows Azure Mobile Client Services as the backend for the app, as they were one of the sponsors, so I knew I could bug Microsoft’s developer evangelist whenever I got stuck. This worked out really well for what I was doing, especially with the cross-platform support.

The PayPup iOS app is open sourced on GitHub at (https://github.com/jefflinwood/PayPupAppForIOS) – you’ll need to set up your own PayPal and Windows Azure Mobile Client Services accounts and use the corresponding client IDs in the app.

Here’s a link to a story about my app over at the Silicon Hills News.

Categories
Ruby

Quickstart: Running Rails on your own Digital Ocean VPS

I’ve been working on a couple different web application projects using Rails 3.2, and they’re now at the point where they need to go onto a publicly accessible development/staging/production platform.

The quickest, most hassle-free solution is to use Heroku for deployment – create a Heroku web application from the command line, git push heroku master, and you’re live! There’s something to be said for using Heroku for a development environment – you can easily push copies of your server, it’s free if you only use one dyno and no SSL, and they handle all of the maintenance and operations.

Unfortunately, once you look at taking your web application up just one level towards production (two dynos, so Heroku doesn’t spin down your application, a database with more than 10K rows, and SSL), you’re looking at $65/month. Not a big deal once the project gets going, but if you’re launching a lot of web services, it will add up.

I’ve had good luck with hosting on DigitalOcean, a VPS provider that uses SSD disks for its servers. The lowest cost plan is $5/month for 512 megs of RAM and a 20-gig SSD. I really like the performance of a 512-megabyte VPS I’m currently using to host a couple of PHP/MySQL projects. I moved those sites over from another VPS provider who was acquired by a larger company, and I’ve gotten much better performance for $5/month than I was for $25/month.

Previously, it had been a pain to install RVM, nginx, and Unicorn all together on Ubuntu – I’d tried messing with Vagrant, Chef recipes, Passenger, and a bunch of other half-baked devops scripts. I find it a little strange that no one’s done a good job writing a simple Ubuntu->RVM devops setup script with sensible defaults, but that’s fine. I ended up setting up my first DigitalOcean Rails VPS with Passenger, which wasn’t too bad, but it wasn’t easily scalable.

In the meantime, DigitalOcean released an RVM/Rails image (with MySQL, but you can easily install PostgreSQL instead if you want), so you can click a button and get a fully provisioned Rails/RVM/nginx/unicorn/MySQL server in 60 seconds after signing up with DigitalOcean.

What’s missing there is a deployment story  – if you just want to hack on the server, great, but that doesn’t scale either. The easiest way to deploy Rails sites is Capistrano, which is covered in this fantastic tutorial (How to Deploy a Rails 4 App with git and Capistrano by Rob McLarty). Rather than recap everything in that tutorial, I’ll let you go through it.

Of course that tutorial doesn’t exactly match the setup that DigitalOcean uses for its Rails droplet, so I had to make a few changes to support RVM and the Capistrano way of deploying apps using current and releases directories.

I’m not a huge fan of RVM, and you’re going to run into problems because RVM basically runs as a shell script on interactive login, and not non-interactive login, which Capistrano uses.

You’lll need to modify the deploy.rb Capistrano file from the above tutorial for the default DigitalOcean setup . I also changed the shell used in the above tutorial to bash. Extremely important is to set the bundle command used, or you’ll get lots of errors about the bundler gem not being installed. Here’s the first part of my deploy.rb file with my changes.

require 'bundler/capistrano'
$:.unshift(File.expand_path("./lib", ENV["rvm_path"]))
require 'rvm/capistrano'

default_run_options[:shell] = 'bash'
set :rvm_ruby_string, "ruby-1.9.3-p429"
set :rvm_type, :user
set :bundle_cmd, 'source $HOME/.bash_profile && bundle'

I also included the RVM Capistrano plugin, and specified the RVM ruby string to use, though that could probably be taken out for most projects.

The other place you’ll run into problems using Capistrano and DigitalOcean’s Rails provider is in setting up the nginx and unicorn directories.

Modify the /etc/nginx/sites-enabled/default file to change the location of your Rails app from /home/rails to /home/rails/current

Modify two unicorn file:

In/home/unicorn/unicorn.conf, change the working directory to /home/rails/current

In /etc/default/unicorn, change the APP_ROOT to /home/rails/current

Run capistrano to deploy the rails app: cap deploy

From the server, restart unicorn and nginx, and your server should be pointing to your new rails app!

service unicorn restart
service nginx restart

Let me know if this how to helps you sort out deploying Rails apps to DigitalOcean! If you have questions or feedback, or if something else needs to be included, either leave a comment here or contact me directly.

Categories
Android Phonegap Twilio

Android PhoneGap Plugin for Twilio Client

I recently got the chance to help out another developer (BetterVoicemail.com) by developing an open source PhoneGap/Cordova plugin for the Twilio Client SDK. If you’re not familiar with Twilio Client, it’s a Voice-over-IP (VoIP) library for web, iOS, and Android that lets you build web pages and mobile apps that can make outgoing phone calls, receive phone calls, chat through the browser, and all kinds of other interesting projects.

One of the interesting things about its implementation is that the JavaScript web Twilio Client SDK does not currently work on either Android or iOS web browsers. This means that to have voice-enabled mobile applications, you need to use the iOS or Android SDK’s. Those are written for developers using the native languages of the platform – either Objective-C, or Android – so it’s not really very easy to have a cross-platform solution.

One way to bridge this gap is to use PhoneGap to build your applications in HTML5/CSS/JavaScript – Steve Graham had built a PhoneGap Plugin for the Twilio Client for iOS at https://github.com/stevegraham/twilio_client_phonegap that shared the same Javascript API as the Twilio web client. There wasn’t an Android implementation, so it wasn’t truly cross-platform.

The first thing I did was to bring the current iOS code base up to PhoneGap 2.9 compatibility – PhoneGap moves quickly and breaks existing plugins, though they do publish a plugin upgrade guide to follow. After using that as a base, I built a test iOS PhoneGap app that exercised the iOS plugin, because the idea was that the Android plugin would work identically to the iOS plugin.

The Twilio Android Client SDK doesn’t have the same API as the iOS version – in particular, to handle incoming calls, you need to construct a PendingIntent for the Twilio Client SDK to fire off, instead of just registering a delegate with the SDK. So for the Android plugin to work, you need to add an activity to your Android manifest XML file. I used the LocalBroadcastManager to communicate with the plugin, so I could implement a listener that worked exactly like the iOS version. You’ll also need to follow the Twilio Client for Android installation instructions (after using PhoneGap/Cordova to generate your project), which are more complicated than the Twilio Client for iOS installation instructions.

If you want to use the  Twilio Client plugin for PhoneGap for Android or iOS, it hasn’t yet been merged back into the original repo yet – so clone it from my GitHub for the time being: (https://github.com/jefflinwood/twilio_client_phonegap)

 

Categories
Hackathon Ruby Twilio

Talxer: Talk to your e-commerce customers – AngelHack Austin 2013

I was lucky enough to enter quite a few hackathons last year – including API Hack Days in Austin and Dallas, the Via.Me Back to the Future Hackathon and the TwilioCon Hackathon (both in San Francisco), and a DrupalCon Twilio Hackathon in Denver. For the most part I enjoy them, though it is hard to bring a project out of a hackathon into an actual shipping product.

This year, I haven’t had a chance to do any, so I jumped on the opportunity to enter the AngelHack hackathon held at Mass Relevance in downtown Austin.

I actually had a somewhat well planned out idea going into the hackathon about what I wanted to accomplish – a project that would solve problems for two clients I have right now where I as a developer would pay for this solution. It wouldn’t particularly involve integration with any of the sponsors of the hackathon, but for this hackathon, that wasn’t really the focus.

Instead, I ran into Saranyan from Bigcommerce, one of the sponsors of AngelHack Austin. We’d met at Circus Mashimus during SXSW this year when I’d shown up to demo another hackathon project (RV Trip Companion). He mentioned that he’d been talking to Keith Casey from Twilio about how to tie voice into Bigcommerce, so store owners can provide click-to-call to their customers. This sounded like the kind of project I could make a pretty deep dent into in 24 hours, so I switched gears.

Starting with Rails Composer, I built a Software-as-a-Service project in Rails that used Stripe for billing. I then set up the site on Heroku, as that can get a little tricky with Rails Composer web apps. Next was integrating Twilio using some hand-written TwiML as ERB files – I’ll probably replace those with their TwiML builder, but they worked for now. After that, it was time to integrate the Bigcommerce gem, and start to do some customer and order lookup – their API is pretty RESTful, and they have a developer console, so it wasn’t too hard. All of the attributes I wanted to query by were exposed. A little more TwiML, and I had a toll-free hotline ready to go for my e-commerce stores.

Next to build was a click-to-call widget, powered by Twilio’s web client. I knew I’d have to serve a Twilio capability token out of my server up to a third party web site (the e-commerce store), so I built some code that provided the widget functionality as an external JavaScript file served off of my platform to be embedded into the Bigcommerce store.

Integrating with the front-end of Bigcommerce was a little tougher – they use a custom templating/theming engine that you modify chunks of and then upload to your e-commerce store over DAV (think FTP). Digging into it, it wasn’t obvious at first where to put the JavaScript, but I dug through things, and hacked in some JavaScript, some CSS, and my new call and hangup buttons. I got things to look pretty in the default theme using my CSS skills (margin-top:-7px, for instance).

At the same time, I also put together a VoiceBunny project for a full custom voice-over for all of the spoken content for my site. This made everything voice-related feel much more professional, and because VoiceBunny was one of the sponsors, they had a discount code for AngelHack. The voices came in with about 3 hours to go, and I was able to integrate them into Twilio.

I ran into a couple of problems, including wasting time trying to get Heroku to use Ruby 1.9.3 instead of 1.9.1 or 1.9.2 (I just commented out SecureRandom and moved on instead), killing my Stripe integration by accidentally putting another copy of jQuery into my Rails asset pipeline, and using rbenv with Rails Composer instead of rvm (luckily I’d already mostly battled this one out on another project). Another, bigger problem, was that I hosted my MP3 files for the voice over on a basic shared hosting provider, and Twilio’s caching algorithms would work much better if they were served out of something that properly handles HTTP caching (such as the Rails asset pipeline). These collectively ate up time that I could have spent polishing the site or adding new functionality, but that always happens in hackathons.

I ended up winning the Bigcommerce prize, and the VoiceBunny prize for best use of their respective technologies at AngelHack ATX. I’ve definitely got some hard-coding to take out, and some rough edges to polish off before the app is ready to go out to customers, but it’s a pretty good start for a 24 hour project.

Thanks to Mass Relevance for hosting the event, Damon, Wade, and the other organizers, the judges for spending their Sunday afternoon in a conference room, and to all the sponsors (TokBox, Amazon Kindle Fire, Bigcommerce, VoiceBunny, Elance) for making it happen!

Categories
Ruby Social Media Analytics Talks

Ruby Talk from 2011: Twitter Streaming API + MongoDB

I gave a talk at the Lone Star Ruby Conference in 2011 on Consuming the Twitter Streaming API with MongoDB. The talk was recorded, but just recently uploaded to YouTube. This was one of the first talks I gave at a professional conference, instead of just a meetup, so I practiced in front of a few of my software developer friends who didn’t know Ruby, MongoDB, or the Twitter Streaming API. Watching this, I’ve definitely improved my speaking style over the past two years, but that’s more than ok.

For those of you following along, the code referred to in the presentation is Tweeter Keeper, at GitHub here: https://github.com/jefflinwood/Tweeter-Keeper

Categories
Uncategorized

Redesigned Biscotti Labs Web Site

I wanted to redo the web site for my mobile app development company, Biscotti Labs, because it had some stale design and content. DrupalCon 2013 is coming up fast, and I’d rather update the site before rather than after. Also, I wanted to make the site responsive for smartphones and tablets.

I’ve been a little bit frustrated with ThemeForest templates – they’re usually far too complex, present way too much information, and turn out to not be built on top of any kind of reusable framework. Additionally, I decided not to run the site on a CMS, but instead just make it a single page site with a static HTML file.

There are several front end development frameworks to make the job a little easier, but the one I’m most familiar with is Twitter Bootstrap. You can buy a pre-built theme for Bootstrap from several marketplaces, but I decided to give the WYSIWYG Twitter Bootstrap editor JetStrap a shot – it’s from the same great team that built Codiqa, the visual design and prototyping tool for jQuery Mobile.

JetStrap makes pretty clean HTML and CSS, and I took what they had, edited in their interface, and then downloaded the HTML and assets locally. My next step was to use some resources from my favorite design marketplace, MediaLoot. I went with a set of flat Photoshop vector icons, scaled them up to 512×512, and then used those to provide some visual context for the various solutions and services. JetStrap included some hot-linked blurred background images in the HTML, so I replaced those with blurred background images from another MediaLoot image set.

Overall, I’m pretty happy with the design of the site, though I certainly need to tweak it, and test it on a few mobile devices.

Categories
Drupal Planet iPhone Development Talks

Drupal and Mobile Video – Dallas Drupal Camp 2013 – iPhone App and Presentation

Earlier this month, I spoke at the Dallas Drupal Camp about Drupal and mobile video. I’ve worked on a couple of projects for clients this year and last year that involved uploading and displaying videos from a mobile app on iOS and Android. Some of them have used Drupal for the server, others haven’t used Drupal at all. Mobile video can only be done through a native app (or PhoneGap), as HTML5 hasn’t provided support for uploading video through input types yet.

One of the obstacles to using Drupal as a video platform is getting everything set up – even though there are plenty of video modules, it can be tough to set up the Video module with Zencoder as a transcoding solution and Amazon S3 for storage and content distribution. Making this a lot easier if you are either starting from scratch or building out a proof of concept/minimum viable product is Octopus Video (http://octopusvideo.org/), a Drupal 7 distribution developed by Heidi Software and Symphony Themes. In effect, it’s a private YouTube distribution, which you can then extend using normal Drupal 7 modules and views to become a corporate training video archive, the back-end for a consumer-facing mobile app for cat videos, or whatever you want.

I gave a lightning talk about Octopus Video to the Austin Drupal User’s Group, and everyone there seemed pretty enthusiastic about the topic, so I decided to take it a step further and give a talk on it at the Dallas Drupal Camp this year.

In addition to sharing a lot of tips and tricks I learned from using Octopus Video as the server for a video-based mobile app prototype, I also created an open source iPhone app (Apache-style license) to show off some of the things you can easily do – upload video, display a list of videos from a Drupal video, and then play back videos stored on Amazon S3.

The GitHub repository for the open source iPhone app is here:

https://github.com/jefflinwood/DrupalMobileVideoAppIOS

This was a quick demonstration project for the Dallas Drupal camp, not extracted from a commercial project, so it’s missing a lot of the extras that would make it a polished app. I’ve added a few of them as issues to the GitHub project, and if I can find some more free time, I’d like to keep moving forward with it.

Categories
Android

Repeating Android Animations with AnimatorSet

The Android Honeycomb 3.0 (and newer) animation library has a nice little class called AnimatorSet (not to be confused with the older AnimationSet) that lets you organize animations either to be played together, or to be played sequentially. In this case, I needed to create an infinitely looping image fader that cycled through ImageView objects on the screen.

The ValueAnimator class has a nice setRepeatCount() method that would let me just set up my animation as running forever – but AnimatorSet extends Animator, not ValueAnimator, so you don’t get access to that. Setting the repeat to infinite for each Animator you put in the AnimationSet won’t work if you’re sequencing some animations (fade image 1, fade image 2, fade image 3, repeat), but it would work for two images if you set it to reverse itself.

Instead, the solution is to use an AnimatorListenerAdapter that listens for your animation set ending, and then starts the animation again. Make the animation a member of your fragment or activity, and then just put something similar to this in your listener:

[code lang=”java”]
mAnimationSet.addListener(new AnimatorListenerAdapter() {

@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mAnimationSet.start();
}

});
mAnimationSet.start();
[/code]

Categories
Android

New Android App: NMC Horizon EdTech Weekly

I’m happy to announce that the NMC Horizon EdTech Weekly app just launched for Android. I built the original app for NMC for iPhone and iPad last year, and it was a lot of fun to build an Android version of the same app  – a lot of things are the same, but there are a lot of differences in user experience between iOS and Android.

NMCAppLibrary NMCAppMap