Experience League | Image

Debug mobile apps like a boss! New product for data & experience validation

Table of Contents

Lab Overview

This lab is a quick taste for what Project Griffon can do to relieve you of your mobile implementation pain. Project Griffon is a new product innovation from Adobe that seeks to address data and experience validation use cases. For the purpose of this lab, we will use Project Griffon to:

  • Connect to an app without proxy tools (like Charles, Fiddler, etc.)
  • Inspect and validate mobile app events
  • Work through common data collection issues and how to quickly resolve them

Key Takeaways

  • Discover how Project Griffon can be implemented in an existing mobile application in less than 10 minutes.
  • Learn how Project Griffon can be used to find experience implementation issues and resolve them rapidly.
  • Implement a custom Project Griffon integration.

Prerequisites

  • Computer running macOS v10.13 or newer
  • Web Browser (Chrome/Safari)
  • XCode 10.1 or greater

Lesson 1 - App Environment Setup

This lesson focuses on getting the sample application project installed and running within the iPhone Simulator. The lessons here will all build upon this step, if you already have the application loaded into XCode and running, you can skip this step.

Exercise 1.1 - Setup Sample Project

  1. Download the sample app zip-package: sampleapp.zip.
  2. Unzip the sample application by double clicking the file.
  3. Open the folder named sampleapp.
  4. Open the XCode workspace by double-clicking on the triviaSample.xcworkspace project.

Figure 1: Workspace File

  1. Click the Play button to run the project.

Figure 2: XCode Play Button

  1. Validate that the sample project is functioning by interacting with the application in the simulator.

Figure 3: App Running in Simulator

Lesson 2 - Implement Project Griffon

In this lesson, we will implement the client-side portion of Project Griffon, which will allow us to connect our application to the Project Griffon UI and inspect SDK events and behaviors. In this excercise, and the subsequent exercises in this lab, we will be adding code to the sample application. The places where code needs to be added have been pre-marked with the excercise step so they can easily be found. Feel free to cut and paste the code, but ensure that each code snippet is pasted into the application between the begin and end lines.

/*************** Begin L782 Exercise 1.1 ***************/

/*************** End L782 Exercise 1.1 *****************/

Exercise 2.1 - Include required headers

In this exercise, we will include the two header files necessary to use Project Griffon in an application.

  1. Open the file AppDelegate.m within the Xcode Workspace.

Figure 4: AppDelegate.m Location

  1. Copy and paste the #import statement below into AppDelegate.m at the appropriate marker (Exercise 2.1).
#import "ACPGriffonBridge.h"

Exercise 2.2 - Initialize the Griffon Bridge for AEP SDKs

In this exercise, we we will initialize the Griffon Bridge Extension for the AEP SDKs - This will allow the inspection and validation of the AEP SDK within your application.

  1. Copy and paste the register statement below into AppDelegate.m at the appropriate marker (Exercise 2.2).
[ACPGriffonBridge registerExtension];

Exercise 2.3 - Implement Project Griffon

In this exercise, we will implement the passing of deep link URLs into Project Griffon, which will allow it to function within your application.

  1. Copy and paste the startSession statement below into AppDelegate.m at the appropriate marker (Exercise 2.3).
[ACPGriffonBridge startSession:url];

Exercise 2.4 - Confirm Project Griffon Implementation

In this exercise, we will confirm that the previous implementation steps have been completed and that Project Griffon is now functioning within the application.

  1. Click the Play button to run the project.
  2. Validate that Project Griffon is running by checking the log statements for the application - they should include the phrase "[ACPGriffonBridge]".

Figure 5: Xcode Log statements

  1. Leave the application running in the simulator while you move on to lesson 3.

Lesson 3 - The Project Griffon UI

In this lesson, we will get our first look at the Project Griffon UI, as well as get the application and Project Griffon UI connected to each other.

Exercise 3.1 - Logging In

  1. Open the Chrome browser and navigate to https://griffon.adobe.com .

  2. Login to the Web UI using the provided marketing cloud credentials.

    Figure 6: Login Screen

