We’re smarter together. Learn from this collection of community knowledge and add your expertise.

How to build your first SAS CI-enabled mobile app

by SAS Employee JimAdams on ‎01-27-2017 04:24 PM - edited on ‎01-29-2017 01:33 PM by Community Manager (985 Views)

Last year at SAS Global Forum I gave a paper called Gathering customer information from a mobile application in SAS Customer Intelligence 360. The idea of the paper was to detail all the reasons you would want to gather usage data from your mobile applications.

 

Since then, we have had several customers who are using our mobile SDK to gather their data and arrange campaigns that will engage their users. They are using usage data as well as Geo Location and Beacon data to engage their customers. They are enticing their customers with anything from coupons for products to pointers to nearby opportunities. How to build a SAS CI mobile app.jpg

 

For this article, I wanted to explain a little bit about how you might go about doing this in your own mobile application. To do this, I have created a project that you can open and follow along. It is attached as a zip file to this article. The project creates an iPhone application. A similar version will be made available for an Android phone in the future.

 

To make full use of this application code, you will need:

 

  • Customer Intelligence 360, so talk to your rep about getting signed up if you don't already have it.
  • A Mac with the latest version of Xcode. This cannot be done on a Windows machine.

This application displays a welcome message. After you have accessed the application a few times, the message will change to indicate that you are a frequent user of the application.

 

This is a toy application, but then, all the best demos are toys.

 

Getting Started

 

1. First start Xcode and create a new project. We will choose the Single View Application:

 

Screen Shot 2017-01-11 at 10.42.54 AM.png

 

I am calling this application “CI360 Reference One” and it is set up to be written in Objective C. You can also choose Swift, but that requires a little bit of set up that we can address in a later article.

 

2. Click Next and save the project. You will be presented with a project that contains an AppDelegate class and one ViewController class. The user interface will be contained in the Main.storyboard file.

 

Let’s create a user interface next.

 

3. Click on Main.storyboard and you will see a blank canvas:

 

Screen Shot 2017-01-11 at 10.49.08 AM.png

 

We are going to create an application that looks like this:

 

Screen Shot 2017-01-11 at 10.50.58 AM.png

 

 

We will do that by dragging a View onto the canvas and stretching it between the margins. I want to make the height to be 128 pixels. I am only doing this because the image I created to display is that high.

 

NOTE: The View control is in the scrollable area on the bottom right. View is pretty far down so scroll until you find it.

 

Screen Shot 2017-01-26 at 1.23.11 PM.png

 

 

4. Now drag it up into the window. For this exercise the size does not have to be exact, just big enough to hold the image:

 

Screen Shot 2017-01-26 at 1.25.40 PM.png

5. This is about all we can do without installing the SASCollector, the CI360 Mobile SDK. For that:

 

a)  Go to CI360 itself and click on Settings.

b) Under General Settings select Manage Mobile Applications.

 

Screen Shot 2017-01-26 at 1.42.12 PM.png

 

Here we will create a new mobile application. I chose the name CI360ReferenceOne. We don’t need to worry about the Certificates and Keys as we are not interested in Push Notifications or In-App Messages for this demonstration. I can cover those in a later article.

 

6. Now we need to download the SDK. To do that:

 

a) Click the Select button in the top right corner and select your application.

b) After selecting, click the download icon. The SASCollector SDK will be downloaded as a zip file to your Downloads directory. Because you are doing this on a Mac, the zip file will be automatically exploded into a directory.

 

7. Open a finder window and navigate to the new Downloads/SASCollector_<applicationName> directory and then into the iOS directory. In there you will find 2 files: SASCollector.zip and SASCollector.plist.

 

8. Double click on SASCollector.zip to create a SASCollector folder. That folder contains 2 entries: SASCollectorBundle.bundle and SASCollector.framework.

 

Screen Shot 2017-01-26 at 1.47.41 PM.png

 

9. Open a new finder window and navigate to your Xcode project. In the folder that contains your .xcodeproj file, create a new folder called Frameworks.

 

10. Drag SASCollectorBundle.bundle and SASCollector.framework into the new Frameworks folder:

 

Screen Shot 2017-01-26 at 1.49.28 PM.png

Screen Shot 2017-01-26 at 1.50.13 PM.png

 

