DEV Community: Godwin Alexander Ekainu

How To Integrate Chatbots Into Vue Apps Using AWS Amplify

Godwin Alexander Ekainu — Mon, 10 Jan 2022 10:46:29 +0000

Everyday, new tools are been created or designed to simplify interactions between end-users and computers. On websites like e-commerce websites there is a need to automate interactions using a chatbot as it will serve as a standby employee 24/7.

Throughout this tutorial, we will be looking at how we can practically deploy chatbots to our Vue app with fewer lines of code using the Amazon Lex service through the AWS Amplify CLI (Command Line Interface).

What is AWS Amplify

AWS Amplify is a set of tools that helps developers create scalable, full-stack mobile and web applications all powered by AWS. Amplify lets you configure backends, connect your apps in minutes, and deploy static web apps in a few minutes. We can also say that Amplify is a faster route to use AWS services.

Why Chatbots

Chatbot applications streamline interaction between people and services thereby enhancing the customer experience. Furthermore, they offer companies new opportunities to improve customer engagement processes and operational efficiency by reducing the typical cost of customer service.

In this tutorial, we will create a chatbot that we can use to place orders for items and implement them in our Vue app.

Chatbot Walkthrough

Before we dive deep into our tutorial, here are some terminologies we should familiarize ourselves with as we will use them in later parts of the tutorial.

Intent: This is what the user objectives are or what the user wishes to achieve
Slots: Slots are the data the user must provide to fulfill the intent, you can create as many slots as possible. Slots are all features that the bot can have.
Lambda Function: This is just functionality that enables the chatbot to work with external API like open weather API.

Setup AWS Amplify CLI

Just before we set up the Amplify CLI, we need to create our Vue project first and we will be using Vue 2 for this tutorial. There is already a start-up project for you in my repository, so instead of going through all the stress of creating a new one, you can just clone my repository to your local machine but you can begin from scratch if you want to.
Note: You need to install CLI in the project directory.

To install AWS Amplify, first create an AWS account signup.

On your terminal, use the command npm install -g @aws-amplify/cli to install AWS globally on your local machine.
This will allow us to access and interface with their services faster, directly on our local machine.

Configure AWS

Still on your terminal, use the amplify configure command. The amplify configure command will set up an account that will allow us to interface with AWS services and allow Amplify CLI to create bot services for us.
The amplify configure command will prompt us to sign in to your AWS account and sign in as a root. After doing so, it should open a new window on your browser called the “AWS Management Console”.

Once you are signed in, go back to your terminal and hit enter to continue, select a region, we will be using us-east-1, specify a username or you can use the default name by just hitting enter. After that, a new window will open on our browser to continue creating the user, make sure to check programmatic access which will enable access key ID and secret access key which we will need later to initialize amplify. Hit the next permission button and make sure administrator access is checked and should be by default. Hit next, we won’t be adding any tags, hit the create user button and once the user is created, it will provide us with a key ID and secret access key.

Create a new user

Copy the keys, go back to your terminal and paste the keys and its going to prompt us to create an AWS profile, so we are going to create a profile and all we need to do is give it a name and our profile will be created.

Initializing AWS Amplify in our Vue.js project

Next, run the command on your terminal amplify init
It will prompt us to enter a name for the project, let us use the default name and it is going to ask us for our environment and we are going to choose Dev, it's going to prompt us to choose the IDE we are using, the language and framework, that is if yours is not detected automatically.
It will ask us if we want to use an AWS profile, we are going to say yes and then we choose the profile we created a few seconds ago. Hit enter and amplify CLI will initialize the project on the cloud.

Adding chatbot assets to AWS Amplify

Once the initialization is over, we are going to add resources to the project, let us go ahead and run the command amplify add interactions and we are going to hit enter for the default and we are going to choose a sample, we will do “Order Flowers”. We will be asked if we will be targeting children with this bot, say no and the resources will be added successfully.

Push Interaction in Vue project

We will use another command amplify push to add the interaction to our project in AWS, recall that we created a project name. After that, it will give us a summary of all the resources we have selected that will be added to the cloud and we will say yes and this will provision our chatbot on AWS.

Amplify console

Next, use the command amplify console which will open a new web page, and on this page is where we will see all bots we have created but unfortunately, we won’t be able to access the bot from this page, we will use the search box to search amazon services. So we will search for Amazon Lex and once that is done, we should see the bot we just created.
So let’s go ahead and play around with it.

Recall that we have talked about some of these terms above but now let’s practically use them and learn more terms to get us acquainted with using the chatbot console.

OrderFlowers_dev: Name of bot
Sample Utterances (purple arrow): These are possible questions the user might ask and it does not have to be the exact word you use, the user could say something close or around that, the chatbot would be able to understand.
Name (green arrow): These are variables that will store all information provided by the user to process their request.
Slot type (red arrow): These are the data types that the variables are to store.
Build & Publish: The build button on the console builds the bot ready for testing.
Prompt (blue arrow): Prompts are questions asked by the bot after the user has triggered the bot with the first utterance.
Confirmation Prompt : This prompt collects the information of the user to see if he/she is satisfied.
Fulfillment Prompt: This is a function or business logic that processes all the data and returns the users intent, the fulfillment prompt has two sub prompts which we will get to understand below.
AWS Lamda function: This function or logic processes the user's data and gives back a response and it is mostly used when the intent of the user would need to integrate with a third party API to gather information.
Return Parameter to the client: This function just retrieves all the data inputted by the user and displays it to the user.

