DEV Community: Kim Nguyen

Voice to Text Chatbot.

Kim Nguyen — Fri, 23 Jul 2021 00:06:41 +0000

This blog is the second part of a two-part chatbot tutorial series. Check out the first part here.

In this blog, I'm going to walk you through how to implement a voice-to-text and vice versa feature for our chatbot :). The API I'm using to implement this chatbot skill is Web Speech API created by Mozilla Firefox, besides this, there's also Google Cloud Speech-to-Text API but I'm not going to dive too deep into that today! Okay, let's dive into it.

Let's add a microphone icon (you can choose any icon you want) in our chatbot input to notify the user about our newly added feature:

<InputGroup.Append>                          
    <img 
        src='https://img.icons8.com/dusk/64/000000/microphone.png'
        alt='microphone-icon'
        variant='info' 
        type="submit" 
        className="mb-2 voice-chat-btn" 
        onClick={() => handleVoice(recognition)}
    />
</InputGroup.Append>

This is our current ChatBot:

This button will listen to a click event, and you probably spot, there is a function handleVoice() that got executed whenever the user clicks on the microphone. The idea is, when the user clicks on that button, our bot will automatically knows to listen for the human voice and translate it from voice to text. First, let's initialize our speech recognition using Web Speech API:

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
const recognition = new SpeechRecognition();
recognition.lang = 'en-US';

On the official doc, SpeechRecognition definition:

"The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service."

This is the core of our speech-to-text translation. Beside that, there are multiple methods (start(), stop(), abort()) and properties (lang, grammars, continuous, etc) that we can add. For this chatbot, I'm only using start(), onresult() methods, and lang property to set English as the language for my current chatbot. Let's implement our handleVoice() function that will translate our voice-to-text:

const handleVoice = (recognition) => {
    recognition.start()

    recognition.onresult = function (event) {
        const resultIndx = event.resultIndex
        const transcript = event.results[resultIndx][0].transcript
        setUserHistory([transcript, ...userHistory])
        matchReply(transcript)
    }
}

In this function, we will execute:

recognition.start(): starts the speech recognition to listen for audio.
recognition.onresult(): an event handler that sends the translated words or phrase back to our application.
setUserHistory(): save transcript to our state management.
matchReply(): generate a corresponding bot reply for our transcript.

Now, our bot should be able to recognize and understand our speech. But it's not talking back to us yet! Let's add this functionality so that our bot can have a full conversation with us:

const speak = (string) => {
    const u = new SpeechSynthesisUtterance();
    const allVoices = speechSynthesis.getVoices();
    u.voice = allVoices.filter(voice => voice.name === "Alex")[0];
    u.text = string;
    u.lang = "en-US";
    u.volume = 1;
    u.rate = 1;
    u.pitch = 1;
    speechSynthesis.speak(u);
}

And in our matchReply(), let's execute our newly added speak() function:

const matchReply = (userInput) => {
    ...

    setBotHistory([botMsg, ...botHistory])
    speak(botMsg)
}

Two Sum solution.

Kim Nguyen — Fri, 09 Apr 2021 19:11:06 +0000

LeetCode problem #1 (Easy): Two Sum

I recently encountered this problem in my first technical interview and I thought it would be helpful to share my solution with you guys! Below will be my naive solution, with the time complexity of O(N^2) and my second solution with O(N) time complexity utilizing the use of the hash table.

Description:
Given an array of integer nums and an integer target, return indices of the two numbers such that they add up to the target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

Example:

Example 1:
Input	nums = [2,7,11,15], target = 9
Output	[0,1]
Expanation	Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:
Input	nums = [3,2,4], target = 6
Output	[1,2]

Example 3:
Input	nums = [3,3], target = 6
Output	[0,1]

Constraints:

2 <= nums.length <= 103
-109 <= nums[i] <= 109
-109 <= target <= 109
Only one valid answer exists.

Initial Thoughts:

We need to find a pair of numbers that qualify a target Z.
We can visualize it as A + B = Z.
We need to keep track of 2 indices at a time: A and (Z-A) indices and compare the values to the target.
Each input only has 1 possible solution so we don't have to worry about edge cases.

Javascript Naive Solution:

var twoSum = function(nums, target) {
    let result = []

    for(let i = 0; i < nums.length - 1; i++){
        for(let j = i+1; j < nums.length; j++){
            if(nums[i] + nums[j] === target){
                result.push(i)
                result.push(j)
                return result
            }
        }
    }
};

Javascript Hash Table Solution:

var twoSum = function(nums, target) {
    let dict = new Object()
    let z = target
    for(let i = 0; i < nums.length; i++){
        let a = nums[i]
        if(!dict[z-a]){
            dict[z-a] = i
        }
    }

    let result = []
    for(let i = 0; i < nums.length; i++){
        if(dict[nums[i]] && i !== dict[nums[i]]) {
            result.push(i, dict[nums[i]])
            return result
        }
    }
};

Explanation:

