Forem: Hyun Sung Cho

Phase 3 Ruby - Active Record Migrations - Creating Migration

Hyun Sung Cho — Mon, 06 Jun 2022 03:19:48 +0000

As I was learning Ruby in phase 3, I found myself really enjoying the process of setting up a backend data server using Active Record. Active Record is an object relational mapper that makes it easier for developers to write code. Here, I will be discussing specifically creating Active Record migrations using Rake Tasks. Migrations are a convenient way to alter your database schema over time in a consistent way. There are a few steps that you need to follow.

You need to create a migration for setting up our data table (we will use "students" for this example)

#put this code in your terminal
#make sure you are in your project's directory that you are 
#currently working or building 
bundle exec rake db:create_migration NAME=create_students

running this code will generate a new file in db/migrations called timestamps_create_students.rb

├── app
│ └── models
│ └── student.rb
├── config
│ └── environment.rb
├── db
│ └── migrate
│ └── 20220605095220_create_students.rb # new file here
├── spec
├── Gemfile
├── Gemfile.lock
└── Rakefile

The timestamp at the beginning of the migration will be used as part of the version control for the migrations and ensure they are run in the correct order.

Also, this rake task will add some code for us.

# db/migrate/20220605095220_create_students.rb
class CreateStudents < ActiveRecord::Migration[6.1]
  def change
  end
end

to finish CreateStudents migrations which will generate students table with appropriate columns for the data, we need to use create_table method and pass the name of the table we want to create as a symbol.

After the table name :students we write a block of code that is passed a block parameter t, which is a special Active Record migration object that helps add different columns to the table.

# db/migrate/20220605095220_create_students.rb
def change
  create_table :students do |t|
  end
end

we add columns.

class CreateStudents < ActiveRecord::Migration[6.1]
  def change
    create_table :students do |t|
      t.string :first_name
      t.string :last_name
      t.integer :age
      t.string :school
      # the id column will be generated automatically for every table.
    end
  end
end

Finally, we run our migration in the command terminal.

bundle exec rake db:migrate

== 20220605095220 CreateStudents: migrating ====================================
-- create_table(:students)
 0.0008s
== 20220605095220 CreateStudents: migrated (0.0009s) ===========================

Running this command:

Active Record will create a new database file, if one doesn't already exist, based on the configuration in the database.yml file.
It will then use the code in the migrate folder to update the database.
It will also create a db/schema.rb file, which is used as a "snapshot" of the current state of your database.

You will see your db/schema.rb file look like the below:

ActiveRecord::Schema.define(version: 2022_06_05_095220) do
  create_table "students", force: :cascade do |t|
    t.string "first_name"
    t.string "last_name"
    t.integer "age"
    t.string "school"
  end
end

Use this Rake task to see your migration status to check whether the migration has updated the database.

bundle exec rake db:migrate:status

database: db/development.sqlite3

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20220605095220  Create students

Now you have successfully created migration using Rake Tasks!

Phase 2 - First Time Learning React

Hyun Sung Cho — Fri, 13 May 2022 18:47:52 +0000

Learning React was very exciting due to the fact that I have been hearing about its popularity on the web. Before I started learning React, I was really curious about what React is and does.
React is a JavaScript library for building user interfaces (source: React docs). Simply put, a JavaScript library is reusable codes written by someone else that is used to help solve common problems that developers face. Out of many great features of React, I learned that React allows you to write code Declaratively meaning you describe what a goal or result a program should accomplish instead of describing each action a program should take. This enables us to write codes more predictable and easier to manage debugging (source: React docs). Also, I learned that React is component-based meaning you build blocks that handle their own data and UI logic. I felt that writing a function that takes parameters in JavaScript in Phase 1 definitely helped make it easier for me to understand writing React’s Components. Writing JSX (an extension of vanilla JavaScript with specific syntax that looks similar to HTML) in components just made codes look easy to follow. During the phase 2 learning react, I learned how to create components, pass data to children components using props, use useEffect to fetch the data from the server, use useState dynamically to change the data as users interact with our application, make control components, handle events, use client-side routing and put together to make a web application using React. I believe that the reason I was able to easily conquer Phase 2 code challenge the first time was not only that React was efficient to learn and use but also that understating JavaScript made it easier for me to learn React. The most important part of learning React was that it made me realize that having strong and solid JavaScript knowledge would only benefit me in my future career as a developer!

