Chunk 3: Front-end/back-end integration

In the previous two chunks of the Cloud Resume Challenge, I made significant progress by designing the front-end components using HTML and CSS and exploring AWS Lambda to create a serverless backend, instead of going for a traditional REST API. I decided to utilize a newer service inside my lambda function. The function URL, I prepared to integrate both components seamlessly. By connecting the front end (resume site) to the back end (Lambda Function), I added a practical and engaging visitor counter to the homepage. To ensure a smooth experience, I created some automated tests for my Python code, adopting a test-driven development approach.

Step 7: javascript

In step 7 of the CRC, I added a visitor counter to the resume webpage to make it more engaging. The visitor counter informs visitors of the site and how many people have viewed it. It’s always fascinating to know the number of visitors my website receives. To achieve this, I utilized JavaScript. I created a dedicated section on the webpage to display the visitor counter and wrote a JavaScript function to fetch the visitor count from an AWS Lambda endpoint. The retrieved count is then dynamically displayed on the homepage. Here’s the code I implemented:

// JavaScript function to fetch visitor count from AWS Lambda endpoint
async function fetchVisitorCount() {
  try {
    const response = await fetch('https://example.com/lambda_endpoint');
    const data = await response.json();
    return data.count;
  } catch (error) {
    console.error('Error fetching visitor count:', error);
    return 0; // Default to 0 if there's an error fetching the count
  }
}

// Function to display the visitor count on the webpage
async function updateVisitorCount() {
  const visitorCounter = document.getElementById('visitor-counter');

  try {
    const count = await fetchVisitorCount();
    visitorCounter.textContent = count;
  } catch (error) {
    console.error('Error updating visitor count:', error);
    visitorCounter.textContent = 'N/A'; // Display "N/A" if there's an error
  }
}

// Call the function to update the visitor count on page load
updateVisitorCount();

With this implementation, visitors to my cloud resume can now see the live count of how many people have viewed my webpage. Implementing this adds an interactive element to the site, making it more engaging and dynamic for users.

STEP 11: PYTHON TESTS

As a responsible developer, you must understand the importance of testing. To ensure that my Python back-end code remains reliable, In step 11 of the CRC the learner must create tests to detect if their Python code for their website is running properly after it has been deployed. I created some automated Python tests. These tests act as a safety net, by checking that my Lambda function correctly updates the visitor count within the AWS DynamoDB table when my website has a new visitor Below is my Python test code:

import boto3

dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('cloudresume')

def lambda_handler(event, context):
    response = table.get_item(Key={'id': '1'})
    if 'Item' in response:
        views = response['Item'].get('views', 0)
        views += 1
        print(f"The website has been viewed {views} times.")
        response = table.put_item(Item={'id': '1', 'views': views})
    else:
        views = 1
        print(f"The website has been viewed {views} time.")

    return views

def smoke_test():
    try:
        event = {}
        context = {}
        result = lambda_handler(event, context)
        print("Smoke test passed.")
    except Exception as e:
        print(f"Smoke test failed. Error: {str(e)}")

if __name__ == '__main__':
    smoke_test()

Conclusion:

By integrating the front-end and back-end components of my cloud resume webpage, I gained the ability to track the number of visitors to my website, which brings me a sense of accomplishment. To ensure the functionality remains intact, I proactively wrote automated tests for my Python code. With each step, my cloud resume is becoming more impressive and reliable. As I move on to Part 4: Automation / CI, I am eager to complete the final chunk and further enhance the overall performance and efficiency of my cloud resume.