First iteration: each time we encounter a value, we would automatically calculate the remaining amount needed in order to reach the target (B and Z-A) and assign it as a key in our dictionary (dict). Its value would be the index of that number itself.
Second iteration: check if that current value already existed in dict, if it existed and i is different from dict[nums[i]], return that pair of (dict[nums[i]], i).

Example:
nums = [2,7,11,15]
target = 9
Our dictionary would be: { '2': 1, '7': 0, '-2': 2, '-6': 3 }
Output: [ 0, 1 ]

Simple Chatbot Application using React.js

Kim Nguyen — Wed, 31 Mar 2021 23:47:40 +0000

"Alexa, play willow by Taylor Swift"
"Siri, what's the weather today?"
...

All of us must have heard these lines at least once if not every day. Artificial Intelligence (AI) has played a big role in making our life easier and beyond that, safer (no more texting while driving!). I have always been curious and intrigued by the logic behind it. In my capstone project at Flatiron School, I built a recipe search called Hipstew | Demo which has a virtual assistant: Stewy. If you're also curious about how I built Stewy (spoiler alert: Stewy talks and understands human voice), please keep reading :).

In this blog, I'll attempt to re-create my chatbot using React.js, but a simpler version, feel free to use this as a template and add more skill for your chatbot later on ;)!

First of all, create our react app using create-react-app package:

npx create-react-app chatbot-example

After that, install react-bootstrap package (optional):

npm install react-bootstrap bootstrap

Import script in your src/index.js or App.js:

import 'bootstrap/dist/css/bootstrap.min.css'

Alright! Let's create our first component ChatBot.js and add an input field:

import React, { useState } from 'react'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'
import '../css/ChatBot.css'

export default function ChatBot(){
    const [userInput, setUserInput] = useState('')

    return (
        <div className='chatbot-card'>
            <div>
                <img 
                    className='bot-cover-photo'
                    src='https://www.userlike.com/api/proxy/resize/do-i-need-a-chatbot/header-chat-box.png?height=720' 
                    alt='chatbot-pic'
                />  
            </div>

            <div className='human-input'>
                <InputGroup className="mb-3">

                    <Form.Control
                        className="mb-2"
                        type="text" 
                        placeholder="Ask me something"
                        value={userInput}
                        onChange={handleChange}
                    />

                </InputGroup>
            </div>

        </div>
    )}
}

We should see a chatbot photo and an input field on DOM like this:

Adding the logic to handle user's input:

  const [userInput, setUserInput] = useState('')
  const [userHistory, setUserHistory] = useState([])
  const [botHistory, setBotHistory] = useState([])
  const handleChange = (e) => setUserInput(e.target.value)

We added userHistory and botHistory state to keep track of user's inputs and bot's replies, in order to display them later on in the conversation.

Here is the most important part, the core of our chatbot:

const matchReply = (userInput) => {
        const trigger = [
            ["hi", "hey", "hello"],
            ["how are you", "how are things", "how you doing"],
            ["what is going on", "what is up"],
            ["happy", "good", "amazing", "fantastic", "cool"],
            ["bad", "bored", "tired", "sad"],
            ["thanks", "thank you"],
            ["bye", "good bye", "goodbye"]
        ];

        const reply = [
            ["Hello", "Hi", "It's nice seeing you!"],
            ["I'm doing good... how are you?", "I feel kind of lonely, how are you?", "I feel happy, how are you?"],
            ["Nothing much", "Exciting things!", "I'm happy to see you!"],
            ["Glad to hear it", "Yayyy!! That's the spirit!"],
            ["There is always a rainbow after the rain!"],
            ["You're welcome", "No problem", "It's my pleasure!"],
            ["Goodbye, it was a nice talk"]
        ];

        const alternative = ["Same", "Go on...", "Try again please?", "I'm listening..."];

        let botMsg = generateReply(trigger, reply, userInput)

        if(!botMsg){
            botMsg = alternative[Math.floor(Math.random()*alternative.length)]
        }

        setBotHistory([botMsg, ...botHistory])

}

This function will help match the user's input with the right bot's response and also save those replies to chat history. You will notice there's a helper function: generateReply within this function. Let's implement it:

const generateReply = (trigger, reply, text) => {
        let item;
        let items;
        for (let x = 0; x < trigger.length; x++) {
            for (let y = 0; y < reply.length; y++) {
                if (text.includes(trigger[x][y])) {
                    items = reply[x];
                    item = items[Math.floor(Math.random() * items.length)];
                }
            }
        }
        return item;
}

This function takes in 3 arguments:

trigger: a trigger array from matchReply function, whenever user input a sentence with one of the trigger keywords, a corresponding reply will be added.
reply: a reply array corresponding to trigger.
text: user's input.

Whenever a user enters a phrase contains a trigger keyword, our chatbot will respond with a corresponding reply.

I did a little CSS for this chatbot, feel free to take a look:

.bot-cover-photo {
    width: 100vw;
}

.chatbot-card {
  background-color: rgba(140, 192, 247, 0.735);
}

