DEV Community: newAlicorn

Intro to Linked List

newAlicorn — Wed, 06 Apr 2022 22:26:31 +0000

1. What is a Node?
We can think of a node as a container for some data. It can be conceptually visualized as a circle that we can put some data inside. We can store any data type in a node. Each node has two attributes: value and next.

tail - the very last node that has its next pointer pointing to nothing or has its next set to null.
head - the very first node. A head has a position of 0. As long as we know where the list starts, we can always traverse it to access all other nodes in the list by using the next property.

2. What is a Linked List?
A linked list contains a bunch of nodes linked together. We can consider a linked list ordered data structure. The head node denotes the start of the list.

3. Linked Lists & Arrays

An array must be stored contiguously (right next to each other) in memory.
An linked list does not require its nodes stored contiguously in memory.

Linked List Traversal
If I want to traverse through a linked list and print out the value of every node, I would need to continually update a current pointer. In the context of my function, the only important variable I am going to track is current, which starts at the head of my linked list.

Iterative Traversal

const printLinkedList = (head) => { 
  let current = head; 

  while (current !== null) { 
    console.log(current.val); 
    current = current.next; 
  }

}

Recursive Traversal

const printRecursive = (head) => { 
  let current = head; 
  if (current === null) return;

  console.log(current.val);

  printRecursive(current.next);
}

Building a CRUD SPA with Ruby on Rails and React

newAlicorn — Sat, 22 Jan 2022 20:26:58 +0000

For my React project, I built a simple CRUD SPA called the Eat Here React App. This App allows users to explore the most unusual restaurants around the world. Besides reading all restaurants, users can add new restaurants, or like and make reviews of any of them. Searching by name functionality is also implemented in the application. Here is the demo video.

Building a RESTful JSON API with Rails

In this project, I continued utilizing the Ruby on Rails framework for my backend API construction. I had two related models set up: a restaurant model that has_many reviews, a review that belongs_to a restaurant. I also defined a couple of before_validation methods for data validation. Below is the basic flow of how I built out the Rails API step by step :

Step 1 - Create a new Rails API using the command line below. Don’t forget to add the API flag at the end.
rails new eat-here-rails-backend --api

Step 2 - Specify the attributes and datatypes of both models and utilize rails g resource command to create corresponding models, controllers, database migration tables, and routes.
rails g resource Restaurant name country image gif description address
rails g resource Review nickname comment restaurant:belongs_to

Step 3 - Define index, show, create, update, and destroy actions and serialize data in relative controllers’ actions.

Step 4 - Define necessary validation and helper methods in models’ files.

Step 5 - Don’t forget to install the CORS gem and enable the CORS file to allow our server to specify from what origins it will permit.

Here is my backend repo on GitHub.

Building the Frontend App with React using Hooks

Since this was my first React project, I spent a lot of time understanding a couple of core concepts before coding. For example, the difference between props & state, React lifecycle, virtual DOM, controlled components, Redux, and React-Redux. It helped me better structure and re-factor my codes.

During the coding process, I found the most challenging part was how to utilize react redux to read state from the store and how to update state by dispatching actions. The basic flow of using react redux is: (1) We build up our actions; (2) We dispatch the actions to the reducer; (3) The reducer returns our state.

1. Create a Store

When finishing the basic installation of all necessary dependencies, the first step is to set up the global state. Calling the createStore method provided by redux will return us the store object. Since I also incorporated asynchronous requests in this application, I used redux thunk as the middleware to handle all the asynchronous actions.

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';


const store = createStore(rootReducer, compose(applyMiddleware(thunk), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()))

export default store

2. Define Reducers

Reducers are functions that accept the previous state as the first argument and an action object as the second argument and return the newly updated state. Note that reducers do not mutate the state directly. They return an entirely new state to replace the old one. Whatever the reducer returns will be our current state; The default action returns the initial state. Since I had two reducers created in my application, I utilized the combineReducers() function to delegate different pieces of state to each reducer.

import { combineReducers } from 'redux';
import restaurantsReducer from './restaurantsReducer';
import reviewsReducer from  './reviewsReducer';

const rootReducer = combineReducers({
    restaurants: restaurantsReducer,
    reviews: reviewsReducer
})

export default rootReducer

Below contains the code snippet of my restaurantReducer:

const initState = {
    restaurants: [], 
    loading: false 
}

const restaurantsReducer = (state = initState, action) => {
    switch(action.type){
        case "LOADING":
            return {
                ...state,
                loading: true
            }

        case "ADD_RESTAURANT":
            return {
                ...state,
                restaurants: [...state.restaurants, action.payload]
            }

        case "FETCH_RESTAURANTS":
            return {
                ...state,
                restaurants: [...state.restaurants, ...action.payload],
                loading: false
            }

        case "UPDATE_RESTAURANT":
            const idx = state.restaurants.findIndex((restaurant) => restaurant.id === action.payload.id)
            const restaurant = action.payload
                    return {
                        ...state,
                        restaurants: [...state.restaurants.slice(0, idx), restaurant, ...state.restaurants.slice(idx + 1) ]
                    }

        default:
            return state    
    } 
}