Adding our Chatbot to our Vue Project

What we are most interested in is adding our bot to our Vue project, so let’s dive right in
To integrate this chatbot into our app, let's get some dependencies into the project by using the command npm i AWS-amplify aws-amplify-vue . The new folder aws-exports.js was added to our project.

Let's go ahead and add all necessary library to our Vue app

import Vue from 'vue'
    import App from './App.vue'
    // Import Amplify Modules, Plugins, and aws exports file
    import Amplify from "aws-amplify";
    import awsconfig from "./aws-exports";
    // Configure Amplify in project
    Amplify.configure(awsconfig);
    // Configure vue to use plugins and modules
    // Vue.use(AmplifyPlugin, AmplifyModules);
    Vue.config.productionTip = false
    new Vue({
      render: h => h(App),
    }).$mount('#app')

The code above should go into the main.js file

Let's go into our app.vue folder and do some configuration.

 <template>
      <div id="app" style="max-height:300px">
        <ChatComponent :chatbotConfig="chatbotConfig" name="OrderFlowers_dev" :completed="completed"/>
      </div>
    </template>

Let us v-bind the chatbotconfig to our chat component and pass the name of the chatbot as a parameter and boolean value call completed to our chat component where we will be needing it.

 import { Interactions } from "aws-amplify";
    import ChatComponent from './components/ChatComponent.vue';
    export default {
      components: { ChatComponent },
      name: "App",
      data: () => ({
        completed: null,
        chatbotConfig: {
          bot: "OrderFlowers_dev",
          clearComplete: false,
          chatBot: Interactions
        },
      }),

Here, we create a data entry point with where we define our bots and configs to get our bot working.
Inside the chatbotConfig, we call the bot name and you get the name from the AWS console.

The property clearComplete is set to false so that the bot does not close on completion of an order, instead it will give a response like “thank you for your order”
We will also register the interactions from the AWS-Amplify library using the ChatBot property which will help us know all the values captured by the bot.

 mounted() {
        Interactions.onComplete("OrderFlowers_dev", this.handleComplete);
      },
      methods: {
        handleComplete(err, confirmation) {
          if (err) {
            alert("bot conversation failed");
            return;
          }
          this.completed = confirmation
        },
      },

The code above does error checks incase there is failure communicating with the bot.
We will also create a component that will be a user interface between our bot and the user.
You can find the full source code in my repository on github.

 <template>
      <div class="hello">
        <div class="messages clearfix">
        <div v-show="messages === []"> Please enter your message </div>
          <div v-for="(msg, _) in messages" :key="_">
            <div :class="{
              'message': true, 
              'sender': msg.sender === 'user', 
              'bot': msg.sender !== 'user' 
              }">

              <div v-if="msg.msg.slots">
                <span><strong> FlowerType: </strong> {{msg.msg.slots.FlowerType}}</span><br />
                <span><strong> PickupDate: </strong> {{msg.msg.slots.PickupDate}}</span><br />
                <span><strong> PickupTime: </strong> {{msg.msg.slots.PickupTime}}</span><br />
              </div>
              <div v-else> <strong style="padding-right: 10px">{{date}}:</strong> {{msg.msg}} </div>
            </div>
          </div>

        </div>
        <div class="input-container">
          <input type="text" @keypress.enter="sendMessage" v-model="message" />
          <button @click="sendMessage"> Send </button>
        </div>
        <div class="loading" v-show="loading"> loading... </div>
      </div>
    </template>
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        chatbotConfig: Object,
        name: String,
        completed: Object
      },
      computed: {
        date(){
          const d = new Date()
          return `${d.getHours()}: ${d.getMinutes()}: ${d.getSeconds()}`
        }
      },
      data(){
        return {
          message: null,
          messages: [],
          loading: false
        }
      },
      methods: {
        async sendMessage() {
          this.loading = true
          const msg = this.message
          if (!this.message) return
          this.message = ''
          this.messages.push({sender: 'user', msg })
          const response = await this.chatbotConfig.chatBot.send(this.name, msg)
          this.loading = false
          console.log(this.completed)
          if (!response.message) return;
          if (!this.completed) this.messages.push({sender: this.name, msg: response.message })
          else this.messages.push({sender: this.name, msg: this.completed })
        }
      }
    }

Let’s dive into what is happening up there

First, the chat component is created and is imported into the app.vue file.
The data entry point contains all variables to be used in the component.
The Message variable bears the messages that the user will send to the chatbot.
The messages variable contains both the messages of the user and the chatbot.
The loading variable is responsible for showing the loader that displays when a message is being sent to the chatbot.

  data(){
        return {
          message: null,
          messages: [],
          loading: false
        }
      },

NOTE: props are used to pass data down a component (from a parent component to a child component) the props which are passed are:

ChatbotConfig props containing all configurations of the chatbot (the bot name, the chatbot interaction, and a boolean to show if the chatbot action is completed).
the computed property bears a function that returns the present time a message was sent to the chatbot.

The method property bears the send message function which is responsible for sending messages from the user to the chatbot.

