Hello World

A minimal sparQ app that displays a greeting.

Example Code

This example shows the simplest possible sparQ app. Perfect for understanding the basics.

File Structure

hello/ ├── __init__.py ├── __manifest__.py ├── module.py ├── controllers/ │ └── routes.py ├── views/ │ ├── templates/ │ │ └── hello/ │ │ ├── desktop/ │ │ │ └── index.html │ │ └── mobile/ # Optional │ └── assets/ │ └── css/ └── lang/ └── en.json

manifest.py

manifest = {
    "name": "Hello World",
    "version": "1.0.0",
    "mappid": "a1b2c3",  # Auto-generated by SDK
    "main_route": "/hello",
    "type": "App",
    "icon_class": "fa-solid fa-hand-wave",
    "color": "#10b981",
    "depends": ["core"],
    "description": "A simple hello world app"
}

The mappid is auto-generated when you run cd sdk && make app. Your app will be accessible at /m/{mappid}/hello.

controllers/routes.py

from flask import Blueprint
from system.device.template import render_device_template

blueprint = Blueprint(
    "hello_bp",
    __name__,
    template_folder="../views/templates",
)

@blueprint.route("/")
def index():
    return render_device_template("hello/desktop/index.html", name="World")

views/templates/hello/desktop/index.html

{% extends "core/desktop/base.html" %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-body text-center">
            <h1>{{ _("Hello") }}, {{ name }}!</h1>
            <p class="text-muted">{{ _("Welcome to sparQ") }}</p>
        </div>
    </div>
</div>
{% endblock %}

lang/en.json

{
    "Hello": "Hello",
    "Welcome to sparQ": "Welcome to sparQ"
}

Running the Example

# Create the app
cd sdk
make app name=hello

# Start the server (from sparQ root)
cd ..
make run

# Visit http://localhost:8000/m/{mappid}/hello
# (Check your __manifest__.py for the actual mappid)