.human-input {
    padding-left: 30vw;
    padding-right: 30vw;
    margin: 10px;
}

h3 {
    margin-bottom: 0 !important;
}

#user-input {
    background-color: rgba(132, 136, 249, 0.646);
}

#bot-reply {
    background-color: rgba(231, 228, 228, 0.687);
}

#user-input, #bot-reply {
    padding: 0.4rem;
    padding-left: 1rem;
    border-radius: 10px;
    text-align: left;
}

.conversation-box {
    padding-left: 20vw;
    padding-right: 20vw;
}

.chatbox {
    overflow-y: scroll;
    overflow-y: auto;
    height: 230px;
}

This would be our end result, creating a simple conversation with a chatbot:

Next week, I'll release another blog post about how to add more skills for our little Chatbot :). Thank you so much for making it this far! I'll see y'all later.

Sending data from React to Rails and vice versa.

Kim Nguyen — Mon, 25 Jan 2021 05:57:29 +0000

During my final project at Flatiron School, I decided to build a foody app called Hipstew, which allows user to search for recipes based on given ingredients and they can create a list of their favorite recipes as well! And I've been wanting to work with a larger database for a while because I feel like I did not have a chance to dive deep into handling data in general. That is why, in my final project, I decided to cooperate Spoonaclar API into my app. Honestly, I was freaking out at the beginning of building this app: I had no idea how to send user's input from React to Rails nor how do I use that input to perform a GET request to my chosen API for data and send it back to React. But after some research and lectures, I finally figured it out and today, I made this tutorial to walk you through it step by step. A general flow of how React communicates with Rails:

Okay, let's dive into it:

Create React app:

There are several ways to generate a React app, there is no correct way to do it, but I usually use a project generator tool called create-react-app, developed by Facebook. To install:

npm install -g create-react-app

Generate our app:

create-react-app hipstew_frontend

In my frontend, I created a components folder to store all my future components. For this example, I created a SearchBar.js class component which has a controlled form to keep track of user's input and a submit function inherited from App.js:

import React from 'react'

import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import InputGroup from 'react-bootstrap/InputGroup'

export default class SearchBar extends React.Component {

    state={
        ingredient: ''
    }

    handleChange = (e) => this.setState({ ingredient: e.target.value})

    render(){
        return(
            <div>
                <InputGroup className="mb-3 search-bar">
                    <Form.Control
                        className="mb-2"
                        id="inlineFormInputName2"
                        placeholder="Ingredient name (beef, tomato, etc)"
                        value={this.state.ingredient}
                        onChange={this.handleChange}
                    />
                </InputGroup>

                <InputGroup.Append>                          
                    <Button 
                        variant='primary' 
                        type="submit" 
                        className="mb-2" 
                        onClick={(e) => {
                            this.props.handleSubmit(e, this.state.ingredient)
                            this.setState({ ingredient: '' })
                        }}>
                        Submit
                    </Button>
                </InputGroup.Append>
            </div>
        )
    }
}

Note: I used some React Bootstrap here but it's optional! You can always user <form> and <button> instead of <InputGroup> and <Button>

App.js component:

import React from 'react'
import SearchBar from './SearchBar'
import RecipeList from './RecipeList'

export default class App extends React.Component {

    state={
        ingredients: '',
        recipe: ''
    }

    handleSubmit = (e, ingredients) => { 
        e.preventDefault()
        this.setState({ ingredients, recipe: 'result' })
    }

    render(){
        return(
            <div>
                <SearchBar  handleSubmit={this.handleSubmit} />

                { this.state.recipe === 'result' ? <RecipeList ingredients={this.state.ingredients} /> : null }
            </div>
        )
    }
}

In my App component, I used a recipe state to conditionally render RecipeList component. This component will only be rendered if a user submitted information in search bar.

RecipeList component:

import React from 'react'

export default class RecipeList extends React.Component {

    state={
        recipes: [],
        error: null
    }

    componentDidMount(){

        fetch(`http://localhost:3000/getrecipe?ingredients=${this.props.ingredients}`)
        .then(resp => resp.json())
        .then(data => {
            // handling errors if any.
            if (data.error){
                this.setState({ error: data.error })
            } else {
                this.setState({ recipes: data })
            }
        })

    }

    render(){
        return(
            // render recipe based on data got back from rails.
        )
    }
}

This is where we actually send user's input to our Rails backend! I did a fetch request to a custom endpoint: '/getrecipe', but how do we send out user's input as params? Pretty similar to API endpoints, we can add a '?' + params name=data to send data to backend. For this case: /getrecipe?ingredients=${this.props.ingredients}. I also use componentDidMount lifecycle component to make sure RecipeList receives search's result before it's rendered (read more about lifecycle here). And that's the basic set up for our frontend. Let's also prepare our Rails app!

Create Rails app:

rails new hipstew_backend --api -T --database=postgresql

In this example, I use Postgres instead of SQLite, but this part is optional. If you do want to use Postgres, make sure you downloaded it here and have it running during this progress.

