2023-10-27 16:21:16 +07:00

4.4 KiB

Raw Blame History

sidebar_position	title
1	Build an app

Build and publish an app

You can build a custom AI application on top of Jan. In this tutorial, you'll build a sample app and load it into Jan Desktop.

What you'll learn

After you've completed this tutorial, you'll be able to:

Configure an environment for developing Jan apps.
Compile a app from source code.
Reload a app after making changes to it.

Prerequisites

To complete this tutorial, you'll need:

Git installed on your local machine.
A local development environment for Node.js.
A code editor, such as Visual Studio Code.

When developing apps, one mistake can lead to unintended changes to your app. Please backup your data.

Development

Step 1: Download the sample app

Go to Jan sample app
Select Use this template button at the top of the repository
Select Create a new repository
Select an owner and name for your new repository
Click Create repository
Git clone your new repository

Step 2: Installation

Note

You'll need to have a reasonably modern version of Node.js handy. If you are using a version manager like nodenv or nvm, you can run nodenv install in the root of your repository to install the version specified in package.json. Otherwise, 20.x or later should work!

🛠️ Install the dependencies
```
npm install
```
🏗️ Package the TypeScript for distribution
```
npm run bundle
```
✅ Check your artifact

There will be a tgz file in your src directory now

Step 3: Update the App Manifest

The package.json file lets you define your apps metadata, e.g. app name, main entry, description and version.

Step 4: Implementation

The src/ directory is the heart of your app! You can replace the contents of this directory with your own code.

index.ts is your app's mainentrypoint. You can access the Web runtime and define UI in this file.
module.ts is your Node runtime in which functions get executed. You should define core logic and compute-intensive workloads in this file.
index.ts and module.ts interact with each other via RPC (See Information flow) via invokePluginFunc

Import the Jan SDK

import { core } from "@janhq/core";

index.ts

Think of this as your "app frontend". You register events, custom functions here.

Note: Most Jan app functions are processed asynchronously. In index.ts, you will see that the extension function will return a Promise<any>.

import { core } from "@janhq/core";

function onStart(): Promise<any> {
  return core.invokePluginFunc(MODULE_PATH, "run", 0);
}

Define custom functions and register your implementation.

/**
 * The entrypoint for the app.
 */

import { PluginService, RegisterExtensionPoint, core } from "@janhq/core";

/**
 * Invokes the `run` function from the `module.js` file using the `invokePluginFunc` method.
 * "run" is the name of the function to invoke.
 * @returns {Promise<any>} A promise that resolves with the result of the `run` function.
 */
function onStart(): Promise<any> {
  return core.invokePluginFunc(MODULE_PATH, "run", 0);
}

/**
 * Initializes the plugin by registering the extension functions with the given register function.
 * @param {Function} options.register - The function to use for registering the extension functions
 */
export function init({ register }: { register: RegisterExtensionPoint }) {
  register(PluginService.OnStart, PLUGIN_NAME, onStart);
}

module.ts

Think of this as your "app backend". Your core logic implementation goes here.

const path = require("path");
const { app } = require("electron");

function run(param: number): [] {
  console.log(`execute runner ${param} in main process`);
  // Your code here
  return [];
}

module.exports = {
  run,
};

App installation

Select the built *.tar.gz file
Jan will reload after new apps get installed

App uninstallation

To be updated

App update