Completing Phase 1 (JavaScript & Code Challenge).. part 2

Hyun Sung Cho — Thu, 12 May 2022 21:57:52 +0000

All cohorts were given 2 chances to pass the code challenge.
At the first trial for the code challenge, I made it through all core deliverables until I encountered a problem having a Vote Counter not working properly. The vote count was not adding up accumulatively in the DOM but rather it was just getting updated by the value of what the user puts whenever a user submits a new value (number of votes) to the form. I could not figure out how I should make this work until the 90 minutes of the code challenge time ran out. It has been a while since I was under such intense pressure and it felt as if I was taking my first SAT back in high school. After the challenge, I had to find out how to make the vote count increment accumulatively and found a way to approach to solve it. First, I could have declared a variable to initialize the count in the global scope and add the new user input value to the variable, and assign the result to the variable using the assignment expression in the form function. Secondly, I also had to use parseInt on the value that I grab from the DOM and the value user inputs.
After I realized that I needed much more exposure to solving the challenges, I started practicing all the practice code challenges in the labs over and over until I reached a point where I started feeling really comfortable with the structure of making a web application using Vanilla JavaScript and the process of fetching data from the API, creating and grabbing DOM elements, making functions, adding event listener, using .Map & .Filter array methods, updating new data to the JSON server using POST, PATCH, DELETE, and more. Countless practices of solving the code challenges over a week led me to succeed in passing the code challenge in the following week. I was finally relieved after passing the PHASE 1 code challenge and finishing my Phase 1 project in week 3 because I was able to move on to the next phase which was Phase 2 and excited about learning React.
I already started feeling what it is like to be a software developer. Trial and Error, Dedication, and Practice!

Completing Phase 1 (JavaScript & Code Challenge)..

Hyun Sung Cho — Wed, 04 May 2022 01:23:48 +0000

In the past 3 weeks after I wrote my first post in regards to my learning, I have failed to write posts every day. As I do not personally like to give out an excuse, so let a million reasons why I could have not written a single piece of writing about my learning behind and move on. This goes back to 2nd week of my phase 1 which was the most challenging, shocking, and somewhat intimidating moment during my being at Flatiron. 9 days of learning javaScript basics immensely (data type, arithmetic calculation, variable assignment, creating variables & functions, object and a special type of object called arrays, accessing data, fetching, looping, iteration, and more) spending at least 10 hours a day straight, it all came down to facing a mock-up code challenge. A code challenge consists of DOM (a programming interface for web documents representing the page so that programs can change the document structure, style, and content source: MDN) manipulation including fetching data from a JSON server or API and using event listeners to manipulate the DOM. It would cost a lie to say that I did not expect the code challenge to be a bit of a difficult problem. However, the process of me choosing this career path to become a software developer at the age of 30 and start Flatiron School Bootcamp was already a hack of a decision (more of a life-changing one) so a naive thought of me inside of my mind thinking that I made a tough and critical decision made me feel so confident and relieved in a way that I felt like I could achieve anything and eventually it led me to be blind to see the truth. The truth that making a difficult decision does not help to prevent agony coming from trying, failing, and not passing the code challenge in the first trial. To be continued...

Something about HTML, CSS, JavaScript...

Hyun Sung Cho — Wed, 13 Apr 2022 10:58:44 +0000

In touching the second week of my journey at Flatiron School, I begin to believe that JavaScript has so much to give out to the world. My main goal here is to write each day about something that I learn along my journey to becoming a full-stack developer! My post will be focused on sharing and discussing my understanding of topics, concepts, or skills that I acquire. First of all, the Web has three important components and it can be made using those three HTML, CSS, and JavaScript all together. HTML is defining the content structure of the Web and CSS is to be dealt with the layouts of the Web lastly, JavaScript is to function the behavior of the Web. To put it simply in words, HTML is a bone and CSS is a skin, JavaScript is a muscle.