Answer

How to upload correct image assets on replay server.

Step 1: using the Android Image Capture Tool

The tool will extract and create appropriate folder structure and file formats to support Native Replay. It does the following:

• extract image resources from an Android APK file.
• search & update your XML layout files for image related resources to enhance Replay

• Open terminal (command line)
• Change directories to the folder where the Android Image Capture Tool is located
  • cd <path to Android Image Capture Tool rake file>
• Run the Android Image Capture Tool with
  • rake apk_file_path={YOUR/PROJECT/APK/PATH} res_folder_path={YOUR/PROJECT/RES/PATH}
  • The following is an example:
  • rake apk_file_path=/Users/dancrisan/github/GitHub-Android-SDK/AndroidRelease/CXA/SampleCode/CXA-Android_auto/app/build/outputs/apk/app-debug.apk res_folder_path=/Users/dancrisan/github/GitHub-Android-SDK/AndroidRelease/CXA/SampleCode/CXA-Android_auto/app/src/main/res/
• On the terminal, you will get a question ?Automatically find and update the layout xml files with attributes src, foreground, background? [Y/N]:? Type Y and press Enter.
• You are now done with collecting images, here is how your terminal should look like:

• In your Android Image Capture Tool you now have a folder called ?images?. The content of this folder will have to be added to the images folder that?s on Replay

• Access xml file within Android Studio and then display xml in ?Preview? mode.
• Take screenshot of image displayed in ?Preview? mode.
• Eliminate the background by using Gimp or any image editing software tool.
• Save picture without background as .png
• Add picture to ?images? folder created in step 1

• rename your ?images? folder created in step 1 to ?replayImages? and zip this folder
• on your Replay portal, go to the org and click on ?Manage Accounts?

• click on ?Company Settings?

• Scroll until you see ?Image Package?.

• If timestamp present, click on the timestamp to download all the images folder from the org.
• Unzip the downloaded folder.
• Add the contents of the image folder created in Step 1 (the pictures from the Android app).
• Zip it back and name it imagesReplay.zip
• On the portal, click on ?Edit? at the bottom right corner of the page
• Click on ?Change the file? (close to the timestamp)

• Click ?browse?, select the imagesReplay.zip folder from your machine and click ?upload?.

• Wait until timestamp changes. This is very important; this will show that images are actually uploaded.?
• Only when timestamp changed, click ?Save?.
• Go back to your session, images should display now.

• Paste replay session link in Chrome
• Inspect url of image by using right-click on image and then selecting ?Inspect?.

• Copy url from the image

• Paste it in an URL decoder (https://meyerweb.com/eric/tools/dencoder/ ) and press ?decode? twice.

• You will discover either an md5 (like in the example on top) or the path that the image has on the Replay server (like in the example below)

• This means that in the ?images? folder you uploaded, there should be an md5 (in this case, 9457EE13792FE1124B3CF49025A3861B.png) or a path with a png inside (in this case, res/drawable/ic_cxa_logo.png). Make sure this really happens.

• If the MD5 is not there, make sure it has been created and added to the images folder from step 1.

• If the MD5 wasn?t created by using the Android Image Capture Tool, you can use the Tealeaf Target Simulator

• Open terminal (command line)
• Change directories to the folder where the Tealeaf Target Simulator is located
  • cd <path to Target Simulator>
• Run the Tealeaf Target Simulator with
  • node target_sim.js
• You should get the following:

• Open Android Studio and select ?Open an existing Android Studio project?

• Select your application?s project and press ?OK?

• Open your TealeafBasicConfig.properties
  • replace the PostMessageUrl value with one of the target urls (from the terminal), as shown below:

• Make sure GetImageDataOnScreenLayout=true

• Run your application from Android Studio.
• Navigate between your application?s activities. Every png image of your app is getting extracted. On the terminal, you should now see the following:

• In your Tealeaf Target Simulator directory (where the target_sim.js), there is now a folder called ?images?. All its content has to be added to the images folder that is uploaded on Replay.