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

4.6 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.

Before you start

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: Initial Setup

Next, you'll need to perform some initial setup steps.

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: Update the Plugin Code

The src/ directory is the heart of your app!

index.ts is your UI to end customer with Web runtime. This one should be thin as lightweight. Any specific/ compute-intensive workload should be executed asynchronously in registered functions in module.ts.
module.ts is your Node runtime in which functions get executed.
index.ts and module.ts interact with each other via RPC (See Information flow)

You can replace the contents of this directory with your own code.

index.ts

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

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 functions to register and use the registered function in index.ts

/**
 * The entrypoint for the plugin.
 */

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);
}

For more information about the Core module, see the documentation.

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`);
  return [];
}

module.exports = {
  run,
};

So, what are you waiting for? Go ahead and start customizing your plugin!

App installation

Select the built *.tar.gz file
The App will reload after new app get installed

App uninstallation

To be updated

App update