DEV Community: jade

Creating a Web Chat Meme App Using Azure SQL, Azure Web App Service.

jade — Thu, 18 May 2023 11:30:42 +0000

Allow me to introduce WanderMind, a fun and interactive platform that allows users to chat with it while sharing and displaying memes in real-time.

Architectural Overview

The architecture of our web chat meme app follows a three-tier structure: frontend, backend, and database.

Presentation Tier

This tier represents the user interface and handles the presentation logic of your application.
It includes components such as HTML and CSS that render the chat interface and display memes to the user.

Application Tier

This tier contains the business logic and application functionality. It handles the processing of user inputs, and meme generation.

The application tier integrates with the data tier to retrieve and store data related to users, chat history, and memes.

Data Tier.

This tier involves the storage and management of data used by your application.

I used Azure SQL DB and Blob storage as the data tier.
Azure SQL DB is used for storing structured data such as 'id', meme url and it's caption.

Blob storage is utilized for storing the meme images generated by your application. It offers scalable object storage for unstructured data like images and provides efficient retrieval and serving of static content.

Technology Stack

To bring the web chat meme app to life, I used HTML, CSS, and JavaScript, to create the user interface and handle the client-side interactions.

On the server side, I employed Node.js and Express.js to build a scalable and efficient backend. Furthermore, I leveraged the power of Azure SQL DB and Blob storage to store user data and meme content securely.

The Web app was deployed using Azure App Service as well.

Process

This article is only focusing on the deployment to Azure using Azure App Service and Database storage using Azure SQL and Blob services.

If you'd like to view the code base I created for the web app, check here

Using Azure SQL and Blob Services

Azure Blob service.

On your Azure portal and search storage accounts.
Click on create, supply all the required details and go to resource.

Under Data storage, click containers. Under "public access level" , select container and name it.
Upload each meme to the blog container and note each url that come with the uploaded meme. It will look like this https://.blob.core.windows.net//giphy (2).gif

Azure SQL Database.

Follow these steps to create an azure SQL Database.

On your azure portal go to SQL database and click create. Supply your details and create you SQL server.

When creating your server, maeke sure you select SQL authentication for authentication methods.

In Azure Data Studio create a connection and write the following SQL commands.

This interface will be used to create a table called "Memes", insert and store the memes in our Azure Sql Db.

CREATE TABLE Memes (
  id INT PRIMARY KEY,
  url VARCHAR(255),
  caption VARCHAR(100)
);

SET IDENTITY_INSERT Memes ON;
-- Assuming you have a table named "Memes" with columns "id", "title", and "url"

-- Inserting a single row
INSERT INTO Memes (id, caption, url)
VALUES (1, 'Funny Meme 1', 'url');

-- Inserting multiple rows at once
INSERT INTO Memes (id, caption, url)
VALUES
  (2, 'Funny Meme 2', 'url'),
  (3, 'Funny Meme 3', 'url'),
  (4, 'Funny Meme 4', 'url'),
  (5, 'Funny Meme 5', 'url');

In your node js file, include this line of code below to connect to your Azure Sql Database.

const config = { user: '', password: '', server: '<name>.database.windows.net', database: '', options: { encrypt: true, }, };

Deployment to Azure Using App Services.

So I did 2 things that some may find interesting.

I deployed the meme app itself using Azure Web App Service
I then embedded the Web app on a static site that was also created with Azure.

I honestly had no reason for doing this, I just felt it will be fun to do that😅

Deployment Using Azure Static Web App
To deploy the static content of the web app, I used "Azure Static Web App"

Go to your azure portal and search static web app.
Click create, fill in the details and select what works for you in terms of pricing. Use github as a deployment source and point to your location for your api, your app, and output location. -Then click review and create. Your URL will be ready for use.

Using Azure App Service to deploy the Web Chat.

On your portal, search App Service and created a WebApp. Choose "code" in the publish section of the web app creation.
Click review and create. Then go to resource
Under deployment center click FTPS credentials and note them or copy them.
Download Filezilla
It is a free and open-source FTP application that supports various platforms and protocols.
Click on create a new site on the filezilla interface and paste your FTPS credentials where relevant and make a connection.

-Copy all the relevant code and files to the /site/wwwroot/ directory on filezilla

Visit the URL on your web app created and everything should be up and running

