Kevin Coughlin

I make computers talk.

From Idea to Apple App Store: Day 5 Long Titles and the UIToolbar Tint Struggle

| Comments

If you’re just joining, I’m keeping a journal of the development of my first iOS app – Smodr, an iOS application for director Kevin Smith’s network of podcasts, namely Smodcast. You may want to read my entry for days 1 thru 4 if you have not already.

Day 5

For reference here’s where we last left Smodr.

Smodr at Day 4

I spent the majority of my time today focused on how the app looks. There were two main changes I wanted to make: * Shorten the episode titles for the table cell and currently playing views * Change the bottom toolbar tint to the same tint as the status bar

First, I tackled the episode title strings. Since the podcast channel is “SModcast” I felt that it was unnecessary to repeat it in every table cell. I also figured that I could display the episode number in a separate view later. Once I made my decision, I split the title string at the semi-colon while parsing and set the episode’s number property from the value I received by scanning for numbers. I wasn’t worried about losing the original episode title because I could always combine the title and number properties to reconstruct the original title. These changes turned out to be really trivial, but resulted in what I believe is a cleaner user experience.

Lastly, I wanted to match the bottom toolbar’s background color to the orange I had made the status bar. Once I did that I would change the text color to white for some contrast on the orange background. I struggled for way too long setting the toolbar background color for two reasons I discovered later: * I needed to grab a reference to the bottom toolbar * The appropriate method for setting the background color is setBackgroundColorTint not setBackgroundColor

Go figure… that’s objective-c naming conventions for you. Thankfully I got a response via Twitter for what the correct method was, made my toolbar orange, and quickly set the UILabelView’s text color to white. I also set the toolbar’s translucent property to YES for the time being.

All in all, I was disappointed I wasted so much time on finding the correct toolbar background color method, but the plus-side is I’ll never get stuck on that again. I’m pretty content with the current state of Smodr’s interface. Now comes the serious work. For the few days I’ll be implementing saving and syncing using FMDB instead of Core Data for reason’s I’ll cover in the next entry. Once I implement the database I’m goin to work on the ability to download and delete the media files because I can’t knowingly attempt to publish an app that only works via HTTP streaming. I’m having nightmares about it just mentioning it.

In summary, I’m making progress. Hooray! And of course… a screenshot!

Smodr at Day 5

From Idea to Apple App Store: The First Four Days

| Comments

The Idea

I’m a podcast fanatic. For the past few years podcasts have filled hours of my day whether commuting, at work, at home, or while exercising. One of my favorite network of podcasts is the SModCo network by Clerks director Kevin Smith. After listening to his podcasts on my iPod Touch for a year I received a decent Android phone and immediately began searching for a great SmodCo specific podcast app. I stumbled across an app named Smod Forever and it was decent. However, eventually the developer introduced abtrusive poorly coded advertisements and I had to give it up.

No more than 2 months after abandoning Smod Forever, a company introduced an application for Kevin Smith’s podcast that is a re-skinned version of their Nerdist and the Joe Rogan Experience apps (Nerdist and Joe Rogan Experience are other popular podcasts). While the apps seemed better than the Smod Forever, I decided to try a general Podcast app that was highly rated – Doggcatcher.

Unfortunately, I’ve had a host of problems with Doggcatcher.

  • It’s really slow for my Samsung Galaxy Nexus
  • Syncing often fails
  • Sometimes Episodes are swapped
  • The design is cluttered
  • Error catching is non-existant

Recently, my frustration reached its height and I decided it was time to write my own app.

Android Beginnings

For the past two years I’ve dabbled with Android development. I like to think I know the platform very well, but due to my own shortcomings:

  • Poor planning
  • Feature Happy
  • ‘Perfectionism’

I’ve never published an application to Google’s Play Store. I figured that creating an app I would use daily for a personality that I admire would be a damn good way to motivate myself. I’d also learned from previous projects to boil the initial implementation to a few tasks and to do them well. So I came up the following requirements for Phase 1 of my Smodcast Android App:

  • Adhere to current Android Design Patterns
  • Display list of Smodcast Episodes
  • Bottom fragment with Play / Pause functionality and currently playing label
  • At first only stream mp3 via HTTP

However, my interests combined with a switch in projects at work has led me to…

iOS – The Promised Land?

