DEV Community: Nkere-Awaji Inwan

How to add a “leave your email address” form with an HTML panel in TalkJS

Nkere-Awaji Inwan — Thu, 05 Aug 2021 10:41:39 +0000

TalkJS is a highly customizable chat API with a pre-built UI that helps teams deliver a rich chat experience in hours instead of months. TalkJS also makes it possible to personalize chat experiences on your websites and mobile products with custom templates using a feature called HTML panels.

In this article, we will explore how to create a 'Get notified by email' form with HTML panels in TalkJS.

Setting up a TalkJS UI

Create an account on TalkJS and retrieve your App_Id, this would be used to connect your App to the TalkJS API.

To set up a Chat UI, we need to install the TalkJS SDK for our preferred framework. We would be using Vue.js for this article.

Please refer to the official documentation on how to install and set up the TalkJS SDK for Vue.

If fully set up, import TalkJs into your app and add a container element to render the Chat UI like so:

<! ../components/HtmlPanel.vue ->

<template>
  <div class="talkjs-container"></div>
</template> 

<script>
  import Talk from 'talkjs';
</script>

Next, we need to connect our application with TalkJS and create a user session. This would be done in the mounted hook as seen in the snippet below:

// ../components/HtmlPanel.vue
...

mounted: function () {
Talk.ready.then(async function () {
  const me = new Talk.User({
    id: parseInt(Math.random() * 500000).toString(),
    name: "Alice",
    email: "demo@talkjs.com",
    welcomeMessage: "Hey there! How are you? :-)",
    role: "default",
  });
  const session = new Talk.Session({
    appId: "YOUR_APP_ID",
    me: me,
  });

...

Remember to replace YOUR_APP_ID with the appId found in the TalkJS dashboard.

After creating a user session, we’ll create another user which would help us simulate a conversation in our chat UI and then mount our chat UI like so:

// ../components/HtmlPanel.vue
...

const other = new Talk.User({
  id: parseInt(Math.random() * 500000).toString(),
  name: "Sebastian",
  email: "demo@talkjs.com",
  welcomeMessage: "Hey, how can I help?",
  role: "default",
});
const conversation = session.getOrCreateConversation(
  Talk.oneOnOneId(me, other)
);
conversation.setParticipant(me);
conversation.setParticipant(other);

const popup = session.createPopup(conversation, {
  keepOpen: true,
});
await popup.mount({ show: true });
...

Please note these are hardcoded users and in actual sense you would need to implement the logic to retrieve users from your application’s backend. To know more about conversations in TalkJS, you can check out the official documentation.

If all goes well, you should see the TalkJS UI when you visit your application.

Creating the form

The TalkJS Chat UI is rendered inside an Iframe which means you can’t manipulate the DOM directly. This is where HTML panels come in, it helps us insert a custom UI with functionality inside the TalkJS UI.

To build our custom UI, we’ll create an HTML template (styled to your taste) with the snippet below:

<! ../public/static/get-notified.html-->

<form id="form-container">
  <h3>Leave your email address</h3>
  <input type="text" name="email" id="email" placeholder="Email">
  <button id="submit" type="submit">Submit</button>
</form>

This should be placed in the public directory of your vue project so as to help webpack serve it a static file.

When that is done, we can now wrap our form inside a HTML panel like so:

// ../components/HtmlPanel.vue

... 

Talk.ready.then(async function() {
  ...

  const htmlPanel = await popup.createHtmlPanel({
    url: "./static/get-notified.html",
    height: 150,
    show: true,
  })
})

Handling form Submissions

Finally, you can handle form submission right from the Chat UI by listening and responding to events triggered from the HTML Panel.

To submit a form, add an event listener to the submit button and handle your request like so:

Talk.ready.then(async function() {
  ...

  const button = htmlPanel.window.document.getElementById("submit")
  button.addEventListener("click", () => {
    // handle form submission
    alert("submission successful");
    htmlPanel.hide();
  });
})

Conclusion

TalkJs is a powerful tool that can help boost your product engagement, it also provides varying functionalities that can help you achieve this. To know more, you can checkout the official website.

How to Deploy a Vue Application on Cloud Run

Nkere-Awaji Inwan — Wed, 16 Oct 2019 18:19:16 +0000

Introduction

Deploying a vue application on cloud run is as straight forward as deploying a node application on cloud run. Deploying a vue application with access to environment variables? not so much. In this article, we will take a look at how we can deploy a vue application on cloud run as well as how we can access environment variables at run time.

Prerequisites

This tutorial uses the following:

Must have a user account on GCP (Google Cloud Platform)
Must have Docker installed (version >= 18.09.0)
Must have node installed (version >= 12.5.0)
Must have npm installed (version >= 6.9.0)
Must have vue-cli installed
Must have a basic knowledge of vue
Must have a basic knowledge of docker
Must have a basic knowledge of bash

If you have the first six prerequisites sorted out you can proceed to the next section.

Create a Vue Application

In this section, we are going to set up our vue application and build it into a docker image.

Let's create a vue application by running the following commands:

$ vue create <app-name>

Since this tutorial is geared towards deploying a vue application on cloud run (CR) we are not going all out on features, we will keep it simple.

If your installation is right, you should see the very familiar vue welcome page when you run $ npm run serve

To demonstrate the use of environment variables we are going to tweak
App.vue and HelloWorld.vue respectively like so:

//App.vue

<template>
  <div id="app">
    <img v-if="imgUrl" alt="env gif" :src="imgUrl">
    <img v-else="" alt="Vue logo" src="@/assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

...

In the code snippet above we are displaying the original vue logo if the variable imgUrl is false. We are going to define imgUrl in the created hook like so:

//App.vue

...

data(){
  return {
    imgUrl: ''
  }
},

created(){
 this.imgUrl = process.env.VUE_APP_IMG_URL
}

...

To keep things simple I cleaned up my HelloWorld component like so:

// @/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

...

To use environment variables in your vue application
you should have a .env file in the root directory of your project
and a variable VUE_APP_IMG_URL which contains the URL to your image.

If you visit your vue application on http://localhost:8080 you should see an image like the one below:

This is because vue is compiled and bundled with webpack which means environment variables will only be made available at build time and not at run-time despite webpack's hot reload being used in development mode. To view changes to our env variables we will have to restart the dev server.
To deploy our vue app to cloud run, we will need a dockerise our application and we will know how to in the next section.

Build Application Image

In this section, we will learn how to build a docker image that can run our vue application in production.
To do this we will need a docker image with a web server (NGINX ) and node installed.
We can pull these packages in like so:


FROM nginx:alpine

# Install npm and node
RUN apk add --update npm

# Add bash
RUN apk add --no-cache bash

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

# # Make our shell script executable
RUN chmod +x start.sh

COPY ./nginx.conf /etc/nginx/conf.d/default.conf


CMD ["/bin/bash", "-c", "/app/start.sh && nginx -g 'daemon off;'"]

This dockerfile has some dependencies; the nginx.conf file and the bash script start.sh that builds our application at run time which is triggered by the docker CMD command. We will fulfil these dependencies by creating the above-said files in the root directory of our vue application like so:

`nginx.conf`

server {
    listen 8080;
    server_name _;

    charset utf-8;
      root /usr/share/nginx/html;    
      index index.html index.htm;

    location / {
      root /usr/share/nginx/html;      
      autoindex on;
      #try_files $uri $uri/ /index.html =404;    
      try_files $uri $uri/ /index.html =404;    
    }   

}

We are listening on port 8080 because that's a cloud run requirement
as we can find in the cloud run contract.

`start.sh`

#!/bin/bash

if [ ! -d "/app/dist" ] 
then
    npm run build

    echo "Build finished...";

    echo "Delete node_modules folder";

    rm -rf node_modules

    echo "START COPY";

    cp -rf  /app/dist/. /usr/share/nginx/html/

    echo "END COPY";
fi

In this file, Since we are building at runtime, we will wouldn't
want to build our application every single time a request is made to
our application. To avoid this, we will check if the dist directory
exists before we build the static assets and copy them into the nginx
web directory.

Now we have fulfilled our dockerfile dependencies we can now build the docker image and push to GCR (google container registry).

To adhere to the 12 Factor app rule no. 3 we are going to populate
our .env file with a default value which is going to be dynamic with
respect to different cloud run revisions.

In our application root directory, we will build the docker image like so:

$ docker build -t cr-tutorial .

When completed, we will tag the image and push it to gcr. To do so, you need to have auth for docker to use gcloud. You can find out more information on how to do so on the container registry page. If that's sorted, we can tag and push to gcr like so:

$ docker tag cr-tutorial gcr.io/[PROJECT_ID]/cr-tutorial

Where cr-tutorial is the local image name and
[PROJECT_ID] is your GCP project id

$docker push gcr.io/[PROJECT_ID]/cr-tutorial

When push is completed, gcr.io/[PROJECT_ID]/cr-tutorial
will be your application image URL which will come in
handy soon.

Deploying to cloud run

To deploy our vue application image to cloud run, we will visit the cloud run page on GCP and click on the create service option on the info panel.

In the create service panel, we are going to set our application settings as well as input the link to our application image (gcr.io/[PROJECT_ID]/cr-tutorial) like so:

If you're ok with the config, you can click the create button below to deploy your application to cloud run. When the deployment is done, when you visit your cloud run app URL, you should see a screen like so:

Now to demonstrate our use of .env variables at run-time, we will deploy a new revision on cloud run and pass in our env variables.

Deploying a new CR revision

To deploy a new revision we will click on the Deploy revision option on the deployed service info panel

Then we will fill up our VUE_APP_IMG_URL(https://bit.ly/2MiYZT2) value in the env section like so:

When the revision is done, you should see something that looks like the image below:

Conclusion

In this tutorial, we have been able to deploy a vue application which receives environment variables at run-time. This is because the application is being built at run-time as well. You can find the repository for this project on GitHub.

Making a custom Artisan Command in Laravel 5.4

Nkere-Awaji Inwan — Wed, 16 Aug 2017 11:03:52 +0000

There are several default artisan commands that come with laravel, the common ones are php artisan serve,php artisan migrate, php artisan make:migration and the likes of them.

Introduction

The more an application grows the more important it becomes to automate certain tasks. If you are a junior developer or an intern that doesn't have access to a server to run some certain commands like running a migration, you'll have to buzz the devops engineer to help you run a migration (after your code has been reviewed and merged to the live branch tho ). Automating these tasks will go a long way to help you and the devops engineer. With that being said we'll go over making a custom laravel artisan command to add data to the DB(Database) in the following steps.

Steps:

Step 1: Install Laravel.
Step 2: Run php artisan make:command userData.
Step 3: Create signature and description for your command in app/Console/Command.
Step 4: Add your command logic in the handle() function.

Step 1

I'll assume you have Laravel installed.

Step 2

Open your terminal in your "project directory" and run the following command
php artisan make:command userData.

This command creates a file in the app/Console/Commands directory called userData.php which looks like:

<?php
namespace App\Console\Commands;

use Illuminate\Console\Command;

class userData extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'command:name';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        //
    }
}

Step 3

Now let's create the actual command, we'll set $signature to add:user_id and $description = Add user data to database.

If you run php artisan list in your terminal you will find out that our command does not exist yet, that's because it has not been registered. To register the command we'll navigate to app/Console and open up the Kernel.php file, we will then add this line of code Commands\userData::classto the $commands array defination. It should look like this:

<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
    /**
     * The Artisan commands provided by your application.
     *
     * @var array
     */
    protected $commands = [
        Commands\userData::class,
    ];

    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        // $schedule->command('inspire')
        //          ->hourly();
    }

    /**
     * Register the Closure based commands for the application.
     *
     * @return void
     */
    protected function commands()
    {
        require base_path('routes/console.php');
    }
}

