Create the simplest plug-in - "Hello Haiilo Home"

The most basic plug-in consist of at least two components:

a manifest that declares the plug-in's properties (such as name and content to view)
at least one web page to view (we call them entry points)

Let’s go for a simple “Hello Haiilo Home” example.

Add the manifest

When an admin installs a plug-in he needs to provide the URL of the manifest file. The manifest contains all information for the Haiilo Home system to render the plug-in as a widget.

📜

Create a basic plug-in manifest

Open Recipe

A manifest describing a simple "Hello Haiilo Home" static plug-in could look like this.

{
  "manifestVersion": "2.0.0",
  "pluginVersion": "0.1.0",
  "name": {
    "en": "Demo Plugin - Step 1",
    "de": "Demo Plugin - Step 1"
  },
  "description": {
    "en": "A simple demo plug-in",
    "de": "Ein einfaches Beispiel-Plug-in"
  },
  "entryPoints": [
    {
      "id": "510e9e0c-e3b8-44a8-8db1-5185d3d844ce",
      "url": "/",
      "name": {
        "en": "My first plug-in view",
        "de": "Meine erste Plug-in Ansicht"
      },
      "description": {
        "en": "Showing my plug-in",
        "de": "Mein Plug-in"
      }
    }
  ]
}

The plug-in can offer multiple views, known as entry points. When a content maintainer adds a plug-in widget to a page, he can select which entry point of the plug-in is displayed on his plug-in instance.

Add the static content of an entry point

The above manifest states the entry point’s URL as a path relative URL that results in an effective URL of http://some.site/index.html. Our first version will only serve a static HTML page under this URL:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Haiilo Home Demo Plug-in</title>
    <meta content="A simple demo plug-in" name="description">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<html>
<body>
<h1>Hello Haiilo Home</h1>
<p>Welcome to our first static plug-in :)</p>
</body>
</html>

That’s basically it. You have created the most simple plug-in there is.

👍
Demo project
The result of this step can be seen at branch 1-static of our demo project

Add the manifest

Add the static content of an entry point

👍Demo project

👍
Demo project