DEV Community: Rocky Le

Fortune of the day Cloud project

Rocky Le — Thu, 12 Aug 2021 01:07:02 +0000

Fortune of the Day web Cloud project

In this project I created a web app using AWS resources. The website is very simple it prints fortune for the day. I will be detailing the steps I did to get this to work. For this project I specifically wanted to demonstrate my Docker skills as well as AWS Security.

Visit the webpage here Webpage

Step 1: Get a webpage

First I found a template webpage to work off of and edited until it looked like how I wanted to look.

Step 2: AWS Routing

After creating the webpage next was to setup the AWS environment.
First I created a Custom VPC so I can have more control as to what enters and leaves my cloud environment.

Next I created Subnets one for each availability zone as well as tier. For this project I have a web tier and a database tier, I also created extra subnets in case I wanted to have an extra tier or some other case.

After the subnets are created I made sure the web tier subnets can be assigned an ipv4 address by allowing them to be auto assigned.

After all of that I created an Internet gateway and attached it to the VPC.

Once those were configured I created and edited the route table to route where they need to be.

Step 3: DynamoDB

Once the VPC was setup I decided to create the DynamoDB table. This table is used to store the fortunes that will be used in the webpage. After creating the table I thought about the quickest and least effort way to upload the data. The amount of fortunes I had were in the 100s and putting them in manually was out of the question.

I decided to use a json file and populate the database using aws cli. I came into another problem, while writing the json file I found I was doing alot of copy and pasting and back tracking to edit things so I decided to streamline the process and created a python script that will write the json script for me.

You can check out the script here at my Github

The script reads the fortunes from a text file already prepared and writes and formats it in the way I need it for to populate the table.

Another small problem which I may fix later is I can only batch write 25 items at a time so I edited the script to just write 25 requests to the file. The objective here is to get the web working not necessarily the script so Ill come back to it another time.

Step 4: API Gateway and Lambda

Once the database was done I just had to create a lambda function that read and returned a fortune from the database based on a condition. The condition is if a day has passed select a fortune at random to be used for the day. As for the API Gateway I just created a rest API that will invoke the lambda when called. After that I made a simple JavaScript script for the webpage to call the API and used the returned value for the fortune.

Step 5: Docker

This is the last step and its to get it Containerized. For this step I used Docker and Dockerhub for my image repo. First I created a Dockerfile which will install a apache web server as well as put all my html files into the correct places.

After the Dockerfile was made I built the image and pushed it onto the Dockerhub repo. Once that was done back on the AWS console I created an ECS cluster and used Fargate as my cluster type. After that was done I created a Task definition where I reference the image from the Dockerhub repo to be used for creating the container.

After all of that is done I just had to create a task in the cluster and run it and the webpage is now up.

Step 6: Wrap up

Although the webpage and everything works at this point there are still things I had to setup such as making sure the lambda only connects to DynamoDB through the VPC and no internet access. I did this by giving DyanmoDB a gateway endpoint placing the Lambda in the VPC and editing the route tables so it has access to DynamoDB. I also made sure everything was in the correct subnet and everything has the correct permissions and stuff before I officially consider this project a success!.

Visit the webpage here Webpage

Project Showcase GUI in python

Rocky Le — Fri, 25 Jun 2021 23:07:42 +0000

Today I just finished created a GUI application that can showcase my multiple micro projects that I completed. The ideas for the projects come from this github repo: https://github.com/karan/Projects.

How the Application works

First to use the application the user must select one of the tabs. So far I have only created two categories for the projects completed.

Next the user must click on the drop down menu shown and select which project they wish to see in action.

Afterwards the user can then perform whatever action the project asks of them and see the results

Here is a link to my repo of the application if you wanna check it out! https://github.com/Rocky-Hoang-Le/projectshowcase

My first Tkinter project

Rocky Le — Tue, 22 Jun 2021 19:22:36 +0000

Today I finish my first project using the Tkinter framework for my GUI. It is a simple program that allows the user to clean out their folders.

The user will be prompted to browse for a folder to clean and then the user must hit the clean button before they are given another prompt.

