Plugin Development Guide

from kolibri.plugins import KolibriPluginBase
from kolibri.plugins.hooks import register_hook
from kolibri.core.webpack import hooks as webpack_hooks
from kolibri.utils import translation
from kolibri.utils.translation import gettext as _


class MyPlugin(KolibriPluginBase):
    # URL modules
    untranslated_view_urls = "api_urls"  # API endpoints
    translated_view_urls = "urls"        # Frontend routes

    # Optional: Plugin options and settings
    kolibri_options = "options"

    # Allow plugin to be managed while Kolibri is running
    can_manage_while_running = True

    def name(self, lang):
        """Return translated plugin name"""
        with translation.override(lang):
            return _("My Plugin")


@register_hook
class MyPluginAsset(webpack_hooks.WebpackBundleHook):
    """Register the main frontend bundle"""
    bundle_id = "app"

    @property
    def plugin_data(self):
        """Pass data to the frontend bundle"""
        return {
            "apiEnabled": True,
            "maxItems": 100,
        }

import router from './routes';
import KolibriApp from 'kolibri-app';
import RootComponent from './views/RootComponent.vue';

class MyPluginModule extends KolibriApp {
  get routes() {
    return router;
  }
  get RootComponent() {
    return RootComponent;
  }
}

export default new MyPluginModule();

import VueRouter from 'vue-router';
import HomePage from '../views/HomePage.vue';

const routes = [
  {
    path: '/',
    name: 'HOME',
    component: HomePage,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

from kolibri.core.api import ValuesViewset
from kolibri.core.auth.api import KolibriAuthPermissions
from .models import MyModel


class MyModelPermissions(KolibriAuthPermissions):
    pass


class MyModelViewset(ValuesViewset):
    queryset = MyModel.objects.all()
    permission_classes = (MyModelPermissions,)

    values = (
        "id",
        "title",
        "description",
        "created_at",
    )

from django.urls import path, include
from rest_framework import routers
from .api import MyModelViewset

router = routers.SimpleRouter()
router.register(r'mymodel', MyModelViewset, basename='mymodel')

urlpatterns = [
    path('', include(router.urls)),
]

from kolibri.utils.conf import OPTIONS

options_spec = {
    "MyPlugin": {
        "ENABLE_FEATURE_X": {
            "type": "boolean",
            "default": False,
        },
        "MAX_ITEMS": {
            "type": "integer",
            "default": 100,
        },
    }
}

<template>
  <div>
    <h1>{{ pageTitle$() }}</h1>
    <KButton @click="loadData">
      {{ loadButtonLabel$() }}
    </KButton>
    <KCircularLoader v-if="loading" />
    <ul v-else>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { createTranslator } from 'kolibri/utils/i18n';
import { MyModelResource } from '../apiResources';

const strings = createTranslator('HomePageStrings', {
  pageTitle: {
    message: 'My Plugin Home',
    context: 'Page heading',
  },
  loadButtonLabel: {
    message: 'Load data',
    context: 'Button to fetch data',
  },
});

export default {
  name: 'HomePage',
  setup() {
    const loading = ref(false);
    const items = ref([]);

    async function loadData() {
      loading.value = true;
      try {
        items.value = await MyModelResource.fetchCollection();
      } finally {
        loading.value = false;
      }
    }

    const { pageTitle$, loadButtonLabel$ } = strings;

    return {
      loading,
      items,
      loadData,
      pageTitle$,
      loadButtonLabel$,
    };
  },
};
</script>

import { Resource } from 'kolibri/apiResource';

export const MyModelResource = new Resource({
  name: 'mymodel',
  namespace: 'kolibri.plugins.my_plugin',
});

from django.urls import reverse
from rest_framework import status
from rest_framework.test import APITestCase
from kolibri.core.auth.test.helpers import provision_device


class MyPluginAPITestCase(APITestCase):
    @classmethod
    def setUpTestData(cls):
        cls.data = provision_device()
        cls.user = cls.data["facility_admin"]

    def test_can_list_models(self):
        """Test that authenticated user can list models"""
        self.client.force_authenticate(user=self.user)
        url = reverse('kolibri:kolibri.plugins.my_plugin:mymodel-list')
        response = self.client.get(url)
        self.assertEqual(response.status_code, status.HTTP_200_OK)

import { render, screen } from '@testing-library/vue';
import HomePage from '../views/HomePage.vue';

describe('HomePage', () => {
  it('renders the page title', () => {
    render(HomePage);
    expect(screen.getByText('My Plugin Home')).toBeTruthy();
  });
});

from kolibri.core.tasks.decorators import register_task
from kolibri.core.tasks.job import Job

@register_task
class ProcessDataTask(Job):
    def run(self, data_id):
        # Process data
        self.update_progress(0.5, 1.0)
        # More processing
        self.update_progress(1.0, 1.0)
        return {"processed": data_id}

import SideNavComponent from './components/SideNavItem.vue';
import KolibriApp from 'kolibri-app';

class SideNavModule extends KolibriApp {
  get RootComponent() {
    return SideNavComponent;
  }
}

export default new SideNavModule();