DEV Community: Arnold Samuel Chan

Full Stack Instagram: Infinite Scroll

Arnold Samuel Chan — Sat, 15 May 2021 05:44:35 +0000

This is my favorite project extension because this feature significantly improves the user experience in the app. Instead of clicking the "next" button, the user can scroll infinitely (as long as there's additional data in the database) to see more posts.

Demo
Overview
Enable scroll trigger through styling
Post fetching
Conclusion

Demo

You can check on the full source code and try them in Replit.

Repl URL: https://replit.com/@arnoldschan/PostPagination

Overview

User flow

As a user, they can explore posts by:

Scroll to the bottom of the page, then
Loading for fetching function to be finished, then
New posts are appended below the last seen post

File tree:

This is how the project file tree looks like:

The main App.jsx and App.css are in the root folder
The smaller components in components/ folder
Components' css in css/ folder
Anything related to firebase is inside firebase/folder

Enable trigger through styling

There are multiple ways to trigger an action when the user scrolls. In this example, we implement the scroll listener in the most outside component. We can simply use onScroll:

//App.jsx
//..
<div className="app__post_view"
     onScroll={checkBottom}>
    <h1>Post Pagination Example</h1>
    <div className="app__post_wrapper" >
    // all of the posts here
    </div>
    // bottom part
</div>

We call checkBottom function if the user scrolls.

We implement the event listener inside a div component, not the whole window component. A little adjustment to the component's styling is needed. Here's how we style the component:

/* App.css */
/* ... */
.app__post_view {
  /* other important styles */
    overflow-y: scroll;
    height: 100vh;
}
/* ... */

We need to limit the height of the component to 100% of the user's viewport height. Any vertical overflow is scrollable. This way, we implement the scrolling mechanism in the component, not to the window. Here's the visualization:

As what I mentioned before, there are so many ways to trigger action when the user scrolls. In the left figure, we simply add the listener in the browser window. But in this example, we add the scroll listener in the component (right side figure).

Post fetching

State hooks

// App.jsx
// ..
const [posts, setPosts] = useState([])
const [docs, setDocs] = useState([])
const [fetching, setFetching] = useState(false);
const [morePost, setMorePost] = useState(true)

There are 4 state hooks used in this example:

posts state stores all of the fetched posts data
docs stores all of the fetched posts Firebase documents (we actually can replace posts with this one, this hooks was later added in the project)
fetching tells whether our app is still waiting for downloading the additional posts or not
morePost is true if there is any post that the user hasn't seen. Otherwise, all of the posts in the database have been browsed by the user.

Bottom check function `checkBottom`

Now, let's check into checkBottom function triggered by user's scroll.

// App.jsx
// ...
const checkBottom = (e) => {
    const bottom = (
      (e.target.scrollHeight
        - e.target.scrollTop 
        === e.target.clientHeight) &
      (fetching === false) &
      (morePost === true));
      if (bottom) { 
        fetchData()
      }
  }
//..

This function calls fetchData function if the user hit the bottom end of the component. Moreover, it only calls if the app not in the middle of fetching process and there is additional posts in the database through morePost state.

Fetch posts `fetchData`

// App.jsx
import { db } from "./firebase/firebase";
// ..
const fetchData = () => {
    if (fetching === true) return;
    setFetching(true);
    let query = db
    .collection('posts')
    .orderBy('timestamp','desc')

        //.. this block enables pagination
        if (posts.length !== 0) {
      const lastVisible = docs[docs.length-1];
      query = query
      .startAfter(lastVisible);
    }

    query.limit(5)
    .get().then(snapshot=>{
    if (snapshot.docs.length === 0) setMorePost(false);
        setDocs([...docs, ...snapshot.docs])
        setPosts([...posts, ...snapshot.docs.map(doc=> (
          {id: doc.id,
            post: doc.data()}
            ))])
          }).then(
           setFetching(false)
       );
      }

We extend the existing fetch function from the first series with pagination capability. First, we should check fetching state is in false to avoid multiple fetches.

In the first fetch, we'll skip the middle if statement. We simply fetch the posts data from db (Firestore object) ordered by timestamp and limit by 5 posts in each fetch. After we got the data, we update docs and posts states then sequentially switch the fetching state to false.

In the second fetch and after, this function considers the if statement in the middle. Here, we update the query object with startAfter attribute, telling query what was the latest fetched data in lastVisible. The rest of the function is exactly the same as the first fetch.

Conclusion

We can easily mimic infinite scroll like we always enjoy from many social media platforms. In this example, we apply it through scroll listener and simple styling in the component.

We also need to paginate in every API call to get additional posts. Do you have any better alternative in implementing infinite scroll? Drop your thoughts below!

Full Stack Instagram: Authentication + Guest

Arnold Samuel Chan — Sat, 15 May 2021 05:44:27 +0000

With Firebase Auth, life is much better in handling authentication.

We can authenticate and manage users from a variety of providers without server-side code.

Features that I love from Firebase Auth:

CRUD of user
Handling session cookies
Forget password emailing system
Easy sign up with any other platform
Reliable security
Can be handled only from client side

And the best part of this, that we can use it for free! For any number of users!

Demo

You can check on the full source code and try them in Replit.

Repl url: https://replit.com/@arnoldschan/AuthManagement

Overview

User flow

As a user, they can:
- Sign up using: email, username, and password
- Sign in by registered email and password
- Sign in as a guest (without any credentials)
The page body greets the user with their registered username (if the user is a guest, a random username will be generated)
The page body shows "Logged out" if the user is not authenticated in the app.

File tree:

This is how the project file tree looks like.

The main App.jsx is in root folder
The smaller components in components/ folder
Components' css in css/ folder
Anything related to firebase is inside firebase/folder

Setting up Firebase

Setting up the project

To use Firebase you need to create a Google Cloud Platform account. Don't worry you don't need to fill in any payment information.

Login to Firebase
Create a project, then go to firebase auth
Add a web app to your project

Get your config afterward in the "Add Firebase SDK" section. Copy the JSON config and store it in firebaseConfig.js. This how I store the JSON config:

// firebaseConfig.js

const firebaseConfig = {
    apiKey: "AIzaSyAdqA_wVseC23-5-q5Fo1f0dGiB-177Tu0",
    authDomain: "codepen-arnold.firebaseapp.com",
    projectId: "codepen-arnold",
    storageBucket: "codepen-arnold.appspot.com",
    messagingSenderId: "1080777819655",
    appId: "1:1080777819655:web:5269709a063489308acca2",
    measurementId: "G-4Y54EK18HW"
  };

export default firebaseConfig;

Don't worry this config is needed to be publicly available for interacting with Firebase services. Nothing to hide here 😂

Setting up authentication

Activate email sign in method
Activate anonymous Authentication (optional)
Initiate firebase module in firebase.js (don't forget to npm install firebase)

// firebase.js
import firebase from 'firebase';
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(
    firebaseConfig
)
const auth = firebaseApp.auth();

export { auth }

This short and simple lines would boost our app capability!

auth consists of various methods needed for interacting with the user's authentication information. You can read more here in Firebase auth documentation.

Now we're ready to store our user information! Let's move on to handling the user flow scenarios.

State Hooks

const [openModalSignup, setOpenModalSignup] = useState(false)
const [openModalLogin, setOpenModalLogin] = useState(false)
const [user, setUser] = useState(null)

There are 3 state hooks in this App:

openModalSignup and openModalLogin: Control 2 modals: Sign up and Sign in form. If the state value is true then the modal will be visible, otherwise closed.
user : stores the Firebase user information attached in the app session.

All of the user authentication processes happen in AuthModal.jsx. Because in this modal, the user interacts with their credentials and all of the action needed for authentications.

User sign up

The sign up process is controlled by a single function: registerUser

// AuthModal.jsx
import { auth } from "../firebase/firebase";
// ...
const registerUser = () => {
        auth.createUserWithEmailAndPassword(email, password)
        .then((authUser)=>{
            authUser.user.updateProfile({
                displayName: username
            }).then((user)=> setUser(user))
        })
        .catch((error)=> alert(error.message));
        setOpenModalSignup(false);
    }
// ...

After importing auth module from the initiated firebase modules, we can use auth.createUserWithEmailAndPassword method. It's quite self-explanatory what does this method do, right?

The method takes 2 arguments: email and password . And boom, a new user is created in our Firebase Auth database. Very easy, no more pain in creating the API, Database, and everything!

This method then chained into adding displayName attached to this user through user.updateProfile method. Firebase provides several additional information for users. Check more here. After that, the new user information is updated into user state hooks through setUser. The sign-up modal is then closed through setOpenModalSignup state hooks.

User sign in

The sign in process is controlled by loginUser function

// AuthModal.jsx
import { auth } from "../firebase/firebase";
// ...
const loginUser = () => {
        auth.signInWithEmailAndPassword(email, password)
        .catch((error)=> alert(error.message));
        setOpenModalLogin(false);
    }
// ...

After creating the user through auth.createUserWithEmailAndPassword , we can sign the user in using auth.signInWithEmailAndPassword method. The arguments are email and password as well. The login modal then closed by turning setOpenModalLogin value to false .

Anonymous Sign In

For some apps, it'll be a big barrier for users if they needed to register before trying the apps. Firebase provides an "anonymous sign-in" feature. Here, the user doesn't need to fill any email information, and can try the apps right away!

The anonymous sign-in is controlled by guestButtonPress function

// AuthModal.jsx
import { auth } from "../firebase/firebase";
// ...
const guestButtonPress = () => {
        let randomName = "guest-" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
        auth.signInAnonymously()
        .then((user) => {
            user.user.updateProfile({
                displayName: randomName
            }).then((user)=> setUser(user))
            setOpenModalLogin(false);
        })
    }

There are 3 fields in our registration form: e-mail , display name, and password. We can skip e-mail and password for anonymous sign-in, but we need to manually set the display name information. Otherwise, the missing display name will break our app.

To handle this, the app generates a randomName for the user's display name before firing the firebase auth.signInAnonymously method. The generated randomName has pattern of: guest-xxxxx with x represents a random letter.

Just like in the sign-up process, the new user displayName is updated through user.updateProfile method and then sequentially update our user state hooks by calling setUser. The login modal then closed by setting setOpenModalLogin as false.

Content Update

// App.jsx
import { auth } from "./firebase/firebase";
// ...
useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authUser)=>{
      if (authUser){
        setUser(authUser);
      } else {
        setUser(null);
      }})
    return () => {
      unsubscribe();
    }
  }, [ user ])
