We share content across both Lolo Code and Lolo Unify. Use filters to pick topic. 

Lolo Company Blog

Ida Silfverskiöld

OpenAI invites everyone to test ChatGPT, a new AI-powered chatbot so let’s use it to quickly build a Slack app to communicate with it for free.

aibot_openai_slack_lolo_code.png

Take 6 Minutes to Create a free OpenAI GPT-3 bot via Slack

To go through the steps required to do this.

1. We need to create a new Slack app and enable slash commands (I’ve picked /talkhere as you can see in the screen above).
2. When this command is called via Slack we will call OpenAI via a library function in Lolo. You’ll be able to set temperature and max tokens if you want.
3. Then we’ll route this data to Slack via another Library function in Lolo allowing us to override the message with the OpenAI answer.

The result will be an answer in Slack from OpenAI based on our prompt.

Check out our serverless Lolo app below as well.

![lolo_app_open_ai.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_app_open_ai_8f6aaf2f0b.png)

You have 18$ worth of free tokens in OpenAI that you can use, and that will last a long time. The Lolo app is free. Creating a Slack bot in Slack is free as well so no need to pay anything for this to work.

We tested a bunch of things, cleaning up code, doing translations, basic questions, talking to it, creating python code, correcting messages. You name it.

![1_QjIcMwYJu_VfARafJTbhZA (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_Qj_Ic_Mw_Y_Ju_Vf_A_Raf_J_Tbh_ZA_1_6c2568fd3b.gif)

## Getting an OpenAI API Key
You’ll need an OpenAI API key, that you can quickly get just signing up [here](https://beta.openai.com/). Then navigate to API Keys to create a new key. Save the key somewhere, we’ll need it.

![openai_api_keys.png](https://lolo-web.eu-1.int.lolo.co/uploads/openai_api_keys_353add5d19.png)

## Setting up a Lolo Application
Create a Lolo account [here](https://console.lolo.co/) if you don’t have one already. Otherwise, create a new app and then find a HTTP trigger in the menu to the left of the graph.

![1_U8k3D4mJY0sZT52HNWWaXQ (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_U8k3_D4m_JY_0s_ZT_52_HNW_Wa_XQ_1_9da0c6c6ab.gif)

Add it to your application and then make sure to set a path and rename it to Slack Webhook.

**Psst! We forgot to show this but you should also set method to POST and not GET. Slack will send us a POST request, so if you don’t have the method set to post it won’t work.**

Navigate to the HTTP trigger again to copy the external url, we’ll need it in a bit when we set up our Slack command.

![1_bnm-ERVrEklX-15BoIwXvg (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_bnm_ER_Vr_Ekl_X_15_Bo_Iw_Xvg_1_9bf1e9e994.gif)

We’ll also set up to send back the required Slack response within 3 seconds in another node right away. So, create a new function in the bottom right corner and add this code block in there.


```javascript
exports.handler = async(ev, ctx) => {
  const { route, emit } = ctx;

  // Emit response right away to Slack
  emit('response', { statusCode: '200'});

  ev.responseURL = ev.body.response_url;
  ev.message = ev.body.text;

  // route the event object to the next node
  route(ev);
};
```

You’ll see in the code above that we are also getting the responseURL from the payload. We’ll need this one later to send back a message to Slack.

We’re also collecting the message that we’ll use as the prompt when calling OpenAI and setting it to the event object (so it can be used in another node later).

![1_3TR17h_Tcd9J3O5rkrBA-A (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_3_TR_17h_Tcd9_J3_O5rkr_BA_A_1_300eefd864.gif)

Now let’s create a Slack app so we can use this webhook we’ve set up.

## Creating a Slack Application
Go [here](https://api.slack.com/apps/) and then press create new app. Unless you want to use an already existing application.

Then navigate to slash commands, and create a new command. You can name it whatever you want but you need to set the external URL that we got from Lolo as the request URL. Slack will send a post request to it when it is hit so we can process that request (make the OpenAI call and so on).

After this make sure to install your application to your workspace.

![1_7THZ0epSJRbpTZi32lkbxg (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_7_THZ_0ep_SJ_Rbp_T_Zi32lkbxg_1_4c3ff0f14b.gif)

We’re done here now so let’s make the OpenAI API call.

## Calling OpenAI with the Slack Message as the Prompt
Now we’re heading back to the Lolo app and looking for the Lolo/OpenAI library function in the palette. Where you found the first HTTP trigger.

![1_0PDy_3CTHHyrXfyCQyUjQQ (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_0_P_Dy_3_CTH_Hyr_Xfy_C_Qy_Uj_QQ_1_4dc661d4f1.gif)

Open it up to set the required values. Use the OpenAI API key that we got earlier. You can create another one if you’ve lost the first one.

![lolo_openai_library_function_config.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_openai_library_function_config_bdb3fab934.png)

Here we’ve set temperature as 0.3 which seems to be the amount of creativity you want it to answer with. We’ve also set max_tokens to 4000 so the message doesn’t get cut off. You can several more options to set here but make sure you use the right wording for them. For the first time use these two options or none at all, after that you can fine tune it as you want.

The model is set to davinci which is the more expensive one, you can change this to ada or so. The prompt is set to a dynamic value from the event object that we have access to in each node. Remember that we set ev.message to the text we received from the Slack payload earlier.

That is it here. Go back to your graph.

## Send back a Message to Slack with the Response URL
Now we need to look for the Slack library function to send back the response. So again open up the function palette in your graph in Lolo and add the Slack Msg (beta) from the list.

Open it up to configure it. We need to set operation to Slack Response.

![1_TA-o1q6vx-mTxENEc72QFw (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_TA_o1q6vx_m_Tx_EN_Ec72_Q_Fw_1_3a3396b45b.gif)

We’ll need to configure this one with a bit of dynamic values here. We have the response url set to the event object and OpenAI will give us back the response in {event.response} so to access the text of the response we will need to set {event.response.data.choices[0].text}

See the exact values you want to set below.

![slack_library_function_lolo.png](https://lolo-web.eu-1.int.lolo.co/uploads/slack_library_function_lolo_50a2ee76eb.png)

To understand this, we are getting a payload with the Slack slash command and then saving the response url so we can send an HTTP request to it when we are ready (i.e. when we’ve made the OpenAI request and gotten back the correct data). This library function does this for us though but it does need somewhere to post to, i.e. to this response url.

We’re done here so we can go back and make sure to connect all the nodes now and then Save and Run your application.

![1_GGmdolWnId3pj0ypAe_Jhw (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_G_Gmdol_Wn_Id3pj0yp_Ae_Jhw_1_f71543773b.gif)

Go to your Logs to see things happen in your Lolo app. To make sure it has been deployed, look for “Listen to port 4000.” Do wait at least a minute.

Now we can test it out. Go to Slack and try out your command with some text you want to ask OpenAI.

![1_48H1mgGnkWCTQZt6VC4x_g (1).gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_48_H1mg_Gnk_WCTQ_Zt6_VC_4x_g_1_a61e00f4c3.gif)

Try out whatever with it. We haven’t tested everything yet and it goes without saying you should be able to do more advanced stuff with this.

Jesper Larsson

Low code and traditional coding styles can be mixed in LoLo to enjoy the benefits of both. In this post I show you how!

front.jpg

Low Code Ain't Scary

Lolo Code is a platform to simplify developing and deploying cloud applications.
One part that helps simplify the experience is that Lolo allows combining low code
and more traditional development styles. Low code can have many different kinds
of connotations. One connotation is that low code necessarily is limiting. In 
this post I'd like to challenge that notion by demonstrating how low code and
traditional styles can intermingle. To do so we'll together walk through developing
a small app in Lolo.

The app we'll build is an occupancy counter. Imagine you having a club house, but
there is only room for 15 guests. With an occupancy counter, you can count
whenever someone enters or leave and it'll keep the count of how many guests
are in. We'll only focus on building the Lolo app here, and let the user interface
remain hypothetical.

While building we'll continuously explore how the ease of use of low code and flexibility of traditional coding
can complement each other.

## Architecture

Before we start building, let's layout a plan.

As described above, we want to be able to ***increment*** our ***counter*** when someone enters
the clubhouse, and ***decrement*** it when someone leaves. We'd also like to be able to ***get***
the current count.

From this description we realize that need to have some state to store the current count. On this
state we'd like to be able to perform the actions: increment, decrement, and get.

Increment increases the save counter by one, and decrement decreases it by one.

![](https://lolo-web.eu-1.int.lolo.co/uploads/states_d87785b32e.png)

Get returns the current value of the counter.

We'll map each action to a HTTP route that either modifies or queries the state.

## Implementation

To start of we'll create an empty, Lolo application.

![](https://lolo-web.eu-1.int.lolo.co/uploads/empty_2882ae97f9.png)

And then start registering HTTP routes.

### HTTP routes

To register routes we use the [HTTP Trigger](https://docs.lolo.company/docs/http-trigger-1) library function.
While we could use the [HTTP server](https://docs.lolo.company/docs/context-ctx#httpserver) object accessible on the context,
we don't really need the flexibility it offers.
The low code approach serves us just fine here.
We are able to define the parameters for the route in a helpful interface that prevents us from making mistakes.

![](https://lolo-web.eu-1.int.lolo.co/uploads/parameters_e142de17e5.png)

We can quickly drag in and configure two additional [HTTP Triggers](https://docs.lolo.company/docs/http-trigger-1)
and be ready to receive events when requests are received.

![](https://lolo-web.eu-1.int.lolo.co/uploads/triggers_84c445c1e4.png)

### Responding

We know that we'll need to respond at some point so lets drop in a [HTTP response](https://docs.lolo.company/docs/http-response) node.

![](https://lolo-web.eu-1.int.lolo.co/uploads/response_b4ce07c0e3.png)

Just as registering HTTP routes, sending an HTTP response is common operation. Again it is possible to drop down into code
and create a response with [emit](https://docs.lolo.company/docs/context-ctx#emit), but the flexibility is not required and thus it easier and quicker to reuse an existing library function.

### Modifying the state

The final part we need to do is to implement the handlers for each route.
We need one handler to increment the count, one to decrement count and one to just retrieve it. These are actions specific to our application. Thus there exist no ready library functions we can reuse.

This is an excellent example of when we need that extra bit of flexibility and choose to code our own inline functions. To do so we click the *New Function* and new inline function appears in the editor. By double clicking this new function we can edit the code that it runs. With this method we create three new functions containing the following code:

**Increment**
```javascript
exports.handler = async(ev, ctx) => {
  const { route, state } = ctx;

  const old_value = state.get('count') || 0;
  const new_value = old_value + 1;
  state.set('count', new_value);

  route(new_value);
};
```

**Decrement**
```javascript
exports.handler = async(ev, ctx) => {
  const { route, state } = ctx;

  const old_value = state.get('count') || 0;
  const new_value = old_value - 1;
  state.set('count', new_value);

  route(new_value);
};
```

**Retrieve**
```javascript
exports.handler = async(ev, ctx) => {
  const { route, state } = ctx;

  const value = state.get('count') || 0;

  route(value);
};
```

Our editor looks something like this now:
![](https://lolo-web.eu-1.int.lolo.co/uploads/custom_5e5249a9c1.png)

### Wiring

Too finish up we wire up or nodes.

![](https://lolo-web.eu-1.int.lolo.co/uploads/wired_9781c56553.png)


## Summary

I hope this post have illuminated how low code and with traditional coding can complement each other. Low code enables quick and easy implementation of common functionality while traditional coding can be more flexible. Functionality like registering HTTP routes and sending HTTP responses are common in many types different applications. Implementing such task can be simplified when done in a low code manner. But some tasks are unique to a specific application. This can be tasks like the applications business logic or translating data formats between two functions. Implementing these functions is where the flexibility of traditional coding shines. (If your realize that your specific task is reused in several places you can easily [export it](https://docs.lolo.company/docs/exporting-a-function) into a new library function and then use it in a low code manner to!)


Muneharu Ota (aka Harry)

What’s the difference between FaaS and iFaaS in terms of costs and performance? We'll go through it in this article.

aws-vs-lolo-code-blog.png

Costs and Performance for iFaaS (Lolo) vs FaaS (AWS)

Serverless architecture is a powerful system design that lets developers build and run code without managing servers and without paying for idle cloud services.

AWS is one of the largest cloud service providers, where you can create a robust Serverless system. However, there are three perspectives below that we’d like to touch on the differences between Lolo Code (integration function-as-a-service) and AWS (function-as-a-service) in making Serverless Apps.

- Cost
- Performance
- Efficiency

## Cost to Build & Run a Serverless App

### AWS Pricing

AWS offers you a pay-as-you-go approach for pricing. In other words, you’ll pay for how much you’ve used AWS resources.

#### Pricing Example AWS

An API is used in a Serverless Web Application that invokes Lambda to return dynamic webpage content. The site gets 10,000 page loads per minute. Each API request is 12KB and the response is 46 KB.

This will be a total of 432 million requests per month.

_Monthly costs = $418.8 ($0.97 per million)[*](https://aws.amazon.com/api-gateway/pricing/) in Amazon API Gateway costs (not including Lambda nor DynamoDB)_

### Lolo Code Pricing

Lolo Code also offers you a pay-as-you-go model but it’s more straightforward, you pay for the amount of events your app needs to process concurrently rather than the total of events.

You can subscribe to 1 Application with [1 LCU (or Replica) ](https://docs.lolo.company/docs/pricing)with 256 mb memory and 0.125 cores (CPU) starting at 9 euros a month. Free tier includes two apps with 1 LCU each but requires you to engage with the app once a week to keep it running. If you want to increase your replicas for a free-tier app the price starts at 9€ each.

#### Pricing Example Lolo Code

Taking the same example as above for API Gateway we did some calculations.

If the site gets 10,000 page loads per minute and each API request is 12KB and the response is 46 KB, we need to process 10k req/min for a Lolo app. This requires 0.131 (cores) and 85 mb memory. Consequently, this requires two replicas at 9€ each but we will still have room for more requests within that app. The result is

_Monthly costs = €18 per month cost for the Lolo app._

Lolo could be seen as a combination of AWS Lambda and API Gateway. You can also use Lolo’s baked in state store to store your dynamic webpage content. This way there would be no hidden costs. The total you would pay would simply be €18 per month.

## Performance Differences between iFaaS and FaaS

AWS may offer everything you need, and you can design a large-scale app with redundancy, scalability, and high availability. On the other hand, you should know network systems well and be familiar with the AWS architecture to unlock its potential. Serverless also comes with its downsides. One of them is the notorious “cold start.”

To illustrate, your app will wait for a certain period until a container is ready to run code. This request takes longer to process because a Serverless app needs to spin up the function (i.e. download code, library, modules/etc, and initialize an environment to run code). This issue appears in any Serverless apps either in Lolo Code or AWS.

### AWS

AWS has gotten notoriously better since the Lambda fleets migrated to the Firecracker technology in 2018. However, as the function still needs to spin up cold starts will prevail.

In AWS, you can wake up Lambda with a minimum number of containers. But you’ll have to pay an extra cost to run it continually.

We had a [user do a test*](https://medium.com/@lakshmanLD/lolo-code-the-promising-new-serverless-service-on-the-block-fd4f96d1349b) on AWS Lambda’s delayed starts this summer (using AWS EU). The result of the experiment is below.

| 1 min | 180 ms
\
&nbsp;
| 15 min | 750 ms
\
&nbsp;
| 3h | 1467 ms
\
&nbsp;
| 10h | 2060 ms

### Lolo Code

Apps on Lolo Code also have the “Cold Start” issue but your Lolo App keeps running until you stop it. I.e. since Lolo Code is working with containers your app will technically always be running until you stop it. Essentially you shouldn’t have to care about cold starts.

However, the user from above that did the test on AWS did the exact same [test in Lolo Code.*](https://medium.com/@lakshmanLD/lolo-code-the-promising-new-serverless-service-on-the-block-fd4f96d1349b) His results are shown below.

| 1 min | 172 ms
\
&nbsp;
| 15 min | 210 ms
\
&nbsp;
| 3h | 602 ms
\
&nbsp;
| 10h | 890 ms

He was operating in India using Lolo’s EU runtime which is something to keep in mind.

Something else to consider is if your script is running for too long, then AWS may not be the best choice. AWS Lambda’s max timeout 900 seconds (15 minutes) whereas Lolo does not have max timeout.

## Efficiency: How to build and manage a Serverless app?

Building APIs in both AWS and Lolo Code is straightforward. However, there are difference.

### AWS

In AWS you build your Lambda function and later hook it up with another service, API Gateway, that will act as its trigger. Here you have an anonymous function that will get triggered when something happens. This is the very ideal of FaaS, an anonymous function that only gets triggered when an event happens.

As the function is stateless, you’ll need to fetch data elsewhere, in this case you may use AWS DynamoDB to store and fetch data.

![1_793us9_Hs_Gs_Pp0x_AQ_Hr_S_Dmw_40b4bb5950_71e08a2721.png](https://lolo-web.eu-1.int.lolo.co/uploads/1_793us9_Hs_Gs_Pp0x_AQ_Hr_S_Dmw_40b4bb5950_71e08a2721_70f40b29e4.png)

This looks like a scalable and robust design, however, you need to consider some important factors:

- How to manage changes to software code?
- How to deploy or customize your app quickly?
- Where to start checking across the services in case of any infra issues?

You will find it a hassle to manage your app whenever you need to change and test your code quickly on any cloud service provider such as AWS, GCP, Azure/etc.

See a full tutorial on how to build an HTTP API with Lambda, API Gateway and DynamoDB [here.](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-dynamo-db.html)

### Lolo Code

With Lolo Code you can add an HTTP trigger and then use the baked in state store for a database. You can add a new raw function to act as your lambda (to follow the exact use case from above).

Your Lolo application may look like this.

![1_u5x9_EQDZC_Uej2_U8_Xny_Wycw_3bcb06e6d0.png](https://lolo-web.eu-1.int.lolo.co/uploads/1_u5x9_EQDZC_Uej2_U8_Xny_Wycw_3bcb06e6d0_95db8458e9.png)

You will decide what is in the code blocks by simply changing its code (NodeJS) and then rename it.

Furthermore, Lolo Code offers Library functions that you can copy and use existing template functions and create your own templates. For the API case, we can use the [Lolo/CRUD API v3 ](https://docs.lolo.company/docs/crud-api-v3) function to quickly create a CRUD API. This will be faster than setting up our own from scratch.

![1_X_Ayo_An_VR_Lx1_4shq7_Ob2_Q_903a4462e2.png](https://lolo-web.eu-1.int.lolo.co/uploads/1_X_Ayo_An_VR_Lx1_4shq7_Ob2_Q_903a4462e2_a7914771a5.png)

You don’t have to change too many things on different places. With Lolo Code, all your work is in one place.

Once you save and run your application you do not have to worry about maintaining or provisioning your own servers to keep it running (i.e. it is completely “serverless”). Unless you decide to use a private runtime in your own public cloud account or private datacenter. See Lolo runtime-d docs here. Runtime-d is a standalone binary that turns any laptop or linux server into a Lolo runtime.

## Summary

AWS is a widespread cloud platform, offering fully featured services from data centers globally.

With AWS, you can do many things, but it also requires decent effort and time to turn your idea into an app and deploy it on AWS. Lolo Code will help you to speed up your development and keep it running for less. Although Lolo Code uses the AWS cloud to deploy apps, it also offers you the ability to use your own runtimes, making it cloud agnostic.

We just created the Barrier. The purpose of it is to easily to run some functions concurrently and collect their result in a Lolo app.

barrier.png

Remedy for the Scary Sequential

This Halloween week 🎃 I'd like to share a pattern I recently made use of. I call it the barrier. The purpose of it is to easily to run some functions concurrently and collect their result. Let me explain!

(Please excuse the terrible title, I had some Halloween mood left 😅)

In development it is common that some task depend on another task. For example, the function x might operate on the output from the function y.

![lolo_simple.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_simple_2e4dd4732b.png)

We can visualize such dependency in a diagram like the one below.

![single_dependency.png](https://lolo-web.eu-1.int.lolo.co/uploads/single_dependency_66a2e761d7.png)

Sometimes as developers we identify a task that has multiple independent, prerequisite tasks. Visualizing such a situation could look like:

![task_dependency.png](https://lolo-web.eu-1.int.lolo.co/uploads/task_dependency_310ca7c5c5.png)

When deciding how to run such tasks we can choose to run them sequentially.

![lolo_seq.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_seq_05587b2055.png)

That is we first start working on task A, and once it completes start on task B, and so on.

![seq_execution.png](https://lolo-web.eu-1.int.lolo.co/uploads/seq_execution_84e278034f.png)

But since the tasks A, B and C do not depend on each other, we could execute them concurrently (i.e. at the same time).

![concurrent_execution.png](https://lolo-web.eu-1.int.lolo.co/uploads/concurrent_execution_c5a48bfe6f.png)

The question is how do we do that. Most environments have a some way of achieving concurrent execution, e.g. threads or promises with async/await. But I'd like to share a pattern I recently discovered that allow you to execute LoLo functions concurrently and await their results before proceeding with a dependent function.

To start of, it is real easy to execute functions concurrently in LoLo. Just route one event to multiple functions!

![concrrent_execution_in_lolo.png](https://lolo-web.eu-1.int.lolo.co/uploads/concrrent_execution_in_lolo_69be794120.png)

But how do we collect the results of the functions A, B, and C and pass them to T. Just connecting the outputs of the three functions to the input of T will result in that T executes thrice with incomplete input.

![collect_bad_alt_1.png](https://lolo-web.eu-1.int.lolo.co/uploads/collect_bad_alt_1_3955a44747.png)

One could imagine having a function with three inputs, and once it has received events on all three inputs, emit an event on it's output.

![collect_bad_alt_2.png](https://lolo-web.eu-1.int.lolo.co/uploads/collect_bad_alt_2_0686768b28.png)

But there is an issue of keeping different runs separate. Say that A takes 1s to complete but B and C takes 3s. Further imagine that a new event is triggered every second by START. At least two triggered events traveling through A would reach COLLECTOR before the first event through either B or C would reach it. How does COLLECTOR differentiate each invocation? The COLLECTOR could use some policy to guess which events are related, or ask that some invocation ID are threaded through each function. But building on top of LoLo's event based nature there is a simpler way. Namely the barrier!

![large_barrier_585381b589.png](https://lolo-web.eu-1.int.lolo.co/uploads/large_barrier_585381b589_f302935c50.png)

The barrier utilize that event listeners registered with once are local to each produced event. When the barrier receives an event it creates a listener with once for each dependency before it passing along the event. Once each dependency has signaled (with emit) that it is done, the barrier knows it can start T. 

The barrier rely on that the dependent functions can pass data through emit back to the event listener to collect the results of A, B, and C. By relying on the locality of event listeners in LoLo it is easy to implement and maintain the barrier. Below is the implementation of a barrier for this pictured situation.


```javascript
exports.handler = async(ev, ctx) => {
  const { route, once } = ctx;

  let flag = 0;
  const collection = {};
  const arrived = path => res => {
    collection[path] = res;

    flag += 1;
    if (flag == 3) {
      route(res, 'out');
    }
  };

  once('a_done', arrived('a'), 60 * 1000);
  once('b_done', arrived('b'), 60 * 1000);
  once('b_done', arrived('c'), 60 * 1000);

  route(ev, 'a');
  route(ev, 'b');
  route(ev, 'c');
};
```

When a dependency notifies the barrier that it is done arrived is called. arrived saves the result the dependency passed back. Then it increments the flag variable by one. This variable is a count of how many dependencies are done. If all three are done, the collected results are routed to out.

The signal nodes are also trivial. Below is the SIGNAL A DONE as an example. The only difference for the others are the name of the event they emit.


```javascript
exports.handler = async(ev, ctx) => {
  ctx.emit('a_done', ev);
};
```

I've found barriers easy to use in my own projects and I hope you'll find it useful as well. Let me know if you'd like us to include an official LoLo barrier in the standard library!





This is part 2 of a series on using WhatsApp in Lolo. This tutorial shows you how to send WhatsApp messages rather than receive them.

banner.png

Sending WhatsApp Messages with Lolo

In my post from last week I walked you through how to create a LoLo app that can receive WhatsApp messages. In that post we started by laying out a rough structure for our LoLo app, before moving on to filling out the details. I like using that strategy when sketching out my LoLo apps as it allows me to quickly iterate through different solutions.

This post is a follow up on the previous entry. In this post we'll build upon the app we've created to add the ability to respond to received messages. We'll slightly expand our LoLo app, but the grunt of the work is in configuring the Facebook app, but not to worry there will be step by step instruction accompanied by images.

## Expanding the LoLo app

When we left of last time we had a LoLo app with a trigger node and a log node. The trigger node emitted new events when it received WhatsApp messages and the log node logged those events. We'll now add a node to craft a response from the received message and then route that message to an instance of the LoLo WhatsApp Send library function. Below is an screenshot of our starting point.

![lolo_starting_point.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_starting_point_172f520b38.png)

To start off, add in the LoLo library function WhatsApp Send from the function library, just like we did with both previous nodes in the previous article.

![lolo_send_added.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_send_added_a0f0412db0.png)

Then we'll need an inline function that can craft our replies. To create an inline function, hit the "New Function" in the bottom right of the editor. (We'll go into a bit more detail about what a inline function is a little bit later.)

![lolo_new_inline_function.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_new_inline_function_9f8723ec21.png)

Hitting that button adds a new node onto the editor. In this next picture I've dragged the nodes to rearrange them and connected them as we went through in the last post.

![lolo_rough_outline.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_rough_outline_08ee0d60e3.png)

We now have a rough outline of the new version of our LoLo app.

I'd like to highlight a few details that we now encountered before proceeding. First, a node may both have inputs and outputs. I like to think of it like events flow through nodes, which may modify the events. Nodes that have multiple outputs, like WhatsApp Send, can be thought of as junctions that can decide to steer the incoming events to either or both outputs. 

The second details I'd like to call out is that events from a single output may flow to multiple nodes. Here we use this ability to both log a received message, and send a reply.

## Implementing an inline function

Now that we have the rough outline layed out, we'll start implementing the inline function. The purpose of the inline function is to craft a reply from the message we receive. To craft the messages we'll need to know both the format that WhatsApp Send expects, as well the format of the messages received. 

The LoLo standard library functions have attached documentation that explains what the function does, and the format it expects as input and the format it produces as output. A functions documentation can be found by double-clicking the node, and then navigating to the "Docs" tab. Below is a screenshot of the documentation for the WhatsApp Send library function.

![lolo_function_docs.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_function_docs_ad7720a241.png)

The documentation explains that the expected input has the following form:

```
{
    to: "A STRING WITH A PHONE NUMBER TO SEND THE MESSAGE TO",
    text: "THE MESSAGE TO SEND",
}
```

(I left out the preview_url property as the documentation mentions that it may be set to undefined which implies that it is optional. If you're unsure why this is, I'd recommend to study this [article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) in the excellent MDN web documentation.)

When inspecting the documentation for the WhatsApp Trigger to learn about the format of the messages it produces, we are directed to the WhatsApp documentation with a link. While that documentation is expansive, we can learn a lot of detail. By carefully reading it we can learn exactly how our message will look in different circumstances. (A trick I used to get a jumping of point for parsing the documentation was studying the format of the messages we received and logged.) In our case where we receive text messages the event will have the following format:

```
{
  from: "SENDER PHONE NUMBER",
  id: "THIS MESSAGE'S ID",
  timestamp: "UNIX TIMESTAMP OF WHEN MESSAGE WAS RECEIVED BY FACEBOOK",
  text: { body: "THE MESSAGE BODY" },
  type: "text", // Always the string "text" in the case of a text message
}
```

(If you're unfamiliar with UNIX timestamps, the short explanation is that they are just the number of seconds elapsed since 00:00:00 on January 1st 1970. They are a simple way of indicating a moment in time widely used in software engineering.)

Knowing these formats we can construct a piece of JavaScript that translates between them. I encourage you to attempt by yourself. Below is my solution.

```javascript
// A function to transform a received WhatsApp message to a
// a reply we can send back.
function transform(input) {
    let reply = {};

    reply.to = input.from;
    reply.text = input.text.body;

    return reply;
}
```

The function above takes in an input. The assumption here is that the received value has the format of the WhatsApp messages we receive. The function then constructs a reply object and assigns the properties that is expected by the WhatsApp send node. By assigning the to property the senders number we create a message addressed back to the sender. We then "echo" the text body we received. Here you can get as creative as you'd like. An idea could be generating a reply using OpenAI. We recently released a library function that integrates with it!

We can run this piece of code in our inline function we added earlier to transform the events. To edit the inline function, double click it! You should see an inline editor like the one below:

![lolo_new_inline_editor.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_new_inline_editor_057d044cda.png)

I will not go into too much detail about exacts working here, but expect you've got the understanding of at least reading [this documentation article on inline functions.](https://docs.lolo.company/docs/functions-1) After augmenting the initial code given, my version looks like this:

![lolo_inline_function_with_custom_transformation.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_inline_function_with_custom_transformation_ad8323e098.png)

By going over to the settings tab, we can also change the node's name to something a bit more descriptive, like Craft reply. See below:

![lolo_chaging_name_of_node.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_chaging_name_of_node_f31cad04cd.png)

If we now go back to application editor (i.e. by hitting the back button in the top right) we'll see the node now has an update name. (Now could be a good time to save!)

![lolo_editor_with_renamed_node.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_editor_with_renamed_node_d0841c741e.png)

## Configuring WhatsApp Send

Now that we've implemented our inline function we need to configure the WhatsApp Send node we imported. As we went through in the previous post, double click the node to start configure it. You should see a screen like the one below:

![lolo_whatsapp_send_configure.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_whatsapp_send_configure_76921f12e7.png)

As you can see, we need two pieces of information: an access token and a phone number ID. Let's start by acquiring the ID!

The ID determines what phone number we'd like to send as. It can be found in your META App's dashboard under WhatsApp -> Getting started. We were in this screen last week as well to look up the actual phone number. It is the screen in the image below. The arrow points to the field your looking for.

![facebook_whatsapp_getting_started.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_whatsapp_getting_started_62c2289a61.png)

Grab that ID and paste it into to the lower field in the LoLo editor!

To get the information required for the upper field we'll unfortunately will have to jump through a few more hoops. The reason is that META would like you to create a so called system user with correct privileges. Separating real users and system users allows Facebook to separate what actions are done by automated systems (like our LoLo app) and human.

To create a system user, go to business.facebook.com. You should land on a page that looks like this:

![facebook_business_landing_page.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_business_landing_page_c1548225f2.png)

When we created the Facebook app in last week's blog post, a Facebook Business was created for us. It is really this business that owns the Facebook app. Your personal account is in reality just an administrator for the business and app. Now hit the cogwheel at the bottom left to go to the settings page for your business. Then navigate to Users -> System users and you should see a screen like the one in the screenshot below:

![facebook_system_users_settings.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_system_users_settings_2dda3db9b7.png)

Hit the blue button in the middle of the screen! Mine says "Lägg till" since the dashboards insists I use it in Swedish, but the button should say something along the lines of "Add" or "Create" for you.

Hitting that button will prompt you to accept some terms. Read them and then hit accept to continue. You'll then be asked to name the users and select it's role. You may name it anything you'd like. Leaving the role as the default "Employee" is sufficient for our use case.

![facebook_create_system_user_dialog.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_create_system_user_dialog_83e736f34b.png)

Once you've filled out the dialog, confirm to create the user and you'll see a page like:

![facebook_system_users_created.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_system_users_created_818a782d6c.png)

Due to our Facebook App still being in "Development mode" we need to add our system users as a developer to the Facebook App. To do this, hit "Add resource". Then navigate to Apps, select your Facebook App and toggle the "Develop the app" access. Like this:

![facebook_add_resource.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_add_resource_e243dff05d.png)

Hit save. Now the our created system user need to be given access to the WhatsApp account. To do that, in business settings, navigate to Accounts -> WhatsApp-Account.

![facebook_business_whatsapp_account_settings.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_business_whatsapp_account_settings_6847f26087.png)

Click the add people button. A dialog pops up. Select the system user, and toggle partial access.

![facebook_granting_partial_access_to_whatsapp_account.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_granting_partial_access_to_whatsapp_account_a97f02c756.png)

Hit save.

We now need to generate a access token for this system user. Go back to the page system users settings page. (Users -> System users).

![facebook_system_users_created.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_system_users_created_818a782d6c.png)

Hit Generate new token and a dialog will pop up asking you to choose an app.

![facebook_generate_token_dialog.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_generate_token_dialog_2b78129299.png)

Select the your Facebook app in the dropdown. The dialog will expand. Check the box next to whatsapp_business_messaging.

![facebook_expanded_dialog_with_arrow.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_expanded_dialog_with_arrow_2b48edec8d.png)

Scroll down the bottom of the dialog and hit the button that says generate. You'll see a new dialog with the generated token.

![facebook_generated_token.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_generated_token_e353cd071c.png)

Copy that token and select add new authorization in the drop down in the LoLo console! (Make sure no extra spaces sneaks in, I've noticed the facebook dialog can be tricky to copy from.) In the dialog that appears paste in the token, and hit allow access. 

Both parameters of the WhatsApp Send node should now be filled in and you can save your app and the run the new version. Do that! Give it a minute to deploy. As covered last week, you can use the logs to verify that the app is running. Once the app is running, test sending a message using WhatsApp, you should get a reply with same text.

![sent_message_from_whatsapp_ios_84703f69f2.png](https://lolo-web.eu-1.int.lolo.co/uploads/sent_message_from_whatsapp_ios_84703f69f2_6a5b1ab97b.png)

You now have a LoLo app that both can receive messages and respond to them! 🎉 I hope you want to continue to expand upon the base you now have!

Walkthrough how to create a Lolo app to receive WhatsApp messages as your trigger using one of our new library functions. 

Receiving WhatsApp Messages with Lolo

We've just released new library functions to integrate with WhatsApp! 🎉

In this post I'll walk you through how to create a LoLo app that can receive WhatsApp messages. We'll walk through how to create and configure both the LoLo app and Facebook app. (I hope it doesn't come as a surprise that META, i.e. Facebook owns and operates WhatsApp.)

## Laying out a rough structure

We'll start by creating a rough structure of a LoLo app.

First, we need to login to the LoLo console. You can find the login page [here](https://developer.lolo.company/). If you do not already have an account, you may also create one on the same page. 

Once logged in you should find yourself on a page similar to this one.

![lolo_console_ad558a9e6b.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_console_ad558a9e6b_b0a6356a0f.png)

From there click on the blue button just under the navigation bar that says "Create app". You will see a small Wizard where you can name your app and give it a description.

![create_lolo_app_b04d65a01a.png](https://lolo-web.eu-1.int.lolo.co/uploads/create_lolo_app_b04d65a01a_4e374dcf7f.png)

Once you given your app a name and description, click next and you'll land in the editor.

![lolo_editor_with_arror_to_library_1b815372a0.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_editor_with_arror_to_library_1b815372a0_9302d13d5c.png)

In the image above you there's an arrow to a plus button. Clicking it expands the function library. Expand the library and find the functions named lolo/WhatsApp Trigger and click it to add it to the editor. Also find the function called lolo/Log and add it to the editor as well.

![add_functions_6fd70c5b59.gif](https://lolo-web.eu-1.int.lolo.co/uploads/add_functions_6fd70c5b59_fe73cba633.gif)

Once the functions are added, connect them by dragging an edge from the out port on lolo/WhatsApp Trigger to the in port on lolo/Log.

![connect_functions_22a289d799.gif](https://lolo-web.eu-1.int.lolo.co/uploads/connect_functions_22a289d799_fb1a21b85f.gif)

The result should be an app that looks like this:

![receive_messages_rough_lolo_structure_f52740054c.png](https://lolo-web.eu-1.int.lolo.co/uploads/receive_messages_rough_lolo_structure_f52740054c_13a70fdec6.png)

And there we have the rough structure of our LoLo app.

To save our progress we can click the blue "save" button in the top right. We may add an optional comment.

![save_in_lolo_editor_9ae37ca831.png](https://lolo-web.eu-1.int.lolo.co/uploads/save_in_lolo_editor_9ae37ca831_f565a19aa8.png)

## Configuring

Now that we have the rough structure layed out, we need to configure our functions. lolo/Log will by default log the entire event passed to it. One can customize that behavior if one would like, but the default behavior is fine for now. lolo/WhatsApp Trigger however needs some configuration. To start configuring it, just double click it. That will open a function editor with settings and documentation for that specific function.

(Most functions need some sort of configuration. To figure out how to use a function the function editor is a good place to start.)

![lolo_function_editor_1f3fdb8725.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_function_editor_1f3fdb8725_583ca17c55.png)

When we've opened the function editor we land on the parameters page. Here we can provide pieces of information that the function need to do it's job. To learn more about how to use a function the "Docs" tab is the place to go. In this case we need to provide three pieces of information:

- META App Secret,
- Verification Token,
- HTTP Path.

Just by reading the description of each field we get a basic understanding of the purpose of each, the format of the expected data and how we might acquire that data. Both the verification token and HTTP path is at our discretion to decide.

For example:

![function_editor_with_2_of_3_fields_filled_in_bc31e85aed.png](https://lolo-web.eu-1.int.lolo.co/uploads/function_editor_with_2_of_3_fields_filled_in_bc31e85aed_73104b9086.png)

To fill the last field, we need to get a piece of information from the Facebook app dashboard.

(Now may be a good time to save. To do so, hit the back button in the upper right corner, and then save as before.)

## Creating and configuring a Facebook app

In this section I'll assume you do not have a Facebook app otherwise scroll past this section.

To start open the [Facebook developer dashboard.](https://developers.facebook.com/apps)

If your not logged in, please do so. You may be prompted to set your account up as a developer if you have not already done so. Please follow on the on screen directions. Once logged in you should land on the following page.

![facebook_developer_dashboard_8d47095c5d.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_developer_dashboard_8d47095c5d_de4ddda4e1.png)

Click on "Create App". You will be guided through creating an app. First you'll be prompted to select the type of app. Select business. Then you'll be asked for name your app. Once you finish the wizard you'll land on the app's dashboard.

![facebook_app_dashboard_254cc25ab7.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_app_dashboard_254cc25ab7_a0bc9049fd.png)

Please select "Set up" on the WhatsApp product. (You may need to scroll or resize your window to see it.) You'll see the following screen.

![facebook_app_whatsapp_quickstart_wizard_1_b13e26613c.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_app_whatsapp_quickstart_wizard_1_b13e26613c_eefc7a2baf.png)

Click continue. Then go to Settings > Basic in the navigation bar on the left hand side.

![facebook_app_settings_basic_cbf264617b.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_app_settings_basic_cbf264617b_73d87913b3.png)

Here we find the app secret we need to finish configuring our LoLo app. Click show and copy the secret. In the LoLo function editor select "Add new authorization" in the META App Secret dropdown. A new window will open.

![lolo_add_new_authorization_b1c9bbaff7.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_add_new_authorization_b1c9bbaff7_3677304955.png)

Paste the secret in the AppSecret field and click allow access.

![lolo_new_authorization_dialog_8b260a501c.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_new_authorization_dialog_8b260a501c_facf2a2921.png)

The function is now configured! Save the app again. Then hit run. The latest saved version of your app will now be deployed!

![lolo_editor_with_arrow_to_run_8f1127e6ed.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_editor_with_arrow_to_run_8f1127e6ed_462c3519a1.png)

Give the app a minute to start, then go the "Logs" tab to verify that the app is running. You should see something like below. (If there are no logs, the app may not have started yet, give it another minute and then reload the page.)

![lolo_app_logs_da163f7a98.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_app_logs_da163f7a98_3dcb137a9d.png)

Then go to the "Docs" tab. Here you can see the URL of your app. Copy it and append the value you specified for the HTTP path field. My resulting URL is as follows https://eu-1.lolo.co/ceSY21qaKYU4dZiw7RBrDj/whatsapp. Head back to the Facebook app dashboard. Go to Webhooks in the navigation bar on the right.

![facebook_webhooks_empty.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_webhooks_empty_94764f3957.png)

Ensure that "Whatsapp Business Account" is selected. Then click "Subscribe to this object". You'll be met with a prompt. Paste the URL you copied in the previous step in the first field. Fill the second field with the verification token you created when configuring the lolo/WhatsApp Trigger function. (My token was happy.)

![facebook_webhook_subscription_prompt.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_webhook_subscription_prompt_6dbf1f84f4.png)

After filling out the prompt, hit "Verify and save". Facebook will now send a HTTP request to your LoLo app to verify the connection. Once the verification is complete, you'll see the following screen.

In your app logs you should have received an entry with the message "META App verified."

![facebook_webhooks.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_webhooks_b298469f61.png)

Now we need to specify what fields we are interested in getting notifications from. Hit the "Subscribe" button matching up with messages. This let's Facebook now we want notifications for changes to messages. Then hit "Test" matching up for messages. In your LoLo app's log you should see an entry containing the test message.

![lolo_app_log_with_message.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_app_log_with_message_e64b5fd048.png)

To send messages from your WhatsApp app, we need to add your WhatApp associated number as a recipient number in the Facebook App. Go to WhatsApp > Getting started in your Facebook app console.

![facebook_whatsapp_getting_started.png](https://lolo-web.eu-1.int.lolo.co/uploads/facebook_whatsapp_getting_started_b4e562e196.png)

Click the "To" dropdown and add your WhatsApp Associated number. Once complete you can send message from your WhatsApp to the number listed in the "From" dropdown.

![whatsapp_send.png](https://lolo-web.eu-1.int.lolo.co/uploads/whatsapp_send_bf292644a3.png)

And you should see another entry in your LoLo App log.

![lolo_logs_another_entry.png](https://lolo-web.eu-1.int.lolo.co/uploads/lolo_logs_another_entry_c34f4ce960.png)

You now have a LoLo app that can receive message from WhatsApp!

New local library function out! It integrates the Tibber Live Data API, an electricity company in Sweden.

Overview of Electrical Usage Notifier that uses the Tibber Live Data function as trigger.

my_first_function_app.png

Get Live Tibber Live Data via this new Function!

We just released my first library function. It is called "Tibber Live Data". Home automation is a hot topic here at the office so I created an integration for the [Tibber Live Measurement API.](https://developer.tibber.com/docs/guides/calling-api) [Tibber](https://www.lolo.co/posts/tibber.com) is an electric utility company geared towards using electricity smarter (which might not be the worst idea given the current instability on the energy market).

The function is what we call a "trigger". Triggers functions generates new events, which differentiates them from other functions that transform events. If you want to know more about creating your own triggers take a look at [this guide](https://docs.lolo.company/docs/custom-events-cron-job).

This specific trigger produces an event for each live measurement Tibber does. This event contains daily accumulated power usage and cost, among many other things. Look at the payload data you will receive back [here.](https://developer.tibber.com/docs/reference#livemeasurement)

I've used it to create an LoLo app that my colleagues can use to send them a notification when they've used too much power today. One can set a cutoff in terms of price and when the usage goes above it a notification is sent!

You can see an overview of the Lolo app below. Beside the log nodes, it really is as easy as: Has the usage exceeded the cutoff? If so, send a notification.

(I used the [Pushcut webhook API](https://www.pushcut.io/support/notifications#webhook-url) as an easy way of sending custom notifications.)

![app_592088f85d.png](https://lolo-web.eu-1.int.lolo.co/uploads/app_592088f85d_60685abb92.png)

I probably want to hook it up to some other smarts in the future, to make the process more automatic and with LoLo it's as easy as switching out the "Notify" node with something else. ([This page](https://docs.lolo.company/docs/functions-1) explains how to create custom functions.)

Creating the function was not much harder than wrapping the excellent tibber-api Node package in a LoLo function and then exporting it as library function. I had a basic prototype up and running within an hour or two.

Beyond that I spent another few hours applying some polish in the form of documentation, creating a tight and easy to use interface and testing. I hope the function can be useful beyond the office. If you have any issues with it, please do not hesitate to reach out!

Ida Silfverskiold

Let’s build a Webhook that will be triggered by Slack via their Slash Commands. We’ll show you how to send a response back too.

slack_logo.webp

Use Lolo to Interact with Slack Slash Commands

Slack is a great way to learn how to work with event-driven backend “Serverless” applications. When you work with Serverless you pay only for the amount of events that needs to be processed every second via your app rather than have a server up and waiting for those events.

Although Lolo works a bit differently she follows this concept, so until you have to process more than a few thousand of events per second, you won’t be paying anything at all. This is incredibly cost effective.

We’ll be building a HTTP callback that will act as our Webhook and will be triggered by Slack via their Slash Commands. The idea is for you to work on something more complex but this gives you an idea of how simple it is. We’ll play ping pong. Look at our workflow below.

![1_w1ood5_rwf_UCFPE_6_G_b_D_Ww_4_fbc94ead65.png](https://lolo-web.eu-1.int.lolo.co/uploads/1_w1ood5_rwf_UCFPE_6_G_b_D_Ww_4_fbc94ead65_2547ffbbb0.png)

You’ll need admin access to a Slack workspace to be able to set up your Slack app and then a free Lolo account.

## Setting up your Lolo App & Webhook

We will need a request URL for Slack, so Slack can send us an event when someone uses the command /ping. Therefore we’ll set up our Lolo app first.

Create a new application in [Lolo](https://console.lolo.co/) and add a HTTP trigger in the menu palette. Double click it once you have it in your graph so you can configure it.

We’ll be setting this as a POST request and the endpoint as /slack via the Parameters tab. You can also rename the node to Slack Webhook but this is optional. Copy the External URL that has been set for you after you’ve set the path.

![1_6h_Dbmer_YV_Qx_Z_Ag_K_Zc_Uz_A_1_3d96a5e95f.gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_6h_Dbmer_YV_Qx_Z_Ag_K_Zc_Uz_A_1_3d96a5e95f_7eac775239.gif)

We’ve now set up our trigger which will trigger this application. You can save your application but no need to run it yet.

## Setting up your Slack App

Set up a new app via api.slack.com. You can call it what you’d like. You will need admin access to the Slack workspace that you want to install it for.

After you’ve created an app, go to Slash Commands where you’ll set up a new command. Use your URL that you just copied from your Lolo application.

![1_x_BL_Er_Cb_XS_7_YRMW_9_Fk_Wnt_OQ_f1dbbf48da.gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_x_BL_Er_Cb_XS_7_YRMW_9_Fk_Wnt_OQ_f1dbbf48da_60d541e427.gif)

Remember to install the app to your workspace as well. Navigate to Basic Settings for your Slack App to do so. Whenever you add a slash command, you’ll need to reinstall the app to your workspace.

## Responding to the HTTP call

Slack commands will expect a response within 3 seconds so the first thing to do is to emit a response with a 200 status code in the Lolo application when a HTTP call is made to your URL.

Slack will send us data with a payload object we can use to respond. That is, we are not responding directly to the slash command, we are only extracting the response_url so we can send back a response to the message later via a POST request. This allows you to do some more processing before answering as well.

Start by creating a new function in your Lolo application and add the code below in its handler.

```javascript
exports.handler = async(ev, ctx) => {
  const { emit, log, route } = ctx;

  // send back a response to Slack
  emit('response', {statusCode: '200'});

  // Log contents of the payload Slack has sent us 
  log.info("slack data: ", ev.body);

  // route the payload data to the next function/node
  route(ev.body);
};
```

By routing the Slack payload data to the next function as we do with route(ev.body) we can extract the response_url within the next node/function.

This Slack app is only doing two things so we don’t need to extract much here from the payload but when you build richer Slack applications you’ll want to extract more information about the command rather than just the response_url, therefore we’ll be routing the entire payload.

![1_x2_Zrxsrx_Hughr_g_Fu_Jtz_A_46ffaa72e1.gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_x2_Zrxsrx_Hughr_g_Fu_Jtz_A_46ffaa72e1_463a8f4c04.gif)

Remember to also connect the HTTP trigger with your new function you’ve created. The nodes need to be connected to to enable the code to run within the exports.handler.

**Save** and **Run** your application.

If you’ve installed the app to your Slack workspace you can now test out the command you’ve set up in Slack. It won’t give you anything back but as long as it doesn’t give you an error you know that it is working.

## Send back a Response to Slack

The last thing we need to do is using that response_url to send back an HTTP POST request to Slack with our answer to the command. So we can see the pong response to the **/ping** command.

Create another new function in your Lolo graph and add the code below.

```javascript
const Fetch = require("node-fetch");

exports.handler = async (ev, ctx) => {
  const { log } = ctx;
  const responseURL = ev.response_url;

  // our Slack response
  const body = {
    replace_original: "false",
    text: "pong"
  };

  // send back the Slack response
  Fetch(responseURL, {
    method: "post",
    body: JSON.stringify(body),
    headers: {"Content-Type": "application/json"}
  }).catch(err => log.info(err));
};
```

We also need to add **node-fetch@2.0** as a dependency to be able to use it within our code. Navigate to **Modules** within the app’s **Settings** in Lolo and simply add it there. It will be installed when you save and run your app.

To summarize, if you’ve added the new function, added the code from above in its handler, added **node-fetch@2.0** in your **Modules** and connected all your nodes, you can **Save** and **Run** your application again.

Be aware that it may take up to one minute to deploy now as we’ve installed dependencies. Look for **Listen to Port 4000** in your Logs to see that it has successfully deployed. You can change tabs back and forth, we all do.

## Test your Slack App

Open up your Slack and then try your slash command again. I’ve set up **/ping** and my response will be **pong**. See what this looks like below.

![1_Knmg_L0_LFU_Cu_GIT_0_Qkqay_Q_0c315436cf.gif](https://lolo-web.eu-1.int.lolo.co/uploads/1_Knmg_L0_LFU_Cu_GIT_0_Qkqay_Q_0c315436cf_6b4b49127a.gif)

From here you can add to it using Slack actions in your messages and then extracting values from the payload event when the user interacts with it. See Slack’s Block Kit builder for help on creating the slack messages.

## Youtube Video Tutorial

If you prefer to follow via a video tutorial check the video [here.](https://youtu.be/zZtizYs1s7E)

Lolo Co.

We share content across both Lolo Code and Lolo Unify. Use filters to pick topic.