DEV Community: marisa saunders

How to setup active storage w/ AWS S3

marisa saunders — Wed, 06 Sep 2023 20:10:45 +0000

For my final project at Flatiron School we had to add some new technology to our project that we had never used or learned about before and I decided on using Active Storage with AWS S3 to allow a user to upload an avatar. Upon researching, reading blogs, documentation, and watching online tutorials I found that I was having to use many different resources just to figure out how to get started, and therefor have decided to write a step by step tutorial all in one place for whoever needs to get started with Active Storage.

Active Storage setup

First things first, I recommend reading the active storage documentation in rails or at least referencing it if you find that you are having any issues: https://guides.rubyonrails.org/active_storage_overview.html

but I will lay out the necessary steps for you here as well.

install "libvips" or "ImageMagick" for image analysis and transformations
both of these require the image_processing gem so uncomment it in your Gemfile or add it if you don't see it there already:
gem "image_processing", ">= 1.2"
Active storage uses three tables in your database:
• active_storage_blobs
• active_storage_variant_records
• active_storage_attachments
to create these tables run "bin/rails active_storage:install" and after migrate them by running "bin/rails db:migrate"

Here is a photo of my schema file for reference for how yours should look (note please ignore the "photo" column in my users table I had this here as a temporary column for when I was working on the project before I had implemented Active Storage)

Declare active storage services in "config/storage.yml"

In "config/environments/development" tell Active Storage which service to use
config.active_storage.service = :local

To use the S3 service in production add this line of code to "config/environments/production"
config.active_storage.service = :amazon

To use the test service add this line of code to "config/environments/test"
config.active_storage.service = :test

Setting up your Models, Controllers, and Serializers

Since I was adding the ability for a user to upload an avatar when creating an account I added the following line of code to my user model:
has_one_attached :image

this line of code is very important and establishes the association, do not be confused that this will not be reflected as a column in your schema file

Add the "with_attached_image" method to you Users Controller:

and make sure to include ":image" into your user params

Modify your User Serializer like so:

(adding ":image" to attributes and the "image" custom method)

Setting up AWS

make sure your service in config/storage.yml set to "S3"
add the "aws-sdk-s3" gem to your gemfile
gem 'aws-sdk-s3', require: false

Create an AWS account and create a bucket in S3 (you can change your bucket name in "config/storage.yml" to your specific bucket name once we create the bucket, and the region to whatever your specific region once we select it in AWS S3

Once you're logged in click on "S3"

Click "Create Bucket"

You will be taken to this page:

Fill in the form as so:

Bucket name - yourbucketname
AWS Region - your region
Object Ownership - ACLS disables
Block Public Access settings for this bucket - Block all public access
Bucket Versioning - Disable
Tags - leave empty
Default encryption - Server-side encryption w/ Amazon S3 managed keys(SSE-S3)
Bucket Key - Enable

for more information and understanding on why you should set "Object Ownership" and Public access settings a certain way I recommend watching this video: https://www.youtube.com/watch?v=UOLpv2f8mz8&t=779s

Once you are done click "create bucket"

Click on the name of your new bucket where you will now be taken to a page where you can edit your settings

Click on permissions and scroll to the Bucket Policy section and click on the "edit" button and then the "Policy Generator" button.

Fill out the form as so:

Select Type of Policy - S3 Bucket Policy
Effect - Allow
Principal - arn:aws:iam::ACCOUNT_ID:root
AWS Service - Amazon S3
Actions - DeleteObject, GetObject, PutObject
Amazon Resource Name (ARN) - arn:aws:s3:::BUCKET_NAME/*

To find your account ID click your username in the top right corner and your account id will appear
you can find your ARN in the properties section of the settings

Once you have filled out the form click "Add Statement" and "Generate Policy" and copy the Policy JSON Document code that pops up and paste it into the field under Edit Bucket Policy and click "Save Changes" here's a photo of mine for reference:

Next, go back to your bucket and go to the permissions section where you can scroll down to CORS(Cross-origin resource sharing) and click the "edit" button. Here's mine for reference:

You can add more methods if you need depending on your app and if you plan to deploy your application you will need to do something like this:

Now that all of this is saved and complete, click on your username in the top right corner and then click on "security credentials" and then "users" on the left side of the page and click "create user" in the top right corner

The name of the user does not matter or need to be connected to an existing user in your application so I would just name it something generic

Once you enter your user's name click "next" and fill out the form like so:

Permission options - Attach policies directly
Permission Policies - AmazonS3FullAccess

Click "Create User" to save your new user and then click on the name of your new user and then "Security Credentials" where you can scroll down to the Access Keys section and click "Create Access Key"

Select "Application running outside AWS" and add a create description tag called something like "Connect AWS S3 to my_app_name". You will now be able to see your access keys, keep this window open and take a screen shot or download them to a CSV file because once you close this page you wont be able to access them again and you will need them to make connections to your app

In your terminal run: "EDITOR=vim bin/rails credentials:edit"
and edit/update "aws", "access_key_id", and "secret_access_key" with the information in the CSV file you just downloaded after we created the access keys above, once you are done close the file and it will automatically save and you can leave the terminal and you are good to go!

Setting up your Frontend
All of my research led me to use Javascript' formData api as a way to allow the user to upload a photo on the frontend through a form which would then connect to the backend to Active Storage. Here is my signup function and handleSubmit function which is attached to the onSubmit on my form

When working on this project and troubleshooting I made the mistake of adding a header to my POST method so make sure not to do so

Instead of using "e.target.value" like you are most likely using in the rest of your form you will instead need to use "e.target.files" on the image (I am using React Bootstrap if you are confused as to why my form looks like like this)

If you are using validations in your project I found that the way params was sent back for the image using formData was creating some issues. To resolve this I had to create frontend validations for the image in the form as a workaround to prevent my app from breaking. I am sure there are alternative ways to do this, this is just the option that worked for me. In order to do this I created a new state object:

and then a conditional statement: "isImage ?" in my form like so:

Conclusion
I hope this was helpful, of course aspects of this tutorial are specific to my project but I think they can easily be adjusted and manipulated to the specifics of yours. I tried to get into the obstacles and troubleshooting I had to figure out along the way incase you find yourself in the same position!

How to update React state on nested objects that are serialized in Rails

marisa saunders — Thu, 12 Jan 2023 16:44:35 +0000

Introduction

While working on my phase-4 project at Flatiron School I was confronted with the task of repeatedly having to update nested state. This was due to the fact that I was accessing data in different models through the use of serializers in Rails, as opposed to making get requests for each model. While this is beneficial in terms of how fast the website is, this created the obstacle of figuring out how to update nested state. As this is something I struggled with for a while and it took a while for this concept to click in my head, I thought I would share what I learned, in case someone else out there is struggling as well.

Project Concept

Big Apple Runners is an application built for runners to find routes in NYC and write reviews on them to share with each other. It is a single page full-stack CRUD application with a Ruby / Ruby on Rails backend and a React / Javascript frontend.

Big Apple Runners Models

User

Has many reviews
Has many routes through reviews

Route

Has many reviews
Has many users through reviews

Review

Belongs to route
Belongs to user

What is state?

State is a built-in React object that is used to contain data or information about the component. A component’s state can change over time. Whenever its state changes the component re-renders. This change in state can happen as a response to a user action or event, and these changes determine the behavior of the component and how it will render.

What are serializers?

ActiveModel::Serializer provides a simplified way to customize how the JSON rendered by our controllers is structured. Active Model Serializer provides a convention-based approach to serializing our resources. Meaning that if we have a "Route" model, we can also have a "RouteSerializer" serializer and Rails will default to use our serializer if we simply call "render json: route" in our controller.

Within the serializer we can use the built in Active Record macros "has_many" and "belongs_to" to tell Rails which model data we want to gain access to through the serializer. All we have to do is use the same macros in the serializers that we used to set up associations in our model files. Rails then automatically uses the appropriate serializer, based on naming conventions, to display the associated data for each of our models.

From a front end perspective this is great because you don't have to make as many fetch requests, but the data you now have access to are nested objects in the data you are fetching from. This means you have to update the state of nested objects which takes a bit more work on your end.

How to:

In the app component I made a GET request to "/routes":

Instead of making a separate fetch request to "/reviews" to access the reviews data, I created a "RouteSerializer" that I told to access the "reviews" model

Next I updated nested state to have access to the object. It is important to note that because review data is accessed through "/routes" the state that needs to be updated is the route state. But in order to access reviews, which is nested we need to iterate twice, first through routes to get to reviews and then through reviews in order to access whatever is it is we are trying to change in reviews.

Conclusion

I hope this was helpful if you are feeling stuck on how to update nested state. I'm sure there are other ways you can do so, but this was the way that worked and made more sense to me.

How to make a full-stack CRUD app with React and a Ruby Sinatra API

marisa saunders — Tue, 01 Nov 2022 18:45:47 +0000

In this tutorial I will be guiding you through the process of building a full-stack CRUD application with React and a Ruby Sinatra API.

What is Sinatra?

Sinatra is a free open source library and domain-specific language written in Ruby, is a good alternative to Ruby on Rails, and is dependent on the Rack web server interface. Sinatra is considered a 'microframework' and focuses on "quickly creating web applications in Ruby with minimal effort" -sinatrarb.com

What is React?

React is a free open-source front-end JavaScript library built by facebook for building user interfaces based on UI components. It can be used as a base in the development of single-page applications.

What is CRUD?

CREATE, READ UPDATE, and DELETE are the database commands that make up the foundations of CRUD

Routes used in my application:

Name	Method	Route	Purpose
Create	POST	/model	Creates a new record
Read	GET	/model	Reads & retrieves data based on input parameters
Update	PUT/PATCH	/model/:id	Updates data without overwriting it
Destroy	DELETE	/model/:id	Removes data from the database

CRUD will be used in this application as a means to retrieve data, create new data, and allow the user to interact with it by editing and deleting the data. I will be using my project from Flatiron School as an example, which is a Job Board application for quick gigs called "Quicky".

Back-End

First a file tour!

The config.ru file is set up so that when the file is run it will require the Environment file, which will make sure there is a connection to the database and then run the ApplicationController which is a class that inherits from the Sinatra gem (base module from within that gem), which contains some starter methods in the controller for you.

Gemfile:

config.ru:

environment.rb:

Rakefile:

Corneal-new

To start my backend I used the Corneal-new: gem that creates a Sinatra skeleton for you to easily build off of when coding your application.

Install the gem, run 'corneal new APP-NAME', and run 'bundle install'. You can start up the server by typing 'shotgun' into the terminal and verify everything is working.

In the terminal run 'corneal scaffold modelName' to create a model and migration for you to create the table for the model, and controller for the model as well.

Database Migrations

Once your specify the attributes you want in your model table run "rake db:migrate" in the terminal in order to run your migrations. Doing this creates a schema file which is a list of logical structures of your data. If you make a mistake and need to edit your migration run "rake db:rollback" then make your edit and run "rake db:migrate" again to run the migration again (simply editing after the fact will not change the schema).

migration files:

Active Record Associations

Once you create your migration files build out your models in order to establish you Active Record associations, for my application I had a one-to-many relationship meaning a Category has many Listings and a listing belongs to a category (has one category):

class Cat < ActiveRecord::Base
  has_many :listings
end

class Listing < ActiveRecord::Base
  belongs_to :cat
end

Controllers

From here you can start with your CRUD in your controllers. A good place to start would be with a "Read" route which should return all categories when a get request is sent to '/cats'.

Read (GET)

to view go to http://127.0.0.1:9393/cats in your browser(when you run shotgun it will provide a url for you in the terminal)

#RUBY BACKEND
#Request type is specified before URL endpoint.
#URL endpoint points to all categories
get "/cats" do
 # return all categories posts after request
 #Requests turned to JSON, for REACT readability.
   cats = Cat.all
   cats.to_json
end

Read (GET)

to view go to http://127.0.0.1:9393/:id
this route allows you to see an individual category based on the id you provide in the url

get '/cats/:id' do
  cat = Cat.find_by_id(params[:id])
  cat.to_json
end

Creat(POST)

This route typically receives information in the request body and creates a new data entry which the user can do from the browser by interacting with the front-end

post "/cats" do
   cat = Cat.create(
     job_type: params[:job_type]
   )
   cat.to_json  
end

Update (PATCH)

This route receives the id of the category which is being updated in the url and is then updated using the data passed in via the request body

patch '/dats/:id' do
 cat = Cat.find(params[:id])
 cat.update(
  job_type: params[:job_type]
 )
 cat.to_json)
end

DELETE

This route takes an id of a category to be deleted in the url and then deletes it using the .destroy method

delete '/cats/:id' do
   category = Cat.find(params[:id])
   category.destroy
end

These are basic examples of CRUD routes and functionality you can implement into your applications. Here are both of my controllers to give you an idea of other options you can build into your application

Front-End

For this section of the project I will explain how to build out your front-end to connect with your back-end. This tutorial is assuming you know React but simply need help connecting your front-end to your back-end.

Run 'npx create-react-app my-app' in the terminal to create a quick skeleton of all the file structures you need to begin building out your front end. Build your components out as you would like for what makes sense for your specific project.

Read(GET)

useEffect(() => {
    fetch("http://localhost:9393/cats")
    .then((r) => r.json())
    .then((data) => {
      setCats(data);
    });
  }, []);

Create(POST)

const configObj = {
   method: "POST",
   headers: {
     Accept: "application/json",
     "Content-Type": "application/json",
   },
    body: JSON.stringify({
     job_type: jobType
    }),
};

const handleSubmit = (e) => {
    e.preventDefault();

    fetch("http://localhost:9393/cats", configObj)
      .then((r) => r.json())
      .then((cat) => {
        addNewCategory(cat);
      });
  };

*Update(PATCH) *

 function handleEditCategory(e) {
    e.preventDefault();

    fetch(`http://localhost:9393/cats/${id}`, {
    method: "PATCH",
    headers: { 
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(formData),
   })
    .then ((response) => response.json())
    .then((updatedCategory) => {
      handleUpdateCategory(updatedCategory);
    });
  }

DELETE

const handleDelete = () => {
    fetch(`http://localhost:9393/cats/${id}`, {
      method: 'DELETE',
    });
    const updatedCats = cats.filter((cat) => cat.id !== id);
    setCats(updatedCats);
  };

Hopefully this tutorial has been helpful in guiding you on how to start building full-stack applications. Here's a link to the front-end and back-end GitHub repositories for my application.

Understand the useEffect hook in react

marisa saunders — Thu, 02 Jun 2022 19:01:16 +0000

The useEffect hook in react is one of the many hooks that you can use as a react developer.

A good place to start would be of an explanation of what exactly "hooks" are:

Hooks were introduced into React version 16.8 to solve the issue of developers often reusing the same code throughout different components as an alternate approach to classes. With hooks, instead of having complex components with stateful logic that cannot be reused, hooks introduced a way for developers to break up a component into smaller fragmented functions, based off of their functionality.

As a new developer I had learned to use functions and hooks before classes in React, but I advise you to try to code the same functionality using classes to truly understand the advantages.

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community - reactjs.org

The Effect Hook (useEffect)

Data fetching, subscriptions, and making manual changes to the DOM are all considered "side effects" meaning that they affect other components and cannot occur during rendering.

An operation, function or expression is said to have a side effect if it modifies some state variable value(s) outside its local environment — Wikipedia on Side Effects

The purpose of the useEffect hook was to introduce the ability to execute side effects from function components.

Calling useEffect tells react to execute your effect after React has updated the DOM (after every render). Because effects are declared inside of the component they have access to the both the components props and state.

In order to use the useEffect hook we first must import it from React.

import React, { useEffect } from "react";

After doing so you can then call useEffect from within your component, here's a basic example of how to use the hook:

import React, { useEffect } from "react";

function ExampleUseEffect() {

  useEffect(() => {
    console.log("you just called useEffect WOO!");
  });

console.log("Component rendering");

return (
    <div>
      <button >Click to call useEFfect</button>
    </div>
  );
};

export default ExampleUseEffect;

What order do you think the console messages appeared in? If you said "Component rendering" first and "you just called useEffect WOO!" second then you are correct! I am bringing this up to reinforce that useEffect is called AFTER rendering. By default, useEffect will run side effect functions every time the component re-renders:

render -> useEffect -> setState -> re-render -> useEffect

In the event that we don't want to make a network request every time our component is updated, and instead only the first time our component renders, we can tell react to only run our side effect in certain conditions.

Running the following code will result in an infinite loop of fetch requests which is most likely something we don't want to occur.

function MusicProjects() {
  const [musics, setMusics] = useState([]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    fetch("http://localhost:3004/music/")
      .then((r) => r.json())
      .then((data) => {
        // setting state in the useEffect callback
        setMusics(data.message);
      });
  });

  return (
    <div>
      {musics.map((music) => (
        <img src={music} key={music} />
      ))}
    </div>
   <button onClick={() => setCount((count) => count + 1)}>
        I've been clicked {count} times
   </button>
  );
}

In order to mitigate when the side effect runs we can pass a second argument to useEffect known as a dependencies array. Passing a variable in the array will cause the side effect to run only when said variable changes, while passing an empty array as the second argument will cause the side effect to run only the first time that the component renders, solving the issue of the infinite loop in the previous example.

useEffect with a variable in the array (side effect will run only when the count variable changes):

useEffect(() => {
    fetch("http://localhost:3004/music/")
      .then((r) => r.json())
      .then((data) => {
        // setting state in the useEffect callback
        setMusics(data.message);
      });
  }, [count]);

Empty dependencies array (side effect will run only the first time our component renders):

useEffect(() => {
    fetch("http://localhost:3004/music/")
      .then((r) => r.json())
      .then((data) => {
        // setting state in the useEffect callback
        setMusics(data.message);
      });
  }, []);

You also have the ability to pass multiple variables into the dependencies array that will run whenever either of the variables change:

useEffect(() => {}, [variable1, variable2])

Conclusion

• useEffect is one of the many hooks available in React

• useEffect is used to trigger side effects

• Dependencies arrays can but used to specify when the side effect will run

• An empty dependencies array will tell useEffect to run only the first time our component renders

Fetch Requests Taught Me the Importance Of console.log()

marisa saunders — Tue, 08 Mar 2022 19:22:22 +0000

Introduction

I am new to coding and I think one of the most important lessons I have learned so far, is that in order for me to truly learn and understand what I am coding, I need to physically see what my code is doing in the background.

Initially, I was just typing out what I thought was right in Visual Studio Code. I was running the tests, seeing them fail, and just trying to edit my code over and over until the tests finally passed. This meant I was coding without actually digging into why my code was wrong and checking what it was that my failing code was actually doing in the background.

So now, I am constantly placing console.log(s) throughout my code, and seeing what pops up in the console in dev tools. I also downloaded the Live Server extension so I can get immediate feedback.

I'm basically going on this rant because the reason I discovered that I needed this was through fetch requests. Even though I understood fetch requests, I could not wrap my head around how to get the data I was fetching to appear on the page. And the first thing that really helped me to understand this was to console.log() my fetch and see that data in the console, and then get it to appear on the page, and that is when it really clicked.

Background:

I think should probably explain what a fetch request is for the sake of this blog, so here you go:

Note: I recently was working on a project where I used the Studio Ghibli API to display a list of Studio Ghibli films in the browser, so I will be using references from this project.

The fetch() function in Javascript is used to make a request to the server to retrieve data and display that data in the browser.

It's a global method on the window object. That means you can use it simply by calling fetch() and passing in a path to a resource as an argument. The request can be used on any API that returns the data in either JSON or XML format.

When using a fetch request you only need one parameter, as opposed to other requests, because fetch defaults to send an HTTP GET request. Fetch instantaneously returns a promise object. The three promise object statuses are pending, fulfilled, and rejected. To use the data that is returned by the fetch(), and see it in the browser, we need to chain on the then() method which will keep fetching until the status of the request is "fulfilled". We can see what this looks like below:

Step 1:

function getFilms() {
fetch('https://ghibliapi.herokuapp.com/films')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
}

Notice the console log! If you are coding along open up your file in the browser, open up dev tools, and take a look at what is being logged to the console. It's an array of 22 objects! For me seeing this is so satisfying. It's telling me I am doing the right thing, I am on right the path, and I actually know what I am doing. I think this is so important, especially when you are learning something new at a quick pace as a means to stop self doubt from taking over.

Here's what that data looks like in the console:

Step 2:

Ok great! So now that we have seen our data, we need to get our data on the page. In order to do this we need to decide where we want to attach our data to. For this project I had an ul in my index.html file (here's a snippet of that code for reference)

 <div id="main">
      <ul id="film-list"></ul>
      <div id="info"></div>
    </div>

and decided I would attach the films to the ul in order to have them display in the browser. But, in order to put them in the unordered list I need to create li's, iterate over the li's to attach each object in the array to, and ultimately display them in the browser.

function getFilms() {
  const ul = document.getElementById('film-list')
  fetch('https://ghibliapi.herokuapp.com/films')
  .then(res => res.json())
  .then(data => {
    data.forEach(film => {
      ul.innerHTML += `
      <li>${film.title}</li>
      `
    })
  })
}

Here's how they show up in the browser:

Conclusion

I'm sharing this because for whatever reason it took so long for me to realize how important something as simple as a console.log() is in regards to your learning. It can guide you on how and what to google if you're stuck while coding. Stick them throughout your code! I think its better that you have too many than not enough, and see if this helps show you more about what your code is doing than you understood before.

Why I signed up for a software engineering bootcamp

marisa saunders — Tue, 08 Mar 2022 02:42:07 +0000

I think this pandemic has done a really good job at revealing what actually matters to me. It's introduced a level of unpredictability that I hadn't imagined prior, and ultimately I'm tired tired and have been craving stability. I want to be free to travel and work from anywhere in the world without feeling tied to one place. I also want to push and challenge my brain to work in ways it hasn't necessarily worked in before.

For the last few years I've been working freelance as an Audio Engineer. This has included working at various recording studios, assisting for engineers, mastering, and mixing. I also produce my own music as well as DJ. This is my passion, it's what I love, but the money isn't great and I've found that turning music into work has taken away from the love and energy that I feel able to direct towards it. I want music to always feel like a choice and not an obligation.

Last October, I was talking about how tired I am of being broke while on a trip to Mexico City with some friends, and jokingly brought up that I should just learn how to code. But just like most things in my life, the second I have a small idea about something, I cant help but really dig into it. Right upon getting back to New York, I immediately decided to do a Codecademy course to see if I this was something I could get into and within 2 weeks of the course I started apply to bootcamps. I honestly just trusted my gut. I was having fun on Codecademy and just wanted to keep digging deeper into what I was learning and ultimately knew that I would need the pressure and structure of a bootcamp to truly succeed.

So far it has been going really well. I'm having a lot of fun. It's been hard but I'm enjoying the challenge and really looking forward to the future and what life could be once I start my new career.