methods: {
    async sendMessage() {
      this.loading = true
      const msg = this.message
      if (!this.message) return
      this.message = ''
      this.messages.push({sender: 'user', msg })
      const response = await this.chatbotConfig.chatBot.send(this.name, msg)
      this.loading = false
      console.log(this.completed)
      if (!response.message) return;
      if (!this.completed) this.messages.push({sender: this.name, msg: response.message })
      else this.messages.push({sender: this.name, msg: this.completed })
    }
  }

The flow of the chat component:

With the messages variable, the message is rendered on the component using a v-for directive. (the v-for directive loops through the variables of the message and renders all the messages (both from the user and the chatbot) into the component), when a user sends a message, the sendMessage() function is triggered.

What the send message function does:

The function sets the loading variable to true (this is to show that a loading indicator is shown to indicate that the message is being sent to the chatbot).
An if statement to check if there was a message being passed into the message variable and if there isn’t, it returns thereby stopping the process of sending a message to the chatbot, furthermore the message variable is reinitialized to an empty string to clear the message from the input box on the user interface (to give a semblance that the message has been sent and can enter a new text).
The user and the message are added to an object which is eventually pushed to the messages variable which contains the messages for both the user and the chatbot, the message is sent to the chatbot.

The loading variable is set to false indicating that the message has been sent and it disables the loading indicator shown previously and an if statement checks if the chatbot returns a response with a message and if it doesn't, it returns and stops the process.
An if statement checks if the chatbot message is completed and pushes the message into the messages variable that holds all messages. If it doesn't, it returns and stops the process.

Furthermore, run your app and get chatting with your bot in your app, this is what your app should look like.

Conclusion

In this article, we have looked at simple steps to add fully equipped bots to your web apps, we have also looked at how to configure and use AWS amplify console and if you have not noticed, we have also learnt cloud operations because this bot is hosted on the cloud.
We started with very basic explanations as to how important bots are to everyday life and how it can ease stress on companies and help improve user experiences.

Further Resources:

GitHub

A definitive guide to using serverless functions with Fauna, Netlify, and VueJS

Godwin Alexander Ekainu — Mon, 08 Nov 2021 22:49:06 +0000

Most of the big streaming companies we see today, like Netflix, Hulu, or Crunchyroll, use some kind of serverless database. If you want to build a product that scales, then a serverless database like Fauna is the right choice. Serverless functions play a big role in this scalability, so in this tutorial, we'll look at how we can use serverless functions in Netlify.

Here's a simple definition to get us started:
👉 Serverless functions are single-purpose functions deployed and hosted on infrastructure managed by cloud computing companies like AWS. Tasks that would easily require a fully-fledged backend hosted on a server — like communicating with APIs or a database like Fauna — can easily be done with serverless functions without having to manage backend servers for your application.
The main goal of this tutorial is to give you a definitive guide on running your serverless functions locally using Netlify CLI and the Netlify dev command.

Goal

It’s never been easier to create and deploy serverless functions with Netlify!
We’ll also explore how we can integrate Fauna, a serverless database which gives us the simplicity of a NoSQL and the ability to model complex relationships for applications. It also supports multi-tenency, which allows a database to have multiple collections or even child databases.

What you need

Netlify account
Fauna account and database
A project you want to use serverless functions in
Some JavaScript knowledge

Set up a Netlify Account

To get started with Netlify serverless functions, we need to have a Netlify account. Go to https://app.netlify.com/signup and choose a sign-up option to create an account if you haven't already. Keep in mind that you might have to answer a few questions if you’re creating a Netlify account for the first time.
https://lh6.googleusercontent.com/4Si4vuf2hPxwh18qqw_vGleogPr5xdoPy9UyG-adtznuMKSyCy8FnQ5LQd5GNs69bOSOJTtuwW_D8fKK3ITeeTPFOz60XkufEYZLhSPBZ1N4UW2RMOK6ESlQTTzXiUSmijWjcTVI
We’ll be using the Netlify dashboard to manage our sites and functions, so it’ll make sense if we knew our way around the interface.
Once signed in, you'll be taken to your Netlify dashboard.
Here, you’ll see an overview of your Netlify account on the Team Overview page, which includes some stats about your usage.
The Sites section displays the sites you have deployed to Netlify.
You can manually upload the static (HTML, CSS, and JS) files to your static site by simply dragging and dropping from your computer to your dashboard.
You also have the option to connect your Netlify account to a GitHub repo of your project and Netlify will run the build process and generate static files and for your app and deploy it.

Creating a functions folder

To get started with Netlify functions on your project, create a /functions folder in your project directory. This folder is where all our Netlify functions will live, we will later make some configurations for Netlify to access the functions in this folder.
For this article, we’ll be using a simple Vue project to get us started. It's nothing to get too excited over; it just gets random images from Unsplash and display them to users.
If you want to follow along, you can go ahead and clone the repo on your computer, navigate to the newly created folder, and install the dependencies.

git clone <https://github.com/Maxiggle/randomImages.git>
cd random-images
npm install

This is a Vue3 project created with Vue CLI. The basic structure should look like this:

random-images
 ┣ public
 ┃ ┣ favicon.ico
 ┃ ┗ index.html
 ┣ functions
 ┃ ┣ getAPIUrl.js
 ┃ ┗ hello.js
 ┃ main.js
 ┣ src
 ┃ ┣ assets
 ┃ ┃ ┗ logo.png
 ┃ ┣ components
 ┃ ┃ ┗ ImgCont.vue
 ┃ ┣ App.vue
 ┃ ┗ main.js
 ┣ .env
 ┣ .gitignore
 ┣ README.md
 ┣ babel.config.js
 ┣ package-lock.json
 ┗ package.json