//...

The useEffect hooks in App.jsx contains the Firebase Auth state listener. Any event done by user in the previous scenarios (sign-in, sign-out) updates the Firebase's auth state.

This listener also remembers the user's previous session (session stored in the user's browser) and automatically loads all of the information. This feature is very convenient as the user doesn't need to re-enter the credentials again.

//App.jsx
//...
<div className="contents">
        <h1>
        { user ?
            "Welcome back " + user.displayName + "!"
            : 
            "Logged out!"
        }
        </h1>
</div>
//...

By using the ternary operator, the content shows "Welcome back {displayName}" if user contains the session information. Otherwise, the content shows "Logged out!".

User Sign out

Finally, if the user wants to log out from the session, we can call auth.signOut method. Here's the log-out button in AuthButton.jsx.

// AuthButton.jsx
// ...
<Button onClick={() => {
      auth.signOut();
    }}>
Log Out
</Button>
//...

Conclusion

Cool, isn't it?

With Firebase, it's faster for us to implement many basic features. In this article, we can see how easy to interact with Firebase authentication feature. Everything can be done from client-side.

Which benefit of Firebase Auth that you're really love about? Leave your thoughts in the comment below!

Full Stack Instagram: Post Upload

Arnold Samuel Chan — Sat, 15 May 2021 05:44:19 +0000