Demo

Try WanderMind out 👉🏾Here

jadesola123 / WanderWhiz

WanderMind is a fun and interactive platform that allows users to chat with it while sharing and displaying memes in real-time.

WanderMind

WanderMind is a fun and interactive platform that allows users to chat with it while sharing and displaying memes in real-time. THis is my final project from the Shecode Africa cloud school and my submission for #GitHubHack23

Presentation Tier:

This tier represents the user interface and handles the presentation logic of your application It includes components such as HTML, CSS, and JavaScript that render the chat interface and display memes to the user The presentation tier interacts with the other tiers to send and receive data and provide a seamless user experience.

Application Tier:

This tier contains the business logic and application functionality It handles the processing of user inputs, meme generation, and communication with external services. The application tier integrates with the data tier to retrieve and store data related to users, chat history, and memes.

Data Tier:

This tier involves the storage and management of data used…

View on GitHub

Create A Microsoft Azure Static Web App

jade — Sat, 15 Apr 2023 14:48:17 +0000

In the second week of our SCA cloud school journey, we were given the task to create a static web app in Azure.

In this article, I will be showing how to create one in azure in less than 5 mins.

What is an Azure Static Web App?

According to Microsoft, it is a service that automatically builds and deploys full stack web apps to Azure from a code repository.

What do you need to create an azure static web app?

An Azure Account
A github account

Now let's dive into this tutorial:

Firstly, go to your Azure portal and search for "Static Web Apps" and click on the + button to create a new one.
So now it's time to fill in your basics details and'give github the authorizations. Then select your preferred github repository.

Once you've done this, under the "Build details", select "custom" for the build preset. For me, my "index.html" was stored in the "Src" folder, so I put /src for my app location.

Then click review + create and you'll see this. Click create

Once it's finished deploying, click go to resource and you'll see these details of your deployed static web app. Click the link under URL.

That's it! You can view your deployed app on the URL. If nothing is showing at the beginning, give it like 2 minutes and refresh the site.

You can also tweak the code to make changes on the site.

Lastly make sure you delete the application or any other resources running, if not you'll receive unnecessary bills.

I got charged like $10 because I left my VM running for a week😩😩

A Beginner's Guide to Creating a Virtual Machine (EC2) in AWS.

jade — Sat, 08 Apr 2023 09:01:26 +0000

I recently got into the shecode africa cloud school and it's been exciting. Our first take home task was to create a virtual machine in AWS.

According to AWS; Amazon Elastic Compute Cloud (Amazon EC2) provides scalable computing capacity in the Amazon Web Services (AWS) Cloud.

Using Amazon EC2 eliminates your need to invest in hardware up front, so you can develop and deploy applications faster.

Amazon EC2 provides Virtual computing environments (vm), known as instances.

In this tutorial, I'll be discussing the following:

How To Create an EC2 Instance
Connecting the Instance.
Stopping the EC2 Instance.

*Note: I use a windows 11 operating system on a hp probook. *

How To Create an EC2 Instance.

Step 1. Log into your AWS Console. If you don't have an account, create a free AWS account here.

Step 2.
Once on your dashboard search for EC2 or click on it

Step 3.
On your dashboard you'll see the resources tab, that kinda serves as a status bar. Click on Launch Instance to create a new instance.

Step 4: Choose a name for the instance you want to create.

Step 5: Time to pick your AMI (Amazon Machine Image). This contains operating systems (Ubuntu, Windows, Mac etc). I am creating a vm on Windows 11, so, select Microsoft Windows.

Step 6: Scroll down to create a unique key pair for your instance. Click on Create new key pair. Select the .pem file, then click on Create Key Pair. The Key Pair will be created and automatically downloaded.

Step 7: Click Launch instance and you will get a notification that your instance has been launched successfully.

Connecting the Instance.

Go back to your instances tab. Click on it and select Connect at the top corner right of the screen.
Connect using RDP. Download the Remote Desktop File (RDP File). Now, click on get password.

Generate password by uploading the key pair file and decrypt password. Copy the generated password and other details.
Open the Remote Desktop file and paste the generated password upon request

Stopping the EC2 Instance.
To avoid unneccesray bills and charges. You definitely need to terminate the running instance

Select the running instance and click “Instance State” From the drop down options, choose terminate instance.

The end.