# Creating a Custom Interactive

In this section, you will find a guide to create a custom interactive. Here we will go through a couple of details that need to be considered before creating a custom interactive.

# Application Workflow

Before implementing an interactive, it is important to understand how the application works.

Impact is the Native application and any other application that is executed after selecting an instance in the main window, executes a web application inside a WebView. To be able to communicate between native application and web applications, we use Ti Events (Titanium SDK). There are multiple Ti Events that can emit messages to the Native application to do various actions. You can find all Ti Events here.

# Implementing a custom Interactive

Before implementing an interactive, there are some technical requirements that must be considered. Interactives can be built with any JavaScript framework or just plain JavaScript. However as Pitcher uses Vue.js as default, there are some extra tools/SDK’s that are built by Pitcher and can be used when implementing an interactive.

If the interactive is implemented using Vue.js, you can simply use functions from @pitcher/core npm package to execute different Ti Actions.

For example, instead of using plain Ti.App.fireEvent, you can use the fireEvent function from @pitcher/core package. Also, different database actions are easier to use through @pitcher/core package. The functions in @pitcher/core package is built on the top of Ti Events and most of them are also promisified, which means that you can implement asynchronous code easier.

Example

Usage of saveLocal To save something locally in the database and loadLocal to load the same data when the app resumes.

import { saveLocal, loadLocal } from '@pitcher/core'

saveLocal('myId', { hello: 'world' })

const data = await loadLocal('myId')

To see more examples and core API, check @pitcher/core documentation

# Implementation without Vue.js

If you would not use Vue.js to create an interactive, you would then need to use Ti Events natively, simply check if Ti.App exists and execute any event from the list.

Example

function trackCustomPitcherEvent(customEventName, params = {}) {
  const paramObj = {
    fileID: getCurrentFileID(),
    Id: params.id,
    label: params.label,
    path: params.name,
    timestamp: params.timestamp,
    name: params.name,
    duration: params.duration,
  }

  // check if Ti is available
  if (window.Ti) {
    Ti.App.fireEvent('sendStatsFromHTML', {
      event_name: customEventName,
      event_params: paramObj,
    })
  }
}

# Interactive folder location

When you select an instance in the first screen of Pitcher Impact, the Impact application downloads all the instance related files to local folders of the native Application. Below, you can find folder location for different operating systems.

macOS

/Library/Developer/CoreSimulator/Devices/{DEVICE_ID}/data/containers/Data/Application/{APPLICATION_ID}/Documents/Pitcher Folders/zip

Windows

C:\Users\{USER}\AppData\Local\Packages\VayenSolutionsGmbH.PitcherImpact_{UID}\LocalState\zip

# Debugging and Deploying

To debug and deploy an interactive, follow the guides below:

# Debugging

• iOS
• Windows
• Android

# Deployment

• Kudu