In our backend set up, beside my other models' controllers, I generated an extra controller dedicated to making requests to Spoonacular API, I named it spoonacular_api_controller but you can call it anything you want, make sure to use snake case for it :

rails g controller spoonacular_api_controller --no-test-framework

This would give us a barebone controller, nothing special yet. Let's add a function in our controller that performs a GET request to our API:

require './lib/key.rb'

class SpoonacularApiController < ApplicationController
  BASE_URL='https://api.spoonacular.com'

  def get_recipe
    ingredientString = params["ingredients"].split(', ').map do |ing|
      if ing.include?(' ') 
        ing[' '] = '-' 
      end 
      ing + '%2C'
    end.join()

    url = "#{BASE_URL}/recipes/findByIngredients?apiKey=#{API_KEY}&ingredients=#{ingredientString}&number=54"

    response = HTTP.get(url)
    data = response.parse

    if data.length === 0
      render json: {error: "There is no recipe for #{params["ingredients"]}. Please try another search term."}
    else
      render json: data
    end

  end

end

And add a custom route in our config/routes.rb:

get "/getrecipe", to: 'spoonacular_api#get_recipe'

This indicates whenever we fetch to '/getrecipe' endpoint, 'get_recipe' will be invoked!

At this point, if we put a byebug inside get_recipe and type params["ingredients"], we should get back our user's input from React app! I added ingredientString to make sure all ingredients are in camel-case.

Additional Note: make sure you store your API key in a separate file and include that file in .gitignore to keep your API key a secret. I stored mine in lib/key.rb!

Here is a my app in action using the example above:

Thank you for reading, feel free to comment below for further discussion. Stay tune for more :)!!

React Bootstrap Modal Form

Kim Nguyen — Tue, 29 Dec 2020 20:59:44 +0000

Introduction

During my Phase 4 at Flatiron School, I encountered React for the first time and was mind-blown by the variety and how functional it is. Similar to Vanilla Javascript with Bootstrap to help with styling, React also has React-Bootstrap, which generates components from scratch as a true React component. React-Bootstrap Modal Forms are pretty commonly used in front-end applications. In this tutorial, I will show you how to:

Install React-Bootstrap.
Import React-Bootstrap Components.
Show/Hide a Modal Form.
Apply basic CSS on a Modal Form.

Now let's get started!

Install React-Bootstrap

There are two ways to install React-Bootstrap, but I'd prefer using the first one:

npm i react-bootstrap bootstrap
# or
yarn add react-bootstrap bootstrap

Import React-Bootstrap Components

First of all, what is a Modal Component? You can think of Modal as a pop-up notification with confirmation/input form/etc.

Now let's import our Modal Component from React-Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'

A Modal has 3 basic sections: Header, Body, Footer. Each section (or sub-component) holds the information we want to show on our DOM.

To declare a specific sub-component of Modals, we can use Modal.<section>:

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Woohoo, you're reading this text in a modal!
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        </Button>
      </Modal.Footer>
    </Modal>
  )
}

Or we can also declare each sub-component by importing them separately from React-Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css'
import Modal from 'react-bootstrap/Modal'
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/ModalHeader";
import ModalFooter from "react-bootstrap/ModalFooter";
import ModalTitle from "react-bootstrap/ModalTitle";

Our ModalForm component will be altered to this:

class ModalForm extends Component {
  return(
    <Modal show={true} onHide={handleClose}>
      <ModalHeader closeButton>
        <ModalTitle>Modal heading</ModalTitle>
      </ModalHeader>
      <ModalBody>
        Woohoo, you're reading this text in a modal!
      </ModalBody>
      <ModalFooter>
        <Button variant="primary" onClick={handleSubmit}>
          Submit 
        </Button>
      </ModalFooter>
    </Modal>
  )
}

So we're done with the basic skeleton of a Modal Component. Time to make it more interactive!

Show/Hide a Modal Form

A modal form is shown/hidden from UI by using show property. Initially, I hard-coded the value to true but in a real react application, we would need to add logic to toggle our show property.

In our App.js:

class App extends React.Component {
 state = {
    isOpen: true
 }
}

Setting the initial state of isOpen to false indicates our ModalForm is not activated yet and true for an activated form.

import ModalForm from './component/ModalForm';
class App extends React.Component {
  state = {
    isOpen: true
  }

  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });
  handleSubmit(name) => //some code

  render(){
    return(
      <div>
        {/* other components */}

        <button onClick={this.openModal}>Display Modal Form</button>

        { this.state.isOpen ? 
          <ModalForm 
            closeModal={this.closeModal} 
            isOpen={this.state.isOpen} 
            handleSubmit={this.handleSubmit}
          /> 
          : 
          null 
        }
      </div>
    )
  }
}

I declared 3 functions: openModal to set isOpen to true when modal form is activated, closeModal to close modal form and also include a ternary to conditionally rendering modal form on App component.

Now let's add our Form sub-components to ModalForm to make it a form inside our modal:

import Form from 'react-bootstrap/Form'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/button'

export default class ModalForm extends Component {

  state={ name: null }

  handleChange = (e) => this.setState({name: e.target.value})

  render(){
    return(
      <Modal 
        show={this.props.isOpen} 
        onHide={this.props.closeModal}
      >
      <Modal.Header closeButton>
        <Modal.Title>Modal Form Title</Modal.Title>
      </Modal.Header>
      <Modal.Body>
          <Form.Group >
              <Form.Label>Name: </Form.Label>
              <Form.Control type="text" onChange={this.handleChange} value={this.state.name} placeholder="name input"/>           
          </Form.Group>
      </Modal.Body>
      <Modal.Footer>
          <Button variant="primary" type="submit" onClick={() => this.props.handleSubmit(this.state.name)}>
              Submit
          </Button>
      </Modal.Footer>
    </Modal>
    )
  }
}

In ModalForm component, I added an initial state of name and set it to null, our form's input value is stored in this state. Our show property is now linked to isOpen state, inherited from App. The new onHide property is necessary if you want to exit modal form by pressing esc key or clicking on non-static backdrop.

For our newly added Form sub-components, I added handleChange and value property to create a controlled form (read more about controlled/uncontrolled form here). In Modal.Footer, I also added a handleSubmit function to handle form's input value and send it back to App.

Apply basic CSS on a Modal Form

Applying basic styling for our modal form:

render(){
  return(
    <>
      <div
      className="d-flex align-items-center justify-content-center"
      style={{ height: "100vh" }}
      >
      </div>

      <Modal 
        show={isOpen} 
        onHide={closeModal}
        backdrop="static"
      >
      <Modal.Header closeButton>
        <Modal.Title>Modal Form Title</Modal.Title>
      </Modal.Header>
      <Modal.Body>
          <Form.Group >
              <Form.Label>Name: </Form.Label>
              <Form.Control type="text" onChange={this.handleChange} value={this.state.name} placeholder="name input"/>           
          </Form.Group>
      </Modal.Body>
      <Modal.Footer>
          <Button variant="primary" type="submit" onClick={() => handleSubmit(this.state.name)}>
              Submit
          </Button>
      </Modal.Footer>
    </Modal>
  </>
  )
}

<> and </> is a shorter syntax to declare fragments in react. I also added backdrop property in our Modal component ad set it to static. This way, our modal form will not be closed on pressing esc key or clicking on non-static backdrop.

Conclusion

React-Bootstrap is a very powerful tool for developer, you are getting the best of both worlds technically. For Modal, besides making a modal form, there can be so many varieties of modals (ex: grid modal, centered modal, optional size, etc).

Thank you for making it this far, I hope this tutorial is helpful and stay tune for more! :)

Helpful Links:

Fruity For Loops Yeah!

Kim Nguyen — Sun, 29 Nov 2020 03:00:43 +0000

Switching my language from Ruby to JavaScript left me in such a confusing stage, especially the difference in syntax. One of my most used iteration methods is the loop, which is available in both ruby and JS. Loops offer a quick and easy way to skim through iterable Objects. There are several statements for loops (for statement, do...while statement, while statement, break statement, etc). Today, I'll discuss for, for...in and for...of statements usage. This blog should give you an overview of how to use each statement correctly and effectively.

1. for Statement:

The most common for loop and easiest to use in my opinion. A for loop executes the same block of code until a specified condition evaluates to false.

Syntax:

for ([initialExpression]; [conditionExpression]; [incrementExpression]){
  //code block to be executed
}

There are three main expressions in a for loop:

initialExpression:
initialExpression initializes a counter variable, typically by using var or let. Variables being declared using let are local to the statement. initialExpression is executed (one time) before the execution of the code block and its result will be discarded.
conditionExpression:
conditionExpression is evaluated to decide if the code block is being executed. If this expression evaluated to be true, the for loop will continue, the code block will be executed. If the result returns false, the for loop terminates.
incrementExpression:
Typically used to increase or adjust the counter variable before another loop is executed. To execute multiple statements, use a block statement {...} to group those statements.

When a for loop is executed, these following steps occur:

Example:

In order to return an array of only even numbers, we can use a for loop:

const num = [1, 5, 7, 8, 9, 10]
let even = []

for(let i = 0; i < num.length; i++) {
    if (num[i] % 2 === 0) {
        even.push(num[i])
    }
}
return even
//[ 8, 10 ]

So what's happening in our for loop?

We initialize i as a counter variable starting from 0.
Condition is being evaluated. In this case, num.length is 6 so as long as i's value is less than 6, our for loop continues.
Our code block is executed since the condition is evaluated to be true.
Counter variable being incremented before the next for loop start, which brings i's value to 1. Then back to step 2 until i's value = 6 and the condition is evaluated to be false. The loop terminates.
Return the even array.

2. For..in Statement:

A handy for loop that is used to loop over enumerables (JSON objects, a bag of Skittles are enumerables). Not recommended to be used with arrays where index order is important.

