This tutorial will help you develop the most basic skills needed to create an app in Manifold.
Your engine page should look something like this:
Your Manifold tab should appear as per the instructions in Setting Up Manifold.
This is what it should look like:
ruleset io.picolabs.hello_world { meta { shares __testing } global { __testing = { "queries": [ { "name": "__testing" } //, { "name": "entry", "args": [ "key" ] } ] , "events": [ //{ "domain": "d1", "type": "t1" } //, { "domain": "d2", "type": "t2", "attrs": [ "a1", "a2" ] } ] } } } |
Put the following in your newly created JS file:
import React, { Component } from 'react' class HelloWorld extends Component { render() { return ( <div>Hello, World!</div> ) } } export default HelloWorld; |
The above code represents the encapsulation of our new application in Manifold. Now we need to make the Manifold code aware that this new application exists. Edit AppMap.js AND CardMap.js in /src/components/Apps to import this new application and store it in the JS object. Make sure the key in this object is the ruleset ID of your KRL ruleset created above!
import HelloWorld from './Picolabs/HelloWorld/HelloWorld'; export default { "io.picolabs.safeandmine" : SafeAndMineApp, "io.picolabs.journal" : JournalApp, "io.picolabs.hello_world": HelloWorld } |
Make "io.picolabs.hello_world" a Manifold KRL app. In order for Manifold to tell our ruleset apart from other rulesets, we need to add some KRL code. Edit your hello world ruleset on your pico engine with the following:
//in the global block: app = { "name":"hello world", "version":"0.0" }; //in the main block rule discovery { select when manifold apps send_directive("app discovered...", { "app": app } ); } |
The app variable is static and defined in the global block. It gives a human readable versioning and name to our app. When Manifold is displaying the cards for every tile, it needs to discover which rulesets installed on the pico are apps, and so sends a "manifold apps" event to the pico. All rulesets that select on this domain and type must provide the app variable in an object as shown above, otherwise the directive will be ignored. We will learn what else we may be provided in the directive in the sections below and in future tutorials.
Before moving on, verify that everything is working. Your Manifold card should now have our hello world component displayed. If your browser window is too small, then you will see a list of one collapsed card rather than an expanded card as seen below.
Also, clicking on the open card button (the one next to the settings cog shown above), should display the existence of our app (but with no image yet).
Hovering over the Icon should display the name of our app
Finally, clicking on the App Icon above should take us to our app's component page
If any of these steps are not working for you, double check your code. If it is still not working, then check the console for any errors and message us so we can help!
We're almost there! So far, we've created a React component and a KRL app for hello_world, but we need to do one last touch-up. We don't want our App Icon to be ugly text. Obtain a URL to an image that you would like to use. The image is restricted to about 100x100 pixels, so keep that in mind when choosing an image. For a production app, the image would have to be one that you have creative rights to. Edit the KRL ruleset:
rule discovery { select when manifold apps send_directive("app discovered...", { "app": app, "iconURL": "http://static1.squarespace.com/static/593df14037c58172ed4d5ac9/593df1f303596e06e98edd75/5945989cccf210058d2d32e7/1498009710416/helloworld.png?format=1000w" } ); } |
You should now see something like this on the apps list page. If you don't have an image icon showing up, make sure that the link to the image was its raw url and not a link to another site that may be hosting it.
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.
|