Overview
For all non-Windows Player-supported platforms, custom Interface Assets must be built using TypeScript.
Before proceeding, be sure to review Interface Asset general concepts and our introduction to creating your own interface asset. Treat these articles as prerequisites to the content below.
Documentation
The Intuiface CDK can be found on GitHub: https://github.com/intuiface/intuiface-cdk
Pre-requisites
You need to install the following components on your development PC:
-
NodeJS (to use NPM to manage the project’s dependencies)
-
Visual Studio Code (to code, build, and test)
-
Angular (to create visual components)
-
Angular-Cli (to use Angular command line)
-
Schematics-Cli (to use Angular Schematics)
-
npm install -g @angular-devkit/schematics-cli
-
Create an Interface Asset
- Create a folder on your drive, and open that folder in Visual Studio Code.
- Open a terminal (Ctrl + ù)
-
Install the schematics
-
npm install @intuiface/interface-asset
-
- Use the schematics to create the Interface Asset and follow the prompt to give a name to your IA.
-
schematics @intuiface/interface-asset:create
-
- Write your code using the template files created and build your IA
-
npm run build
-
- Copy your first build output into a folder in C:\Users\{UserName}\Documents\IntuiFace\Interface Assets and restart your Composer
Your Interface Asset is now available in your Composer.
Test and debug your Interface Asset
Platform Premier and Enterprise accounts can use Chrome DevTools in Composer's Play Mode. See that article for details, but the process can be summarized as follows:
- Create an experience in Composer that uses your Interface Asset.
- In the Project menu of Composer, select "Player on all other platforms (Web, Android, etc.)", then hit play to launch your experience.
- Once in Play Mode, open the dev tools with Ctrl + Shift + i
Video Walkthrough
Watch as we create a TypeScript-based custom Interface Asset:
Comments
0 comments
Please sign in to leave a comment.