I ended up working in iOS this past week at work. I know nothing of iOS aside from general principles and the syntax of Objective-C is still pretty much an unknown world to me. But I decided that it was time to take a deep-dive into XCode, Objective-C, and iOS development so that I knew what the hell I was doing both at home and at work.

During my break on Monday I spent began researching what I’d need to develop my Smodcast app on iOS. I boiled it down to the following:

  • XML Parser (preferably SAX)
  • List view to display the episodes
  • Bottom view for currently playing text and Play / Pause button
  • Audio API

The Process

Day 1

Started developing the iOS version of Smodr by looking up a simple RSS reader tutorial. Using that project as a base, I implemented my own Episode object versus a dictionary implementation. The list of episode was easily completed so I moved to implementing the bottom currently playing view I envisioned (borrowing heavily from Spotify’s iOS app). A few Google searches later I ended up on a StackOverflow thread recommending enabling the bottom toolbar property in the Navigation Controller. I quickly toggled the appropriate property, ran my application and saw my list of episodes with a bottom toolbar resembling an empty canvas. My work on Day 1 was complete.

Day 2

I’m about 50% done with the rough phase 1 implementation. Today I focused on audio playback in iOS. I was led to two APIs, AVAudioPlayer and MPMusicPlayerController but since I was planning on HTTP streaming for this proof-of-concept stage and MPMusicPlayerController only allows access to the iPod media collection, I chose AVAudioPlayer. Within a few minutes was able to initialize the correct media file off of the table cell selection and invoke my audio player. My next job was to create two items on the bottom toolbar I created the night before. Populating the bottom toolbar was the timesink for the second night, but eventually I was able to right align a UIBarButtonItem with the system included Play icon and respond to taps. I wrote a simple conditional checking the rate of playback to see if audio was playing then resumed or paused playback. I was satisfied and hit the sack.

Day 3

The next day I continued with the bottom toolbar by including a UIButtonBarItem that includes a UILabel denoting the current episode or an empty string if nothing is playing. Although I had to handle the label overflow, I switched back to the playback button. I wanted to toggle state between play and pause depending on either the player’s rate property or a boolean value. The switching of images proved to be the biggest time sink due to my unfamiliarity with the iOS UI structure and my sleep deprivation. A few StackOverflow threads recommended not using the provided play and pause buttons and instead suggested to swap the image. I grabbed a play and pause png using iconfinder, initialized the UIImages, but was unable to change the button’s image. Frustrated, I went to sleep. The next morning I immediately fired-up my laptop and gave it another try. After a full night’s rest I realized that I was setting the image property of the UIBarButtonItem instead of the UIBarButton. I quickly deleted the few unwanted characters and rebuilt the application. Just like magic I was pausing / playing the audio and showing the appropriate button images. Win! Here’s a snapshot of the app in its current state:

Smodr - iOS App

Conclusion

So far iOS has been a joy to work with. I’m well aware that all I have in this initial phase is an app that’s barely usable outside of the simulator due to:

  • Lack of storage
  • HTTP streaming
  • Battery life
  • Network requests and connectivity
  • Data usage
  • Etc.

But I’ve finally got the basic functionality down and started implementing the more advanced features today. And unlike usual, I’m still having a great time developing. My biggest puzzle if I’m not sure why I’m making so much progress in such a short amount of time… I’ve narrowed it down to a combination of the following:

  • This new environment, language, opportunity has excited and motivated me
  • I’ve grown as a developer and my skillset has improved since I last attempted a mobile app
  • The iOS framework is well designed.
  • XCode feels like THE complete package IDE. I’ve just felt extremely comfortable with it.
  • Tutorials and StackOverflow answers are of higher quality than other platforms
  • I finally “get it” when it comes to the architecture of mobile apps

However, what I do know for sure is that I’m really enjoying myself and love seeing progress every day. I’m totally amazed at the amount of work I’ve done without being completely comfortable with the syntax of the language and Apple’s APIs. So if anyone has been on the fence, I say “Go for it!”. You may very well surprise yourself like I did. Now back to coding so that I can finally ship quality software!

Roll the Dice

| Comments

Whenever life doesn’t go the way I planned, I’m drawn to the following:

if you’re going to try,
go all the way.
otherwise, don’t even start.

this could mean losing girlfriends,
wives, relatives, jobs and
maybe your mind.

