Goal

To get images uploaded to AWS on the Backend for the HitHub App. Also to maybe to create a .env file to allow other contributors to join in on the project with their own Environment Variables.

Notes

Credentials for Developers

Madmax asked for credentials so he could start working on developing the Frontend of the HitHub App. To do this I created a new IAM User for madmaxvoltron. I also created a developer group so that I could assign permissions . For now they have read-only access to S3 but I may change that in the future. Anyways I created an Access Key for his IAM User and was able to give him both an AWS_ACCESS_KEY_ID and an AWS_SECRET_ACCESS_KEY custom to his account under the developer role. This should make it much easier to help organize permissions of people who want to develop on the HitHub App.

I also updated the HitHub Readme to better reflect the setup required to get started. I'm looking forward to madmax's feedback on how easy it is to set up. Maybe I'll have more people working on HitHub soon!

At the end he asked if there was a way to run a development server without using Docker so I pointed him in the direction of setting up .venv for creating his Virtual Environment.

S3 Media Files

Next I wanted to work on actually serving images from AWS S3 to the HitHub App. I referenced a few resources for this. First, I watched an old youtube video about getting S3 set up with Django. The video pointed me in the direction of django-storages, but more specifically I was able to find the actual S3 setup documentation.

For some reason that worked! I tried adding in the basic_male.png Cosmetic and it was able to successfully upload it to AWS. Unfortunately, trying to retrieve the image was another story. I kept getting a 400 Error, specifically a 403 error which meant that the client didn't have permission to view the asset.

I ended up needing to use boto3 to generate a Signed URL. ChatGPT wrote the following utility function in hithub/utils.py so that other apps could import the function if needed:

# Allow a user to get an image asset from S3 via a signed URL
def generate_signed_url(filename, bucket_name=AWS_STORAGE_BUCKET_NAME, expiration=3600):
    try:
        # Create an S3 client
        s3 = boto3.client('s3')
        
        # Generate a signed URL that expires after 'expiration' seconds
        signed_url = s3.generate_presigned_url(
            'get_object',
            Params={'Bucket': bucket_name, 'Key': filename},
            ExpiresIn=expiration
        )
        return signed_url
        
    except NoCredentialsError:
        return None  # Handle authentication error

This made the assets accessible on the Frontend!

I had to make some adjustments to the determine_cosmetics function in the Fighters App (mostly missing the use of arguments) and added a requirement for a BASE and SHORTS cosmetic. I did this by adding an is_required flag to identify whether a cosmetic was required. If a required cosmetic wasn't assigned to a fighter, I eventually forced the function to select a common cosmetic to use. There should always be common forced items.

Overall I was able to get the fighters to load in with their cosmetics in the app! ChatGPT helped me write the CSS required to format the fighters so that their cosmetics would overlay on top of each other. Now I can mix and match different fighters in the app. Cool!

Next I want to work on adding in my color shifting to cosmetics via Pillow.

Results

• Updated the Readme file on the GitHub for the HitHub App to allow other developers to contribute to the project.
• Finally got images to serve from S3 via Signed URLs.
• Rendered fighters and their associated cosmetics on the Frontend.

Next Time

• Use Pillow to adjust how images can be re-colored
  • Make adjustments to the Cosmetic Django Model if necessary to allow more creativity and flexibility in determining how to re-color cosmetics.