Creating your User Interface
The user interface of your project is what end users see at
forio.com/app/your-user-or-team-id/your-project-id when they play with your model or simulation. The user interface includes both the components on the pages (charts, text, forms, images, etc.), including their layouts and styles; and the connection between those elements and the project's model.
Epicenter Interface Builder and APIs
Read more about the elements of the Epicenter development stack:
The Interface Builder allows you to select and populate templates to create the user interface for your project, then fill out simple forms to reference variables and operations from your project's model. The Interface Builder generates HTML files in the Interface section of your project. (You can also edit these files manually if you like.)
The Epicenter REST APIs The Epicenter REST APIs include functionality for working with particular runs and their data, and also for creating and administering users, groups, projects, and multiplayer worlds. In particular:
- The Data API and an aggregate Run API are for end user interactions with particular runs and projects.
- The User Management APIs let you create and look up end users and add them to groups with in your team and project. This section also includes administrative functionality around authentication and resetting passwords.
- The Multiplayer APIs are for creating multiplayer worlds, adding end users to those worlds, and starting runs for those worlds.
- The Other APIs section includes "everything else" — such as account and project information and the set of Model APIs that underly the aggregate Run API, Epicenter.js, and Flow.js.
Options for Rendering your Interface
With Epicenter, you have the option of creating your project's user interface with Interface files, rendered on the client-side, or with Node.js, rendered on the server-side.
Create or upload these files to the Interface section within your project.
Files added to the Interface section within your project can be accessed (read) through the user interface of your project, or with the exact URI. For additional security, add a new folder in the Interface section and name it "protected". Files added to the "protected" folder are accessible only to end users who are logged in to your authenticated project.
See sample code by selecting Use an Example when you first create a project, and looking at the interface files included there. Or, start creating your interface with the Interface Builder, then look at the files created once you save your work.
This component of your project is optional, but in some cases can increase performance and improve the maintainability of your code. For example, you might aggregate API calls, perform validations, or execute other repeated tasks on the server-side.