Forem: jss475

Creating Seed Data in AWS Amplify/Studio

jss475 — Mon, 24 Oct 2022 21:53:23 +0000

Hey everyone!

I just started trying to use AWS Amplify to deploy one of my old projects and boy did I have some trouble haha.

AWS Amplify uses GraphQL or allows use to use a REST API. I wanted to learn more about GraphQL so I went with that route for my personal project. Understanding the basic concepts of GraphQL were not too difficult and luckily AWS has plenty of documentation to help with that as well. Here's a link to one of the documentation that helped me a lot: https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js/

Once you set up your project and your backend, you may want to have some seed data. For my project specifically, I wanted to add in restaurants for my "Food Journal" project. A nice visual way to set that up is by using Amplify Studio. With your backend schema already set up, you can go to the page below:

Once you're at the backend environment, click "Actions" and then "Launch Studio." This should take you the following page:

Navigate to the "Content" link under "Manage" in the sidebar on the left.

Once there, you can click on "Action" to "Auto Generate Data" (when you want to seed more than one instance with fake data) or click "Create (table name)".

You should now be able to seed your data!

Hope this helped!

Google Maps with React

jss475 — Tue, 12 Jul 2022 02:41:47 +0000

Today I'll be showing you how I used Google Maps with react to create a dynamic map on a webpage.

The first thing you need to do is install this package:
npm i @react-google-maps/api

More information on this can be found here: https://www.npmjs.com/package/@react-google-maps/api

Sometimes you may have to end --legacy-peer-deps at the end of npm install. You can read more about that on google/stackoverflow.

Once you've installed the package:
Let's say I'm in my React component

I'm going to first import the below:

import {GoogleMap, useLoadScript, Marker} from "@react-google-maps/api"

Then, I will need the following code
const {isLoaded} = useLoadScript({googleMapsApiKey: process.env.REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY})

What this piece of code here is we use the useLoadScript hook to load in our Google Maps API key. Once that's loaded, isLoaded is a truthy value. You can read more about how to create a Google Maps API key on Google's official documentation. The process.env portion here is referencing a .env.local file that has REACT_APP_NEXT_PUBLIC_GOOGLE_MAPS_API_KEY = YOUR_API_KEY. The reason we do this is to ensure our API key is hidden. Just make sure you don't push the .env.local file to Github!!!!

The next piece of code is where we make the map itself:

//creating the google map
    //here i'm just initializing a variable called map that will hold the Google Map instance
    let map
    //if our useLoadScript hasn't completed, return "Loading..."
    if(!isLoaded){
        map = <div>Loading...</div>
    //if it is loaded, create the map
    }else{
        map = <GoogleMap zoom={13} center={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} mapContainerClassName="map-container">

            <Marker position={{lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}} label="SL"  />
        </GoogleMap>
    }

return (
     <>
          {map}
     </>
)

The zoom on GoogleMap is just how far zoomed you are in on the map when it renders on the webpage. You can experiment with what you like! The center takes in a lat, lng of where you want the center of your map to be. I also added a marker on the map at the center location here!

Below is what you should see!

Creating Custom Methods in Rails

jss475 — Tue, 12 Jul 2022 02:13:22 +0000

I wanted to cover making custom methods in rails today. Rails is quite the powerful tool and can accomplish a lot of the actions you may want to do on the front end.

Let's go over an example that I've worked on:

I have three tables.

User
Restaurant
UserRestaurant - the joiner table for User and restaurant

The UserRestaurant table belongs to both the user and restaurant. It also holds the following information:

upvoted? (boolean)
downvoted? (boolean)
Review (string)

So, when a user leaves an upvote, downvote and/or review on a restaurant it's handled by the UserRestaurant table.

Now, when a user upvotes a restaurant, a UserRestaurant instance is created and the upvoted? attribute is set to true on the backend. However, what happens when this same user wants to leave a review on the same restaurant? You have to first find the original instance and then update it. You can do this on the frontend by using filters and what not or you can accomplish the same on the backend. Or what if the user leaves a review first and then upvotes? You'll have to create a UserRestaurant instance with a review and then update the upvoted? attribute.

This is where creating a custom method can help.

Here's a bit of code I wrote to accomplish let's say making an upvote first.

def create_update
        # I'm just taking the params that were sent with the post request here and setting them with different variable names 
        #ur_params here permit the following attributes: user_id, restaurant_id, upvoted?, downvoted?, and review
        user_id =ur_params[:user_id]
        restaurant_id = ur_params[:restaurant_id]

        # I then check to see if this instance exists
        ur_found = UserRestaurant.find_by user_id: user_id, restaurant_id: restaurant_id

        # If the UserRestaurant exists for this specific pair, just update it
        if ur_found
            ur_instance = ur_w_all
            ur_instance.update(ur_params)
        # If the UserRestaurant doesn't exist, create it!
        else
            ur_instance = UserRestaurant.create(ur_params)
        end
        render json: ur_instance, status: :created
end

By using this custom method, it can handle both an update and create when necessary!

Happy coding!

Phase 3 - GET requesting Multiple Pieces of Data

jss475 — Wed, 08 Jun 2022 00:30:42 +0000

While working on one of my projects recently, I wanted a way to use a GET request to send more than just one piece of data from my database. For example, I have a GET request for a specific product (i.e iPhone) and I wanted to have the information for the product and the seller sent to my frontend.

I had learned in my bootcamp, that you typically just send the information of the product when doing a GET request without any other information. However, while working on the frontend portion of my project, I found it annoying to use .filter methods all the time, or .group and .join methods, to find out who the seller of the product was. It got me thinking because using ruby, you can easily find the seller of a specific product as long as they have a one to many relationship or many to many relationship.

I wanted to leverage that capability and send this information back to my frontend. I had figured out that you can do this by literally just adding a comma between the two pieces of data you want to send back. I'm posting an example of my application controller below to illustrate what I'm talking about

get '/products/:id' do prod = Product.find(params[:id]) seller_of_prod = prod.seller combo = prod, seller_of_prod combo.to_json end

This piece of code allows you to get information about the product while also getting the seller at the same time. The resulting combo here is a json formatted object with the product and seller. Hope this helps!

Phase 2 of Flatiron

jss475 — Mon, 09 May 2022 17:15:12 +0000

React has been quite the journey. It started out with lots of frustrations after dealing with only vanilla Javascript. However, I can see now why React is such a powerful framework/library. The use of components is quite elegant and it has definitely made my code a lot cleaner. I'm currently trying to use React to make a website where you can like restaurants near you, order from said restaurant, and save the items that you ordered. You can then go back to the items and like/dislike them to keep a record of your food journey. I always forget what I got at a restaurant unless I order from them all the time, so this will be cool to do. Ideally, this would be synced up to the restaurant side of things such that your order information is automatically added to our database if you eat in person. Maybe you can even take a picture of your receipt and it's added in that way. Right now, I don't have the ability to do the back-end work necessary to make this happen. I'm just focusing on the front-end portion of how this website would work with my partner Hyun currently.