docs: small fixes

This commit is contained in:
0xSage 2023-10-27 16:21:16 +07:00
parent 876915ed8c
commit 203fcd22fb

View File

@ -24,9 +24,7 @@ To complete this tutorial, you'll need:
- A local development environment for [Node.js](https://node.js.org/en/about/). - A local development environment for [Node.js](https://node.js.org/en/about/).
- A code editor, such as [Visual Studio Code](https://code.visualstudio.com/). - A code editor, such as [Visual Studio Code](https://code.visualstudio.com/).
## Before you start > When developing apps, one mistake can lead to unintended changes to your app. Please backup your data.
When developing apps, one mistake can lead to unintended changes to your app. Please backup your data.
## Development ## Development
@ -39,9 +37,7 @@ When developing apps, one mistake can lead to unintended changes to your app. Pl
- Click `Create repository` - Click `Create repository`
- Git clone your new repository - Git clone your new repository
### Step 2: Initial Setup ### Step 2: Installation
Next, you'll need to perform some initial setup steps.
> [!NOTE] > [!NOTE]
> >
@ -73,22 +69,25 @@ Next, you'll need to perform some initial setup steps.
The [`package.json`](package.json) file lets you define your apps metadata, e.g. The [`package.json`](package.json) file lets you define your apps metadata, e.g.
app name, main entry, description and version. app name, main entry, description and version.
### Step 4: Update the Plugin Code ### Step 4: Implementation
The [`src/`](./src/) directory is the heart of your app! The [`src/`](./src/) directory is the heart of your app! You can replace the contents of this directory with your own code.
- `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`. - `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. - `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](./app-anatomy.md#information-flow)) - `index.ts` and `module.ts` interact with each other via RPC (See [Information flow](./app-anatomy.md#information-flow)) via [`invokePluginFunc`](../reference/01_init.md#invokepluginfunc)
You can replace the contents of this directory with your own code. Import the Jan SDK
```typescript
import { core } from "@janhq/core";
```
#### index.ts #### index.ts
Think of this as your "app frontend". You register events, custom functions here. Think of this as your "app frontend". You register events, custom functions here.
Most Jan App functions are processed asynchronously. Note: Most Jan app functions are processed asynchronously. In `index.ts`, you will see that the extension function will return a `Promise<any>`.
In `index.ts`, you will see that the extension function will return a `Promise<any>`.
```typescript ```typescript
import { core } from "@janhq/core"; import { core } from "@janhq/core";
@ -98,11 +97,11 @@ function onStart(): Promise<any> {
} }
``` ```
- Define functions to register and use the registered function in `index.ts` Define custom functions and register your implementation.
```javascript ```javascript
/** /**
* The entrypoint for the plugin. * The entrypoint for the app.
*/ */
import { PluginService, RegisterExtensionPoint, core } from "@janhq/core"; import { PluginService, RegisterExtensionPoint, core } from "@janhq/core";
@ -125,9 +124,6 @@ export function init({ register }: { register: RegisterExtensionPoint }) {
} }
``` ```
For more information about the Core module, see the
[documentation](https://github.com/janhq/jan/blob/main/core/README.md).
#### module.ts #### module.ts
Think of this as your "app backend". Your core logic implementation goes here. Think of this as your "app backend". Your core logic implementation goes here.
@ -138,6 +134,7 @@ const { app } = require("electron");
function run(param: number): [] { function run(param: number): [] {
console.log(`execute runner ${param} in main process`); console.log(`execute runner ${param} in main process`);
// Your code here
return []; return [];
} }
@ -146,14 +143,12 @@ module.exports = {
}; };
``` ```
So, what are you waiting for? Go ahead and start customizing your plugin!
## App installation ## App installation
![Manual installation](img/build-app-1.png) ![Manual installation](img/build-app-1.png)
- `Select` the built `*.tar.gz` file - `Select` the built `*.tar.gz` file
- The App will reload after new app get installed - Jan will reload after new apps get installed
## App uninstallation ## App uninstallation