Here the user has the option to simply delete everything in the folder (including the folder itself, but it'll be recreated) or to delete everything in the folder one at a time.

Some things to note is although the window can be resized the inner frame of the window does not, clicking no to not a delete a file but then going back to delete everything all at once will result in said file still being deleted. If the user clicks the one at a time button and then right after clicks the all at once button everything will be deleted button the GUI will not refresh to show that it has been deleted.

Here is the repo if you wish to see how I did it. https://github.com/Rocky-Hoang-Le/filecleaner

My Journey through the Cloud Resume Challenge

Rocky Le — Sun, 13 Jun 2021 18:42:55 +0000

So Recently I had gotten my AWS Cloud Practitioner Certification and decided to look around and find some projects to enhance my skills and add to my portfolio. After looking I saw some nice projects but the one that caught my attention was the cloud resume challenge from Forrest Brazeal, which can be found here: https://cloudresumechallenge.dev/

This challenge is great as not only am I applying what I've learned but I am also learning new skills and concepts such as JavaScript, CI/CD, etc. Its also making me use AWS tools and get familiar with how they work as well as the errors and problems that can occur while using them. I gonna walk through the journey of this challenge from beginning to end in order defined by the steps given on the challenge website.

Step 1: Certification

Although not necessary to have the certification to start the project it seems having it would be required to finish, so this step was already finished for me as I found this challenge after getting my certification.

Step 2: HTML and CSS

In this step I was required to create a resume website using HTML as well as style it with CSS. Now I haven't used HTML since High School (we were still using HTML 4 at the time too) and I rarely even used CSS. It was quite fun relearning HTML as well as getting a better understanding of it as well as how to use CSS. After all was done I got done with my first ever resume webpage!

Step 3: Static S3 Website, HTTPS, and DNS

This portion of the challenge wasn't to difficult but did take a lot of steps to complete. First I had to too create an S3 bucket on my AWS account in which my webpage files would be stored. After I did that I made sure the S3 had proper bucket policy so my webpage can be read and continued on to the HTTPS part.

In order for my webpage to be redirected to HTTPS I had to create a CloudFront Distribution. Creating this wasn't to hard but I had some troubles setting it up at first as When I first created it wouldn't call up my webpage but rather my bucket. That's when I realized that I had to set a default root object within my origin settings and boom my CloudFront page now redirects to my HTML file using HTTPS. Next up is the DNS.

The DNS part required me to use Route53 to create and register my own domain name and was pretty straight forward. Just follow a wizard through the steps and choose and name and domain extension (such as .com or .net). After that part was done I just had to route to it using my CloudFront distribution. This part is where I had a little bit of trouble, and that's because at the time I didn't set enough permissions for my created IAM user to change the distribution and create the SSL certificates to use my new domain name. Once all of that was sorted out every worked! Now onto the next steps.

Step 4: JavaScript, Database, API, Python, Tests.

This portion of steps took me a long time because I had so many errors but I also learned a lot from them as well. All these steps work together to add a visitor count to the webpage.

So First thing I made was the Database and this was done using DynamoDB. This was pretty easy as all I had to do was create a table, define my primary key and the table is created. After the table is created I had to define my primary key value and another attribute which would hold the number of visitors that visited my webpage.

Next was the API. Now at this point my knowledge of APIs in general was pretty weak and to be honest it still is so I had to read a bunch of documentations as well as YouTube videos on how it worked and how to set it up correctly. After I learned enough I went ahead and used the API gateway to make my API that would be used as a trigger for my lambda. At this point in time I decided to use the REST API template to make my API but that will change as I will explain later.

Next is the Python version and Tests. I am already familiar with how to use python but I never really used tests (or usually I just manually ran the script to see if it worked). After giving the suggested article a read I found I can just setup some if else statements to make sure the program ran successfully.

For the lambda function I decided that when it is triggered by the API it will first get the database table and update the visitor count value and then it will return that value. During this time I learned about boto3 and how it can be used to connect to AWS services.

Next is JavaScript. Now I had seen JavaScript before but never used it so I followed the code academy link provided by the challenge and learned up to the object oriented portion of JavaScript (I didn't think I needed to know that much for the context of this project). After words I was ready to apply my JavaScript skills. At this point I decided the original webpage I made was ugly so I decided to find a web template I can use and found a beautiful one from BootstrapMade.com

This is where all my problems started to really happen. After setting up the JavaScript code to call the API and get the value returned from the lambda I kept getting either the value undefined or Object promise. This was really frustrating as I didn't really understand why this was happening as running the lambda on its own returned the result I wanted and triggering the API on its own gave me the result that I wanted so the problem was from the JavaScript calling the API. After a lot of googling about what could be the cause I decided to use my web browser console to see what was wrong and saw I was getting a CORS cross origin header missing error.

I had to do a lot of reading and adjusting some things but no matter what I did I'd still get cross origin header missing or preflight response error. I did figure out that the problem was my web browser (Firefox) can cause this error because I am calling the API from my local host so I had to install a plugin to fix that. However that didn't fully fix my issues so after a little more reading I found that the CORS preflight response is handled automatically if I used an HttpApi. So I deleted the RestApi and decided to use the HttpApi instead to see if it fixed my issues. I also made sure to setup the CORS attributes within this API. After adjusting my code to make use of the HttpApi I finally got the visitor count to show a number instead of undefined or Object Promise!

Now that I finally got all of those services working together it was time to move onto the next steps.

Step 5: Infrastructure as code, Source Control, CI/CD

In this portion of steps I had to learn how to use AWS Serverless Application Model (SAM) template so I wouldn't manually have to fix and deploy my resources.

Before I could begin I had to setup a couple things such as AWS CLI and SAM CLI. After I installed everything I needed to I decided to start with the introductory hello world template to see how this worked and It was pretty cool, SAM created all the resources and setup everything all in one go and can update multiple things at once as well which made everything go a lot faster. After getting a feel for how this worked I decided it was time for me to go ahead and try this myself.

I downloaded the hello world template again but this time with my own edits. So I did have to learn a bit of yaml but it wasn't all that different from a JSON structure it was really the same just without the brackets. I did have to read a lot of documentation as to how to deploy each resource and the required properties and attributes to use them with. For this part I decided only to make new API, new DynamoDB, new Lambda, and new s3 as I didn't see the need to make a new cloud front nor route53 at this time.

Now that my SAM model was deployed I had to integrate it with my GitHub and use GitHub actions to automatically update my resources whenever I push updates to GitHub.

After reading about how GitHub actions worked I looked around for some setups that would do what I need such as deploy SAM stack and push new files to s3 actions. After all of that was setup and done I tested it a few times by removing some files and editing some code and pushing the changes to see if it would work. I did have a couple of errors but they were syntax errors or I did use the required properties. All in all everything worked and now I can automatically update everything just by updating my git repositories!

Summary

This challenge was quite engaging and honestly got me really frustrated at times because some of the errors didn't make sense and some of the errors didn't even have good documentation on how I could fix it. But I'm glad I finally got through it and finished. I now have a lot more understanding of how each of the services I used works, some of the errors that can occur as well as how to solve them, as well as created my very own resume website! This challenge has made me excited for all the other projects I am going to partake as well as confidence for when I do enter the IT world.

If you read this far thank you for giving this a read! If you're interested here is the resume webpage I created https://rockystaticresume.link/

If anyone has any other projects I could take on or just general advice I'd be glad to hear them. Hope you have a nice day!