Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AP-API-Register #22

Merged
merged 8 commits into from
Nov 5, 2024
Merged

AP-API-Register #22

merged 8 commits into from
Nov 5, 2024

Conversation

ninjeeter
Copy link
Contributor

No description provided.

@caidobot caidobot temporarily deployed to AP-API-Register - doc-developer PR #22 November 5, 2024 14:35 — with Render Destroyed
Copy link
Contributor

github-actions bot commented Nov 5, 2024

Images automagically compressed by Calibre's image-actions

Compression reduced images by 38.5%, saving 16.65 KB.

Filename Before After Improvement Visual comparison
src/_images/api_register_function.png 43.22 KB 26.57 KB -38.5% View diff

13 images did not require optimisation.

@CLAassistant
Copy link

CLAassistant commented Nov 5, 2024

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

✅ ninjeeter
✅ Corb3nik
❌ github-actions[bot]
You have signed the CLA already but the status is still pending? Let us recheck it.

Comment on lines 1 to 19
# Creating a Custom Endpoint

When developing a plugin, there are two components to consider: the **frontend** and the **backend**.

You can conceptualize the difference between these two components in the context of operating a car.

The frontend includes all the buttons, dials, pedals, and other controls available to you as the driver. Some components, such as sun visors and the rear-view mirror, are purely frontend. However, most frontend components communicate with the "under-the-hood" backend. This relationship is what allows actions like pressing the gas pedal to accelerate the engine - or, in the context of Caido; clicking a button to send a request.

## Frontend

A "_page_" in Caido simply refers to a user interface. For example, the [Replay](https://docs.caido.io/reference/features/testing/replay.html) and [Automate](https://docs.caido.io/reference/features/testing/automate.html) side menu tabs each produce their own page.

Within these pages are components and elements specific to the feature, such as option menus and buttons. It is through these components and elements that the appearance is customized or communication with the backend occurs.

Think of the Caido application as a browser window with multiple open tabs, each corresponding to a specific page.

## Backend

The backend refers to what is available server-side, what is "_under-the-hood_" or "_out-of-sight_". By incorporating a backend aspect to your plugin, you can extend upon the server-side functionality. This includes storing the data produced by your plugin, sending HTTP requests, or processing user-supplied data.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should move some of this to https://developer.caido.io/concepts/essentials/package.html

Guides are meant to help users who just need a step-by-step on how to solve a specific problem. Users might come back to this often, but don't necessarily need the explanations on backend vs frontend every time.

So I would boil this section down into something like:

"In this guide, we'll cover how to create a custom endpoint in a backend plugin, and call it from a frontend plugin.

For more information on the differences between a frontend and backend plugin, take a look at our Plugin Architecture
"


The backend refers to what is available server-side, what is "_under-the-hood_" or "_out-of-sight_". By incorporating a backend aspect to your plugin, you can extend upon the server-side functionality. This includes storing the data produced by your plugin, sending HTTP requests, or processing user-supplied data.

## sdk.api.register()
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use titles that describe the sequence of operations that a user has to do. https://diataxis.fr/how-to-guides/#describe-a-logical-sequence

So the outline for the guide would be something like

  • Registering an API Endpoint
  • Calling the API Endpoint

sdk.api.register() is just one of many functions that needs to be used in order to register an endpoint. No need to give it its own title.

Comment on lines 67 to 86
``` ts
import { SDK, DefineAPI } from "caido:plugin";

function multiply(sdk: SDK, a: number, b: number) {
const result = a * b;
sdk.console.log(`The product of the multiply call is: ${result}`);
return result;
}

export type API = DefineAPI<{
multiply: typeof multiply;
}>;

export function init(sdk: SDK<API>) {
sdk.api.register("multiply", multiply);
}
```

</details>
:::
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would avoid having code snippets that need to be expanded. If anything, this snippet is the most relevant part for the user, cause they can just copy paste the entire thing and update it as needed.

Can we try having that snippet near the top of the "Registering an API Endpoint" section (no need to wrap it in a :::tip:::), then have the explanations for each part underneath?

}
```

::: tip
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment regarding code snippets that need to be expanded. Let's bring that to the top of the section.


---

<img alt="Calling the API." src="/_images/api_register_function.png" center/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good screenshot to show at the end of the article.

The outline of the article ends up being:

  • "Here's what we're gonna do"
  • "Here's how to do it"
  • "Here's what the final result looks like"

@caidobot caidobot temporarily deployed to AP-API-Register - doc-developer PR #22 November 5, 2024 18:15 — with Render Destroyed
@Corb3nik Corb3nik merged commit a79a97b into main Nov 5, 2024
3 of 4 checks passed
@Corb3nik Corb3nik deleted the AP-API-Register branch November 5, 2024 18:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants