DEV Community: Xauvkub Alex Yang

How To Use an API from your Ruby Server

Xauvkub Alex Yang — Mon, 03 Oct 2022 13:05:49 +0000

Step 1
USE RESTCLIENT TO FETCH FROM API
The first thing we want to do is fetch from the API.

def from_api
 resp = RestClient.get("https://exampleapi.com/?api_key=1241241515151")
 render json: resp.body, status: :ok
end

Step 2
HIDE YOUR API KEY
If you need to hide your key you can do so by using a gem called Figaro.

gem "figaro"

Add figaro to to your gemfile, bundle install figaro and install figaro.

$ bundle exec figaro install

This creates a config/application.yml file and adds it to your .gitignore. You can use this to create Environment variables such as your key.

api_key: 1241241515151 (example)

And you can call it like this.

ENV['api_key'] 

> 1241241515151

Now use that key in your fetch request.

def from_api
    resp = RestClient.get("https://exampleapi.com/
?api_key=#{ENV['api_key']}")
    render json: resp.body, status: :ok
end

Creating Active Record Custom Validations

Xauvkub Alex Yang — Mon, 12 Sep 2022 02:57:40 +0000

In order to have an efficient back end server, you need to make sure only valid data is stored into the database. The way we do this in rails is using validations.

Writing our validations is quite simple. Here’s a built in rails validation that checks if the name is present.

class User < ApplicationRecord
  validates :name, presence: true
end

This line of code validates the name checking if the User that instance has a name before entering it into the database. An advantage of using the built in Active Record validations is that it can create errors for you.

irb> u = User.create
=> #<User id: nil, name: nil>
irb> u.errors.objects.first.full_message
=> "Name can't be blank"

irb> u.save
=> false

irb> u.save!
ActiveRecord::RecordInvalid: Validation failed: Name can't be blank

irb> User.create!
ActiveRecord::RecordInvalid: Validation failed: Name can't be blank

There’s many useful pre-definded active record validations and can be found on the Ruby on Rails guides. If you wanted your validation to be something unique and specific you can create your own. To start you'd write validate with a symbol of a method's name.

validate :is_over_eightteen

Then you can write the method returning a custom error message.

def is_over_eightteen
  if age <= 18
    errors.add(:age, "Sorry User is too Young!")
  end
end

How Ruby Macros Can Write Our Code For Us

Xauvkub Alex Yang — Tue, 23 Aug 2022 12:53:00 +0000

During my time at Flatiron Coding Bootcamp we've learned so much material in such short amount of time. More recently we've learned a language called Ruby. Using Ruby I've learned there's many things to make the coding process a lot faster and simpler. One way to do that is to use macros. A macro is like a method or set of instructions that writes your code for you. We use them a lot when using Active Record and they make the whole process a lot faster.

For example, I wrote a class instance getter and setter for a variable called name which took about six lines.

class Person
 def initialize(name)
    @name=name
 end

 def name
    @name
 end

 def name=(new_name)
    @name=new_name
 end
end

But you could use a macro to write this much faster. To write our getter and setter methods we can use attr_writer and att_reader and assign them the symbol of name.

class Person
...
 attr_reader :name
 attr_writer :name
end

That was much simpler! attr_writer created our setter method for us and att_reader created a getter method. But what's even better these two lines can actually be simplified to one line.

attr_accessor :name

Macros are used so that we don't have to repeat writing the same actions over and over making work much simpler. It allows us to automate our tasks so that we don't have to spend more time remembering or writing some line of code. I'd highly recommend to research and use macros and shortcuts available to you to improve your productivity.

Making a Search Bar with React

Xauvkub Alex Yang — Mon, 01 Aug 2022 02:40:00 +0000

When using a computer, you want the computer to do exactly what you want when and how you need it. Finding a the right file or post quickly is essential to boosting productivity. Search engines are extremely useful in finding the data users need in a shorter amount of time. My objective for this post is to explain how I make simple search engines for sites in JavaScript and React.

Grabbing the Data
For this example we’re gonna grab data from a .json file using the fetch function. The data grabbed from the .json is stored in an array that we can use to display to our screen.

/* App.js */
import React, { useState, useEffect } from "react"
import Header from "./Header"
import SearchBar from "./SearchBar"
import DataContainer from "./DataContainer"

function App() {
const [data, setData] = useState([])

useEffect(() => {
 fetch(url)
  .then(resp => resp.json())
  .then(dataArray => setData(dataArray))
},[])

return (
    <>
      <Header />
      <SearchBar />
      <DataContainer data={data}/>
    </>
  )
}

export default App

Create a useState
useState is a react tool that can make your web app very dynamic. The useState variable updates everything that is using that variable anytime it is changed. We can use that to change the data whenever the input field is changed.

/* App.js */
const [searchString, setSearchString] = useState('')

Then we can create a function to change searchString whenever you change the text input.

/* App.js */
const handleSearch = (string) => {
 setSearchString(string)
}

...
  <SearchBar handleSearch={handleSearch} />

/* SearchBar.js */
function SearchBar({handleSearch}) {
  return (
    <div>
        <input
          onChange={handleSearch(e.target.value)}
          type="text"
        />
    </div>
  )
}

export default SearchBar

Every time the input is changed, handleSearch updates our useState to the same value.

We can use data to create a separate array that changes every time you enter a new query. You can do this by using .filter() and use .includes() on the strings to filter them. Since we used a useState, the array will change after we change the input.

/* App.js */
const searchArray = data.filter((item) => { 
 return item.name.toLowerCase().includes(searchString.toLowerCase())
})

Make sure to create the searchArray after the handleSearch or else the data will still be showing the previous input.

/* App.js */
   <DataContainer data={searchArray}/>

Lastly we pass the data to our DataContainer component. Now all our data has been filtered and is ready to be used in DataContainer.

My Coding Journey Begins

Xauvkub Alex Yang — Mon, 11 Jul 2022 05:42:19 +0000

We are just finishing the first phase in our coding bootcamp and I am already feeling the pressure. In high school, I started learning basic JavaScript for the first time and loved solving the problems. When I went to college, I decided on a Computer Science major just because that was something I already had experience in.

As the courses got harder, I started doubting whether I was meant to code or not. I failed my classes and headed back home to wait tables for my parents again. I was just waiting for a sign that something or someone was just meant to be.

Not until recently, I realized I wanted more. My best future wasn’t just going to come to me. I decided I want more responsibility. I want to finish what I start. I want to find purpose. That’s why I’ve taken time from helping the family restaurant to start FlatIron School.

I am really excited to grow as a person and become disciplined though my work. I plan to be a role model for my community and give back to them. I want to develop skills that can help me give and show that it’s possible to achieve your goals. I want to be confident in myself and become the person my family and friends have always seen in me as. I am determined to become a different person in the end.