11. Now we want to drag the SASCollector.plist file into the project. You can do this by dropping it right into the XCode window on the project contents pane on the left side. Just drop it right next to the Info.plist file. This will automatically add it to the project so it is available at runtime.

 

12. Now we need to make the SASCollector framework visible to the project. Here's how:

 

a) Select your project target in the left pane.How to make the SASCollector framework visible to the project.png

b) In the center pane, select Build Phases.

c) Expand Link Binary With Libraries and click the + icon. 

d) In the dialog that pops up:

  • Click the Add Other… button.
  • Navigate to the Frameworks folder.
  • Select SASCollector.framework.

13. Next, add the bundle to the project:

 

a) Expand Copy Bundle Resources

b) Click the + icon.

c) In the dialog that pops up, click the Add Other button and navigate to the Frameworks folder and select SASCollectorBundle.bundle.

 

14. Now we should be ready to integrate with Customer Intelligence 360. To access the SASCollector you need to import it into your source code. Here's how:

 

a) Open ViewController.m and add this import statement to the top of the file:

 

#import <SASCollector/SASCollector.h>

 

b) Select the Main.storyboard in the left pane to open it back up.

c) We must change the name of the class that will be used for the View that we dropped in there earlier. Here are the steps: 

  • Select the view and then click on the identity selector icon Screen Shot 2017-01-27 at 10.24.51 AM.png.
  • Change the Class to be SASCollectorUIAdView.
  • Click on the icon with intersecting circles at the top of the screen. This will open the associated source that goes with the storyboard. For us, that with be the ViewController.m file.

d) If a different file is shown, you can:

  • Click at the top of the window to get a menu of files.
  • Choose the one under Automatic.
  • Click to select the View and, while holding down the Control key drag your mouse between the lines that read:
@interface ViewController ()

@end
  • You will be creating an outlet, but you must name it. Name it welcomeSpot.

15. There is one more thing you need to configure on the welcomeSpot. We must set the name that the spot will be known as in Customer Intelligence 360. We must also tell it about the owning host view controller. This is done in the storyboard. Here are the steps:

 

  • Select the Main.storyboard and click on the Welcome Spot in the Host View Controller Scene.
  • Click on the Attributes Inspector Screen Shot 2017-01-27 at 10.25.16 AM.pngin the far-right pane. You will see an entry for SpotID. I used CI360ReferenceOne. NOTE: Remember this value as we will be using it later.
  • Click on the Connections Inspector Screen Shot 2017-01-27 at 10.25.31 AM.png. You will see an Outlet called hostViewController.
  • Click in the open hole and drag to the View Controller item with the yellow icon in the left pane. It should highlight as you get to it, indicating that the connection is valid.

16. Since this is a demo app and you will be using it more than once, let's add a button that will allow us to start over. To do this: 

 

  • Drag a button from the far-right area where you found a View before. The Button is near the top of the list.
  • Drop it anywhere.

17. As you can see from the screen shot at the beginning of the article, I set my button to say “Start over.” We need to add code that will run when the button is pressed. This is done similarly to how we added the outlet called welcomeSpot. This time, when you get to the menu where you named the outlet, do this:

 

  • Change an outlet to an action by clicking on Outlet and change it to Action.
  •  Name the action startOver. This will add a method called startOver to your view controller.

After that, here is what the interface area should look like:

 

@interface ViewController ()
@property (strong, nonatomic) IBOutlet SASCollectorUIAdView *welcomeSpot;
- (IBAction)startOver:(id)sender;
@end

 

18. We are now ready to add some code to finish things off.

 

a) In the ViewController.m file we need to change the viewDidLoad method to refresh the welcomeSpot when we open the application. Change the code to look like this:

 

- (void)viewDidLoad {
   [super viewDidLoad];
   // Do any additional setup after loading the view, typically from a nib.

   [[NSNotificationCenter defaultCenter] 
       addObserverForName:@"UIApplicationWillEnterForegroundNotification" 
	   object:nil queue:nil usingBlock:^(NSNotification *notification){
          dispatch_async(dispatch_get_main_queue(), ^{
             [self.welcomeSpot load];
          });
   }];
}

 

 b) In the startOver method we want to reset things so we can run the demo over and over. This is done by changing our identity. The resetDeviceID method makes the system forget about us so the demo will start over. Change the code to look like this:

 