export default restaurantsReducer

3. Define All Actions

An action is an object that has a type and a payload. We can imagine the payload as objects/data that we want to send to our reducer. Also, since I made fetch requests in my action creator, the thunk middleware enabled me to return functions from my action creators and pass dispatch as an argument to the returned functions.

const baseUrl = "http://localhost:5000/restaurants"

export const addRestaurant = (restaurantObj) => {
    return {
        type: "ADD_RESTAURANT",
        payload: restaurantObj
    }
}

export const fetchRestaurants = () => {
     return (dispatch) => {
         dispatch({type: "LOADING"})

         fetch(baseUrl)
           .then(resp => resp.json())
           .then(data => {
               dispatch({
                   type: "FETCH_RESTAURANTS",
                   payload: data
               })
           })
     }     
}

export const createRestaurant = (restaurant) => {
    return (dispatch) => {
    const configObj = {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body:JSON.stringify({restaurant})
    }
        fetch(baseUrl, configObj)
          .then(resp => resp.json())
          .then(restaurant => dispatch(addRestaurant(restaurant)))
    }
}

export const updateRestaurant = (newObject) => {
    return {
        type: "UPDATE_RESTAURANT",
        payload: newObject
    }
}

4. Read and Update State in Relative Components

Since I used react hooks in this project, I imported useSelector hook to connect to the store, and imported useDispatch and useEffect hooks to read and update the state in the components.

Feel free to check my frontend repo on GitHub.

Further Thoughts

For further development, I want to add the user authentication system to this project. The challenge is how to implement the jwt auth in both Redux and Rails. I will start researching and coding this topic from this article.

Tasty Meals App - a SPA with a Ruby API backend and JS frontend

newAlicorn — Mon, 01 Nov 2021 15:51:28 +0000

My Tasty Meals App is a SPA application built with a Ruby API backend and JavaScript frontend. Besides reading meal recipes from around the world, this app allows users to create, update or delete their recipes. Users can also search a meal by name and filter meals by category.

1. The Backend
The app contains a Rails API backend that follows RESTful convention. When I created the backend folder in the terminal, I used api flag to leave out the unnecessary features. Below is the command to create the API backend for the application:

rails new tasty-meals-app-backend --api

I have two models for this project, a category model and a meal model. The relationship between the two models is:
category: has_many :meals
meal: belongs_to :category

There are some new takeaways I've gained from this project when creating the backend:

Adding model relationship when using resource generator
Below are the command lines I used to generate all the resources.
rails g resource Category name
rails g resource Meal name thumb ingredients instruction category:belongs_to

We can omit the data type if it's a string. Also, we can specify the model relationship by adding belongs_to or references.

Since I already included --api flag, when I used the resource generator it would skip generating views and helpers for us. Also it will have the controllers inherit from ActionController::API instead of ActionController::Base.

Using Serializer to format data
There are mainly three ways to translate our Ruby objects into JSON format when our backend communicates with the frontend. We can directly include the format in the render method in the controller. We can also include the Serializer in the model class. In this project, I implemented the data translation by adding the active_model_serializers gem. Here is how:

In the gemfile, add gem 'active_model_serializers', '~> 0.10.2' and run bundle install.

After running rails g serializer category and rails g serializer meal in the terminal, set up the attributes in the files:

Upon setting things up as above, when we invoke the #index action in the Category controller, Rails will recognize automatically the serializer we include, instead of calling Category.all, we are actually calling the serialized data of categories using the attribute method we specified.

CORS
Since browsers do not allow unwanted HTTP requests from being sent to a server, they would restrict requests from a different origin. That's why we need enable CORS (Cross Origin Resource Sharing) to allow our server to specify from what origins it will permit.

2. The Frontend
On the frontend side, this app contains a single HTML page, styling with Bootstrap along with plain CSS. The app also uses Vanilla JavaScript codes to implement all the user interactions.

Using Classes
I created four classes for my project: the CategoryApi class and the MealApi class are responsible for handling all fetch requests for the categories and meals; the Meal class and the Category class enable to create an category or an meal object that encapsulates both data and behaviors.

Here is how I built out the Meal class to create an meal object and attach it to the DOM.

First I had the constructor prototypal method that was triggered every time when I invoked the new keyword to create a new meal object. The meal backend object was passed into the constructor as the argument of the constructor. Here I used the destructuring method (cleaner and more easily to read) to assign the values. Besides the properties of each meal, I also set up the HTML element that would contain this meal object, and attached event listeners particular to each meal object. Then, I created static all = [] to save all the meal objects. Every newly created meal object would be pushed into this array.

