Skip to content

Canopie JavaScript SDK

The SDK is prefixed with cp which you can call in your *.js file. The purpose of the SDK is to give your Mini Apps additional functionality such as making network calls, saving data, and calling host functions. It's complimentary to the Canopie Markup Language (CPML) but does not replace it.

Several uses for the SDK include: - hooking into the Mini App lifecycle - calling native host functions - making network requests - binding functions to user events like button presses - calling the Super App's user functions such as getting the user's details or asking the user to do payments on the Super App's platform

Setting Data

Generally at the end of the function, the visual components need to update their state somehow by seeing what data has changed. To save the data to the Mini App cache and to reflect the changes in the Mini App, the cp.setData method should be called.

Once the function has run, internally, Canopie will save the current state of the data anyway. Ensure that what's being saved is up to date!

The argument to cp.setData() is any object.

Note: You can always access the current state of the data with cp.data. The data object in the Page() function below is what cp.data will set itself to in the initial state when the Mini App loads.

cp.setData(object)
Page({
  data: {
    count: 0,
  },
  onButtonTap: (e) => {
    let {count} = cp.data
    count++
    cp.setData({
      count,
    })
  }
})

Network Request

cp.request(options)
cp.request({
  url: 'https://example.com/getMovies/rand',
  headers: {
    'content-type': 'application/json' // Default value
  },
  success: function(res) {
    console.log(res.data);
    cp.setData({
      movie: {
        title: res.data.title,
        description: res.data.desc
      }
    })
  }
})

cp.request({
  url: 'https://example.com/createMovie',
  method: 'post',
  data: {
    title: 'my movie',
    description: 'my description'
  },
  headers: {
    'content-type': 'application/json',
    'x-api-key': 'xxx'
  },
  failure: function (res) {
    console.log(res.data.errorMessage);
  }
})

Parameters

Property Description Type Required
url Network resource of the call e.g. https://localhost:3000 String Y
headers An object with a bunch of key value pairs. The values are the exact same as the HTTP standard. By default it is set to: {'content-type': 'application/json' // Default value} Object N
method HTTP Method. By default it is get can be also be one of: head, post, delete, or patch String N
data Optional javascript object used as post parameters Object N
dataType The type of data being sent in the data parameter above. By default, it is set to json. Can also be text, arraybuffer, or stream String N
success A function that takes a res object i.e. success(res) where res is whatever is returned by the network call. Upon a 2XX status code, this function will get run and perform work on the res. Function N
failure Similar to success above, this will only run if it's a non 2XX status code Function N

It's also important to note that the request function will throw an error if something really goes wrong. Ensure to wrap this in try and catch or risk the Mini App crashing.

More to come