Merge pull request #1536 from automatisch/docs/remove-typescript

Use JS for the documentation examples
This commit is contained in:
Ömer Faruk Aydın
2024-01-15 13:17:48 +01:00
committed by GitHub
9 changed files with 112 additions and 118 deletions

View File

@@ -1,7 +1,7 @@
# Telemetry
:::info
We want to be very transparent about the data we collect and how we use it. Therefore, we have abstracted all of the code we use with our telemetry system into a single, easily accessible place. You can check the code [here](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/helpers/telemetry/index.ts) and let us know if you have any suggestions for changes.
We want to be very transparent about the data we collect and how we use it. Therefore, we have abstracted all of the code we use with our telemetry system into a single, easily accessible place. You can check the code [here](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/helpers/telemetry/index.js) and let us know if you have any suggestions for changes.
:::
Automatisch comes with a built-in telemetry system that collects anonymous usage data. This data is used to help us improve the product and to make sure we are focusing on the right features. While we're doing it, we don't collect any personal information. You can also disable the telemetry system by setting the `TELEMETRY_ENABLED` environment variable. See the [environment variables](/advanced/configuration#environment-variables) section for more information.

View File

@@ -16,13 +16,13 @@ The build integrations section is best understood when read from beginning to en
## Add actions to the app.
Open the `thecatapi/index.ts` file and add the highlighted lines for actions.
Open the `thecatapi/index.js` file and add the highlighted lines for actions.
```typescript{4,17}
import defineApp from '../../helpers/define-app';
import auth from './auth';
import triggers from './triggers';
import actions from './actions';
```javascript{4,17}
import defineApp from '../../helpers/define-app.js';
import auth from './auth/index.js';
import triggers from './triggers/index.js';
import actions from './actions/index.js';
export default defineApp({
name: 'The cat API',
@@ -41,24 +41,24 @@ export default defineApp({
## Define actions
Create the `actions/index.ts` file inside of the `thecatapi` folder.
Create the `actions/index.js` file inside of the `thecatapi` folder.
```typescript
import markCatImageAsFavorite from './mark-cat-image-as-favorite';
```javascript
import markCatImageAsFavorite from './mark-cat-image-as-favorite/index.js';
export default [markCatImageAsFavorite];
```
:::tip
If you add new actions, you need to add them to the actions/index.ts file and export all actions as an array.
If you add new actions, you need to add them to the actions/index.js file and export all actions as an array.
:::
## Add metadata
Create the `actions/mark-cat-image-as-favorite/index.ts` file inside the `thecatapi` folder.
Create the `actions/mark-cat-image-as-favorite/index.js` file inside the `thecatapi` folder.
```typescript
import defineAction from '../../../../helpers/define-action';
```javascript
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
name: 'Mark the cat image as favorite',
@@ -68,7 +68,7 @@ export default defineAction({
{
label: 'Image ID',
key: 'imageId',
type: 'string' as const,
type: 'string',
required: true,
description: 'The ID of the cat image you want to mark as favorite.',
variables: true,
@@ -91,10 +91,10 @@ Let's briefly explain what we defined here.
## Implement the action
Open the `actions/mark-cat-image-as-favorite.ts` file and add the highlighted lines.
Open the `actions/mark-cat-image-as-favorite.js` file and add the highlighted lines.
```typescript{7-20}
import defineAction from '../../../../helpers/define-action';
```javascript{7-20}
import defineAction from '../../../../helpers/define-action.js';
export default defineAction({
// ...
@@ -104,7 +104,7 @@ export default defineAction({
const imageId = $.step.parameters.imageId;
const headers = {
'x-api-key': $.auth.data.apiKey as string,
'x-api-key': $.auth.data.apiKey,
};
const response = await $.http.post(

View File

@@ -27,17 +27,17 @@ cd packages/backend/src/apps
mkdir thecatapi
```
We need to create an `index.ts` file inside of the `thecatapi` folder.
We need to create an `index.js` file inside of the `thecatapi` folder.
```bash
cd thecatapi
touch index.ts
touch index.js
```
Then let's define the app inside of the `index.ts` file as follows:
Then let's define the app inside of the `index.js` file as follows:
```typescript
import defineApp from '../../helpers/define-app';
```javascript
import defineApp from '../../helpers/define-app.js';
export default defineApp({
name: 'The cat API',

View File

@@ -24,11 +24,11 @@ You can find detailed documentation of the cat API [here](https://docs.thecatapi
## Add auth to the app
Open the `thecatapi/index.ts` file and add the highlighted lines for authentication.
Open the `thecatapi/index.js` file and add the highlighted lines for authentication.
```typescript{2,13}
import defineApp from '../../helpers/define-app';
import auth from './auth';
```javascript{2,13}
import defineApp from '../../helpers/define-app.js';
import auth from './auth/index.js';
export default defineApp({
name: 'The cat API',
@@ -45,22 +45,22 @@ export default defineApp({
## Define auth fields
Let's create the `auth/index.ts` file inside of the `thecatapi` folder.
Let's create the `auth/index.js` file inside of the `thecatapi` folder.
```bash
mkdir auth
touch auth/index.ts
touch auth/index.js
```
Then let's start with defining fields the auth inside of the `auth/index.ts` file as follows:
Then let's start with defining fields the auth inside of the `auth/index.js` file as follows:
```typescript
```javascript
export default {
fields: [
{
key: 'screenName',
label: 'Screen Name',
type: 'string' as const,
type: 'string',
required: true,
readOnly: false,
value: null,
@@ -72,7 +72,7 @@ export default {
{
key: 'apiKey',
label: 'API Key',
type: 'string' as const,
type: 'string',
required: true,
readOnly: false,
value: null,
@@ -101,10 +101,10 @@ If the third-party service you use provides both an API key and OAuth for the au
So until now, we integrated auth folder with the app definition and defined the auth fields. Now we need to verify the credentials that the user entered. We will do that by defining the `verifyCredentials` method.
Start with adding the `verifyCredentials` method to the `auth/index.ts` file.
Start with adding the `verifyCredentials` method to the `auth/index.js` file.
```typescript{1,8}
import verifyCredentials from './verify-credentials';
```javascript{1,8}
import verifyCredentials from './verify-credentials.js';
export default {
fields: [
@@ -115,12 +115,10 @@ export default {
};
```
Let's create the `verify-credentials.ts` file inside the `auth` folder.
Let's create the `verify-credentials.js` file inside the `auth` folder.
```typescript
import { IGlobalVariable } from '@automatisch/types';
const verifyCredentials = async ($: IGlobalVariable) => {
```javascript
const verifyCredentials = async ($) => {
// TODO: Implement verification of the credentials
};
@@ -129,12 +127,10 @@ export default verifyCredentials;
We generally use the `users/me` endpoint or any other endpoint that we can validate the API key or any other credentials that the user provides. For our example, we don't have a specific API endpoint to check whether the credentials are correct or not. So we will randomly pick one of the API endpoints, which will be the `GET /v1/images/search` endpoint. We will send a request to this endpoint with the API key. If the API key is correct, we will get a response from the API. If the API key is incorrect, we will get an error response from the API.
Let's implement the authentication logic that we mentioned above in the `verify-credentials.ts` file.
Let's implement the authentication logic that we mentioned above in the `verify-credentials.js` file.
```typescript
import { IGlobalVariable } from '@automatisch/types';
const verifyCredentials = async ($: IGlobalVariable) => {
```javascript
const verifyCredentials = async ($) => {
await $.http.get('/v1/images/search');
await $.auth.set({
@@ -155,11 +151,11 @@ You must always provide a `screenName` field to auth data in the `verifyCredenti
We have implemented the `verifyCredentials` method. Now we need to check whether the credentials are still valid or not for the test connection functionality in Automatisch. We will do that by defining the `isStillVerified` method.
Start with adding the `isStillVerified` method to the `auth/index.ts` file.
Start with adding the `isStillVerified` method to the `auth/index.js` file.
```typescript{2,10}
import verifyCredentials from './verify-credentials';
import isStillVerified from './is-still-verified';
```javascript{2,10}
import verifyCredentials from './verify-credentials.js';
import isStillVerified from './is-still-verified.js';
export default {
fields: [
@@ -171,13 +167,12 @@ export default {
};
```
Let's create the `is-still-verified.ts` file inside the `auth` folder.
Let's create the `is-still-verified.js` file inside the `auth` folder.
```typescript
import { IGlobalVariable } from '@automatisch/types';
import verifyCredentials from './verify-credentials';
```javascript
import verifyCredentials from './verify-credentials.js';
const isStillVerified = async ($: IGlobalVariable) => {
const isStillVerified = async ($) => {
await verifyCredentials($);
return true;
};

View File

@@ -18,35 +18,35 @@ The build integrations section is best understood when read from beginning to en
### 3-legged OAuth
- [Discord](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/discord/auth/index.ts)
- [Flickr](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/flickr/auth/index.ts)
- [Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/auth/index.ts)
- [Salesforce](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/salesforce/auth/index.ts)
- [Slack](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/slack/auth/index.ts)
- [Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/auth/index.ts)
- [Discord](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/discord/auth/index.js)
- [Flickr](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/flickr/auth/index.js)
- [Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/auth/index.js)
- [Salesforce](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/salesforce/auth/index.js)
- [Slack](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/slack/auth/index.js)
- [Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/auth/index.js)
### OAuth with the refresh token
- [Salesforce](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/salesforce/auth/index.ts)
- [Salesforce](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/salesforce/auth/index.js)
### API key
- [DeepL](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/deepl/auth/index.ts)
- [Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/auth/index.ts)
- [SignalWire](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/signalwire/auth/index.ts)
- [SMTP](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/smtp/auth/index.ts)
- [DeepL](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/deepl/auth/index.js)
- [Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/auth/index.js)
- [SignalWire](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/signalwire/auth/index.js)
- [SMTP](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/smtp/auth/index.js)
### Without authentication
- [RSS](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/rss/index.ts)
- [Scheduler](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/scheduler/index.ts)
- [RSS](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/rss/index.js)
- [Scheduler](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/scheduler/index.js)
## Triggers
### Polling-based triggers
- [Search tweets - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/triggers/search-tweets/index.ts)
- [New issues - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-issues/index.ts)
- [Search tweets - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/triggers/search-tweets/index.js)
- [New issues - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-issues/index.js)
### Webhook-based triggers
@@ -54,27 +54,27 @@ The build integrations section is best understood when read from beginning to en
If you are developing a webhook-based trigger, you need to ensure that the webhook is publicly accessible. You can use [ngrok](https://ngrok.com) for this purpose and override the webhook URL by setting the **WEBHOOK_URL** environment variable.
:::
- [New entry - Typeform](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/typeform/triggers/new-entry/index.ts)
- [New entry - Typeform](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/typeform/triggers/new-entry/index.js)
### Pagination with descending order
- [Search tweets - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/triggers/search-tweets/index.ts)
- [New issues - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-issues/index.ts)
- [Receive SMS - Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/triggers/receive-sms/index.ts)
- [Receive SMS - SignalWire](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/signalwire/triggers/receive-sms/index.ts)
- [New photos - Flickr](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/flickr/triggers/new-photos/index.ts)
- [Search tweets - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/triggers/search-tweets/index.js)
- [New issues - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-issues/index.js)
- [Receive SMS - Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/triggers/receive-sms/index.js)
- [Receive SMS - SignalWire](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/signalwire/triggers/receive-sms/index.js)
- [New photos - Flickr](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/flickr/triggers/new-photos/index.js)
### Pagination with ascending order
- [New stargazers - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-stargazers/index.ts)
- [New watchers - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-watchers/index.ts)
- [New stargazers - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-stargazers/index.js)
- [New watchers - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/triggers/new-watchers/index.js)
## Actions
- [Send a message to channel - Slack](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/slack/actions/send-a-message-to-channel/index.ts)
- [Send SMS - Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/actions/send-sms/index.ts)
- [Send a message to channel - Discord](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/discord/actions/send-message-to-channel/index.ts)
- [Create issue - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/actions/create-issue/index.ts)
- [Send an email - SMTP](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/smtp/actions/send-email/index.ts)
- [Create tweet - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/actions/create-tweet/index.ts)
- [Translate text - DeepL](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/deepl/actions/translate-text/index.ts)
- [Send a message to channel - Slack](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/slack/actions/send-a-message-to-channel/index.js)
- [Send SMS - Twilio](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twilio/actions/send-sms/index.js)
- [Send a message to channel - Discord](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/discord/actions/send-message-to-channel/index.js)
- [Create issue - Github](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/github/actions/create-issue/index.js)
- [Send an email - SMTP](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/smtp/actions/send-email/index.js)
- [Create tweet - Twitter](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/twitter/actions/create-tweet/index.js)
- [Translate text - DeepL](https://github.com/automatisch/automatisch/tree/main/packages/backend/src/apps/deepl/actions/translate-text/index.js)

View File

@@ -35,13 +35,13 @@ Here, you can see the folder structure of an example app. We will briefly walk t
├── auth
├── common
├── dynamic-data
├── index.ts
├── index.js
└── triggers
```
## App
The `index.ts` file is the entry point of the app. It contains the definition of the app and the app's metadata. It also includes the list of triggers, actions, and data sources that the app provides. So, whatever you build inside the app, you need to associate it within the `index.ts` file.
The `index.js` file is the entry point of the app. It contains the definition of the app and the app's metadata. It also includes the list of triggers, actions, and data sources that the app provides. So, whatever you build inside the app, you need to associate it within the `index.js` file.
## Auth

View File

@@ -16,11 +16,11 @@ The build integrations section is best understood when read from beginning to en
Before handling authentication and building a trigger and an action, it's better to explain the `global variable` concept in Automatisch. Automatisch provides you the global variable that you need to use with authentication, triggers, actions, and basically all the stuff you will build for the integration.
The global variable is represented as `$` variable in the codebase, and it's a JSON object that contains the following properties:
The global variable is represented as `$` variable in the codebase, and it's a JS object that contains the following properties:
## $.auth.set
```typescript
```javascript
await $.auth.set({
key: 'value',
});
@@ -30,7 +30,7 @@ It's used to set the authentication data, and you can use this method with multi
## $.auth.data
```typescript
```javascript
$.auth.data; // { key: 'value' }
```
@@ -38,7 +38,7 @@ It's used to retrieve the authentication data that we set with `$.auth.set()`. T
## $.app.baseUrl
```typescript
```javascript
$.app.baseUrl; // https://thecatapi.com
```
@@ -46,7 +46,7 @@ It's used to retrieve the base URL of the app that we defined previously. In our
## $.app.apiBaseUrl
```typescript
```javascript
$.app.apiBaseUrl; // https://api.thecatapi.com
```
@@ -54,7 +54,7 @@ It's used to retrieve the API base URL of the app that we defined previously. In
## $.app.auth.fields
```typescript
```javascript
$.app.auth.fields;
```
@@ -64,7 +64,7 @@ It's used to retrieve the fields that we defined in the `auth` section of the ap
It's an HTTP client to be used for making HTTP requests. It's a wrapper around the [axios](https://axios-http.com) library. We use this property when we need to make HTTP requests to the third-party service. The `apiBaseUrl` field we set up in the app will be used as the base URL for the HTTP requests. For example, to search the cat images, we can use the following code:
```typescript
```javascript
await $.http.get('/v1/images/search?order=DESC', {
headers: {
'x-api-key': $.auth.data.apiKey,
@@ -76,15 +76,15 @@ Keep in mind that the HTTP client handles the error with the status code that fa
## $.step.parameters
```typescript
```javascript
$.step.parameters; // { key: 'value' }
```
It refers to the parameters that are set by users in the UI. We use this property when we need to get the parameters for corresponding triggers and actions. For example [Send a message to channel](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/apps/slack/actions/send-a-message-to-channel/post-message.ts) action from Slack integration, we have a step parameter called `message` that we need to use in the action. We can use `$.step.parameters.message` to get the value of the message to send a message to the Slack channel.
It refers to the parameters that are set by users in the UI. We use this property when we need to get the parameters for corresponding triggers and actions. For example [Send a message to channel](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/apps/slack/actions/send-a-message-to-channel/post-message.js) action from Slack integration, we have a step parameter called `message` that we need to use in the action. We can use `$.step.parameters.message` to get the value of the message to send a message to the Slack channel.
## $.pushTriggerItem
```typescript
```javascript
$.pushTriggerItem({
raw: resourceData,
meta: {
@@ -97,7 +97,7 @@ It's used to push trigger data to be processed by Automatisch. It must reflect t
## $.setActionItem
```typescript
```javascript
$.setActionItem({
raw: resourceData,
});

View File

@@ -20,12 +20,12 @@ We used a polling-based HTTP trigger in our example but if you need to use a web
## Add triggers to the app
Open the `thecatapi/index.ts` file and add the highlighted lines for triggers.
Open the `thecatapi/index.js` file and add the highlighted lines for triggers.
```typescript{3,15}
import defineApp from '../../helpers/define-app';
import auth from './auth';
import triggers from './triggers';
```javascript{3,15}
import defineApp from '../../helpers/define-app.js';
import auth from './auth/index.js';
import triggers from './triggers/index.js';
export default defineApp({
name: 'The cat API',
@@ -43,24 +43,24 @@ export default defineApp({
## Define triggers
Create the `triggers/index.ts` file inside of the `thecatapi` folder.
Create the `triggers/index.js` file inside of the `thecatapi` folder.
```typescript
import searchCatImages from './search-cat-images';
```javascript
import searchCatImages from './search-cat-images/index.js';
export default [searchCatImages];
```
:::tip
If you add new triggers, you need to add them to the `triggers/index.ts` file and export all triggers as an array. The order of triggers in this array will be reflected in the Automatisch user interface.
If you add new triggers, you need to add them to the `triggers/index.js` file and export all triggers as an array. The order of triggers in this array will be reflected in the Automatisch user interface.
:::
## Add metadata
Create the `triggers/search-cat-images/index.ts` file inside of the `thecatapi` folder.
Create the `triggers/search-cat-images/index.js` file inside of the `thecatapi` folder.
```typescript
import defineTrigger from '../../../../helpers/define-trigger';
```javascript
import defineTrigger from '../../../../helpers/define-trigger.js';
export default defineTrigger({
name: 'Search cat images',
@@ -93,9 +93,8 @@ Let's briefly explain what we defined here.
Implement the `run` function by adding highlighted lines.
```typescript{1,7-30}
import { IJSONObject } from '@automatisch/types';
import defineTrigger from '../../../../helpers/define-trigger';
```javascript{1,7-30}
import defineTrigger from '../../../../helpers/define-trigger.js';
export default defineTrigger({
// ...
@@ -104,18 +103,18 @@ export default defineTrigger({
let response;
const headers = {
'x-api-key': $.auth.data.apiKey as string,
'x-api-key': $.auth.data.apiKey,
};
do {
let requestPath = `/v1/images/search?page=${page}&limit=10&order=DESC`;
response = await $.http.get(requestPath, { headers });
response.data.forEach((image: IJSONObject) => {
response.data.forEach((image) => {
const dataItem = {
raw: image,
meta: {
internalId: image.id as string
internalId: image.id
},
};

View File

@@ -35,7 +35,7 @@ yarn db:create
```
:::warning
`yarn db:create` commands expect that you have the `postgres` superuser. If not, you can create a superuser called `postgres` manually or you can create the database manually by checking PostgreSQL-related default values from the [app config](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/config/app.ts).
`yarn db:create` commands expect that you have the `postgres` superuser. If not, you can create a superuser called `postgres` manually or you can create the database manually by checking PostgreSQL-related default values from the [app config](https://github.com/automatisch/automatisch/blob/main/packages/backend/src/config/app.js).
:::
Run the database migrations in the backend folder.