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.
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”
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:
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.
Import the Loopback framework into your app. Edit
booksAppDelegate.h and add lines 2 and 7 as shown below:
booksAppDelegate.m to add the code in lines 3 through 11 as shown below:
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:
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.
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:
Define the TableView property by control-dragging into the
ViewController.h file, as illustrated below.
*myTable by control-dragging into
ViewController.m, as illustrated below.
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.
Implement the ‘actionGetBook’ function.
- Define the interfaces for the table.
- Define the
getBooksfunction. Refer to the comments in the code below.
Call getBooks from the actionGetBooks function defined in Step 4.
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.
- 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
- Need performance monitoring, profiling and cluster capabilities for your Node apps? Check out StrongOps!