Managing Existing Mobile Apps

Adobe Summit 2016 Lab 324: Managing Existing Mobile Apps Adobe Experience Manager Mobile 1

Table of Contents INTRODUCTION 4 GOAL 4 OBJECTIVES 4 MODULE 1 AEM INTRODUCTION 5 LESSON 1 - AEM BASICS 5 OVERVIEW 5 OBJECTIVES 5 EXERCISE 1 SIGN IN TO AEM 5 EXERCISE 2 REVIEW THE AEM INTERFACE 6 EXERCISE 3 THE AEM MOBILE APP CATALOG 7 OUTCOME 7 MODULE 2: AEM MOBILE INTRODUCTION 8 LESSON 1 IMPORT AN EXISTING APP 8 OVERVIEW 8 OBJECTIVES 8 EXERCISE 1 IMPORT AN EXISTING HYBRID APP 8 LESSON 2 VERIFY HYBRID APP 8 OVERVIEW 8 OBJECTIVES 8 EXERCISE 1 LAUNCH VIEWER 9 EXERCISE 2 SEND SCREENSHOT AND EXIT APP 9 LESSON 2 THE AEM MOBILE DASHBOARD 9 OVERVIEW 9 OBJECTIVES 9 EXERCISE 1 EXPLORE THE AEM MOBILE DASHBOARD 10 EXERCISE 2 VIEW AND EDIT APP DETAILS 11 EXERCISE 3 REFRESH VIEWER 11 OUTCOME 11 MODULE 3: MANAGING APP CONTENT 12 LESSON 1 ENABLE AUTHORING 12 OVERVIEW 12 OBJECTIVES 12 EXERCISE 1 INSTALL A CONTENT PACKAGE 12 LESSON 2 AUTHORING CONTENT 13 OVERVIEW 13 OBJECTIVES 13 EXERCISE 1 CREATING A PAGE IN AEM 13 2

EXERCISE 2 AUTHOR A PAGE IN AEM 14 EXERCISE 3- (OPTIONAL) PREVIEW IN MOBILE EMULATOR 15 EXERCISE 4 REUSE EXISTING DATA 16 EXERCISE 5 VERIFY AUTHORED CONTENT 16 OUTCOME 16 LESSON 3 MANAGING UPDATES 17 OVERVIEW 17 OBJECTIVES 17 EXERCISE 1 CREATE AN INITIAL UPDATE 17 EXERCISE 2 STAGE A NEW UPDATE 17 EXERCISE 3 VERIFY STAGED UPDATE 18 OUTCOME 19 MODULE 5: MEASURE APP USAGE 20 LESSON 1 ADD ANALYTICS REPORTING 20 OVERVIEW 20 OBJECTIVES 20 EXERCISE 1 ASSIGN AN ADOBE MOBILE SERVICES CONFIGURATION TO YOUR APP 20 EXERCISE 2 ACTIVATE AN IN-APP MESSAGE (INSTRUCTOR LED) 21 OUTCOME 21 LESSON 2 ADD PUSH NOTIFICATIONS 21 OVERVIEW 21 OBJECTIVES 21 EXERCISE 1 ASSIGN A PUSH NOTIFICATION CONFIGURATION TO YOUR APP (INSTRUCTOR LED) 21 EXERCISE 2 CREATE AND SEND A PUSH NOTIFICATION (INSTRUCTOR LED) 22 SUMMARY 22 3