Demo

You can check on the full source code and try them in Replit.

Repl url: https://replit.com/@arnoldschan/PostUpload

Overview

User flow

As a user, they can upload a post by:
- Choose a picture
- Fill in the caption
- Hit the upload button
The progress bar shows the uploading process.
The new uploaded post will show in the timeline
User can see all of the uploaded posts

File tree:

This is how the project file tree looks like.

The main App.jsx is in root folder
The smaller components in components/ folder
Components' css in css/ folder
Anything related to firebase is inside firebase/folder

Setting up Firebase

You can follow the setting up firebase project guidelines here. After you have set up the project, initiate firebase modules in firebase.js:

//firebase.js
import firebase from 'firebase';
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(
    firebaseConfig
)
const db = firebaseApp.firestore();
const storage = firebaseApp.storage();

export { db, storage }

The Firestore and Firebase Storage can be used directly without configuring anything in Firebase portal. You may need to change the security rules to open the database for the public (unless you want to implement authentication).

Post Upload

Choose a picture

//PostUpload.jsx
const [file, setFile] = useState(null)
//...
const chooseFile = (e) => {
        if (e.target.files[0]){
            setFile(e.target.files[0]);
        }
    }
//...
<Input 
    id="fileinput"
    className="child"
    type="file"
    name="upload-file"
    onChange={chooseFile}