Exercise 3.2 - Creating a new session

  1. Click the Create Session button in the upper right-hand corner of the Project Griffon UI.

    Figure 7: New Session

  2. Click the Start button in the resulting wizard.

    Figure 8: Start Wizard

  3. Enter a session name that is unique to you. You can use your name, or you can use the unique identifier provided with your login information (this is to avoid confusion within the lab, as all attendees will be sharing the same company account).

    Figure 9: Name Session

  4. Enter the base deeplink definition below in the Base URL section. The deeplink will be used to launch the app from a URL and initiate the Project Griffon session.

grifflab://default

Figure 10: Deeplink Definition

  1. Click Next button (but remain on the resulting screen).

Exercise 3.3 - Connecting the device (in this case, the iOS Simulator) to Project Griffon

  1. Click on the Copy URL button to copy the application deep link for the session we created in the previous exercise. We will use this link to launch the sample application and initiate the Project Griffon session.

    Figure 11: Copy Deeplink

This step is only necessary when connecting to an application running in the simulator. When testing on a device you can just scan the QR Code to launch the deeplink automatically.

  1. Switch back to the simulator, and open the Safari browser. If the sample application is still running, you can get back to the main iPhone screen by pressing CMD-Shift-H, or using the Hardware | Home menu item.

    Figure 12: Launch Safari

  2. Paste the copied deeplink into the URL portion of the Safari browser and hit enter.

    Figure 13: Paste Deeplink

  3. Confirm that you want to open the sample application.

    Figure 14: Confirm App Launch

  4. When the application launches you should see the Connect to Griffon pin-entry screen.

    Figure 15: Pin Entry

  5. Enter the pin code from the Project Griffon UI (located under the QR Code in the Create Session Dialog) and press Connect (note: the Connect button will not appear until a 4 digit pin code has been entered).

  6. Verify that the device connected by checking the UI as well finding the Project Griffon icon overlayed on the sample application.

    Figure 16: Verify Griffon Connection

Lesson 4 - Investigate and fix a data quality issue

In this lesson, we'll learn how to inspect Adobe Experience Platform events as they flow through Project Griffon, and maybe even find a bug or two.

Exercise 4.1 - Get familiar with the data

  1. Browse through the sample application, and watch the events appear within Project Griffon.

    Figure 17: Look at data

Exercise 4.2 - Find the bug

  1. We've noticed in our data that there's some weird action names coming in. The tracking for "New Game" seems to read "Newwwwwwwwwwwwwwwww Game"... Maybe a developer fell asleep on their keyboard?

  2. Try clicking the Game button(on the main screen of the sample app) and inspecting the data it generates within Project Griffon.

Exercise 4.3 - Fix the bug

  1. Switch to Xcode and select the Find | Find in Workspace menu item (or CMD-SHIFT-F).

    Figure 18: Find the problem

  2. Search for the incorrect string, you can either cut and paste this from the Project Griffon UI, or simply type in 5 or 6 'w's.

    Figure 19: Find the problem(cont)

  3. Fix the code to read the correct string (or change it to something better if you want).

Lesson 5 - Custom Project Griffon Integration

What if we wanted to use Project Griffon to track some of our application functionality, purely for debugging and verification reasons? We can! In this lesson we'll see how easy it is.

Exercise 5.1 - Implement a custom Project Griffon Event

  1. Open the file GameViewController.m within the Xcode Workspace.

    Figure 20: Open GameViewController.m

  2. Copy and paste the timer start statement below into GameViewController.m at the appropriate marker (Exercise 5.1-1).

    CFAbsoluteTime downloadStartTime = CFAbsoluteTimeGetCurrent();
  1. Copy and paste the timer end statement blow into GameViewController.m at the appropriate marker (Exercise 5.1-2).
        CFAbsoluteTime totalDownloadTime = CFAbsoluteTimeGetCurrent() - downloadStartTime;
        ACPGriffonEvent* griffonDownloadEvent = [[ACPGriffonEvent alloc] initWithVendor:@"com.summit.lab"
                                                                                   type:@"download info"
                                                                                payload:@{
                                                                                    @"time" : @(totalDownloadTime),
                                                                                    @"size" : @(data.length)
                                                                                }];
        [ACPGriffon sendEvent: griffonDownloadEvent];
  1. Run the sample application by clicking the play button.

    Figure 2: XCode Play Button

  2. Start a new game to trigger our new Griffon Event.

  3. In the Project Griffon UI, validate that your new event "download info" comes through, and see how long the download took.