Static methods VS Instance methods
Most of the time, if I was dealing with a specific meal object, it’s gonna be a instance method. For example, below are two instance methods for rendering an single meal object and attaching it to the DOM.

When dealing with the collection of meal objects, I defined the static method as below.

3. Communication Between Backend and Frontend
All the interactions between the users and the server are handled asynchronously on my app. I included at least 4 AJAX calls that covers full CRUD functionality - create, read, update and delete a meal object. JSON is used as the communication format for my app.

The above code shows how I handles the meal collection sent back from the API using the fetch method. The flow is after I make a fetch request, I take the meal object from the backend and create a frontend meal object immediately. The newly created meal frontend object has a bunch of prototype methods and static methods we can call on and manipulate with, for example, the render method the attachToDom method.

4. Further Thoughts
This project has a lot room for improvement. For example, I still need to work on optimizing the search functionality. I also want to add a user login system to my project.

Intro to JavaScript Variables

newAlicorn — Sun, 05 Sep 2021 22:22:36 +0000

1. Using reserved keywords
In JavaScript, we use one of the three reserved keywords - var, let, const - to declare and assign a variable.

Note:
(1). If the const value is an array or an object, we can modify the properties or the elements.
(2). When to use:
DO NOT use var
Use let for variables where the value may change
Use const whenever possible

2. Without reserved keywords
If we assign a variable without using any of the keywords, the variable will be a global variable. We should avoid defining global variables because they can be accessed and changed EVERYWHERE.

Fun Drink Recipes App

newAlicorn — Fri, 03 Sep 2021 22:48:03 +0000

The Fun Drink Recipe App is built with Ruby on Rails framework. This web application is for drink lovers to find and create ingredients and recipes from cocktails to milkshakes. Users can also comment and rating on any ingredient. Besides CRUD operations, the app also provides name search and filter functionality.

Models and Associations
There are five models in my project - a User model, an Ingredient model, a Drink model, a Measurement model and a Review model. The associations among these models are shown as below (created with Draw.io):

Data Validations
Besides built-in validation methods, I wrote custom validation methods the attributes in my models. For example: the user's input of a drink name will be automatically title cased before the data saved into the database.

# app/models/drink.rb

class Drink < ApplicationRecord
  before_validation :make_title_case, :set_defalut_thumb

  def make_title_case
        self.drink_name = drink_name.titlecase
  end
end

Also, if users do not provide an image URL, they would be given a default one by the system.

# app/models/drink.rb

    def set_defalut_thumb
        if self.drink_thumb == nil || self.drink_thumb == ""
            self.drink_thumb = "https://www.thecocktaildb.com/images/media/drink/mrz9091589574515.jpg"
        end
    end

Scope Methods to Query Data
A scope is an efficient way to filter an application using ActiveRecord queries or SQL. It's also easy to write a WHERE, ORDER, LIMIT, etc. with just one line.

In my project, I defined several scope methods for querying data from the database to implement search and filter functionality. Below is an example of how I implemented name search with a scope method:

# app/models/item.rb

scope :item_search, ->(name) { where("name LIKE ?", "%#{name.titlecase}%") }

On the homepage, the data of latest alcoholic and nonalcoholic drinks are also found with two scope methods:

# app/models/drink.rb

scope :alcohol_drink_filter, -> { Drink.joins(:item). where(item: {alcohol: "yes"}).last(3) }
scope :non_alcohol_drink_filter, -> { Drink.joins(:item). where(item: {alcohol: "no"}).last(3) }

User Authentication
My application provides standard user authentication, including signup, login, logout, and secure passwords. The bcrypt gem I used helps generate salt and hashed passwords, while the has_secure_password method that is provided by ActiveRecord saves the passwords in the database and authenticates users.

There are two main methods we get from the #has_many_password method:
(1) The password= method allows us to create a user with a password attribute rather than a password_digest attribute. The method uses Bcrypt gem to hash and salt the password and then save it in the password_digest column in our table. Note that we don’t have to validate the password manually in our code. #has_secure_password validates the password automatically when being invoked.

(2) The authenticate method takes in the password a user enters when logging in and uses Bcrypt to hash and salt the input and compare it to what is saved in the password_digest column for that user.

Log In with a Third Party
The authentication system of my app also allows users to login from Google. To implement this functionality we need three gems in total -
(1) omniauth - this gem helps us log in with a third party
(2) dotenv-rails - thie gem ensures that the environment variables are correctly loaded into the ENV hash in a secure manner
(3) omniauth-google-oauth2

