In this two-part tutorial we’ll be creating an iOS app that connects to a LoopBack API server to perform create, read, update, and delete (CRUD) operations. In Part One we’ll show you how to fetch data stored in an in-memory data source. Part Two will explain how to connect various interface elements to the iOS app.

Prerequisites

Before starting this tutorial:

  • Install Apple XCode version 5 or later.
  • Follow the Getting Started instructions to install the StrongLoop command-line tool, slc.
  • Download and unzip the LoopBack iOS SDK
  • Create the LoopBack “Books” application

    Follow these steps to create a simple LoopBack Node application using the StrongLoop command-line tool, slc:

    Step 1: Create a new application called “books”

    $ slc lb project books
    

    Step 2: Follow the instructions in Create a LoopBack application to create a model called “book” with the default properties. Follow the instructions in the link to the section “Defining a model manually”.

    Step 3: Run the app and load this URL in your browser to view the API explorer: http://localhost:3000/explorer.

    Step 4: Add a few books to the app by running a POST request through the API Explorer. The format of JSON for the POST request is as follows:

    {"title" : "The Godfather", 
    "author" : "Mario Puzo", 
    "genre" : "Fiction", 
    "totalPages" : "1000", 
    "description" : "Classic novel of La Cosa Nostra"}
    

    Create the iOS app

    Follow these steps to create an iOS single view application:

    Step 1:  In Xcode, choose File > New > Project > IOS Application > Single View Application.

    Step 2: Name the project “Books” (or choose another name if you prefer).  The instructions below assume the project is named “Books;” if you use a different name, then some files will be named different accordingly.

    Step 3: Select iPhone as Device. Select location and create project.  At this point, you should have a project created in Xcode with a bunch of default files.

    Step 4: Add Loopback to your application:

    From the LoopBack iOS SDK, drag Loopback.Framework to the Frameworks directory in your application.

    AddLoopback

    Import the Loopback framework into your app. Edit booksAppDelegate.h and add lines 2 and 7 as shown below:

    #import 
    #import 
    
    @interface booksAppDelegate : UIResponder 
    
    @property (strong, nonatomic) UIWindow *window;
    + ( LBRESTAdapter *) adapter;
    @end
    

    Edit booksAppDelegate.m to add the code in lines 3 through 11 as shown below:

    #import "booksAppDelegate.h"
    @implementation booksAppDelegate
    static LBRESTAdapter * _adapter = nil;
    + (LBRESTAdapter *) adapter
    {
        if ( !_adapter)
            _adapter = [LBRESTAdapter adapterWithURL:[NSURL URLWithString:@"http://localhost:3000/api/"]];
        return _adapter;
    }
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
    ...
    

    Create the first screen for the application. Click on Main.storyboard in the File Navigator to see an empty View Controller. Name this View Controller “Books Collection” by double clicking on it or adding a name in the Title field, shown highlighted in the following figure:

    SNP-1

    Design the Books Collection Screen. Click on the box icon to list the Object Library items and drag a Button from the selection panel to the View Controller, near the bottom and centered horizontally. Change the Title field of the button from “Button” to “Refresh.”

    Select and drag a Table View to the View Controller. Add a Table View Cell to the Table View.  Click on the Table View Cell and enter “BookCell” as the Identifier. You will use this later. The View Controller should look like the screenshot below. Make sure the file hierarchy in the second panel is same as the screenshot.

    Screen1

    Connect the elements in the screen with the View Controller class: Select the Refresh button in your View Controller, hold Control and drag it into the ViewController.m right before @end. Name it “actionGetBooks” and click Connect, as shown below.  This will insert code that looks like this:

    - (IBAction)actionGetBooks:(id)sender {
    }
    

    SNP-3

    Define the TableView property by control-dragging into the ViewController.h file, as illustrated below.

    SNP-4

    Define *myTable by control-dragging into ViewController.m, as illustrated below.

    myTable

    Set outlets for the TableView by control-dragging them to the View Controller.

    In the second pane, right-click on Table View. Under Outlets, click on dataSource and drag it to the Books View Controller. Click on delegate and also drag it to the Books View Controller.

    .View Controller

    Implement the ‘actionGetBook’ function.

    • Import AppDelegate.h in ViewController.m.
    • Define the interfaces for the table.
    • Define the getBooks function. Refer to the comments in the code below.

    booksViewController.h

    #import UIKit/UIKit.h
    #import "booksAppDelegate.h"
    @interface ViewController : UIViewController 
    @property (weak, nonatomic) IBOutlet UITableView *tableView;
    @end
    

    booksViewController.rm

    #import "booksViewController.h"
    #import "booksAppDelegate.h"
    #define prototypeName @"books"
    
    @interface booksViewController ()
    @property (weak, nonatomic) IBOutlet UITableView * myTable;
    @property (strong, nonatomic) NSArray *tableData;
    @end
    
    @implementation booksViewController
    
    ...
    - (NSArray *) tableData
    {
        if (!_tableData)_tableData = [[NSArray alloc] init];
        return _tableData;
    }
    - (void) getBooks
    {
        //Error Block
        void (^loadErrorBlock)(NSError *) = ^(NSError *error){
            NSLog(@"Error on load %@", error.description);
        };
        void (^loadSuccessBlock)(NSArray *) = ^(NSArray *models){
            NSLog(@"Success count %d", models.count);
            self.tableData = models;
            [self.myTable reloadData];
        };
        //This line gets the Loopback model "book" through the adapter defined in AppDelegate
        LBModelRepository *allbooks = [[booksAppDelegate adapter] repositoryWithModelName:prototypeName];
        //Logic - Get all books. If connection fails, load the error block, if it passes, call the success block and pass allbooks to it.
        [allbooks allWithSuccess:loadSuccessBlock  failure:loadErrorBlock];
    };
    
    - (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return [self.tableData count];
    }
    
    // To display data in the table.
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString *simpleTableIdentifier = @"BookCell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
        }
        if (  [ [[self.tableData objectAtIndex:indexPath.row] class] isSubclassOfClass:[LBModel class]])
        {
            LBModel *model = (LBModel *)[self.tableData objectAtIndex:indexPath.row];
            cell.textLabel.text = [[NSString alloc] initWithFormat:@"%@ by %@",
                                   [model objectForKeyedSubscript:@"title"], [model objectForKeyedSubscript:@"author"]];
            //        cell.imageView.image = [UIImage imageNamed:@"button.png"];
        }
        return cell;
    }
    ...
    

    Call getBooks from the actionGetBooks function defined in Step 4.

    - (IBAction)actionGetBooks:(id)sender {
        [self getBooks]; 
    }
    

    At this point you should be able to build your app and get the list of books. Build the app and run it on a simulator. Click Refresh and you should be able to see the list of books.

    List of books

    What’s next?

  • Continue to “How-to Build CRUD Enabled iOS Apps with the LoopBack API Server – Part 2”
  • Download the server side code
  • Download the iOS client application