For now, we'll just have a simple function to show how functions work. Create a new file, /functions/hello.js. This is the basic structure of a Netlify function.

// /functions/hello.js

exports.handler = async function(event, context){
        return {
                statusCode: 200,
                body: JSON.stringify({message: "Hello World!"})
        };
};

In our function, exports.handler is assigned an async function that accepts two arguments, event and context. Inside, we return an object with two basic properties:

statusCode, which in this case is 200 OK and,
body. The value of body is an object: {message: "Hello World!"}. That's converted to valid JSON using the JSON.stringify() method.

So, that's our simple function right there. Next, we'll add some configurations to be able to run this function.

Setting up our Netlify configuration

In order to run our Netlify function, we need to designate a folder in a project where Netlify would look for our functions that will be deployed. To do this, create a netlify.toml file at the root of the project and add the following:

# netlify.toml

[functions]
        directory = "./functions"

This tells Netlify to look for our functions in the ./functions folder, which is a relative path from the root of the project. Netlify will locate and deploy the functions in this folder at build time.

Installing the Netlify CLI

Netlify's CLI lets us deploy our project locally on our own computers. To install it, make sure you have at least Node.js version 10 or later installed on your computer. Install it with:

npm install netlify-cli -g

This gives you a global installation of Netlify CLI, so you can run it from any directory. cd into the root folder of the project and run:

netlify dev

You should see a few things happening here:
https://lh3.googleusercontent.com/jqJ-0GypwHBTSu836AcmiDz3900ziW6FU4m4aKrZQrHc84NNOZo8AasOyq-BwmY4RnM9ZqwW62hwxM25xhcWsE5X8rxRlKYgu_Qihh_BHr234Xeco-vYUOPkW6fJ4utvisaPFge3

A few things of note:

Netlify injects environment variables from our .env files into the build process which can be accessed by our serverless functions.
It loads or deploys the functions located in the specified directory. The /functions server is deployed on a different port from the main application, it's given a random port of 45661, as you’ll notice in the screenshot above.
It automatically detects what framework the application was built with and runs the necessary build processes to deploy the application. In this case, it’s Vue.js, but it also supports React and other popular frameworks.

Now that our functions are deployed, let’s go ahead and test them. The route will look like /.netlify/functions/<function name>. When deployed, they can be accessed through the application's default URL and port because Netlify performs some proxying in the background so that the frontend can communicate with the functions.
If we send a GET request to https://localhost:8888/.netlify/functions/hello, we should get a response of {"message":"Hello World!"}. And sure enough:
https://lh5.googleusercontent.com/UmE0NPD_Woqr7poda32u9eooB-JreuQR7sLrl5lD7koZQ6yzD5cj0a-LWPByCZekXnkfLmL-xoWD1wihfZSuDIsP53GPHiaqYaX0wNbWsLsi9jnPNtdtQTp5OVUNLxCkzn6T25I2
It works!
Now, let’s do something useful with the functions. Create a new function at
/functions/getImg.js.

// /functions/getImg.js

const fetch = require('node-fetch')
const unsplashURL = `https://api.unsplash.com/photos/random/?client_id=j3uex5UW8H34vNuI_2e6h76CNYYkFWSfTQmsiMxs2qQ&?query=lucky&orientation=landscape`;
const getImgData = async () => {
    const res = await fetch(unsplashURL);
    const data = await res.json()
    return data
}
exports.handler = async function () {
    const imgData = await getImgData();
    return {
        statusCode: 200,
        body: JSON.stringify({ data: imgData }),
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "Content-Type",
            "Content-Type": "application/json"
            // "Access-Control-Allow-Methods": "GET, POST, OPTION",
        }
    }
}

In the code above, we first require node-fetch, a Node.js implementation of the window.fetch API. To install the version used for this project, run:

npm i node-fetch@2

