Filed under Objective-C

Reality TV Show Name Generator App

The Idea

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 Javascript Implementation

In 2013, I created a Javascript version of the app. I was just learning Javascript when I thought of the idea, and it was an easy first project to complete.

Javascript version

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:

Early Objective-C version

Components

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.

Early Recent Items

Early Share & Recent

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 NSUserDefaults.

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.

Design

I wasn't happy with the way the original design looked, so I changed the color palette.

#009762#13BD81#000000#ffffff

Looking better!

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.

Drawer

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.

Custom TV

The last design decision I had to make was how to handle:

  1. Favoriting recent names
  2. 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.

Complete

You can download the iPhone app here. The code is available on Github.

Tagged ,

NSUserDefaults Example with NSMutableArray

I was misinformed that to have information persist between app uses, you had to either use Core Data or a cloud backend. Boy, was I ever wrong. It's so much easier than that!

From NSHipster:

NSHipster's opinion

In this case, we're going to be doing something even easier than the full NSKeyedArchiver. For this blog post, we'll be creating a very simple array example for using NSUserDefaults to persistently store data. We'll be able to add items to and remove items from the array.

  • Start a new Single View Application project.
  • Delete ViewController.h and ViewController.m.
  • Remove the View Controller from the storyboard.
  • Make a new file that is a subclass of UITableViewController. Name it ItemTVC.
  • Drag a Table View Controller into the storyboard and make it the Initial View Controller (in the Attributes inspector). Give it the class ItemTVC. Give the cell the identifier "Cell".
  • Leave ItemTVC.h as it is and work in ItemTVC.m.

In viewDidLoad:

- (void)viewDidLoad {
    [super viewDidLoad];

    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];

    self.array = [[defaults arrayForKey:@"array"] mutableCopy];

}

NSUserDefaults will always return an immutable version of any object you pass it. As a result, we need to use mutableCopy before using the array we've retrieved from NSUserDefaults.

In (IBAction)addItem (storyboard for add item button) or insertNewObject (code for add item button) or similar:

// if you aren't using storyboard, this might be insertNewObject or a similar method instead of an IBAction
- (IBAction)addItem:(id)sender {

    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];

    if ([self.array count] == 0) {
        self.array = [[NSMutableArray alloc] init];
    }

    [self.array addObject:[NSDate date]];
    [defaults setObject:self.array forKey:@"array"];
    [self.tableView reloadData];

}

In cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];

    NSDate *item = self.array[indexPath.row];
    cell.textLabel.text = [item description];

    return cell;
}

This step is optional. If you want to be able to remove items, add this in commitEditingStyle forRowAtIndexPath.

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

    if (editingStyle == UITableViewCellEditingStyleDelete) {

        NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];

        [self.array removeObjectAtIndex:indexPath.row];
        [defaults setObject:self.array forKey:@"array"];
        [self.tableView reloadData];

    }

}

The full code is available on Github.

References

Tagged , , , , , , ,