Introduction Adobe Experience Manager Mobile provides a complete toolset to rapidly build, manage, and deliver mobile apps that integrate with the Adobe Marketing Cloud so you can measure and optimize app performance. Leverage existing content from multiple sources including the easy-to-use authoring environment of AEM and deliver updates without requiring app rebuilds or resubmissions. Integrate with third-party APIs to extend functionality and connect to critical business systems. Use built-in messaging and analytics to communicate with your audience and track user activity and engagement. Goal Use Experience Manager Mobile to quickly import an existing mobile application in order to begin instantly managing its content. Learn the techniques that will allow non-technical users to begin authoring content for an existing mobile application and prepare for updates to be published. Take advantage of existing content in AEM that can be re-used in a mobile delivery channel and learn the simple steps to integrate your mobile apps with the Marketing Cloud. Master the use of the AEM Verify tool throughout the entire app development process. Objectives Launch and review AEM Mobile Import existing mobile application into AEM Mobile Explore the AEM Mobile dashboard Instantly view the existing application in AEM Verify Edit meta data and icon associated with imported application Incrementally enable content to be authored in existing application Re-use existing content in AEM when authoring content for the imported application View authored content in AEM Verify and test staged updates Associate existing application with an Adobe Mobile Services account Send an in-app message to the imported application 4

