App Preview App Preview

App Preview

Eric Soelzer Eric Soelzer

Introduction

The Preview button allows you to run and test your Airkit Apps. With App Preview, you can inspect variables, journey events, and much more. App Preview fully emulates your Application, allowing you to test every channel, every interaction, and every pathway your user can take. Looking under the hood can help ensure that your app is meeting all of your quality and testing standards.

Views

There are many different views in this powerful App Preview.

Device Preview

debugger1.png

The fundamental area of App Preview is called the Device Preview. The Device Preview shows you a representation of what your users will see as they go through a Journey. This allows you to get a reasonable approximation of the experience your app will Present. A picker at the top of the Viewer allows you change between different frames. Along with many device sizes you can also select Full Screen which will approximate the experience a desktop user would experience.

Within the Device Preview there are selectors at the bottom for each of the different channels. Currently Airkit Supports Voice, Text, and Web Channels. Because Journey's have consistent state across channels, you can switch which channel you are viewing and the state will be preserved across the other channels.

debugger2.png

The Device Preview is interactive. Using the controls in the view you can interact with your app. Events will trigger as you fire them with your actions.

API Tool

The API Tool can be found next to the Device Tab in the same viewer as the Device Preview. From within the API tab you can simulate events on your app via exposed HTTP Events. See Connection Builder to find more information on how to create API events that can be triggered through this view.

debugger3.png

Webhooks

The Webhooks tab can be found next to the API Tool and is used to simulate web hooks in the debugger. A webhook is a subscription service, for example if the status on a lead were updated. You can send data to your app to simulate this state change on an external server.

debugger4.png

Viewers

The double chevron at the top of the left pane will expand the right side viewers. The right side contains the Event Log Viewer on top and the State Viewer on bottom. These viewers show details about the process of the journey of the app.

Event Log Viewer

The Event Log Viewer is a chronological list of all the events that occur during the execution of your app. Each line represents an event in the app. A line may contain an expansion toggle to indicate that the event is really a combination of other steps. Lines may also contain an icon indicating the type of event. Every line will contain an event description and a time stamp. Selecting an event will set it's state in the State Viewer below.

debugger1__1_.png

State Viewer

In the state viewer you can see the state of the Application at the time of a specific event. Different types of Events will have different types of state. The State Viewer has three different tabs. One for the change in state for the current selected action from the previous called Diff. The Current tab will show you the state within the current context while the Entire tab will show you the entire application state at the time of the event. Further understanding of state is beyond the scope of this document.

 

Add comment

Please sign in to leave a comment.