refactor: Add steps for developing app

docs/docs/getting-started/app-anatomy.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 title: Anatomy of an app
 ---
 
-## Jan Architecture
 ### High level architecture
 ![High level architecture](img/architecture-0.drawio.png)
 Jan mission is to power the next gen App with the limitless extensibility by providing BUILDER:
@@ -33,17 +32,19 @@ At Jan, we strongly believe in `portable AI` that is created once and run anywhe
 
 - Vertically, there are `Platform Core` component and `App` component. Each of those includes UI and Node process that work in pair.
 
-##
-
-Platform has 3 events that are broadcast to installed Apps
+## Events
 ![Platform events](img/app-anatomy-4.drawio.jpg)
 
-- onLaunch()
+#### onLaunch()
   ![Platform onLaunch()](img/app-anatomy-1.drawio.jpg)
-- onStart()
+#### onStart()
   ![Platform onStart()](img/app-anatomy-2.drawio.jpg)
-- onDispose()
+#### onDispose()
   ![Platform onDispose()](img/app-anatomy-3.drawio.jpg)
-- At any given time, when there is new App installtion/ unintallation, the Platform restarts and trigger
+
+#### onAppInstallation() and onAppUninstallation()
+The Platform simply restarts and trigger onDispose() then onLaunch().
+
+### Information flow
 - When App is being used, here is how the information passes between Platform and Apps
   ![Communication](img/app-anatomy-5.drawio.png)

docs/docs/getting-started/build-an-app.md

@@ -70,9 +70,7 @@ When you copy this repository, update `package.json` with the name, description
 
 ### Step 4: Update the Plugin Code
 
-The [`src/`](./src/) directory is the heart of your plugin! This contains the
-source code that will be run when your plugin extension functions are invoked. You can replace the
-contents of this directory with your own code.
+The [`src/`](./src/) directory is the heart of your plugin! This contains the source code that will be run when your plugin extension functions are invoked. You can replace the contents of this directory with your own code.
 
 There are a few things to keep in mind when writing your plugin code:
 
@@ -90,6 +88,51 @@ There are a few things to keep in mind when writing your plugin code:
   For more information about the Jan Plugin Core module, see the
   [documentation](https://github.com/janhq/jan/blob/main/core/README.md).
 
+- You may be confused of `index.ts` and `module.ts`.
+  - `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](./app-anatomy.md#information-flow))
+
+- Define specific/ compute intensive function in `module.ts`
+```javascript
+const path = require("path");
+const { app } = require("electron");
+
+function run(param: number): [] {
+  console.log(`execute runner ${param} in main process`);
+  return [];
+}
+
+module.exports = {
+  run,
+};
+```
+- Define functions to register and use the registered function in `index.ts`
+```javascript
+/**
+ * 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);
+}
+```
+
 So, what are you waiting for? Go ahead and start customizing your plugin!
 
 ## App installation

docs/docs/getting-started/development-workflow.md

@@ -1,6 +0,0 @@
----
-sidebar_position: 2
-title: Development workflow
----
-
-todo