Syntax:

for(let key in object) {
  //code block to be executed
}

Our object looks like this:

let object = {
    key: value
    ...
}

object.key = value

Crucial parameters:

key : get assigned by properties of the object each time a for loop is executed.
object : a specified object that non-symbol properties will get iterated over.

Example:

Ability to iterate over an object's property and access the property's value:

const profile = {
    first_name: 'Jane',
    last_name: 'Sparkling',
    sex: 'F',
    dob: '05/23/1968'
};

for(let p in profile) {
    console.log(p + ': ' + profile[p])
}

On console:

first_name: Jane
last_name: Sparkling
sex: F
dob: 05/23/1968

What's happening?

We declare p (as properties) of our profile Object. So in this case, p can be first_name/last_name/sex/dob in our loop.
When we console.log our result, p will only return the Object's property, so in order to access the value, we have to call profile[p] to get that property's value.

Iterate through an array where the element's index is not important. for..in loop only returns truthy values:

let arr = []
arr[1] = 3
arr[2] = 4
arr[4] = 5
//empty, 3, 4, empty, 5

for(num in arr){
    console.log(arr[num])
}

Result:

3
4
5

If we used a for loop:

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}

The result will also include falsy values:

undefined
3
4
undefined
5

3. For..of Statement:

for..of will loop through values of an iterable object (JSON array, a line in DMV are iterables). Can be used to handle arrays, DOM collection, etc.

Syntax:

for(let variable of iterable) {
  //code block to be executed
}

Crucial parameters:

variable: On each iteration, a property's value will be assigned to a variable. A variable can be declared by using let, const or var.
iterable: An iterable Object.

Example:

Iterating over an array:

const nums = [21, 17, 18, 22, 30]

for(const num of nums){
    console.log(num)
}
//21, 17, 18, 22, 30

or you can also use let to declare a variable if you need to change its value later:

const nums = [21, 17, 18, 22, 30]

for(let num of nums){
    num *= 2
    console.log(num)
}
//42, 34, 36, 44, 60

Iterating over a DOM Collection to add a tag with image URL fetched from an API:

//json["message"] is an array of image URL
for(const img of json["message"]) {
    let pic = document.createElement('img')
    pic.setAttribute('src', img)
    image.appendChild(pic)
}
// in HTML file:
//<img src="https://images.dog.ceo/breeds/dane-great/n02109047_1672.jpg">

Iterating over a string:

const iterable = 'boo';

for (const value of iterable) {
  console.log(value);
}
//b
//o
//o

4. `for..in` and `for..of` comparison:

Both for..in and for..of iterates over objects, but the main difference is the way it iterates:

Example from for...of - javascript | MDN

const iterable = [3, 5, 7];
iterable.foo = 'hello';
//[3, 5, 7, foo: "hello"]

for (const i in iterable) {
  console.log(i); 
}
// logs 0, 1, 2, foo

The for..in loop iterates over enumerable properties of an object. So the reason it doesn't log 3, 5, 7 or hello because these are not enumerable properties, but in fact, they are values. It logs array indexes, which are enumerable properties with integer names.

const iterable = [3, 5, 7];
iterable.foo = 'hello';
//[3, 5, 7, foo: "hello"]

for (const i of iterable) {
  console.log(i);
}
// logs 3, 5, 7

The for..of loop will iterate over properties and logs its values. Return variables will only be the value and none of the properties.

Bonus:
In order to log all properties' values:

const iterable = [3, 5, 7];
iterable.foo = 'hello';
//[3, 5, 7, foo: "hello"]

for (const i in iterable) {
  console.log(iterable[i]); 
}
// logs 3, 5, 7, hello

Helpful Resources:

for..in
for..of
loops and iterations
A deeper comparison between for..in and for..of here

Yelp Fusion API in a nutshell.

Kim Nguyen — Sun, 08 Nov 2020 23:38:10 +0000

I finished my first project at Flatiron School two weeks ago, which ended our Phase 1. A phase is a three-week time frame of lectures that cover a big chunk of coding-related materials. In our first phase, we covered Ruby, SQL, ActiveRecord, and developing a CLI (command line interface) application.

For the project, me and my partner decided to build an app called SalonFindr assistance app that helps users to find hair salons based on their personal reference such as high-end, budget-friendly, currently open salons, view salon's reviews, sort salons by popularity, etc, based on a specific location. We decided to use Yelp Fusion API for our database.

What is an API?

"An application programming interface (API) is a computing interface which defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc. It can also provide extension mechanisms so that users can extend existing functionality in various ways and to varying degrees." - Wikipedia

In essence, API is a set of functions and procedures that allow SE to develop an application using data and features on other apps.

Yelp Fusion API Usage:

Yelp API is a powerful tool to get the best local content from businesses and users reviews across 32 countries, which is awesome because our app can retrieve data outside of the U.S. It is extremely easy to use and also contains a large amount of data to work with, that is why we chose it for our first project. Here is a list of Yelp Fusion API usages:

