Planning and Building the Prototype
Before you start to write the first line of code, it’s important to have a mock-up to see what the app looks like, what the user experience is like, what are the features are, and how they are organized. In this chapter, I will show you how to prototype the sample e-commerce iPhone app by using Xcode.
The Apple Store iPhone app uses a UITTabBarController-based user interface (UI) design pattern. This pattern is quite standard and powerful for an e-commerce app; other apps such as Target and EAT24 also use this UI pattern. The good thing about the tab bar interface is that each view controller’s state of each tab is automatically persistent. It means that whenever we leave a screen from one tab and play around with other tabs, when we return back to the tab it will always show the content we just left.
This chapter is largely about planning. I won’t be giving instructions and showing you figures about how you can drag and drop a UIViewController or a UI Control to UIStoryboard, but in some instances, I will reveal the tricks I have used.
This chapter covers the following:
Designing the User Experience
The goal for the sample app that accompanies this book is to present users/customers with an experience that is similar to what they get from the Apple Store iPhone app. The Apple Store app is based on a tabbed design, so you want to use a tapped application template in Xcode. To get started, launch Xcode, and follow these steps:
Figure 2-1. Create a Tabbed Application with Xcode
Figure 2-2. Change Simulated Metrics to iPhone 4-inch
Figure 2-3. Connect the three UINavigationControllers to the TabController
Shop
The root view controller of the Shop NavgationController is the Shop TableViewController. You will use this controller to display the beauty products category.
Figure 2-5. Set three static rows for a UITableView
Figure 2-6. The is the partial user interface of Shop TableViewController
Figure 2-7. Set Identifier for a UITableViewController
Figure 2-8. This is the user interface of Products UITableViewController
Next, you will work on the Products UITableViewController. The view controller will show information about the product, such as the product name and unit price. You can also add search and filter features to it.
Figure 2-9. Use “Subtitle” Style for UITableViewCell
Figure 2-10. Add a UISearchBar to UITableView
Figure 2-11. The is the user interface of FilterViewController
Figure 2-12. The is the user interface of ProductDetailViewController
Figure 2-13 shows the all UIViewControllers for the “Shop” feature.
Figure 2-13. This is the view controllers used in Shop
The root view controller, MyAccountTableViewController, is the place to have all users’ activities, such as the shipping and payment address, the order history, and payment methods. We also use this place to show information about the app, privacy policy, contact information, and app version – just like the Apple Store iPhone app.
For the MyAccuntTableViewController, let make its UITableView the Grouped Style, and set three sections. For each cell, we set it as Static and Basic style. Figure 2-14 illustrates what the view controller looks like.
Figure 2-14. Practical user interface of MyAccountTableViewController
The “Sign Out” cell is to log the user out. When the cell is tapped, a screen is displayed to ask the user to log in again. This will involve some programming so we will cover it later.
First, I will focus on prototyping in the first “Account” section.
Figure 2-15. This is part of the user interface of UserAddressTableViewController
Next, let’s work on the payment methods UI. You technically can’t store a user’s credit card number or CVC numbers, but you can store a credit card’s type such as Visa, Master Card, or American Express; the last four digits; and expiration month and year. Usually a user adds a few credit cards into his account. So you want to use a UITableViewController to show all cards linked to the account.
Figure 2-16. Practical user interface of UserPaymentMethodsTableViewController
Figure 2-17. This is a partial user interface of UserOrderHistoryTableViewController
This is all you need for “MyAccount.” Now you can build the project and run it. Figure 2-18 shows each view controller used in My Account.
Figure 2-18. Here are the My Account view controllers
The root view controller of the BagNavigationController is a UITableViewController. To show what’s in the user’s bag, use the UITableviewController and name it “BagTableViewController” and “Bag” as its title.
In addition, the following requirements need to be met. The user has to be able to check out; the user should be able to change the quantity of an item or remove an item from the bag; and the bag should show the total amount, which needs to change automatically according to an item’s unit price and quantity.
Figure 2-19. View hierarchy of BagTableViewController
Figure 2-20. This is the partial user interface of BagTableViewController
Figure 2-21. The view controllers used in Shopping Bag
Sign Up or Log In
A user-friendly app doesn’t always require a user to create an account from the beginning. It gives a user the chance to understand what the app is about and what value the app can add to the user’s life. Our Beauty & Me is no exception.
For this prototype, ask the user to create an account or log in when one of the following conditions is met. The user taps one of the following:
Let’s create another storyboard to handle the login and sign-up work flow.
Figure 2-22. Create a UIStoryboard file
Figure 2-23. Set the DispatchNavigationController as an initial View Controller
This feature will only work once you have implemented what happens when a user taps the “Log In with Facebook” button. Right now, it won’t do anything.
Figure 2-24. This is a partial user interface of SignupViewController
Figure 2-25. This is a partial user interface of LoginViewController
Figure 2-26 shows the whole LoginSignup.storyboard
Figure 2-26. The view controllers used in LoginSignup.storyboard
Put It All Together
To make our prototype work like the real thing, you need to write a little bit of code to handle cases:
You may wonder whether you can ask a user to register an account with you when he/she just opens the app? Technically, yes, you can, but it’s not a good user experience. A user doesn’t know what the app is and what it can do, and you already ask him or her to register an account? Most likely the user will quit and delete the app.
Use NSUserDefault to save the login/logout status of a customer. When the app just opens, assume the user is not a registered user. Here is the code:
When the user taps “My Account” or “Shopping Bag” tab, show our DispatchViewController. To do this, you need to a little bit more work.
First, In AppDelegate, you need to declare UITabBarContollerDelegate:
UITabBarController *tabBarController = (UITabBarController*)self.window.rootViewController;
tabBarController.delegate = self;
When the user taps a tab other than “My Account” or “Shopping Bag,” don’t ask the user to sign up or log in.
Here is how to implement one of UITabBarControllerDelegates to respond to a tab selected:
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{
UINavigationController *navViewController = (UINavigationController *)viewController;
if (![navViewController.title isEqualToString:@"Shop"]) {
if (!([[NSUserDefaults standardUserDefaults] boolForKey:kIsLoggedInfKey])) {
UIStoryboard *dispatchStoryboard = [UIStoryboard storyboardWithName:@"LoginSignup" bundle:nil];
UINavigationController *navController = (UINavigationController *)[dispatchStoryboard instantiateInitialViewController];
[self.window.rootViewController presentViewController:navController animated:YES completion:nil];
}
}
}
First, check which tap is selected by checking the title of navigation controllers. Then ask whether the user is logged in or not; If not, grab the Dispatch navigation controller by its storyboard identifier, then present it.
In Dispatch view controller, implement two IBActions: A user logs in by using the “Log In with Facebook” feature, or a user cancels the login or sign-up process:
-(IBAction)onFacebookLogin:(id)sender{
[[NSUserDefaults standardUserDefaults] setBool:YES forKey:kIsLoggedInfKey];
[[NSUserDefaults standardUserDefaults] synchronize];
[self dismissViewControllerAnimated:YES completion:nil];
}
Here you simply set the kIsLoggedInKey of NSUserDefaults to Yes then dismiss the Dispatch navigation view controller.
-(IBAction)onCancel:(id)sender{
[self dismissViewControllerAnimated:YES completion:nil];
}
Once the user taps the “Cancel” UIBarButtonItem, we dismiss the Dispatch navigation view controller.
Note A complete implementation can be found in the Chapter 2 source code.
Summary
In this chapter, I cover how to use UIStoryboard to create the prototype for the app used in this book. I have used the Tabbed Application template. Three tabs, namely, “Shop”, “Shopping Bag,” and “My Account” lead to three different main features for the app. I also showed how to set up a sign-up or login UIStoryboard. With some code to fake a signed-in user, I created a prototype of the app.
3.145.179.59