Here we will create a rideshare app for Unicorns.

Starting by creating an account on ArcGis. This will allow for location tracking which is necessary for the app. image

Create the repository through CodeCommit.

1 2

After creating the repository, we want to grant permission for the users. We would attach policies directly so that the user would be able to use codecommit.

2 3

Next, we want to generate Git credentials for the user. 4

Then we want to open up CloudShell within the repository and input the cloned url and provide the username from the git repository. 5 6

Depositing code/information from an S3 bucket. image We have to include the information from the repository into the code, they will then ask us for information. image

I ran into some trouble due to the source of the S3 bucket being in a different region, however I switched the origin of the url to the repository url and then executed the git push. After it successfully generated the username and password request, I entered the same credentials as before and was able to validate the objects.

8

Create a new repository

image Create a new service role then save and deploy. Make sure Allow box is checked. image image

After the success message. We will check to see if the link is valid. Voila! image

Now to update the code just to see if we are having continuous deployment on the site. We will update this text from “how does this work?” to “how does this thing work?”

image image We will then commit changes. (Input author name and email for trailing purposes) Provision -> Build -> Deploy will occur again. image image

Allowing user interaction We are going to use Cognito to allow users to sign up for the services. You do this by creating a user pool and choosing the sign-in options. image image image image You will be able to customize every attribute to go along with the user interface and their options on signing up. Also cannot be changed after user pool has been created.

An email for verification can be automated in order to send emails to the user. You can customize this address. Send email with cognito will be better for a temporary start. image image

You will need to retain the credentials for the User Pool by copying the ID, then copying the client ID at the bottom of the page. image image

Return to the Repository and enter the JavaScript folder, then open the configuration code. You will then input the User Pool & Client IDs. Make sure the region is updated as well.

image

Let’s Sign Up! Once the the updates have deployed we will refresh the site and attempt to sign up. image It will then generate an email to send a verification code, which you will then input into the required fields.

image image image

Amazing right?!

The authentication token will then be provided on the page where the map is supposed to be. image We will then create a table using DynamoDB image

Once the table is created we will grab the ARN from the General Information section right under ‘additional info’ image

Lambda Integration

Create a role for lambda permissions image image image

Now we need to add permissions. Which is to write to a DynamoDB table. We would select the role and then create an inline policy. Best practice is to only give the required permission for the task at hand, to avoid unnecessary interference. image image image

Now we will create the lambda function itself. Don’t let the runtime default to the updated node. We specifically need Node.16. Change the execution role to an existing role which would be the lambda function we just created.

image image

Once we’ve created the function we can now edit the code. AWS provided a sample code for the rideshare, to which you can edit certain elements. I’ve decided to change the names up a bit. image Deploy the code any time changes are made!

Create a test event so that you can see if the code works. image Success! The 201 and the unicorn credentials are an indicator that the code test was successful. image image

Create an API

We would need to create an API to ensure the flow of information is seamless and that we face no technical difficulties. When choosing an endpoint; edge-optimized is better for cross-internet actions. image

We would create an authorizer to authenticate calls next, which is basically the way of connecting the API Gateway’s JWTs or JSON webtokens that are returned by Cognito. image

Now the authorizer token that we copied earlier comes into play now. Input it then hit ‘test authorizer’ if the result is a code of 200, it was a success. image image

Next we need to create a resource so that we can connect to the Lambda function. The URL used to invoke the API Gateway call is different from the URL used for the site (Amplify), which is why it’s necessary to check the CORS box. (Cross-Domain)

image

We then create the method so that the Lambda function is integrated. Make sure to toggle the proxy integration. After creating the method, edit the method and in the drop down Authorization menu… select the user pool authorizer. image image

Deploy the API. Then grab the invoke URL. Input the URL into the config code from before. image image

Voila! Here’s the map. Click any location and a unicorn should be on the way! image image

The DynamoDB should be updated with the items returned, with the credentials of the ride requester. image

And with that, we have our RideShare app!


<
Previous Post
Building an App From Scratch!
>
Next Post
Building a React App! (CI/CD)