- (IBAction)startOver:(id)sender {
   [SASCollector resetDeviceId];
   [self.welcomeSpot load];
}

 

Almost there!

 

Now we must tell Customer Intelligence 360 about every time the application is opened. In the future, there will be a different way to do this, but for now, we have to do things the hard way. Take these steps:

 

  • Open AppDelegate.m.
  • Add the SASCollector import statement to the top of the file.

To tell Customer Intelligence 360 that the application has been opened, we will send an event. This event must be sent when the application starts the first time and when it is subsequently reopened.Take these steps:

 

  • Change didFinishLaunchingWithOptions to send the event.
  • In the code below, we are also turning on logging so you can make sure your application is working.  Change the code to the following:

 

- (BOOL)application:(UIApplication *)application 
   didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   // Override point for customization after application launch.
   [SASLogger setLevel:SASLoggerLevelAll];
   [SASCollector addAppEvent:@"CI360ReferenceOneOpen" data:nil];
   return YES; }
  

 

 

  • Change applicationWillEnterForground (run when the application is subsequently brought back to the foreground) to the following:

 

- (void)applicationWillEnterForeground:(UIApplication *)application {
   // Called as part of the transition from the background to the active state; 
   // here you can undo many of the changes made on entering the background.
   [SASCollector addAppEvent:@"CI360ReferenceOneOpen" data:nil];
}

 

Connecting with Customer Intelligence 360

 

Now your application is complete. Let’s finish in Customer Intelligence 360.

 

We have already defined the application in the Settings area. Now we must define the event that we are sending, define the welcomeSpot, and we must define the Task that will change the picture that is displayed after we access the application a few times.

 

I am going to assume that you know something about Customer Intelligence 360 already, so these instructions may seem abbreviated. Do this:

 

  • Create a new Event.
  • Choose Mobile as the Event Type.
  • Choose CI360ReferenceOne as the application associated with the event.

For mobile events, you must specify an Event ID. This is the string that is used in the addAppEvent method in your application. If you look in appDelegate.m above, you will see that the event ID needs to be CI360ReferenceOneOpen.

 

  • Under Orchestration, go ahead and Mark Ready.
  • You will be asked to save the event. I suggest you use the Event ID as the name so it will be easier to find later.

 

Define images in welcomeSpot 

 

We need to have some images defined in the system to display in our welcomeSpot. In the project attached to the article, you will:

 

  • Find two images called CI360ReferenceOneWelcome.pgn and CI360ReferenceOneWelcomeBack.png.
  • Add these images to Customer Intelligence 360 as Assests.

 

Create new Mobile Spot

 

We need to make the welcomeSpot. This is done in Spots:

  

  • Create a new Mobile Spot and associate it with the CI360ReferenceOne application.
  • Specify a Spot ID just like with events. If you remember, we specified the spot ID in the storyboard for the welcomeSpot as CI360ReferenceOne. Use that for the Spot ID.
  • Use the Default Content to show the initial image in our application.
  • Add default content to the spot.
  • Choose CI360ReferenceOneWelcome.
  • Go to Orchestration and mark it Ready.

 

How to swap out the banner image 

 

To make the image change we need to count the number of times CI360ReferenceOneOpen was fired from the application. We will use a Task to do this:

 

  • Create a Mobile Spot task.
  • Associate the task with a spot by choosing CI360ReferenceOne.
  • For the content, choose a Creative instead of a Message.Choose CI360ReferenceOneWelcomeBack.

Under Targeting we want to specify the criteria to be the CI360ReferenceOneOpen event. We also want to change the number of times the event must occur. So:

 

  • Choose at least 5 times in the past day.
  • Now let’s publish everything out. Go to Orchestration and choose Mark Ready and Publish.

That’s it! Once the publish finishes, we can run the application and see the “Welcome to CI360” banner. Close the application and open it a few times (5 or 6) and the banner will change!

 

Screen Shot 2017-01-11 at 10.50.58 AM.pngScreen Shot 2017-01-26 at 4.04.19 PM.png

Attachment
Your turn
Sign In!

Want to write an article? Sign in with your profile.