This will install version ^2.x.x of node-fetch. Once that’s installed (if it wasn't already), you can now require it in your function code.
Now, we can ping the unsplashURL from our API endpoint. It’s just an Unsplash API URL with some hard-coded parameters:

Client ID - client_id=redacted-redacted-redacted
Query - query=lucky
Orientation - orientation=landscape

Later on, we’ll use a .env variable to store our Client ID.
After that, we have a function getImgURL() which simply fetches and returns the image data from Unsplash.
Finally, we have our exports.handler function. Here, imgURL is assigned the value image data received from the getImgData() function. The function then returns that same object from before, with the statusCode, body with the imgData, and headers.
To use this function in our app, we have our Vue component:

<!-- src/components/ImgCont.vue -->

    <template>
      <div v-if="img.urls" class="cont">
        <div class="img-cont">
          <img :src="img.urls.regular" :alt="img.alt_description" />
          <span>{{ img.description }}</span>
        </div>
        <button class="like">💖</button>
      </div>
      <button @click="getImg()">Get a lucky picture</button>
    </template>

    <script>
            import { ref } from "@vue/reactivity";
            export default {
              setup() {
                const clicked = ref(false);
                const img = ref({});
                const getImgData = async () => {
                  const API_URL = `/.netlify/functions/getImg`;
                  let imgData;
                  try {
                    const res = await fetch(API_URL);
                    imgData = await res.json();
                  } catch (err) {
                    console.log(err);
                  }
                  return imgData.data;
                };
                const getImg = async () => {
                  img.value = await getImgData();
                };

                return { getImg, img, clicked };
                    },
            };
    </script>
    <style scoped> ... </style>

In this component, we declared API_URL as our Netlify function route.
To get the data from the function, we have getImgData() which just fetches and returns the data from the route.
Another function — getImg() — runs when the button is clicked. It runs the getImgData() function that sets the value of img to the data returned data. We can now use the image data in the app.
We also have a button near the end of our markup which will run a function savePictureToFauna() that’ll add the current image to Fauna. We'll get back to all of this later on.

Adding environment variables

In our Netlify function /functions/getImg.js, the Client ID is hard-coded into the URL in the file. We need to save this as an environment variable instead. To do that locally, create a new .env file in the root folder:

UNSPLASH_CLIENT_ID=j3uex5UW8H34vNuI_2e6h76CNYYkFWSfTQmsiMxs2qQ

Now, go to /functions/getImg.js and add the environment variable:

// /functions/getImg.js
...

const CLIENT_ID = process.env.UNSPLASH_CLIENT_ID;
const unsplashURL = `https://api.unsplash.com/photos/random/?client_id=${CLIENT_ID}&?query=lucky&orientation=landscape`;

Another great thing about Netlify CLI is its hot-reload feature. Saving this file will automatically load the function again.

Deploying the project

We can deploy our project to Netlify from the CLI. In order to do this, we have to build our project locally and then deploy.

npm run build
netlify deploy

This creates a dist/ folder where our site lives.
Then, follow the prompts. Netlify asks for authorization on your first deploy:
https://lh4.googleusercontent.com/btrMlvuyLEQ8gwQcugHsOuS3EOw5W5LWABhctvFv03fo59p0LT5vp39t3R_8fMYxAa5MJA-Ndrx3vNu2uHwwuARbwyTo6-cN09E-p4Nc0pJiOrOoqB3ZJQoG69f0ekeblFZu2XEE
https://lh3.googleusercontent.com/1oX-hGq8RrYhKmEw6l_VuNX14TtCy7OjyqTyQreydDcbNxxmrG1SFdSVLbqkhLcMveJA7GP5-FHuBodz-KIl2fpqNOFCjeL-bNedMe9CfNbeznjXXRArxd3Ferpz6HvVr7rcPOR2
It'll ask for a few other things too:

Whether to link to an existing site or create and configure a new site — we’ll create a new site
A unique site name/URL — you can use whatever you want
The publish directory — Vue put our build files in dist/, so we'll use that

We now have a draft deployment of the project. To deploy the production build on the main site URL, we just have to run:

netlify deploy --prod

Pulling environment variables from Netlify dashboard

To add our .env variables to our deploy, go to your Netlify dashboard, select your site, then go to Site settings > Build & Deploy > Environment and add your environment variables.
https://lh6.googleusercontent.com/bxMh5-4lpA12RziPe3VTdlJ7qhbK7G3XPVid7WtB1kMYSbzDPWAdELPyLT5IvCLAGMBuIo_vwBDKL1Jsm2kJqlBlMeDFa1MZY5jwpwK7ez-PkbJlZoUx0vdil9hjkordCTExuetL
We can also use the env variables we add to our Netlify dashboard for our local deployment when running netlify dev again.
https://lh4.googleusercontent.com/RBsCL8CtrI8KXahXGORQ3ZiXbnZEZMblGuy4992NSx18RdqS7j_7gw-7s0lB0CbJg6E6FUH_OfGm5YlHhpRCtztZL898fb_tznaCMT2zIl3NNge4Mnn0zo_5pUJU7n_rlbGtmgI3
You can see that it ignores the environment variable from the build settings we defined on our dashboard and injects the one in the .env file. If we delete the .env file, Netlify still injects the variable from the build settings of the site.

👉 Quick note: this is only possible because the local project has been linked to the site. To link a local project to an already existing site on Netlify, simply run `netlify link`.

View functions on your dashboard:

To see your functions and their logs on your dashboard, select your site and go to Functions:
https://lh5.googleusercontent.com/w7K8CyXo7Oh1NisUhYJZiKykxwxzMUxx6glfjTO5GV4Mei5Fujfn7YJ7MT1uzj56xMbrR3aUtGHZeML4j6ABjsmHyg1Tin1jO1LP1cR2xqtbnx1uXjyp9mfC5cCUaRn4T3BvR1X4
Select a function to view its details and logs:
https://lh6.googleusercontent.com/QX2NtwCHIfkQ7cB5Q37ZnJvHBF-0CHcY7UGB9pbwu0BzlDDvCd2wfC5fHYFffBIEu-7disxrI_W9qZd8NjenH_Txl2nK8AENx6BnYpYl0aEWjC-IVzQXoyOZSlBs97Fp9GRoyA77
Awesome!
Now that we’ve seen how to work with Netlify serverless functions, let’s explore how we can add more functionality, like connecting to a database. This would normally require setting up a complete backend, but with Netlify functions we can easily pull this off without managing a backend server.

Setting up Fauna

To get up and running with Fauna, create an account and follow the steps on their quick start guide . Once you’re all set up, go to your dashboard and create a new database.
https://lh3.googleusercontent.com/OpbsbEzjMBRyurul_UqNobCpkYuESCTRBzow-zUSRCvxihTOUUbiBUTt4-as0Yh7b4e9DgDKNZN4D7L5gDfGyRUu-xV6EmiJnq_DZfP6I-lsH36iPk4cMv7u83fBhdCNR-H31SUh
Then, create a new collection.
https://lh5.googleusercontent.com/q-d5zKLxwZF3A-ugupC9fYOZ1WovIlri-mGQ4Y0xx8YJ5PxLFaynkJpXbCNS1XmUyxrknRJLCSZ7TU3hrxJ0vb2zoP75EidwiDNS99k4XxdMzmuas12rkVBI8K825XtcCH_6qhNi
Great! Now that you’ve created your collection, you can now create your own API key that you can use to access your database from your function.
https://lh3.googleusercontent.com/xNWyrVMbC6EvJc_G-7BxDfvpbk2KQoYhSt98eaKeW5286oviWlSOvrd8xHDINqsbK0d3RhMAM2ksg8cZjROuN1KQIrKyJCSe0kz5Amn6DDv1leFWwTMrgCzyLduTwA-_Mndca6wP
Once you’ve generated the key, you can add it to your .env file.

FAUNADB_SERVER_SECRET=<secret>

To use Fauna in your project, install the driver for Javascript. You can simply install the Fauna npm project if you prefer:

npm install faunadb

After successfully installing the package, create a new Netlify function functions/savePictureToFauna.js that’ll save liked pics to the database.

// ./functions/savePictureToFauna.js

const faunadb = require('faunadb');
// initialize faunaDB client with our secret
const client = new faunadb.Client({
    secret: process.env.FAUNADB_SERVER_SECRET,
    domain: 'db.fauna.com',
    scheme: 'https'
});
// the query object provides us with functions to create a new document in the collection
const q = faunadb.query;

exports.handler = async (event, context) => {
    // get the data from the body of the request
    const data = JSON.parse(event.body);
    try {
        // create document in existing collection
        const response = await client.query(
            q.Create(q.Collection('fav_piks'), {
                data
            })
        );
        return {
            statusCode: 200,
            body: JSON.stringify({
                message: 'Successfully created document',
                data: response
            })
        };
    } catch (error) {
        console.log(error);
        return {
            statusCode: 400,
            body: JSON.stringify({
                error
            })
        };
    }
};

Then to run this, in the imgCont component of this example project, create a new function savePictureToFauna() that’ll send the img data when clicked.

<!-- src/components/ImgCont.vue -->

<template>
  <div v-if="img.urls" class="cont">
    <div class="img-cont">
      ...
    </div>
    <!-- run savePictureToFauna() with the img as an argument -->
    <button ref="likeBtn" class="like" :disabled="!canLike" @click="savePictureToFauna(img)"> 💖</button>
  </div>
  <button @click="getImg()">Get a lucky picture</button>
</template>
<script>
        import { ref } from "@vue/reactivity";
        export default {
          emits: ["savedPik"],
          setup(props, { emit }) {
            const img = ref({});
            const canLike = ref(true);

            const getImgData = async () => { ... };
            const getImg = async () => { ... };

            // function to POST img data to our function
            const savePictureToFauna = async (img) => {
              try {
                fetch(`/.netlify/functions/savePictureToFauna`, {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({
                    img,
                  }),
                });

                alert("Pik saved!");
                // emit custom savedPik event
                emit("savedPik");
                canLike.value = false;
              } catch (err) {
                console.log(err);
              }
            };

            return { getImg, img, savePictureToFauna, canLike };
          },
        };
</script>
<style scoped> ... </style>

In the code above, the savePictureToFauna function which takes the img data as an argument, performs a POST request to the savePictureToFauna.js Netlify function, which in turn sends the data to Fauna, saving our favorite pictures in the database!
We can also get back pics sent to Fauna. In order to retrieve data from the collection, you can use the [Paginate](<https://docs.fauna.com/fauna/current/api/fql/functions/paginate?lang=javascript#examples>) function. This function allows us to fetch documents in a collection from Fauna. Paginate takes in a Set or Reference and returns a page of results.
The problem with this is that it simply returns a list of references to each document in the collection without the actual data. You can get the content of the documents by running Paginate within the [Map](<https://docs.fauna.com/fauna/current/api/fql/functions/map?lang=javascript>) function. It'll iterate on the array of documents from our collection and call the provided lambda function on each one, returning the results.
To do this, create a new file at functions/getPicsFromFauna.js, similar to the others.

  // ./functions/getPicsFromFauna.js

    const faunadb = require('faunadb');
    const client = new faunadb.Client({ ... });

    // the query object provides us with functions to create a new document in the collection
    const q = faunadb.query;

    exports.handler = async (event, context) => {
        console.log('Function `savePictureToFauna` invoked');
        try {
            const res = await client.query(
                // map through each document returned by paginate
                q.Map(
                    // get documents from collection
                    q.Paginate(
                        q.Documents(
                            q.Collection('fav_piks')
                        )
                    ),
                    // get content of each document
                    q.Lambda('doc', q.Get(q.Var('doc')))
                )
            );
            return {
                statusCode: 200,
                body: JSON.stringify({
                    message: 'Successfully fetched documents',
                    data: res.data
                })
            };
                    } catch (error) {
            console.log(error);
            return {
                statusCode: 400,
                body: JSON.stringify({
                    error
                })
            };
        }
    }

The App.vue file has been modified to fetch and display the list of saved pics fetched from the functions/getPicsFromFauna.js function.

  <!-- src/App.vue -->

    <template>
      <main>
        ...
          <!-- run getPicsFromFauna() each time the "saved-pik" event is fired from the child component -->
          <img-cont @saved-pik="getPicsFromFauna()" />
          <section>
            <h2>Liked Pics</h2>
            <ul v-if="favPiks.length > 0" class="favPiks">
              <li v-for="favPik in favPiks" :key="favPik.ref['@ref'].id">
                <div class="img-cont">
                  <img :src="favPik.data.img.urls.small" :alt="favPik.data.img.description" class="favPik" />
                </div>
              </li>
            </ul>
            <span v-else> No fav piks</span>
          </section>
        ...
      </main>
    </template>
    <script>
    import { ref } from "@vue/reactivity";
    import ImgCont from "./components/ImgCont.vue";
    export default {
      components: { ImgCont },
      setup() {
        const favPiks = ref([]);
        // get pics function
        const getPicsFromFauna = async () => {
          try {
            // get pics from Netlify function
            const res = await fetch("/.netlify/functions/getPicsFromFauna");
            const data = await res.json();
            favPiks.value = data.data.reverse()
          } catch (error) {
            favPiks.value = null
          }
        };
        return { favPiks, getPicsFromFauna };
      },
      async mounted() {
        this.getPicsFromFauna()
      },
    };

Sweet! That's it!

Wrapping up

You’ve seen how you can build modern applications on the JAMstack with serverless functions. This makes development a whole lot easier since we no longer need to create a backend to interact with our database.
Serverless functions are the bread and butter of the Jamstack, and Netlify makes them easy. We’ve covered only a few of their capabilities, but if you want to learn more, check out some of these useful links:

Written in connection with the Write with Fauna Program

Manage Your AWS Secrets With Doppler

Godwin Alexander Ekainu — Tue, 12 Oct 2021 03:14:34 +0000

Summary

Password, key, or identification is the most broadly used and is one of the most important tools used by organizations to authenticate applications and users, providing them with sensitive systems, information, and services. Because secrets have to be transmitted securely, secret management has to account for and mitigate the risks to these secrets both in transit and at rest.

Goals

In this tutorial, we will create a simple lambda function,
We will also be creating a registration form screen, login screen using AWS cognito and an api gateway from AWS. This application will contain vital information like a JWT token we would like to keep safe and secure, so we can learn how to manage that token with Doppler

Why Secret Management

Tokens, passwords, and keys are the most broadly used form of authentication for authenticating users and other applications before they can access any other service on your application or collect any sensitive information that they would need. Notwithstanding, hackers are on the loose looking for systems that they can exploit from time to time, and to help save yourself or the organization you work for, some money, all secrets that concern your application must be securely stored.

Doppler as a Secret Management Solution

Passwords and other secrets are needed to authenticate Application to Application(A2A) and Authentication to Database(A2B) communication and access. Most at times, applications and IoT devices are shipped and deployed with hardcoded credentials which are easily crackable by hackers with a simple dictionary method attack but with Doppler, you don’t have to keep those keys in those scripts anymore as you can securely keep them in Doppler.
Doppler has improved my productivity in just a little time of using the platform. Doppler provides its users with easy ways to set up projects as their documentation is easy and simple to understand.

Let's dive right into this tutorial and see how Doppler can make things so easy.

Create users using AWS Cognito

We are going to create users on AWS cognito which has a hosted UI which users can use to sign up and sign in users and it is a very simple work through if you follow the instructions. Below is an image of the user I created.

Our aim of creating this user is to make sure only authenticated users can login to use our app services and we will achieve this using an AWS gate-way that will give us a JWT token, specific to every user and it is this token we will want to secure because we would not want that token to be displayed on the frontend because it can be accessed by anybody and be used to cause severe havoc to our app.

Create a lambda function

So let’s create a lambda function that will use an api gate-way that will help us get a JWT token to authenticate our users.
We won’t be getting much detail on creating a lambda function or adding the api gateway as our main focus is to add our JWT token to Doppler.
Below is an image of the lambda function we have created which we will integrate with the api gateway a little later.

Add API Gateway

Amazon API Gateway is an AWS service for creating and securing REST, HTTP, and WebSocket APIs at any scale. API developers can create APIs that access AWS or other web services, as well as data stored in the AWS Cloud.
We will be creating a HTTP gateway in this case.

Create a project on Doppler

Creating a project on Doppler is extremely simple and straightforward, all you just need to do is to hit the plus icon to create a new project.
Log on to your Doppler account and create a new project sort of like so

Once a new project is created, three stages/environments are created which are

Development
Staging
Production

These environments are where we store our secrets.

Sync Doppler with AWS Secret Manager

Before we can sync our secrets with Doppler, we will need to integrate AWS secret manager with Doppler and sync AWS with Doppler, let us follow the steps below

After creating a project, click on integrations

When you click on integrations, it should take us to a new web page where we will see a list of different services we can integrate Doppler with but in our case, we will be using Secrets Manager for integration.

Click on Secrets Manager and we will be directed to another page where we will be asked to give the key ID and Access key to our AWS secrets manager. If you do not have one, you can get it while creating a new AWS Amplify user after hitting the Create User button, but if you have one, this is how you access it

Go to I AM management console > select users >  Select the current user

You should see something like this

This is where you will find your Access Key ID and then you will have to generate a new Access key.
Add these keys above to Doppler to sync with your AWS secret manager.

Doppler requires permissions to integrate with our AWS secret manager and these policies can easily be added in JSON format.

If you have an already existing IAM user and you want to add a new policy, it is pretty easy.
Search for the keyword IAM in the AWS search box and it will show you the IAM AWS feature, click on it, and next select Users.
The first open tab is the permissions tab

Click on Add Inline Policy to create a custom policy, give it a name and add these policies in JSON format

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowSecretsManagerAccess",
            "Effect": "Allow",
            "Action": [
                "secretsmanager:GetSecretValue",
                "secretsmanager:DescribeSecret",
                "secretsmanager:PutSecretValue",
                "secretsmanager:CreateSecret",
                "secretsmanager:DeleteSecret",
                "secretsmanager:TagResource",
                "secretsmanager:UpdateSecret"
            ],
            "Resource": "*"
        }
    ]
}