Module 1 AEM Introduction This module will provide a general introduction to the Adobe Experience Manager interface. Lesson 1 - AEM Basics Overview Adobe Experience Manager helps you organize, create, and manage the delivery of creative assets and other content across your digital marketing channels, including web, mobile, email, communities, and video. Objectives Learn how to log in to AEM Learn the key parts of the easy-to-use AEM interface Access the AEM Mobile app catalog Exercise 1 Sign in to AEM 1. Navigate to the AEM Author sign in page in a browser (http://localhost:4502/) 2. Enter the user name admin 3. Enter the password admin 4. Click Sign In 5

Exercise 2 Review the AEM Interface 1. The AEM Projects view will appear initially after logging in to AEM 2. Navigating between the view paths can be achieved by clicking on the breadcrumb at the top center of each screen. 3. To access all of the AEM capabilities click on 4. Explore the remainder of the AEM user interface in the top left 6

Exercise 3 The AEM Mobile App Catalog The app catalog will display all of your mobile applications and allows new mobile application entries to be created. 1. From the AEM capabilities screen click the Mobile capability to access the AEM Mobile app catalog Outcome Congratulations! You are now familiar with the basics of Adobe Experience Manager interface. 7

Module 2: AEM Mobile Introduction This module will introduce you to Adobe Experience Manager Mobile by importing an existing hybrid application. Lesson 1 Import an Existing App Overview AEM Mobile offers a unified dashboard to not only manage apps created with the product, but to manage existing apps as well. Objectives Upload an existing app Verify the app uploaded successfully Exercise 1 Import an existing hybrid app 1. Navigate to the AEM Mobile app catalog (http://localhost:4502/aem/apps.html/content/mobileapps) 2. Click on Upload App or drag tracker-app.zip from the Desktop lab folder onto the app catalog (~/Desktop/L324) 3. A new card should now appear in the app catalog Lesson 2 Verify Hybrid App Overview The AEM Mobile Verify app provides the ability for both developers and marketers to easily review their hybrid mobile applications. The tight integration with Adobe Experience Manager allows for apps to be instantly viewed along with their associated meta data. The result is a fast and easy way for Cordova apps to be tested and used by others at any stage of development across multiple devices. Objectives Launch the AEM Mobile Verify app View your list of apps Deploy imported app to viewer Capture and send a screenshot to AEM The AEM Mobile Verify app is available in the Apple App Store and Google Play Store. 8

Exercise 1 Launch Viewer 1. Launch the ios Simulator from the dock (ensure the iphone 6 (9.2) simulator is launched) 2. Swipe to find the AEM Verify app and launch it 3. Connect to your local AEM instance a. Server address: localhost:4502 b. Username: admin c. Password: admin 4. Click on the Development tab 5. View the list of apps 6. Select the we.tracker app that was just imported 7. Explore the app details that were extracted from the app 8. Click on the Open button 9. Explore the app (Advanced: try enabling Internet sharing on your lab computer in order to connect using the AEM Mobile Verify app on your on your device to avoid using the simulator) Leave the AEM Verify app running for the remainder of the lab. Exercise 2 Send Screenshot and Exit App 1. Click and hold the AEM Verify screen for more than 5 seconds on the app opened in Exercise 1 to bring up the AEM Verify in-app menu (on an actual device the screen can be tapped with three fingers to bring up the same menu) 2. Select the Send a screenshot item 3. Bring up the in-app menu again and select the Exit your app option Lesson 2 The AEM Mobile Dashboard Overview The AEM Mobile dashboard offers a customizable set of tiles based on the type of app being viewed that provides access to all of an app s management features. Objectives Explore the AEM Mobile Dashboard Explore the App Details tile Change the app icon and description Verify the changes made to the app 9

Exercise 1 Explore the AEM Mobile dashboard 1. Click on the newly created entry in the app catalog to enter its dashboard 2. Explore all the tiles on the hybrid app dashboard a. Manage App: all meta data extracted from the app, icon, screenshots and authentication b. Manage Content: manage all imported and authored content c. Content Release: manage the release of content updates to devices d. Manage Cloud Services: manage connections to a variety of cloud services e. PhoneGap Build: services for building the app and extracting its source 10

Exercise 2 View and edit app details 1. Expand the Manage App tile by clicking in the bottom right corner 2. Select the Screenshots tab to view the screenshot that was previously captured in AEM Verify by clicking on the appropriate screen size button (eg. 4.7 inch for iphone 6) 3. Select the Basic tab 4. Update the app icon to the blue we. logo by choosing an existing asset being managed by AEM 5. Change the app description 6. Click Save 7. Click Close Exercise 3 Refresh viewer 1. Return to the AEM Verify app in the ios Simulator 2. Pull down on the development tab to refresh the app list 3. Select the we.tracker app 4. Verify the app icon and description have changed Outcome Congratulations! You now know how the Mobile Dashboard can be used to access a variety of app management features and how AEM Mobile Verify is a useful tool for viewing hybrid apps being managed by AEM. 11

Module 3: Managing App Content This module will demonstrate how an Author can manage content for an existing mobile application. The content will be managed from creation through editing and finally onto the device as app content updates seamlessly without the need for app store re-submissions. Lesson 1 Enable Authoring Overview The existing mobile application that was imported will need to be associated with AEM page templates, components and designs which will allow new content to be authored. Objectives Install an AEM content package to enable authoring Exercise 1 Install a content package A content package already exists which can be installed into AEM in order to enable authoring. This content package was created using typical AEM development methods. 1. Locate and open the L324 folder on the Desktop 2. Double click the aem-install.command file 3. Return to the AEM Mobile dashboard for the app that was previously imported (http://localhost:4502/libs/mobileapps/admin/content/dashboard.html/content/mobileapps/wehealthcare-tracker/shell) 4. Verify the Manage Content tile now contains an English entry 12

Lesson 2 Authoring Content Overview Adobe Experience Manager helps you organize, create, and manage the delivery of creative assets and other content across your digital marketing channels, including web, mobile, email, communities, and video. Objectives Learn how create a page using templates Learn how edit a page using components and assets Reuse existing content Learn how to preview your page Exercise 1 Creating a page in AEM Enter the Manage Content tile from the AEM Mobile dashboard (http://localhost:4502/libs/mobileapps/admin/content/dashboard/content.html/content/mobileapps/wehealthcare-tracker/shell) Click on English Click on Home Click on Healthy Living Click on the Create button and choose Page Select the News Item page template and click Next Enter a Title: Bringing Science in From the Outdoors Click on Create Click on Open page The AEM page editor will open in a new tab Click on Skip Intro if the intro screen appears in the page editor 13

Exercise 2 Author a page in AEM Author the page that was created during the previous exercise using existing assets and content fragments. 1. Ensure that Edit mode is selected 2. Open the side panel if it isn t already open 3. Change the asset type in the Asset picker from Images to Content Fragments 4. Find the fragment with the title Bringing Science in From the Outdoors and drag it onto the Content Fragment component on the page 5. Click on the content fragment component to bring up the context menu 6. Select the wrench 7. Change the Variation to Tracker and close the dialog 8. Click on the Associated Content icon that appeared after adding the content fragment (this will only show content that has been associated with the selected fragment) 9. Choose one of the associated images and drag it on to the page s Image component 10. Open the Page properties 11. Select the Thumbnail tab 12. Choose a different image and drag it onto the properties dialog 13. Click on the checkmark to accept the properties dialog 14

14. Close the page editor browser tab A new page has now been created for our mobile application that uses existing image assets and content fragments already being managed by AEM. Exercise 3- (Optional) Preview in Mobile Emulator 1. Return to editing a page that was previously created 2. Click on Preview 3. Click the Emulator icon 4. Explore the emulator capabilities to view your content emulating different screen sizes. 15

Exercise 4 Reuse existing data There may be cases when a page doesn t need to be fully authored but only data is required. AEM content can be rendered in any number of formats to satisfy the requirements of the application. In this exercise the page editor will be used to select some existing content, which will be rendered as JSON data when delivered to the mobile application. 1. Navigate to the Manage Content view from the dashboard 2. Click on English 3. Click on Home 4. Hover over Our Doctors to access the quick actions 5. Click on the Edit (pencil) icon to open the page editor 6. Open the Page properties 7. Change the Doctor List path to: /etc/we-healthcare/clients 8. Close the properties dialog An existing page has now been edited to generate a data feed from AEM content, which will be consumed by the mobile application. Exercise 5 Verify authored content 1. Return to the AEM Mobile Verify app and exit any previously deployed apps 2. Pull down the development tab to refresh the app list 3. Select the we.tracker app and click Open 4. Click on Healthy Living Tips once the app loads 5. Click on the news story that was created in AEM 6. Verify the contents of the story are what was authored 7. Click the back arrow in the app to return to the Home screen 8. Click on Find a Doctor 9. Verify the doctor list is using the data delivered from AEM 10. Click on one of the doctors to see a different rendition of the same data Outcome Congratulations! You are now familiar with the basics of authoring content in Adobe Experience Manager. Navigating the AEM authoring user interface Creating pages based on templates Editing pages using components and assets Previewing pages Verifying pages on a mobile device 16

Lesson 3 Managing Updates Overview Marketers can quickly and easily update mobile apps to deliver engaging experiences and up to date content to drive brand engagement and meet business goals all without the need for a developer or app store resubmission. Objectives Create an app update Verify an app update Exercise 1 Create an initial update 1. Locate the Content Release tile on the app dashboard 2. Click on English 3. Create an initial update a. Update Title: initial update b. Update Description: we.tracker initial update 4. Click on Done 5. Click on Close 6. Return to the AEM Verify app in the ios simulator 7. Pull down to refresh from the App List screen 8. The we.tracker app will now also appear under the staging tab 9. Click on the Staging tab in the App List 10. Verify update title 11. Click on we.tracker 12. Verify update description under What s New in the app details 13. Click on Open 14. Verify the app appears the same as before Leave the app running in AEM Verify to complete the next exercise Exercise 2 Stage a new update Staging an update to content allows several updates to be made before publishing them to devices. While updates are staged, AEM Mobile Verify can also be used to verify the update before publishing. 1. Navigate to the Manage Content view from the dashboard 2. Click on English 3. Click on Home 4. Click on Healthy Living 5. Edit the Bringing Science in From the Outdoors page that was previously created 6. Ensure the page editor is in Edit mode 7. Replace the page image by dragging a new one on top of it 17

8. Open the Page properties dialog and change the title of the page Advanced: Create another new page under Healthy Living following the steps form Lesson 2. Exercise 3 Verify staged update 1. Locate the Content Release tile on the app dashboard 2. Click on English 3. Click on Stage Update a. Update Title: healthy living update b. Update Description: <blank> 4. Click on Done 5. Click on Close 6. A new update should appear in the list An update has now been staged and is ready to be verified before being published. 18

1. Navigate to the app home screen in AEM Verify 2. Open the side menu by dragging from the left edge or using the hamburger icon 3. Click on Update 4. Click on Update in the dialog 5. Once the app reloads visit the Healthy Living section to view the changes made to the page Outcome Congratulations! You are now familiar with how an existing mobile application can be updated quickly and easily with AEM Mobile. 19

Module 5: Measure App Usage Adobe Mobile Services provides an easy to use, integrated app analytics and targeting capabilities to help mobile teams understand and improve user engagement. Higher engagement leads to improved consumption and monetization of content through the mobile channel. App-specific reports and visualizations help you understand how frequently people use your app, what paths they take through the app, and if they convert effectively to drive monetization. Furthermore, the integrated workflow between analytics and optimization capabilities makes it easier than ever to take action. Lesson 1 Add Analytics Reporting Overview Add Adobe Mobile Services analytics reporting for your app to the dashboard. Objectives Assign an Adobe Analytics configuration to your app See how your mobile application usage data is made available in Adobe Mobile Services Understand how you can use Adobe Mobile Services data to improve your app Exercise 1 Assign an Adobe Mobile Services configuration to your app An AMS Configuration, summit-labs/we.healthcare Tracker, was pre-configured for your use. 1. Locate the Manage Cloud Services tile on the app dashboard 2. Click on the + button to add a new configuration 3. Click on Adobe Mobile Services 4. Click on Next 5. Select the pre-configured summit-labs/we.healthcare Tracker account 6. Click on Submit 7. Click on Done when the dialog appears 8. Confirm the Analyze Metrics tile appears and starts to load the latest metrics 20

You app has now been integrated and automatically configured with an Adobe Mobile Services account. The metrics tile will report on key analytics metrics. For additional reporting click the at the bottom right of the tile to open Adobe Mobile Services using your Adobe Analytics account. Exercise 2 Activate an in-app message (instructor led) In order to verify Mobile Services has been configured properly the mobile application being managed by AEM will need to be built first and installed onto a device. 1. Log in to Adobe Mobile Services 2. Active an in app message for the we.tracker application 3. Run the we.tracker application on a device 4. Verify an in-app message from AMS appear when the app launches Outcome You are now familiar with Adobe Mobile Services and know how to configure your app to track analytic data and report your app s key analytics in the dashboard. Lesson 2 Add Push Notifications With a deeper understanding of app usage push notifications are an ideal means to drive continued engagement or highlight paths that are used the least. Overview Add an Amazon SNS Connection to the dashboard to allow push notifications to be managed and sent. Objectives Assign a push notification configuration to your app Create and manage push notifications in AEM Mobile Send a push notification to devices from AEM Mobile Exercise 1 Assign a push notification configuration to your app (instructor led) 1. Locate the Manage Cloud Services tile on the app dashboard 2. Click on the + button to add a new configuration 3. Click on Amazon SNS Connection 4. Select the pre-configured AEM Apps Mobile account 5. Click on Submit 6. Click on Done when the dialog appears 7. Confirm the Push Notifications tile appears 21

Exercise 2 Create and send a push notification (instructor led) 1. Locate and open the Push Notifications tile on the app dashboard 2. Click on Create 3. Create a new Push Notification a. Title: Adobe Summit b. Message: Thank you for attending Lab 324. Please complete your survey! 4. Click on Create 5. Click on Open 6. Select the push notification that was created form the list 7. Click on Send Notification 8. Click on Send Notification on the confirmation dialog 9. Verify the notification is delivered to the device Summary Congratulations! You have completed the Adobe Summit 2016 Managing Existing Mobile Apps with Adobe Experience Manager Mobile lab. You are now fully acquainted in managing existing mobile apps using AEM Mobile and you are ready to take control of your organization s mobile experiences! 22