We also need to add two files -
.env - this file is where you save your ‘GOOGLE_CLIENT_ID’ and ‘GOOGLE_CLIENT_SECRET’ key-value pairs. Don’t forget to save it into the gitignore file!

/config/initializers/omniauth.rb - this files is to tell Rails to use OmniAuth to Authenticate our user.

# /config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
    provider :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET'], :skip_jwt => true
  end

Then set up the route -

# config/routes.rb
get '/auth/:provider/callback', to: 'sessions#omniauth'

Note that we don’t have a get ‘/auth/google’ route set up because Omniauth uses Rack Middleware to intercept the request to ‘/auth/google’.

Once the user clicks 'Login with Google’, it momentarily sends the user to mysite.com/auth/google, which quickly redirects to the Google sign-in page.

After the user agrees to let mysite.com access the user’s information, the user is redirected back to
mysite.com/auth/google/callback, and from there, to the page they initially tried to access.

Nested Resources
Making use of a nested resource with the appropriate RESTful URLs has helped me keep my routes neat and tidy. It is better than dynamic route segments for representing parent/child relationships in the system. Note that do not nest more than one level deep.

In my app, I included nested a new measurement route to the drinks resource - new_drink_ingredient_path(@drink)

And nested review routes to the ingredients resource -

new: new_ingredient_review_path(@ingredient)
index: ingredient_reviews_path(@ingredient)
show: ingredient_review_path(@ingredient, @review)

Below is how I created the nested index review route to the ingredients resource step by step. Note that the URL helper generated for each nested route will accept at least one argument.

Step 1 - set up nested routes in config/routes.rb:

resources :ingredients, only: [:show] do
     resources :reviews
  end

Step 2: make changes in the reviews#index controller action. Add if-else statement to reuse the controller action:

# app/controllers/reviews_controller.rb 

  def index
        if params[:ingredient_id]
          @ingredient = Ingredient.find_by(id: params[:ingredient_id])
            @reviews = @ingredient.reviews
        else
        @reviews = Review.all
        end
    end

If the user comes from nested routes (/ingredients/:id/) and makes a index request (/ingredients/:id/reviews), the ingredient_id key-value pair would be automatically saved in the params hash. Else the user is determined coming from the review index page (/reviews). That’s why we check the user’s http request by params[:ingredient_id].

Step 3 - make changes to links in views:

# app/views/ingredients/show.html.erb

<%= link_to "Add a Review", ingredient_reviews_path(@ingredient) %>

Step 4 - make changes in the index form:

# app/views/reviews/_form.html.erb

<div class="container">

<% if @ingredient %>

<h3>All Reviews on <%= @ingredient.name %></h3>

<%= render partial: "reviews/reviews", locals: {reviews: @ingredient.reviews } %>

<%= link_to "Return #{@ingredient.name}", ingredient_path(@ingredient), class: "btn btn-info btn-sm" %>

<%else%>
<h3>All Reviews</h3>
<%= render partial: "reviews", locals: {reviews: @reviews} %>

<%end%>

</div>

DRY Code
Writing appropriate partials and helpers are crucial to DRY up the code and follow the single responsibility principle. Practicing more is extremely important to acquire these techniques.

Further Thoughts
During the project, one of my biggest challenge is how to build up the most effective and workable model relationships. I would like to do more researches on the model associations such as has_one :throughand has_and_belongs_to_many later on. Furthermore, I want to practice set up the forms with the #form_with method to substitute form_for and form_tag.

My Book Review Sinatra App

newAlicorn — Sat, 03 Jul 2021 00:28:21 +0000

My Sinatra project is an online book review application in which a user can create, view, edit and delete their book review posts after safely signing up or logging in to their accounts. The user can also view others' posts, but he/she may not be allowed to edit or delete other users' posts. Here is my live site: https://sinatra-book-app.herokuapp.com/

Through this project, I have gained a better understanding of the MVC pattern, which I believe is the core concept of building up a Sinatra project.

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. The model contains the logic of the application. The view implements the interface of the application. The controller is a linker between the model and the view.

The best practice is that the model and the view should NEVER communicate. All of the views should get their information from controllers.

Furthermore, I have solidified my knowledge of user authentication. Below are the basic steps to create a user authentication in the Sinatra project:

(1) Add bcrypt to the gemfile, which would provide a hashing algorithm to the user’s password.

(2) Add has_secure_password to the User model.

(3) The user table must have a password_digest column in the database where the salted and hashed password will be stored.

(4) When a user has successfully authenticated themselves, store their user.id in the session as below:
session[:user_id] = user.id

(5) Ensure that the attribute we find users by login is unique.

In short, building up a Sinatra project from scratch on one's own is challenging; but once you've gone through the whole process, researched and corrected every single error, and finally push your site online, you would find how rewarding your hard work is!