So now if we run php artisan list we should see our command signature and description:

Step 4

Now to give our php artisan add:user_data command life, I will assume you have a users database with columns name, email, password. If you don't, run php artisan migrate and you'll be fine. Next thing is to convert our csv file to an array and add it to the database like:

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use App\User;
class userData extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'add:user_data';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Add user data to database';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle(){
        $file = public_path('user_data.csv');
        $delimiter = ',';       
            if(!file_exists($file) || !is_readable($file))
                return false;

            $header = null;
            $data = array();

            if (($handle = fopen($file,'r')) !== false){
                while (($row = fgetcsv($handle, 1000, $delimiter)) !==false){
                    if (!$header)
                        $header = $row;
                    else
                        $data[] = array_combine($header, $row);
                }
                fclose($handle);
            }

            $meta_descArr = $data;
            for ($i = 0; $i < count($meta_descArr); $i ++){
                User::firstOrCreate($meta_descArr[$i]);
            }
            echo "Users data added"."\n";
    }
}

Now for the moment we have been waiting for, run php aritsan add:user_data.

If you got this response Users data added. Can i get an Air five!!?.

Conclusion

In less than 20 minutes we have learned how to create a custom artisan command in laravel 5.4, here's a link to the source code. This is just one of the many cool things you can do with your custom artisan commands. You could create commands that accept inputs. This would be very helpful if you want to woo that pretty devops engineer that you have to bug every time you want to run artisan commands on the server. You could make a chatbot that gets input from here and send it directly to your email, you reply and she sees the reply on the terminal. Hmm... I guess that is a topic for another day. Like a wise man once said We are gods, Think it, and it shall come alive.