I had come across webpages like They Fight Crime and the Fantasy Name Generator, so creating a random reality TV show name generator app was not at all an original idea.
When I was flipping through channels one day and saw an endless stream of a naming convention, inspiration struck. I noticed that most reality shows have a name that's just an adjective and a noun: American Idol, Hell's Kitchen, Pawn Stars, Top Chef, just to name a few. This seemed like a really simple concept to implement while learning a new language. Really, it's the simplest unique app I've thought of.
The Objective-C Implementation
When I started learning Objective-C in December, I followed the Crystal Ball app tutorial on Team Treehouse, and after that, I had enough knowledge to build the most simple version of the Reality TV app.
Basically, all the simplest version needs to do is:
- Have two arrays
- Pick a random item from the first array
- Pick a random item from the second array
- Concatenate them
- Display the name
- Have a straightforward way to refresh and get a new random name
Here's a screenshot of an early version:
As I advanced in Objective-C, I wanted to add more features. The first thing I added was a "share" button. This was surprisingly simple.
Once I started taking the Mobile Engineering class at The Iron Yard, I began to add more features. I wanted to add a "recent names" list and a "favorites" list and to have a way for people to add a name to their favorites.
Once we learned about TableViewControllers, adding the recent names list was fairly straightforward.
What was more complicated was adding a "favorites" list. I wanted to have the favorites persist between app uses. This is something we haven't covered yet in class, but I got a tip from John–one of our TAs–and I managed to figure out how to implement it using
Now that all of the functionality worked, what was left was the design. I needed icons for favoriting and sharing, and I wanted to make a custom TV design instead of using one someone else made since it was such a central part of the app.
I wasn't happy with the way the original design looked, so I changed the color palette.
One thing I'd had no intention of making was a sliding drawer that would give you more options. I didn't really even think of this as being an option! But then in class we made a drawer for one of our apps, and I realized it would be the perfect way to handle all the buttons I wanted to have (favorite, favorites, recent, share). I designed a drawer and added it to the app.
For the icons in the drawer (favorite, menu, and share) and the refresh icon, I used Font Awesome and Ionicons, which are both free-to-use icon packages.
For the TV image, I wanted to create something custom, since it was so prominently displayed in the app. I played around some in Photoshop. Even though I can't draw at all, I can sure use a rectangle tool, and I think I managed to come up with something that looks acceptable. You can see my design on Dribbble. I also used this TV as my app icon, but I gave the app version wider antennae to make them easier to see in the smaller size.
I've been learning Sketch, but I've really only used it for UI mockups, not drawing things. Hopefully soon I'll be able to use a more appropriate tool like Sketch or Illustrator instead of using Photoshop for this kind of work, but for the moment, I'm still more comfortable in Photoshop.
The last design decision I had to make was how to handle:
- Favoriting recent names
- Sharing recent names and favorites
Originally, I had a share icon on the side of each cell on the recent items list. But once I added favorites, I would have needed to have two icons in each cell, one for sharing and one for favoriting. I decided this would be too cluttered, so I decided to return users to the main view when they tap on a name in a list. From there, they can do anything they would have been able to do when the name first appeared. This setup has the additional benefit of allowing people to make screenshots of items from their recent items list or favorites list.
Once the app is available on the store, you'll be able to download it here. The code is available on Github.