Building a Pokédex with Python and AWS CDK: A step-by-step guide to creating your own web application in less than minutes

Are you a Pokemon fan? For sure yes! These fantastic beings have captured our hearts through video games, series, movies and more. But have you ever dreamed of having your own Pokédex to explore the diversity and unique characteristics of each Pokémon?

Today is your lucky day. In this post, I will guide you step by step to create your own Pokédex in less than 20 minutes using AWS CDK, Python, and the Pokémon public API. Let's give you and not advice!

Prerequisites

Before you start, make sure you have basic knowledge of the following topics:

1. Familiarity with AWS and its console
2. Basic knowledge of Python
3. Command line experience

Tool Settings

To start, we need to configure the necessary tools to create our Pokédex. Below, I leave you the list of tools that we are going to use:

• An AWS account
• AWS CLI
• AWS CDK
• Python 3.9 or higher
• Vanilla Javascript
• A code editor of your choice

Configuration of our work environment

The first thing we must do is configure our work environment to be able to deploy our solution. Follow these steps:

Permissions

Following the good practices recommended by AWS, we must create a user and assign only the permissions necessary for our project. To do this:

1. Access the AWS console.signup#/start/email)
2. Go to the IAM section.
3. Create a user and configure access using [AWS Access Keys].

Once configured, assign the necessary permissions to work with the CDK. One way to do this is to assign policies with permissions directly to the user.

After this, configure your console with the newly created credentials

aws configure
// Nos solicitará la siguiente información
AWS Access Key ID [None]:  
AWS Secret Access Key [None]: 
Default region name [None]: 
Default output format [None]:

Creating the CDK project

Let's create the project using Python. Open a terminal and run the following command:

cdk init app --language python

This will create a folder with the name of your project, which contains the files needed for the CDK. Among these is the app.py file, where we are going to specify our application. A virtual Python environment is also created, which is activated automatically.

S3 Bucket Creation

In this step, we will create the S3 bucket that will contain the files for our Pokedex website. Open the app.py file and modify it as follows:

from constructs import Construct
from aws_cdk import (
    stack,
    aws_s3 as s3,
    aws_s3_deployment as s3deploy,
    core
)


class CdkStack(Stack):

    def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
        super().__init__(scope, construct_id, **kwargs)

        pokeBucket = s3.Bucket(self,>



<p>Here we are creating a class called CdkStack, which represents an AWS CloudFormation stack, a manageable collection of AWS resources. Inside the class constructor, we are creating an instance of the s3.Bucket class, which represents an S3 bucket. The parameters are described below:</p>

<ol>
<li>
<strong>pokebuck</strong>: <em>The identifier of the resource within the stack.</em>
</li>
<li>
<strong>website_index_document</strong>: <em>The name of the document that will be displayed when the bucket is accessed as a website. In this case, it will be the index.html file, which is located in the "static_site" folder.</em>
</li>
<li>
<strong>website_error_document</strong>: <em>The name of the document that will be displayed when an error occurs when accessing the bucket as a website. In this case, it will be the file error.html.</em>
</li>
<li>
<strong>public_read_access</strong>: <em>A value indicating whether the bucket will have public read access. We will set it to True so that our Pokedex website can be seen by anyone.</em>
</li>
<li>
<strong>removal_policy</strong>: <em>The policy that will be applied to the bucket when the stack is removed. We assign the value core.RemovalPolicy.DESTROY so that the bucket is deleted when the stack is removed.</em>
</li>
</ol>

<p>We also create an instance of the s3deploy.BucketDeployment class, which represents the deployment of the static website to the S3 bucket.<br>
We pass the following parameters:</p><ol>
<li>
<strong>pokedex-deployment</strong>: <em>Identifier of the resource within the stack.</em>
</li>
<li>
<strong>sources</strong>: <em>List of sources that contain the files we want to deploy. In this case, we use the s3deploy.Source.asset method to indicate that the files are located in the ./static_site folder of our project.</em>
</li>
<li>
<strong>destination_bucket</strong>: <em>S3 bucket where we will deploy the files. In this case, it is the bucket that we created previously.</em>
</li>
</ol>

<h2>
  
  
  Load static website
</h2>

<p>Now we are going to load the static website that will display the Pokémon information. To do this, we are going to use the code found in our GitHub repository, cdk branch, static_site folder. This code is a static website, with vanilla JavaScript, that communicates through Axios with the Pokémon v2 web public API.</p>

<blockquote>
<p><em>Note: This project is not intended to be a complete frontend solution, but rather to offer different work possibilities related to the Pokémon public API. The frontend can be totally improved and suggestions and contributions are accepted</em></p>
</blockquote>

<h2>
  
  
  Deploy deploy deploy!
</h2>

<p>We now have everything ready to deploy our application. To do this, we are going to use the AWS CDK commands that allow us to create and manage the infrastructure in AWS. The commands are as follows:</p>

<ol>
<li>
<strong>cdk bootstrap</strong>: Prepare the AWS environment for the CDK by creating an S3 bucket that will store the CloudFormation templates and application artifacts. You only have to run it once for each AWS account and region we use.</li>
<li>
<strong>cdk synth</strong>: Generates the CloudFormation template that represents our application and displays it on standard output. With this we verify that our application is well defined and that there are no syntax or logic errors.</li>
<li>
<strong>cdk deploy</strong>: Creates and/or updates the CloudFormation stack that represents our application and deploys the resources to AWS.</li>
</ol>

<p>During this process, we will obtain information from the console step by step.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173563909767924.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Construyendo una Pokédex con Python y AWS CDK: Una guía paso a paso para crear tu propia aplicación web en menos de minutos"></p>

<p>As a recommendation, it is always good to access the console and review the AWS CloudFormation section, this way we can observe the events and each of the actions carried out within our account.</p>

<h2>
  
  
  DEMO
</h2>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173563909972434.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Construyendo una Pokédex con Python y AWS CDK: Una guía paso a paso para crear tu propia aplicación web en menos de minutos"></p><h2>
  
  
  Conclusion
</h2>

<p>Congratulations! You've created your own Pokedex in less than 15 minutes using AWS CDK, Python, and the Pokémon public API. Now you can explore all Pokémon and their characteristics from your own web application.</p>

<p>If you liked this tutorial, do not hesitate to share it and leave your comments. What other features would you like to add to your Pokedex? Let me know!</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173563910048019.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Construyendo una Pokédex con Python y AWS CDK: Una guía paso a paso para crear tu propia aplicación web en menos de minutos"></p>


          

            
        

The above is the detailed content of Building a Pokédex with Python and AWS CDK: A step-by-step guide to creating your own web application in less than minutes. For more information, please follow other related articles on the PHP Chinese website!