Serverless Synergy: Building a Full-stack Serverless Application with Sentiment Analysis from Image Capabilities with the AWS Suite

This article was written by Lesmon Saluta, a data practitioner and currently the Product Data Scientist at Angkas. He oversees the development and innovation of product data analysis and modeling towards impactful solutions and to make better-informed business decisions.

Numerous full-stack web applications are now prevalent on the internet, each employing diverse technology stacks and services to cater to different needs. As is typical with evolving technologies, an expanding user base contributes to the growth of the surrounding ecosystem, resulting in noteworthy enhancements in the development cycle. This article will explore the construction of a straightforward yet effective full-stack web application, leveraging various features of Amazon Web Services. Our primary focus will be on coordinating the numerous services employed, emphasizing the creation of a streamlined development process.

Application Use Case

The purpose of this application is to assist individuals in monitoring reviews, feedback messages, or any written content present in digital images. In this scenario, we'll focus on messages within screenshots, pictures, and potentially videos in future versions. The core functionality of the application revolves around analyzing the sentiment expressed in an image. If the negative sentiment surpasses the positive sentiment, the system will flag it, and specific individuals can be notified through the application.

Overview of the Stack

When discussing full-stack applications, the essential elements encompass both the frontend and backend. In our context, the backend service can expose a RESTful API to facilitate seamless communication between these components. To preemptively address potential challenges during development, it's advantageous to contemplate the hosting environment for the mentioned parts. This ensures that we can develop with the goal of establishing smooth connections among the various moving components. Fortunately, a multitude of tools are at our disposal for this specific purpose.

Prerequisites

This article will make use of the Serverless framework, necessitating the presence of IAM credentials stored locally. These credentials need to be available within the development environment and should be sourced from an account equipped with IAM policies granting access to the specified services. One approach involves establishing an account within the root account using IAM, obtaining the keys through the 'Security Credentials' section, and subsequently storing them in the environment by installing the AWS CLI and executing the 'aws configure' command.

Additionally, we will use Vercel, and authentication can be accomplished through a GitHub account.

Backend

Development

As implied by the title, the central component of this application is a serverless function driving the backend through AWS Lambda. Within this Lambda function, the application's logic is encapsulated, focusing on extracting text from an image, analyzing the sentiment within it, and subsequently relaying this analysis to the frontend. To achieve this, we will leverage the AWS SDK for Python (boto3) to instantiate clients for Amazon Textract, enabling text extraction, and Amazon Comprehend for sentiment analysis, all encapsulated within the Lambda function. Below is a snippet of the code for the deployed Lambda function.

AWS Lambda seamlessly transmits all log entries generated within a Lambda function to Amazon CloudWatch. Within CloudWatch Logs, the function possesses its dedicated log group and log stream, providing a means to inspect any logs generated throughout the function's runtime.

Deployment

Numerous approaches exist for deploying the Lambda function, enabling it to be invoked as an API, as demonstrated in the Lambda Console, and linking it to a trigger in API Gateway. Nonetheless, an alternative presents itself, offering a more streamlined process for constructing and deploying Lambda functions through the Serverless framework.

The Serverless framework provides a codified approach to building, testing, and deploying serverless functions within a unified platform. It relies on the information supplied through the ‘aws configure’ command in the CLI to identify the AWS account and execute actions within it.

Key components of the Serverless framework include:

• The 'handler.py' file functions as the code executed by the serverless function.
• The 'requirements.txt' file is utilized to list all custom libraries that need to be included for the serverless function.
• The 'serverless.yml' file comprises configurations for the lambda function, its IAM Role, and plugins for 'requirements.txt', among other settings.

Serverless translates the syntax specified in the 'serverless.yml' file into an AWS CloudFormation template. This template is responsible for executing the configured actions from the mentioned files. The tasks performed by the CloudFormation template include packaging and deploying the Lambda function, provisioning the necessary role, managing dependencies, establishing a connection between the function and an AWS API Gateway trigger, handling rollbacks on failure, and other actions defined in the ‘serverless.yml’ file.

Upon completion of building the Lambda function and preparing the configuration files, the 'serverless deploy' command can be executed in the backend directory of the app. This initiates the execution of the aforementioned steps.

API

Executing ‘serverless deploy’ in the Serverless directory via the terminal yields the API Endpoint supplied by AWS API Gateway. This Endpoint can subsequently be linked to our application.

Our React application can now seamlessly incorporate this API endpoint. It can be invoked using any desired functionality, be it automated or triggered by a click event, by submitting a Post request with the image data.

Frontend

Development

Frontend development offers various frameworks tailored to app needs. Here, we opt for React with Typescript, leveraging Vite for an optimized build process. Although building the React app is beyond this article's scope, documentation links will guide you through the process.

Key elements of the frontend application include:

• An image uploader and serializer (base64 encoded)
• Sending the picture through an API call (utilizing the axios library)
• Parsing and displaying the response of the API call

Integrate testing features like logging and API call testing to ensure seamless interaction among different components. Once the locally hosted web app successfully passes all tests and functions as intended, proceed to deploy it to the cloud for broader user access.

Consider installing React DevTools—a valuable extension for debugging, optimizing performance, and gaining insights into the app's structure when working with React.

Deployment

For a straightforward and cost-effective deployment of your React application, consider using Vercel. Additionally, expedite the deployment process further by utilizing the Vercel CLI.

After installing the Vercel CLI, simply run ‘vercel’ in your React app's directory via the terminal. Log in if needed, specify the directory, and the CLI will autonomously detect and deploy your app. You can then review and inspect the deployment in your Vercel dashboard.

Maintenance and Updates

In the development cycle, it's common to incorporate CI/CD for handling logical errors and implementing future features. Deploying updates is straightforward using the Serverless framework for the backend and the Vercel CLI for the frontend. This streamlined process ensures efficient deployment of both backend and frontend modifications.

• For any modifications to the Lambda function, the configuration file, or any other files within the Serverless directory:Executing ‘serverless deploy’ might require a significant amount of time, contingent on the complexity of the application and its associated resources. To expedite the process, Serverless offers the ‘--config’ option during deployment, allowing the updating of specific files only.
• For any updates to the React app:Executing the ‘vercel’ command updates the deployed version of the application in Vercel as well as in the Vercel dashboard.

We can also view the Lambda function and the API in the AWS Console by navigating to the said services.

Full-stack applications have consistently held a significant presence in the tech industry, initially serving as beginner projects that have the potential to evolve and scale to accommodate large user bases. The increasing simplicity of deploying such applications has reduced the associated overhead and challenges in development and deployment. These advancements enable us to focus less on the intricacies of building the application and more on enhancing and refining its features.

It's important to note that the method described here is just one among numerous approaches for developing your full-stack web app. Popularity alone should not be the sole factor in selecting your tech stack. For enduring, compute-intensive applications, opting for an EC2 instance with S3 access might offer better performance. Exploring alternative hosting solutions for the web app could introduce additional features. Making such decisions early in the development process is crucial to avoid potential issues in the later stages.

This article focuses on a beginner-level application, and there are numerous additional features, services, and complexities that can be integrated into other applications you might contemplate building. We encourage you to delve deeper into the everyday challenges people encounter, consider potential solutions, and then strategize how to implement those solutions.

Finally, it's essential to consider that while AWS provides powerful and efficient services, it's crucial to be vigilant about potential costs. Make sure to activate AWS Cost Explorer, carefully review the pricing plans, and leverage the pricing calculator to ensure a clear understanding of the potential expenses.

Thank you, and happy building!

* This newsletter was sourced from this Tutorials Dojo article.