Furthermore, after adding our Keys to integrate Doppler with AWS secret manager, we need to configure the Doppler environment.

Select config to sync, the AWS Region where mine is US-east-2 and optionally choose a path in Doppler where all your secrets from AWS will be stored.

Save JWT token to Doppler

To get our JWT token, after the user signs in, look on your browser search bar, we will copy that token and store it on Doppler as so

And now the most interesting part of this topic is to store this secret token on Doppler.

After syncing your new project to AWS, open the newly created project on your Doppler dashboard.

newdopplersecrets

Choose the new project that you created and synced with AWS, I will be choosing

Recall that you chose an environment while syncing to AWS and in my case, I chose

Production(prd)

That is why according to the image above, prd is colored green because it is active.

We will click on the active environment to navigate to a new page where we can add the secrets we want to upload on AWS.

The image above should be the next page we will see, click on the Add First Secret button to add the JWT token we copied from the browser earlier.
You can add any key name and the token as value

BASE_URL : https://doppler.com

BEARER_TOKEN : eyJraWQiOiJCUVRvNG9pSHNoK3FodGUrNGwydW9JKzBXZjFsK2tMQkJpckw3dHlXeUFNPSIsImFsZyI6IlJTMjU2In0.eyJhdF9oYXNoIjoiN19fa3VxOG5nV1hiN3ZEZmNTSTJaUSIsInN1YiI6ImU3YjQ0YWRjLTkyYjUtNDZmOS04M2EzLTlkNGMyMDc1ZmM0NiIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJpc3MiOiJodHRwczpcL1wvY29nbml0by1pZHAudXMtZWFzdC0yLmFtYXpvbmF3cy5jb21cL3VzLWVhc3QtMl9KM2ppVmtrbGIiLCJjb2duaXRvOnVzZXJuYW1lIjoiY2xzeWZyaWRheSIsImF1ZCI6IjIzcmRjdTRhZjFxdDc5MzRsMmE5cTZxbXM1IiwiZXZlbnRfaWQiOiJjNzdkZjdjZS1hZGE1LTQ4YmYtODM2YS0yNzJmYjViMmJkYjkiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTYzMzE3NDI4NiwiZXhwIjoxNjMzMTc3ODg2LCJpYXQiOjE2MzMxNzQyODYsImp0aSI6IjY5NjhiZjZkLWEwYzAtNDkyZi04ODA0LWQ0ZjE2OTRkMWY4YiIsImVtYWlsIjoiY2xzeWZyaWRheUBnbWFpbC5jb20ifQ.U43PFIzcIJOk0MHmCr1a87WKXE4LIosl7ZvoO6Eo27d_rnxGHeUyrP4r0xH9XUeAH7zQR6e4Uk75hCNI1RgD0wpgbaOrmVfnZGnnrBBJTVN9BKs2ZrcPd_53ky8vwSNKAaTYlqvCNRnzARZim85HCYdL0aJaqz-R0jteyb0_7aEvaum2RMHG6RYJ0aYP46fNv8TaYW9imlvGs774kKzLmnHuIHwfN74iHxs68tcT0HcTHMUWqlo08uIZ3szceLszRqmSc7DjU24-Y1qvcsMh01eHbUDq-pdmZTUqaQ1uVTY1vBs-EhlrYNKOr8P-oBga6CiwXWXTfPmf_BYM2pTtvw

PASSWORD : 0123456789

After adding keys and values, your secrets should look like the image above, we should hit the save button at the top right to save our secrets.

Furthermore, click on the next tab titled Integrations and we should see this

Now let us click on the text Manage at the extreme, it should lead us to a new web page where we can hit sync to upload all our secrets to AWS secret manager.

Hit the Sync text and all our secrets will be added to AWS Secrets manager.
To confirm that all our secrets got uploaded to AWS from Doppler, click the link under the DESTINATION tab just like the picture above and we should see the name doppler added to the project name we created in AWS.

Hurray, we just saved our secrets on Doppler and successfully pushed it to AWS where we can access it for use and whenever we update the secrets on Doppler, it gets updated on AWS automatically.

Conclusion

We have come to the end of this tutorial.
We looked at how to use AWS Cognito to create users using their hosted UI. We also learned how to create a lambda function and integrate the lambda function with an API gateway that helped us give JWT tokens to the users and we looked at how to store that token in Doppler.