it could mean not eating for 3 or 4 days.
it could mean freezing on a
park bench.
it could mean jail,
it could mean derision,
it could mean mockery,
isolation.
isolation is the gift,
all the others are a test
of your endurance,
of how much you really want to
do it.
and you’ll do it
despite rejection and the worst odds
and it will be better than
anything else
you can imagine.

if you’re going to try,
go all the way.
there is no other feeling like that.
you will be alone with the gods
and the nights will flame with fire.

you will ride life
straight to perfect laughter,
it’s the only good fight there is.

Charles Bukowski

Life is short and difficult and there’s no time to let it beat down on you. Sometimes you just need to pick your head up and focus on self-improvement. That’s what I’m going to do.

Android Development Behind a Firewall

| Comments

Configure Android Studio to use an HTTP Proxy

If you’ve had problems using Android Studio or the Android SDK Manager behind a Firewall then these two configuration changes may help you configure your development environment. First, configure your Android studio to bypass the firewall by changing its HTTP Proxy settings. To do this navigate to Preferences > HTTP Proxy. You’ll be presented with the following dialog:

Android Studio HTTP Proxy Settings Dialog

Configure Android Studio to use your HTTP Proxy by filling in the inputs with the correct settings. Once you’re done you can check that the proxy works by pressing the Check Connection button and entering a URL that is typically blocked by your firewall.

Configure the Android SDK Manager to use an HTTP Proxy

If your Android SDK Manager is unable to make HTTP calls while installing / updating then you can edit its configuration file to use an HTTP Proxy. To do this you’ll need to edit its config file named androidtools.cgf. If you are on a UNIX machine you can typically find it at the following path: ~/.android/androidtool.cfg. Once you open the config file in an editor, append / modify the http proxy and http port settings like the following:

sdkman.force.http=true
http.proxyPort=[PORT NUMBER]
http.proxyHost=[IP ADDRESS]

Where [PORT NUMBER] and [IP ADDRESS] are the correct settings for your HTTP proxy and the first line forces the manager to use HTTP. Save your modifications to the configuration file and you should then be able to fetch and install SDK assets behind your firewall.

Hope those two tips help you configure your Android development environment behind a firewall!

Developing for Firefox OS: Setting Up Your Development Environment

| Comments

Introduction

With Firefox OS phones beginning to ship and developer resources & tools maturing in the past few months, the tech community’s interest in the web technology-based OS has been rapidly climbing. But this is obvious to you because that’s why you’re here! Right?

This is the first in a series of posts that will catalogue my journey developing for the Firefox OS. We’ll begin by setting up our Simulator and becoming proficient with it. Included in these posts are useful links (many of which are from Mozilla’s Developer Network) and provide essential supplemental material. Some of the articles are more detailed version of my content, therefore I strongly urge that you take the time to read their material in addition to mine as I am just capturing my development experience and may not answer all the questions you may have. If at any point you have any questions or suggestions, feel free to reach out to me at @kevintcoughlin or by commenting on the post. Now, enough of me blabbering… Let’s get started!

A Gentle Introduction to D3.js (Part 1) - Generating N-Random Circles

| Comments

Introduction

In Part 1 of this D3.js introduction, we are going to append 200 circles of random size and color to random locations of a SVG (Scalable Vector Graphics) HTML element (Mozilla Developer Network: SVG). This brief and simplistic tutorial will help familiarize you with a fraction of D3.js’ core functionality and its expressive power. In later tutorials we will build upon this implementation by adding behavior to the circles.

Intro to QUnit and Backbone.js - Part 1: Testing Your Models

| Comments

Introduction

QUnit is a JavaScript Unit Testing Framework originally developed by John Resig that is now maintained by the jQuery team. It is a powerful JavaScript testing library and an alternative to other testing frameworks such as Jasmine and Mocha. QUnit is often recommended as the first unit testing library to pickup for JavaScript due to its less steep learning curve yet extendability. I’m not able to comment on that statement since QUnit is the only JavaScript testing framework I have experience with so far. However, I hope to revisit the recommendation once I am able to evaluate the other offerings.

Solution: Proxy Issues With cURL

| Comments

Quick Tip

Here’s a solution if you ever run into the following issue while running cURL:

$ [curl] 56: Received HTTP code 407 from proxy after CONNECT

and you believe that you have exhaustively removed all of your proxy environment variables i.e.:

  • http_proxy
  • https_proxy
  • all_proxy