Business Search: look for businesses by keyword, category, location, price level, etc.
Phone Search: look for businesses by phone number.
Transaction Search: look for businesses that support food delivery transactions.
Business Details: get overall business information (operation hours, yelp reviews, address, contact info, etc)
Reviews: get up to three reviews from a business.

During the process of figuring out how to use Yelp Fusion API, it was stressful for both me and my partner because we were lost, like very lost. But guess what? We suffered so y'all don't have to! I hope this blog is helpful for newbies like me, cheers <3.

Set up Yelp Fusion API for my first project:

I was initially struggling with finding a way to implement my API into my project. After some researches, I found this link to Yelp's Github sample code, I'll sample some code from this repo below.

1. Obtain you API Key:

In order to access Yelp Fusion API, you have to create your app to obtain a unique API key.

2. Store your API Key :

There are 2 ways to store your unique API Key in order to make your app running without actually exposing it to the public.
Keep in mind that API key should not be shared anywhere since it is the credential for your call to Yelp's API.
So let's dive right into it.

Store API key by using environment variable:

In your terminal:

$ export YELP_API_KEY=”your_api_key_is_a_long_complex_string_sfharf”

And you can check if you API is being stored by enter:

$ env

You should see the last line as the API key you just stored!

Store API key using .gitignore:

Create a ruby file in your config folder, naming is optional but I'll name mine as key.rb. In this file, we can store our API key as:

YELP_API_KEY=”your_api_key_is_a_long_complex_string_sfharf”

Look for your .gitignore file in your directory. In this file, you should add the file that you want to keep as a secret file, meaning specifies intentionally untracked files that Git should ignore. Our .gitignore file should look something like this:

Now when you git push you project, your key.rb file should be hidden, that way, your app can still function without exposing your API key to public!

3. Accessing your API Key:

Through environment variables:

API_HOST = "https://api.yelp.com"
SEARCH_PATH = "/v3/businesses/search"
BUSINESS_PATH = "/v3/businesses/" 
DEFAULT_BUSINESS_ID = "yelp-san-francisco"
DEFAULT_TERM = "dinner"
DEFAULT_LOCATION = "San Francis6co, CA"
SEARCH_LIMIT = 20

API_KEY = ENV["YELP_API_KEY"]

Environment variables are stored in hashes, so you can easily access your API key by using ENV["YELP_API_KEY"].

Through .gitignore file:

require_relative '../config/key.rb'

API_HOST = "https://api.yelp.com"
SEARCH_PATH = "/v3/businesses/search"
BUSINESS_PATH = "/v3/businesses/" 
DEFAULT_BUSINESS_ID = "yelp-san-francisco"
DEFAULT_TERM = "dinner"
DEFAULT_LOCATION = "San Francis6co, CA"
SEARCH_LIMIT = 20

API_KEY = YELP_API_KEY

Make sure to set require_relative to the route to the file containing your API key.

4. Send Requests to Fusion Search endpoint:

# Original Source: https://github.com/Yelp/yelp-fusion/tree/master/fusion/ruby
#Returns a parsed json object of the request
class YelpApiAdapter

    def self.search(term, location)
        url = "#{API_HOST}#{SEARCH_PATH}"
        params = {
        term: term,
        location: location,
        limit: SEARCH_LIMIT
        }

        response = HTTP.auth("Bearer #{API_KEY}").get(url, params: params)
        response.parse
    end

    def self.business(business_id)
        url = "#{API_HOST}#{BUSINESS_PATH}#{business_id}"
        response = HTTP.auth("Bearer #{API_KEY}").get(url)
        response.parse
    end

    def business_reviews(business_id)
        url = "#{API_HOST}#{BUSINESS_PATH}#{business_id}/reviews"
        response = HTTP.auth("Bearer #{API_KEY}").get(url)
        response.parse["reviews"]
    end

end

The sample code uses HTTP to authenticate and parse the code. So you will need to add HTTP gem in your Gemfile and bundle install or run in your terminal:

$ gem install http

Our data should look something like this:

