June 19, 2015 | Written by: Roger Snook
Share this post:
Does anyone care if their mobile app crashes? Mobile is everywhere and unfortunately so are app crashes! Sure it’s frustrating, but even more alarming is that the reputation and health of a business can blossom or crumble on the quality of its mobile channel. As people on the go, we expect mobile apps to be:
- Slick, quick, and easy to use
- Have the features we need and function properly
- Be stable, secure and elegant.
In this three-part tutorial you will see how IBM MobileFirst Quality Assurance (MQA) helps you deliver higher-quality mobile apps sooner, and detect and respond to mobile app issues faster.
- In Part 1, you will learn how easily developers can add MQA to an existing (or new) mobile app and how easily testers can report issues. We estimate 10-15 minutes saved per bug report!
- In Part 2, you will see how easily your development team can review and act upon those issues to make the app better.
- In Part 3, you will see how to quickly harness public appstore feedback and act upon those issues before they become a larger social media problem.
This tutorial revolves around IBM MobileFirst Quality Assurance (MQA), an offering designed to help businesses continually monitor and improve both the functional and subjective quality of their mobile apps. Choose how you prefer to work: MQA is available in both on-premise and cloud-hosted editions. MQA operates as a service with a web browser user interface. It comes with an SDK library or framework that can be easily integrated into a mobile app, enabling that app to send quality metrics in real time back to the MQA service.
The MQA service also routinely scans public app stores, analyzing review comments and ratings to build up an assessment of how people feel about an app. In response to certain events like crashes and bug reports coming from mobile apps, MQA can also automatically open work items in an IBM Rational Team Concert or IBM DevOps Services project. This diagram shows these relationships:
Part 1: Let’s Get Started!
You won’t actually develop a mobile app from scratch, rather you will reuse a mobile app called BlueList that we’ve prepared for you. The source code for the app is located in a Git repository under a public IBM DevOps Services project.
- Define a new remote repository in Xcode and point to the Git URL for this project:
https://hub.jazz.net/git/leighw/Native_iOS_ToDoList (Xcode > Source Control > Check Out
- Choose the master branch to check out. The iOS app source will be downloaded to your Mac and Xcode will open to that project.
- Select Xcode > Product > Run. Alternatively, you can click on the Play button (triangle pointer) in the upper left of the Xcode Toolbar:
- Xcode will quickly build the project and you will see a Build Succeeded notification briefly appear (and then disappear). Xcode will then launch the iOS Simulator tool automatically and it may take a few seconds for this tool to start up and run the BlueList mobile app:
- Play with the app. Use the plus sign (+) in the upper right of the app to add some items to the “To Do” list such as: “Buy bananas” or “Buy apples” or “Buy soup”. Try adding an item named “crash”. Did the app survive? Check the debugger, it may be stopped at the line of code that caused the problem.
- Now Quit the Xcode tool (command-Q key combination, or select Xcode > Quit Xcode from the main menu). If the iOS Simulator is still running, accept the suggestion to stop the running tasks when existing Xcode.
You have just loaded the BlueList native iOS mobile app project from a Git repository on IBM DevOps Services into Apple Xcode, and run it in an iOS Simulator. It’s a fine app to be sure, but it isn’t perfect. If you tried adding some sort of “crash” to its list, then you watched the app die a horrible death. Unfortunately, the project team that built the app may not know about the bug.
If only the app could tell the project team that it crashed…
MQA to the Rescue!
Next, you will download the MQA SDK library for iOS into Xcode, add the library as a dependency to the BlueList app, and edit a couple of key source files of the mobile app to integrate it with MQA.
- Open your browser to MQA’s very helpful Knowledge Center, where you can learn lots more about the product. (HINT: bookmark this!)
- Click Download the libraries:
- Click iOS SDKs for download:
- Click Latest SDK for iOS to download the iOS SDK. Click the OK button of the Save dialog and the file (Q4M.framework-2.2.2.zip) will automatically be downloaded to the Downloads folder on your machine.
Note that the exact version number of the MQA SDK may be higher than 2.2.2 which was the current level at the time that this tutorial was produced. Now that you’ve downloaded the MQA SDK library, let’s add it to your project:
- Click on the Finder icon in the Mac OS Dock to open a window displaying files and folders. Click on the Downloads folder in the Favorites list for Finder.
- Double click on the
Q4M.framework-2.2.2.zip file shown in the Downloads folder. The Mac OS Archive Utility will automatically expand the zip file.
- Click on the Xcode icon in the Mac OS Dock to start up Xcode again. Select the BlueList project. Click on the left most “folder” icon in the Navigator area on the left of the Xcode window. Click on the “twistie” labeled Frameworks in the Navigator area on the left hand side of Xcode so that the frameworks (libraries) used in the app are visible (if you don’t see the Navigator, select Xcode > View > Navigators > Show Project Navigator).
- Drag the
Q4M.framework folder from the Finder window to the Frameworks section of Xcode and drop it there so that the MQA library is added to your project. You should see a plus (+) hint near the file when it is dragged over the correct location.
- A window will open in Xcode with options for handling the files to be added. Check the box for “Copy items if needed” and click on the Finish button.
- Verify that the MQA SDK (Q4M.framework) is now added to the list of frameworks in your Xcode project Navigator area. If not, repeat the above step.
- The MQA SDK has dependencies on additional common iOS frameworks, so now you will need to add those other frameworks to your project too. Click on the BlueList top level Target in the Navigator area of Xcode and then click on the General link in the Editor area in the middle of the Xcode Workspace Window. Scroll down in that editor to find the Linked Frameworks and Libraries section and click on the Add (+) button.
- A dialog window will appear for choosing the frameworks to add to your project. Use this dialog to locate and add the following additional frameworks.
- Use the Add button in the dialog box (not the Add Other…) and add each of the required frameworks. Once complete, you will see all of the frameworks in the list for the project in the Navigator area of Xcode.
Add MQA code elements to your app
Normally you would add the code in this section to your app “from scratch” – in other words there would be no pre-existing MQA code in your app. For simplicity, we have already added the MQA code into the app but have commented it out. Now you will uncomment that code so that you can see the few places where your app code has to change in order to include MQA.
- Click on the BlueList > Supporting Files twistie in the Navigator area to reveal the BlueList-Prefix.pch file. Click on that file and its contents appear in the Editor area in the middle of Xcode.
- Notice the commented out line of code:
// #import <Q4M-Pre-Production/MQALogger.h>.
Replace this line of code with:
- Click on the delegate twistie in the Navigator area to reveal the two source files for the main entry point of the mobile app. Click on the
IBM_AppDelegate.m file to see its contents in the Editor area in the middle of the Xcode window.
- Replace the green “#import” line of code at the top of the IBM_AppDelegate.m file with
#import <Q4M/MQALogger.h>. And then scroll down in the file (very near to the end) to locate the following commented lines of code:
[code]// Starts a quality assurance session using a dummy key and QA mode
// [MQALogger startNewSessionWithApplicationKey:@"65b595fd332a8b68809363ddd381cb8221a361fc"];
// Enables the quality assurance application crash reporting
- Uncomment the second and fourth statements referencing
The MQA key
Let’s take the mystery out of this 40 digit hexadecimal value MQA AppKey string.
The MQA service uses this key to identify the apps from which various sessions and reports are arriving. We used a dummy key inside IBM_AppDelegate.m but here’s how you get a key for yourself:
- Open your web browser to the Bluemix home page.
Attention: If you don’t already have access to Bluemix, start your 30 day free trial by clicking the “SIGN UP” button. You’ll need this for the rest this entire tutorial.
Note: The location of the LOG IN (or SIGN UP) button depends on the size of the browser window. In smaller windows, it is located in a drop down menu in the upper left corner of the Bluemix landing page. In larger windows, it is visible within a menu bar in the upper right area of the Bluemix landing page.
- The first page you will see after logging in is the Bluemix dashboard, where all of the back-end applications and services for this account are visible. Bluemix is the new innovation platform, realizing DevOps by actually bringing together development and operational runtimes in a single cloud platform.
- In the Bluemix dashboard, under SERVICES, select “ADD A SERVICE OR API”.
Note: At this time, we’re only employing the MQA SERVICE on Bluemix and therefore are not “Creating an APP” in Bluemix. On your own, feel free to browse the app templates and create your own mobile app to which you may add the MQA SERVICE.
- Browse the entire Bluemix catalog, as there are many pre-built and tested services you can reuse versus build from scratch! For this tutorial find and select the Mobile Qualty Assurance:
- After reviewing the terms of the MQA service which gives you one application usage for free, make sure you leave the service “unbound” as we’re only targeting the service for this tutorial. Then select “CREATE”.
- Bluemix gives you an arbitrary suffix to your MQA service shown on the “Getting Started Help” page. Here, simply select the blue PLUS “New MQA App” button:
- Name your app “ToDoList” (or something else if you prefer):
- Now let’s add the iOS platform:
- Once we add the iOS platform, you should see the following panel dashboard:
- Click the gear shaped icon at the right side of the grey iOS banner, then click Show App Key.
- Voila! Copy this key into the recently uncommented line in IBM_AppDelegate.m.
- Test that your code changes are correct by performing another build of the mobile app – either by selecting Xcode > Product > Build or by entering the command-B key combination. You should see a Build Succeeded notification briefly appear in Xcode and then fade away.
You have just edited a couple of BlueList source files in order to instrument the mobile app with MQA. First, you added the MQA SDK framework to the project, along with some additional frameworks on which MQA depends. Second, you added (uncommented) some code for the app to start an MQA session, and to send log messages to the MQA server. As you can see, instrumenting a mobile app with MQA is pretty straightforward.
Time to run the app again and see what’s different…
Test the app
Now you’ll play the role of a tester. You will run the app that you just finished instrumenting with MQA, experiment with submitting feedback and bug reports, then trip over a problem that makes the app crash.
- From the Xcode main menu, select Xcode > Product > Run. Wait a few moments for the iOS Simulator to start.
- After a few moments, the BlueList mobile app appears in the simulator, but you should see some activity in the app’s user interface within the simulator that is different than the last time you ran the app, including a new MQA initialization screen. These messages show that MQA is activating itself within the app, but they also provide a way for you to identify who you are when you submit feedback and bug reports.
- IF available, click on the your name in the MQA tester list. The MQA initialization dialog will disappear and you will see the normal BlueList starting page. If you see a dialog box saying that your app version is out of date, click on “No, thanks” to dismiss the dialog without installing a different version.
Submit some feedback
Suppose you don’t like the app’s background color. Let’s submit some feedback!
- Select the iOS Simulator > Hardware > Shake Gesture menu item
- A view appears in the app with options to REPORT A BUG or GIVE FEEDBACK.
- Touch (click) GIVE FEEDBACK.
- After a moment, the Give Feedback view opens.
- Enter some text in the Enter feedback field, such as “Please let me customize the background color.”
- In the Star Rating area, touch (click) on one of the five stars to indicate a star rating. TIP: This is a great way to collect feedback privately that’s not visible in the public AppStore.
- Touch (click) Send. Control returns to the BlueList app.
Submit a bug
Suppose you found a bug. Let’s quickly submit a bug report!
- Select the iOS Simulator > Hardware > Shake Gesture item from the menu.
- A view appears with options to REPORT A BUG or GIVE FEEDBACK.
- Touch (click) REPORT A BUG.
- After a moment, the Report Problem view opens.
- Enter some text in the Describe a problem here field, such as “I no longer want to do any of this.“
- In the lower left area of the view is a small screenshot of the app, labeled EDIT. Touch (click) the screenshot.
- After a moment, the Edit a Screenshot view opens.
- Double click on the image to hide the editor controls, and then draw (click, hold, and drag with the mouse) a circle around the item list.
- Suppose you would prefer not to share that you apparently forgot about one of the items in the list. Double click on the Simulator to bring back the editor controls and touch (click) the button with the icon that looks like a water droplet.
- Draw (click, hold, and drag with the mouse) over top of the “I forgot” text in the list to make it illegible.
- Touch (click) Done in the upper right corner of the view. Control returns to the Report Problem view.
- Touch (click) Send in the upper right corner of the view to submit the bug report. Control returns to the BlueList app.
Make it crash
Of course you can also simulate a crash and capture report information.
- In the BlueList app, click the Add (+) button to add the item, then enter “crash” as an item and click on Save.
- The app crashes most unpleasantly and, if you were not running an iOS Simulator connected to Xcode, you would have no indication of what happened. The app would simply disappear!
- Stop the remnants of the crashed app by clicking on the Stop control (box) in the Xcode Toolbar (right next to the Start control).
- Run the app one more time by clicking on the Start control and observing that the app continues to build and run in the iOS Simulator.
- Quit the iOS Simulator tool and also the Xcode development tool.
To be continued…
As a tester, you’ve just had a less than ideal experience with this app. It has bugs, including a tendency to crash. There are features you wish the app had. You have just used some of the capabilities of MQA to report on these issues, a whole lot faster than gathering the information and filling out a detailed bug report. (In fact, I’ve heard horror stories of test teams who don’t report some bugs because it takes “too long” to fill out the form when they have so little time to test!)
In Part 2 of this tutorial, get ready to doff your tester hat, don your project lead hat, and experience MQA and those issues you reported from the other side of the fence…
Co-authored by Leigh Williamson