/>

The user interacts with <Input/> element to open up the file explorer pop-up. If the user chooses a file, chooseFile function will be triggered.

In this function, the file state hook will be updated with the chosen file information.

Fill in the caption

//PostUpload.js
//...
const [caption, setCaption] = useState("")
//...
<Input 
    className="child"
    type="text"
    name="upload-caption"
    placeholder="write your caption here"
    value={caption}
    onChange={(e)=>setCaption(e.target.value)}
/>
//...

The user can write their caption through the input box in <Input/> element. In any letter the user input, the caption state hook will be get updated as well.

Upload to Firebase

// PostUpload.jsx
import { db, storage } from '../firebase/firebase';
//...
const [progress, setProgress] = useState(0)
// this state is updated by chooseFile function
const [file, setFile] = useState(null)
//...
const uploadFile = () => {
     if (file === null){
        alert('Please choose a file!')
     return;
     };
     const imageName = file.name;

     //Store the post Information into Firestore
     const addPost = function(caption, username, url) {
     const newPost = {
              timestamp: firebase
                          .firestore
                          .FieldValue
                          .serverTimestamp(),
              caption: caption,
              username: username,
              imageURL: url
          }
          db.collection('posts').add(newPost)
      };
      // Save the uploaded picture into Firebase storage
      const uploadTask = storage
                           .ref(`images/${imageName}`)
                           .put(file)
//...

<Button className="child" onClick={uploadFile}>Upload</Button>

The post upload separated into two main things:

store the post information (caption, username, etc) into Firestore. Handled by addPost .
save the uploaded picture into Firebase storage. This task is done by uploadTask.

Store the post Information into Firestore

newPost defines the post information that we want to store in Firestore. There are 4 things that we want to know for each post:

timestamp : the value is obtained from the firebase library. This represents the upload time
caption : obtained from user input for this post's caption
username : I put the value as uploader in this example. However, in our main project, this contains the information of logged in user.
imageURL: This post's uploaded picture URL in Firebase storage. We will get the value after the picture has been successfully uploaded.

db.collection('posts').add(newPost)

We can simply call the code above to add our data into Firestore.

db.collection('posts') specifies which collection that we are referring to. In this example, I store the post's information into the "posts" collection.

Then, we can add our new post into this collection by chaining the collection with add method plus newPost that we just defined previously as the argument.

Notice that we only declare this function and haven't called it yet. We want the post information to be stored only if the picture uploading process has been finished.

I will mention this addPost function again later in the progress bar section.

Save the uploaded picture into Firebase storage

We cannot only use Firestore in this example. Firestore only supports text-based information. The uploaded picture is needed to be stored somewhere else. We will use Firebase storage in this example.

storage.ref(`images/${imageName}`).put(file)

The uploaded picture information is already stored in our file state hook. We can use storage.ref to tell which target directory and filename in the storage. In this example, I chose images/{filename} as the file reference. We can then chain this with put method and use file as the argument.

Progress Bar

The upload process may need to take some time to be finished, depending on the picture size and internet speed. For a better user experience, we can give a visual hint on how the upload process is going. One of the best ways is through the progress bar.

Firebase storage supports these needs by checking on how many bytes that the picture has been transferred.

//PostUpload.jsx
//...
const [progress, setProgress] = useState(0)
//...
    uploadTask.on(                   
       "state_changed",                  
       (snapshot) => {                           
           const progressNum = Math.round(                           
           (snapshot.bytesTransferred/ snapshot.totalBytes)* 100                             
           );                            
           setProgress(progressNum);
       },
       (error) => {
           console.log(error);
           alert(error.message);
       },
       () => {
           storage
             .ref('images')
             .child(imageName)
         .getDownloadURL()
         .then(url => {
                addPost(caption, username, URL)
       })

Notice that we reuse the upload task that we previously stored in uploadTask. In every state_changed of the uploading task, the progress state hook will be get updated. The value of this progress is calculated by: bytesTransferred of the snapshot divided by the totalBytes of the uploaded picture.

After the image has been completely uploaded, the second callback function is triggered. Remember addPost function we have defined previously? Here, the post information is stored in Firebase along with its uploaded picture URL.

Post Download

Besides post uploading, users can also see all of the uploaded posts in the system. Previously, I experimented with the real-time connection in Firebase, however, I can't find a way to paginate and limit the query. I ended up using a simple query and limit the post on every page.

//App.jsx
import { db } from "./firebase/firebase";
//...
const [posts, setPosts] = useState([])
//...
const fetchData = () => {
  db
  .collection('posts')
  .orderBy('timestamp','desc')
  .limit(10)
  .get().then(snapshot=>{
    if (snapshot.docs.length === 0);
    setPosts([...posts, ...snapshot.docs.map(doc=> (
      {id: doc.id,
        post: doc.data()}
        ))])
      })
    }
  useEffect(() => {
    fetchData();
  }, [])

All of the posts is stored in posts state hook. We retrieve the documents by get method from "posts" collection, order them by "timestamp" attribute descendingly and limit the query by 10 posts. get method returns an Async Promise so we need to chain it with updating the posts function.

In this example, we only call fetchData once, when the user opens the app. In the latter example, We can update it in every user scroll.

Image Compression

Yay! We've implemented all of the needed features for uploading posts. But hey, Upload the picture and download the picture need to take some time to be finished. What's wrong? Turns out the picture we upload and download follows the original size from the uploader. We can see this as another room for improvement.

You can see the difference in picture loading before and after compression:

The picture on the left takes a longer time to load than the picture on the right. The picture compression reduces the load time by almost half the time.

Here's how I compress the picture (disclaimer: it's a modified script from stackoverflow):

// resizer.js
async function resizeMe(img) {
        var max_width = 500;
        var max_height = 500;

        var canvas = document.createElement('canvas');
        const bitmap = await createImageBitmap(img)
        var width = bitmap.width;
        var height = bitmap.height;

        // calculate the width and height, constraining the proportions
        if (width > height) {
            if (width > max_width) {
                height = Math.round(height *= max_width / width);
                width = max_width;
            }
        } else {
            if (height > max_height) {
                width = Math.round(width *= max_height / height);
                height = max_height;
            }
        }
        // resize the canvas and draw the image data into it
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(bitmap, 0, 0, width, height);
        var blobBin = atob(canvas.toDataURL("image/jpeg", 0.7).split(',')[1]);
        var array = [];
        for(var i = 0; i < blobBin.length; i++) {
                array.push(blobBin.charCodeAt(i));
        }
        var file = new Blob([new Uint8Array(array)], {type: 'image/png'});

        return file; // get the data from canvas as 70% JPG (can be also PNG, etc.)

    }

export default resizeMe;

This script creates a hidden canvas element to resize the picture. Here we set the max-width and the max height to 500. The script keeps the aspect ratio of the image and gets 70% of the quality of the resized picture. Because we need to wait for the image to be resized before passing the image to the uploading process, we need to set this function as an async function.

We then can simply call this function in our PostUpload.jsx . Don't forget, to put async in the uploadFile to await call resizer function.

// PostUpload.jsx
import resizer from "../utils/resizer";
// ...
const uploadFile = async () => {
// ...
    const uploadTask = storage.ref(`images/${imageName}`).put(await resizer(file))
//...
}

Conclusion

Woo hoo! If you've reached this point, we have created a powerful post sharing web app!

Implementing the app is a breeze with the help of Firebase Firestore and Storage. In this example, we can see how Firebase Firestore helps us to store posts' information in JSON format, and store the image link from Firebase storage.

We also optimized the web app by compressing the picture size before it's get uploaded to shorten the picture upload and download process.

Do you have any better way to upload/ download and resize the picture? Leave your solution below!

Full Stack Instagram: Introduction

Arnold Samuel Chan — Sat, 15 May 2021 05:44:03 +0000

I've been learning to build a web app using React.js. And this project turns out to be quite awesome for me! So I'd like to share this with other devs as well.

This project is an extension of a guide I found on Youtube. The extensions are more about things I found essential to be improved, such as guest mode, paginations, and image compressions.

Published app: https://instagram.arnold.id/

Here's the source code:
Github: https://github.com/arnoldschan/custom-instagram

Demo:

Highlighted features and Guidelines:

Tech:

Project managed using scrum methodology through [Jira by running sprint and backlogs, even though I'm working by myself 😅

Looking forward if you want to do a collab with me!

Enjoy!

tags: Full Stack Development

Penniless Chatbot Architecture

Arnold Samuel Chan — Sun, 01 Mar 2020 13:48:22 +0000

Everybody loves free stuff, programmers as well!
Running an advanced cloud service without paying a penny sounds not possible. By utilizing AWS free-tier offers, I've managed to create a simple cloud-powered chatbot for LINE Messenger

Please note that this architecture mostly suitable for a chatbot in general use to keep the bill low

check the source code on github

AWS free tier

If we carefully check on always free AWS Free-Tier offers, there are a complete service set to create a simple chatbot:

Script executor (AWS Lambda) free 1 million requests per month
Storage (AWS DynamoDB : NoSQL-styled storage) free 25 GB storage
Message webhook handler (AWS API Gateway) free 1 million calls per month, for 12 months

Structure

Basically, there are 4 steps to process the user's incoming message in LINE messenger:

LINE messenger server receive and transfer the message to registered webhook (door)
The door finds the correct function (gears) that responsible to handle the message
The function sends a reply message to LINE Messenger, and stores necessary log to the database (memory card)
LINE messenger transmits the reply message to the user

Pretty simple, isn't it? 😄
There are 3 AWS resources:

AWS API Gateway serves as the door to receive and executes the function
AWS Lambda serves as the function to execute the code to process the message
AWS DynamoDB handles message logs and records the logs as JSON-styled information. This resource is portrayed as memory card in the picture

Why Lambda?

TL;DR
Cheaper for low traffic usage.

Unlike the common way of computing information, it's not necessary to rent one computing resource the whole 24/7. AWS Lambda lets us rent the computing resource only at the necessary event, in this case: processing the incoming message.

AWS suggests the use of AWS Lambda only if the computing resource time short (below 15 minutes) and the service has a low-traffic, periodic activity, otherwise, there'll be a hole in your wallet 😅.
Therefore, AWS Lambda is suitable in general-use chatbots and side-projects computing needs.

Enough the theory. Let's dive in the technical stuff!

Directory Structures

.
├── app.py
├── dynamodb.py
├── template.yml
└── requirements.txt

app.py

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import InvalidSignatureError
from linebot.models import TextSendMessage
import json
import requests
from dynamodb import DynamoDB


access_token = <<PUT YOUR ACCESS TOKEN HERE>>  #replace with your access token
channel_secret= <<PUT YOUR CHANNEL SECRET HERE>> #replace with your channel secret
table_name = 'echobot' #DynamoDB table name
key_name = 'userID' #database's primary key
sec_key_name = 'timestamp' #databse's secondary key

def lambda_handler(event,context):

    # create BotEcho object with parameters
    line_bot = BotEcho(
        event,
        access_token = access_token ,
        channel_secret = channel_secret)

    # check the signature (originality of source)
    if line_bot.signature_check != 200:
        print("fail to signature check")
        return {'statusCode': line_bot.signature_check}

    # send the message back to the user
    response = line_bot.send_reply(line_bot.text_message)
    if response != 200:
        print('fail to send reply')
        return {'statusCode': response}

    return {'statusCode':200}

The main file is app.py. it's the first script that is executed each time there's a received message by AWS Lambda. AWS Lambda will call lambda_handler function with 2 parameters as input: event and context. Both contain message information sent by LINE Messenger.
There are 3 steps in echo back the message:

Create the BotEcho class with the LINE messenger credentials and event
Validate the message signature
Echo the message back to the sender

In the same file (app.py), BotEcho class is also defined:


class BotEcho:
    def __init__(self,event,access_token,channel_secret):
        self.event = event
        self.bot = LineBotApi(access_token)
        self.handler = WebhookHandler(channel_secret)
        self.body = json.loads(event['body'])['events'][0]
        self.sender_id = self.body['source']['userId']
        self.text_message = self.body['message']['text']
        self.log(sender=self.sender_id,to='self',message=self.text_message)

    @property
    def signature_check(self):
        signature = self.event['headers']['X-Line-Signature']
        try:
            self.handler.handle(self.event['body'], signature)
            return 200
        except InvalidSignatureError:
            return 400

    def send_reply(self,message):
        self.log(sender='self',to=self.sender_id,message=message)
        response = self.bot.reply_message(self.body['replyToken'], \
                                    TextSendMessage(text=message))
        return response

    def log(self,sender,to,message):
        log_head = ['to','message']
        log_value = [to, message]
        response = DynamoDB(table_name, key_name, sec_key_name)\
                                .put(sender,log_head,log_value)
        print(response)
        return response

BotEcho receives event,access_token, and channel_secret. This class utilizes a LINE Bot API python package.
There are 2 functions:

send_reply: calls LINE Bot API to send message
log: record the information to AWS DynamoDB

Of course, you can add the bot's ability rather than echoing back the message. Just use your creativity in it!

requirements.txt

Create a new virtual environment
Install LINE Bot API package
pip freeze > requirements.txt
Voila!

SAM

Serverless Application Model offered by AWS.
I'll cover this part in detail in another post.
Basically it's a convenient way to deploy your app to AWS services in a script configuration. It's easy and traceable.

You need to:

Have an AWS account (obviously)
Install aws-cli and login to your AWS account
Install SAM
Create a template.yml file in your folder.

Here's the template.yml contents:

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: >
  Chatbot Echo demo
# More info about Globals: https://github.com/awslabs/serverless-application-model/blob/master/docs/globals.rst
Globals: #shared configuration
  Function:
    Timeout: 3 
  Api:
    OpenApiVersion: 3.0.1 ### to remove the stage name deployment bug
Parameters: #shared parameters
  StageName: # version staging config
      Default: 'prod'
      Type: String
Resources: #AWS services list
  ChatbotAPI: # API Gateway https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-resource-api.html
    Type: AWS::Serverless::Api
    Properties:
      EndpointConfiguration: REGIONAL
      StageName: !Ref StageName
      DefinitionBody:
        swagger: "2.0"
        info:
          title: "ChatbotAPI"
        schemes:
        - "https"
        paths:
          /:
            post:
              produces:
              - "application/json"
              responses:
                "200":
                  description: "200 response"
                  schema:
                    $ref: "#/definitions/Empty"
              x-amazon-apigateway-integration:
                uri:
                  Fn::Sub: arn:${AWS::Partition}:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${ChatbotFunction.Arn}/invocations 
                responses:
                  default:
                    statusCode: "200"
                passthroughBehavior: "when_no_match"
                httpMethod: "POST"
                contentHandling: "CONVERT_TO_TEXT"
                type: "aws_proxy"
        definitions:
          Empty:
            type: "object"
            title: "Empty Schema"
  DynamoDBTable: #DynamoDB Table https://docs.aws.amazon.com/lambda/latest/dg/kinesis-tutorial-spec.html
    Type: AWS::DynamoDB::Table
    Properties:
      TableName: echobot #change to your table name
      AttributeDefinitions:
        - AttributeName: userID #change to db primary key and type
          AttributeType: S
        - AttributeName: timestamp #change to db secondary key and type
          AttributeType: S
      KeySchema:
        - AttributeName: userID #change to db primary key
          KeyType: HASH
        - AttributeName: timestamp #change to db primary key
          KeyType: RANGE
      ProvisionedThroughput: 
        ReadCapacityUnits: 1 
        WriteCapacityUnits: 1


  ChatbotFunction: # Lambda Function https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#awsserverlessfunction
    Type: AWS::Serverless::Function 
    Properties:
      Handler: app.lambda_handler
      Runtime: python3.7
      Events: 
        endpoint:
          Type: Api
          Properties: #connect to our API Gateway
            RestApiId: !Ref ChatbotAPI
            Path: /
            Method: Post
      Policies:
        - Version: '2012-10-17'
          Statement:
            - Effect: Allow
              Action: #only allowed to put the record
                - dynamodb:Put
              Resource: !GetAtt DynamoDBTable.Arn

Deploy!

Simple commands:

sam build
sam deploy --guided
Attach your AWS API Gateway invoke URL to LINEWebhook URL
And your EchoBot is good to go!

All SAM's deployed app can be checked on AWS Cloudformation

Pricings

Refer to our AWS Services usage:

AWS Lambda free 1 million requests per month
AWS DynamoDB free 25 GB storage
AWS API Gateway free 1 million calls per month, for 12 months

The chatbot most likely free in the first 12 months and costs some penny for the AWS API Gateway usage. love it <3

Conclusions

With the wonderful AWS Free-Tier offers, developers can manage to create a chatbot that'll cost very few or even free.

Serverless Application Model or SAM makes developers' life easy with a simple deployment configuration.

Finally, you can modify the chatbot's ability to do more than echo back the message! check the source code on github
Feel free to drop me a message to improve my work.

Thanks!

"Whatever you do, work heartily, as for the Lord and not for men" - Colossians 3:23

A small Introduction about me

Arnold Samuel Chan — Sat, 29 Feb 2020 10:16:00 +0000

Hi everyone,
This is my initial post in dev.to.

I'm Arnold,
A Python developer and also a Data Scientist.
Originally from Surabaya, Indonesia. And got my master's degree in Taipei, Taiwan.

My passion and professional work mostly focuses on engineering data, create software and service, analyzing data, and I do them all in my main language: Python.
I have an excitement to do a cloud-powered service as they are flexible and affordable.

I've been excited to build my portfolios and record all of my professional and side project experiences through my website: https://arnold.id connected with dev.to.
And hopefully, dev.to will be my main place to share and track my experiences where someday I can check my work again.

I'm personally not a writer and not speak English as my main language.
And for the reader's convenience sake I'll keep my posts as concise and as clear as possible. Just like this post.

Anyway, can't wait what dev.to may bring!

Thanks,
Arnold Samuel Chan

DEV Community: Arnold Samuel Chan

Full Stack Instagram: Infinite Scroll

Table of Contents

Demo

Overview

User flow

File tree:

Enable trigger through styling

Post fetching

State hooks

Bottom check function checkBottom

Fetch posts fetchData

Conclusion

Full Stack Instagram: Authentication + Guest

Table of contents:

Demo

Overview

User flow

File tree:

Setting up Firebase

Setting up the project

Setting up authentication

State Hooks

User sign up

User sign in

Anonymous Sign In

Content Update

User Sign out

Conclusion

Full Stack Instagram: Post Upload

Table of contents:

Demo

Overview

User flow

File tree:

Setting up Firebase

Post Upload

Choose a picture

Fill in the caption

Upload to Firebase

Store the post Information into Firestore

Save the uploaded picture into Firebase storage

Progress Bar

Post Download

Image Compression

Conclusion

Full Stack Instagram: Introduction

Penniless Chatbot Architecture

** Please note that this architecture mostly suitable for a chatbot in general use to keep the bill low **

** check the source code on github**

AWS free tier

Structure

Why Lambda?

Directory Structures

Contents

SAM

Deploy!

Pricings

Conclusions

A small Introduction about me

Bottom check function `checkBottom`

Fetch posts `fetchData`

Please note that this architecture mostly suitable for a chatbot in general use to keep the bill low

check the source code on github