[1] pry(YelpApiAdapter)> YelpApiAdapter.search("pizza","san jose")
=> {"businesses"=>
  [{"id"=>"QNzqZtNb_I1mcHAviE5zeQ",
    "alias"=>"bibos-ny-pizza-san-jose",
    "name"=>"Bibo's Ny Pizza",
    "image_url"=>"https://s3-media4.fl.yelpcdn.com/bphoto/J7G2VYAA55MOuqPAd9LLTw/o.jpg",
    "is_closed"=>false,
    "url"=>"https://www.yelp.com/biz/bibos-ny-pizza-san-jose?adjust_creative=NUPSBDMz-cRd0wAMM-m6mw&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=NUPSBDMz-cRd0wAMM-m6mw",
    "review_count"=>1069,
    "categories"=>[{"alias"=>"pizza", "title"=>"Pizza"}],
    "rating"=>4.5,
    "coordinates"=>{"latitude"=>37.306477955952, "longitude"=>-121.89160958914},
    "transactions"=>["pickup"],
    "price"=>"$",
    "location"=>
     {"address1"=>"1431 Bird Ave",
:...skipping...

...And that is it. You've successfully set up your Yelp Fusion API! Thank you for reading my blog. See ya later <3.

Conditional statement usage.

Kim Nguyen — Sun, 18 Oct 2020 21:44:38 +0000

An overall look of ways to use if statement to control your program flow as you conduct your code!

Syntax

The if statement essentially checks if your condition is true or not. In Ruby, the syntax begins with an if keyword, followed by a condition, it is optional to include then before the first code being executed if the condition is true.

You can also add extra conditions by using a keyword called else if, written as elsif (without an "e"), followed by a code being executed if it is true. And the else keyword is only being checked when both of the conditions above are false. Our code should look something like this:

Conditions, for example comparing variables' values to each other, can be conducted using "comparison/conditional" operators:
• == : is equal to (or comparison operator).
• != : is not equal to.
• > : is more than.
• >= : is more than or equal to.
• < : is less than.
• <= : is less than or equal to.
• ||: the "or" operator (read as double-pipe).
• &&: the "and" operator.

Now let's try and put these operators in action to make sure we get a thorough look at these new shiny operators we just learned!

Examples

In this example, = symbol is used to assign a value to a specific variable, in this case, the variable is muffin_breed. However, in our if statement, a == symbol is being used instead. Kinda odd if you try to read the code out loud, it's gonna sound like "If Muffin's breed equal to munchkin, then we print out 'Muffin is a cute lil shortie!'". You would probably be thinking "isn't = symbol equal. Then what is ==?"
We used the == operator because we are comparing a variable to a value (not assigning it). In this case, we are looking into Muffin's breed and the result can only be true or false. Because Muffin is truly a munchkin cat (with short lil legs), the output is "Muffin is a cute lil shortie!" because the comparison returns true.

This example looks a little more complex, but do not be discouraged! The code makes more sense when we read it out loud:
"If Muffin's age is greater or equal to 3, the output is 'Muffin is a wise kitty.'. If the primary condition is false, we continue to compare Muffin's age to see if she is 2 years old. If true, then its output would be 'Muffin is 2 years old now!'. If none of the above conditions match Muffin's age, we output 'Muffin is still a baby kitten.' Since she is neither 2 years old or 3 years old and above."
Ahh, our code makes more sense now. So in this example, the output is....
Yes, "Muffin is still a baby kitten."

Common expression

1. && AKA the "and" operator:

True if the condition to the left and right of this operator are both true. Otherwise, return False.

2. || AKA the "or" operator:

True if either the condition to the left or right of this operator is considered true. If both are considered False, return False.

3. == AKA the comparison operator:

Besides the = operator to assign value to a variable. Ruby also has == to compare values and return boolean expression. True if both sides are equal, otherwise, return false.

Note: we can only compare values with the same datatype (e.g: strings to strings, integer to integer, etc).

Next up, let's jump right into ternary operator and see these babies in action!

Ternary Operator

Do you still remember the Muffin's breed example above? What if I say, instead of writing 5 lines of code, we can easily conduct only 1 line with the same outputs? "We enjoy typing long operator" - said no programmer ever. SO RUBY FOR THE WIN! Ruby has another interesting way of shortening basic comparison code called ternary operator!

We write a ternary operator in this syntax:

condition ? true_expression : false_expression

Apply ternary operator syntax to our example above, our code should look something like this:

Yes! We did it. Same condition, same outputs, but so much shorter and easier to track!

Let's break it down step by step.

• Section 1: this is the condition we want to check if it is true or not.
• Section 2: code being executed if the condition is true.
• Section 3: code being executed if the condition is false.

Either of the code will be printed out to the terminal.

Bonus Ternary Example

What if you need to put more than 2 expressions for your code? We can still use Ternary Operator, even though it is not recommended because our code can get messy pretty quick and hard for other programmers to read . But in a challenge, going from 6 lines of code down to 1 line feels like a major win. We can easily shorten our example above, it should look like this:

DEV Community: Kim Nguyen

Voice to Text Chatbot.

Two Sum solution.

Simple Chatbot Application using React.js

Sending data from React to Rails and vice versa.

Create React app:

Create Rails app:

React Bootstrap Modal Form

Introduction

Install React-Bootstrap

Import React-Bootstrap Components

Show/Hide a Modal Form

Apply basic CSS on a Modal Form

Conclusion

Helpful Links:

Fruity For Loops Yeah!

1. for Statement:

2. For..in Statement:

3. For..of Statement:

4. for..in and for..of comparison:

Helpful Resources:

Yelp Fusion API in a nutshell.

What is an API?

Yelp Fusion API Usage:

Set up Yelp Fusion API for my first project:

Conditional statement usage.

Syntax

Examples

Common expression

Ternary Operator

Bonus Ternary Example

4. `for..in` and `for..of` comparison: