DEV Community: Jasmin Song

ChatGPT API

Jasmin Song — Sun, 09 Apr 2023 01:04:41 +0000

What is Artificial Intelligence (AI)?

Artificial intelligence is the simulation of human intelligence processes by machines.

What is OpenAI?

OpenAI is a platform that created a model called ChatGPT to interact in a conversational way. As a user, you can ask appropriate questions on ChatGPT and your questions will be answered immediately.

What is ChatGPT?

ChatGPT is a revolutionary technology that has been developed by OpenAI, based on the GPT-3.5 architecture. This artificial intelligence model has been trained on a large amount of text data, and it is capable of generating human-like responses to a wide range of queries. (AMAZING!)

One of the most advantages of ChatGPT is its ability to generate human-like responses. This is achieved through a process called natural language generation (NLG), which allows the model to generate responses that are both grammatically correct and contextually relevant.

Another advantage of ChatGPT is its ability to learn from its interactions with users. This means that the more it is used, the more accurate and effective it becomes. This is achieved through a process called machine learning, which allows the model to learn from its mistakes and improve its responses over time.

ChatGPT has already been used in a variety of applications, including customer service chatbots, personal assistants, and even in gaming. In each of these applications, ChatGPT has proven to be effective in providing a natural and engaging user experience.

What is an API?

API stands for application programming interface, which is a set of definitions and protocols for building and integrating application software.

So what?

Well... Now you (may) know enough to harness the power of artificial intelligence in your applications! With this knowledge, you can utilize the ChatGPT API to amplify the functionality of your Ruby on Rails app! This can seem challenging, but fear not! In this step-by-step guide, we will go over the process of integrating ChatGPT API in a Rails app.

How do I incorporate the ChatGPT API in my Rails app?

Step 1: Create an account on OpenAI

Go to OpenAI.com and create an account.

Step 2: Get your API key

Click on 'View API Keys' and create a secret key. Paste your API key in a safe place and do not share it with anyone.

Step 3: Install the OpenAI Ruby Gem

Install the OpenAI Ruby Gem by pasting the following to your Gemfile:

gem "faraday"

gem "dry-initializer"

gem 'figaro'

Run bundle install to install the gem.

Step 4: Create an OpenaiPrompt class

In your app/services folder, create a file named openai_prompt.rb and paste the following code:

class OpenaiPrompt
  extend Dry::Initializer

  URL = "https://api.openai.com/v1/completions"

  param :prompt

  option :model, default: proc { "text-davinci-003" }
  option :max_tokens, default: proc { 1000 }
  option :temperature, default: proc { 0 }

  def call
    connection =
      Faraday.new do |faraday|
        faraday.ssl[:verify] = false
        faraday.headers = headers
      end
    response = connection.post(URL, body)
    json = JSON.parse(response.body)
    json["choices"].first["text"]
  end

  private

  def body
    {
      model: model,
      prompt: prompt,
      max_tokens: max_tokens,
      temperature: temperature
    }.to_json
  end

  def headers
    {
      "Content-Type" => "application/json",
      "Authorization" => "Bearer #{ENV['OPENAI_ACCESS_TOKEN']}",
      "OpenAI-Organization" => ENV['OPENAI_ORGANIZATION_ID']
    }
  end
end

Step 5: Create an environment variable

In your config/application.yml file, paste the following code and replace the string with your secret ChatGPT API key that you stored earlier.

OPENAI_ACCESS_TOKEN: 'your secret api key here'

Step 6: Open your Ruby console

In your terminal, type 'rails c' and paste the following:

OpenaiPrompt.new('Why is AI so important?').call

OpenaiPrompt.new('What questions can I ask you?').call

What can I do with this?

As a developer, you can utilize the ChatGPT API to:

Generating codes.
Generating documents.
Writing test cases.
Simplifying codes and explaining complex code snippets.
Generating alternative codes.
Tracking down bugs/applying good code practices.
Information gathering/research.

In conclusion, ChatGPT is a powerful tool that has the potential to revolutionize the way we interact with technology. Its ability to generate human-like responses and learn from its interactions makes it a valuable resource for businesses and individuals alike. As AI technology continues to advance, we can expect ChatGPT to become even more sophisticated and effective in the years to come.

Building the backend for a full stack web app

Jasmin Song — Sun, 26 Feb 2023 01:59:51 +0000

I made my second full stack project using React and Rails. It has been quite the journey. I implemented my knowledge of React, HTML, CSS, JavaScript for the frontend. For the backend, I utilized my new knowledge of Ruby on Rails. Today, we will focus on the backend.

During this journey, I learned about Rails fundamentals, CRUD with Rails, validations, error handling, Active Record associations, serialization, authorization, and authentication.

Whew. That's a lot. In this blog post, I'll walk you through each step I took to create my the backend of my full stack web app, Everything ELA. Everything ELA is a virtual space where students can read, comment, and post about English Language Arts (ELA) topics. It is a website for the students in my virtual school. Students are able to register, login, create posts, read posts, and log out. Comments are able to be created, read, updated, and deleted.

First, I made sure I had Ruby 2.7.4, NodeJS (v16), and npm set up. I cloned a project template repository and created a new remote repository on Github. I ran bundle install, rails db:create, and npm install.

At that point, I was all set up! This is where the fun started.

Models
I created my three models: Student, Comment, and Post and their tables.

create_table "comments", force: :cascade do |t|
    t.string "body"
    t.integer "post_id"
    t.integer "student_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

create_table "posts", force: :cascade do |t|
    t.string "title"
    t.string "image"
    t.string "body"
    t.integer "student_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

create_table "students", force: :cascade do |t|
    t.string "username"
    t.string "password_digest"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

I knew I needed Active Record Associations so I planned that out.

class Comment < ApplicationRecord
  belongs_to :student
  belongs_to :post
end

class Post < ApplicationRecord
  has_many :comments
  has_many :students, through: :comments
end

class Student < ApplicationRecord
  has_many :comments
  has_many :posts, through: :comments
end

Controllers
I then created my controllers using the rails g command. I knew that I wanted full CRUD capabilities for the Comments, create and read capabilities for the Students and Posts, and I needed a SessionsController for login and logout capabilities. I set up these methods in my controllers after creating them.

class CommentsController < ApplicationController

    def index

    end

    def create

    end

    def update

    end

    def destroy

    end

end

class PostsController < ApplicationController
    def index

    end

    def show

    end

    def create

    end

end

class SessionsController < ApplicationController

    def create

    end 

    def destroy

    end

end

class StudentsController < ApplicationController

    def show

    end

    def create

    end

end

Rails Routing
In the config/routes.rb file, I created my routes.

resources :comments
  resources :posts, only: [:index, :show, :create]
  post "/signup", to: "students#create"
  get "/me", to: "students#show"
  post "/login", to: "sessions#create"
  delete "/logout", to: "sessions#destroy"

Validations
Now, onto validations. Validations are special method calls consist of code that performs the job of protecting the database from invalid data.

For example, I want to make sure that all comments are longer than 1 character, posts have a title, and students have unique usernames.

class Comment < ApplicationRecord
    validates :body, length: { minimum: 1 }

    belongs_to :student
    belongs_to :post
end

class Post < ApplicationRecord
    validates :title, presence: true

    has_many :comments
    has_many :students, through: :comments
end

class Student < ApplicationRecord

    has_many :comments, dependent: :destroy
    has_many :posts, through: :comments

    validates :username, presence: true, uniqueness: true
end

Error Handling
I then updated the controller action to check the validity of our model when it is created, and respond appropriately:

class ApplicationController < ActionController::API
    include ActionController::Cookies

    rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity_response
    rescue_from ActiveRecord::RecordNotFound, with: :render_not_found_response

    def render_unprocessable_entity_response(e)
        render json: {errors: e.record.errors.full_messages}, status: :unprocessable_entity
    end

    def render_not_found_response(invalid)
        render json: { errors: invalid }, status: :not_found
    end

end

Serialization
Serialization is the process of translating data structures or objects into a format that can be stored or transmitted and reconstructed later. We need to send a standardized response to the API consumers to make sense of the transferred data. We need Active Model Serializers to structure the data we send back to the client appropriately. (In this case, JSON.)

I created serializers using the rails g command in the terminal. I then added the desired attributes and the necessary Active Record associations.

class CommentSerializer < ActiveModel::Serializer
  attributes :id, :body

  has_one :student
end

class PostSerializer < ActiveModel::Serializer
 attributes :id, :title, :image, :body, :student_id
end

class PostWithCommentsSerializer < ActiveModel::Serializer
  attributes :id, :title, :body

  has_many :comments
end

class StudentSerializer < ActiveModel::Serializer
  attributes :id, :username
end

Authentication
Authentication is how our application can confirm that our users are who they say they are. Simply put, we use usernames and passwords to verify our users. (In our case, students.)

class SessionsController < ApplicationController

    skip_before_action :authorize, only: :create

    def create
        student = Student.find_by(username: params[:username])

        if student&.authenticate(params[:password])
            session[:student_id] = student.id
            render json: student, status: :created
        else 
            render json: {errors: ["Invalid username or password"] }, status: :unauthorized
        end 
    end 

    def destroy
        session.delete :student_id
        head :no_content
    end

end

Authorization
Authorization gives certain users permission to access specific resources. To authorize a student for specific actions, we can use the :student_id saved in the session hash. We can use a before_action filter to run some code that will check the :students_id in the session and only authorize students to run those actions if they are logged in.

And that's it! I used Rails fundamentals, CRUD with Rails, validations, error handling, Active Record associations, serialization, authorization, and authentication to build the backend of my web app.

Ruby Object Oriented Programming

Jasmin Song — Wed, 04 Jan 2023 01:06:01 +0000

Ruby is an object oriented programming language. Everything in Ruby is an object. Objects contain data, such as attributes and methods. In other words, objects are the basic building-blocks of Ruby code. In Ruby, we are sending messages to objects.

Object oriented programming structures code so that its functionality can be used throughout the application. It also is beneficial for when programs change and grow. Object oriented programming allows us to organize our code to have classes and create specific instances of those classes.

In this blog post, we will talk about the principles of object oriented programming. Hopefully you leave with a better idea of why it is helpful, and how it relates to the real world!

Classes

Classes are a way we construct objects in object oriented programming. We are encapsulating what something is. For example, a cat class would look like this:

Here, we are building the Cat class. The keyword end declares that the block is over. We can create a Cat now. Now we can add lines 5 through 7 and when we puts Udon, we see an object of a new cat. We also see a memory address of where the object exists.

Instances

If we make another cat, we get a unique address for the new object. We are making specific instances of a cat.

The class is a blueprint and the Udon and Minari objects are specific instances of our Cat class. However, our Cats class should not be blank. A class is like a blueprint that defines how to build an object. Our cat class should have specific methods, or functions, to describe what the cats do. So let's add some methods!

Initialize

If we want instances of our class to be created with data, we need to define our initialize method. This ensures that whenever .new is used, #initialize is called.

If we want to define the initial property of the cat, we need to do that in a constructor of a class. In Ruby, the constructor is a function called initialize.

Instance Methods

Instance methods are responsible for doing something for each cat instance.

Here, we are stating that each cat has four legs, two ears, and has a tail. If we want to access these properties, we are unable to because by default, these instance properties are private.

Getters and Setters

Getter and setter methods enable us to set attributes to our objects and get the value of those attributes.

In order to get and set the values in our initialize method, we need to use getter and setter methods.

The setter method is defined with an equal sign and followed by the parameter. The equal sign is part of the method's name. The getter belongs to every instance of our Cat class.

Now that we have set the setter and getter methods, when we puts Udon.legs and Minari.legs, we get the value of legs. We are also able to set the cats' legs, by saying Udon now has 3 legs.

Local Variables

Our initialize method can take in arguments. If it has a name property, we can say @name=name. without the @ symbol, it is a local variable. With the @ symbol, it is available for each cat.

So now if we want to add a name for each cat, we add an instance property. The instance of Udon has a different instance than Minari. So each cat has its own name.

Now if we want it to have a variable that is available to both cats, then we create a class variable using two @ signs. @@

Here, we will add a class variable @@total_cats and make it equal to zero. Then in our initialize method, we will add @@total_cats += 1. We will also need a class method, a method that belongs to cats. Here, I called it Cat.total on lines 13 through 15.

Now we see the total cats as two.

Cat.new and Cat.total are class methods because we are calling it on the Cat class. As mentioned before, in Ruby, the class in itself is an object.

Object oriented programming uses objects that contain data, attributes, and functions (or methods). Objects are the building blocks of Ruby since everything in Ruby is an object. Object oriented programming allows programmers to form models of real world problems/concepts.

Controlled Forms

Jasmin Song — Sat, 08 Oct 2022 17:38:29 +0000

A controlled form is a form that derives its input values from state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.

For controlled inputs you will need a corresponding state and then a class method to update that state with changes. Form input values can be set to state values and then updated via React events.

To access the fields in the event handler, you can use the event.target.name and event.target.value syntax.

To update the state, you can use square brackets [bracket notation] around the property name.

In React:

the value of a textarea is placed in a value attribute.
the selected value is defined with a value attribute on the select tag:

The 3 Pillars of Web Programming

Jasmin Song — Thu, 02 Jun 2022 13:38:50 +0000

The three essential pillars of Web Programming are:

1. Recognizing Events

Actions that make JavaScript do work.

1. Manipulating the DOM

The update Javascript was told to do.

1. Communicating with the Sever

JSON

What is the DOM?

When HTML document gets loaded into the browser, the browser creates the DOM: Document Object Model. DOM allows JavaScript to interact with the HTML document. When we make changes to the DOM, the DOM will make changes to the document, or our webpage.

The DOM is a "middle layer" that presents the HTML, CSS and JavaScript loaded by the browser when we visit a page. We normally interact with it through the document object.

All items in the DOM are defined as nodes. The document itself is a document node, which is the root of all other nodes.

The DOM consists of a tree structure of nested nodes, which is often referred to as the DOM tree. The nodes in the DOM are referred to as parents, children, and siblings, depending on their relation to other nodes.

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
DOM programming is using JavaScript to:

Ask the DOM to find or select an HTML element or elements in the rendered page
Remove the selected element(s) and/or insert new element(s)
Adjust a property of the selected element(s)

There are 2 ways you can add elements to the page:

append() is the method we use to add elements to the body.

With append(), you can append strings and multiple things.

appendChild() is another way.

With appendChild(), you can only append one thing at a time.

How do you make an element?
document.createElement('') and pass the element you want to create.

You must append the elements!
body.append(div)

Select an Element With JavaScript
In the Console type:
document.querySelector('div');
It will return something like this:

When we run document.querySelector('div');, it returns the DOM node, which is also a JavaScript object. This means that it can now have methods called on it! This is called method chaining. Let's use method chaining to remove our node from the DOM.

We can store the node references in the variables like this:
const div = document.querySelector('div');

Delete an Element with JavaScript
If we type:
document.querySelector('div').remove();
We can delete the div.

An event in JavaScript is an action the user has taken. When the user hovers their mouse over an element, or clicks on an element, or presses a specific key on the keyboard, these are all types of events. In this particular case, we want our button to listen and be ready to perform an action when the user clicks on it. We can do this by adding an event listener to our button.

HTTP Overview
Communication between different clients and different servers is only possible because the way browsers and servers talk is controlled by a contract, or protocol. Your server will receive requests from the browser that follow HTTP. It then responds with an HTTP response that all browsers are able to parse.

HTTP is the "language" browsers speak. Every time you load a web page, you are making an HTTP request to the site's server, and the server sends back an HTTP response. When you use fetch in JavaScript, you are also making an HTTP request.

HTTP Verbs
When making a web request, in addition to the path, you also need to specify the action you would like the server to perform. We do this using HTTP Verbs (Links to an external site.), also referred to as request methods.

Using the Fetch API
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));

Here we are fetching a JSON file across the network and printing it to the console. The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and does not directly return the JSON response body but instead returns a promise that resolves with a Response object.

The Response object does not directly contain the actual JSON response body but is a representation of the entire HTTP response. So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.

Scope

Jasmin Song — Mon, 23 May 2022 14:05:49 +0000

Scope is what we can access and where we can access it. It is the concept of where something is available.

Through the scope chain, a function has access to all variables and functions declared in its outer scope.

3 levels of scope

Global

Accessible in every scope
Outermost scope

Functional

Accessible within a function
If you have 2 functions, they have their own unique scopes. You can't access the same items from each other's boxes.
Specific to a single function
Can't be accessed by anything in outer scopes
Every function creates its own scope, and any variables or functions you declare inside of the function will not be available outside of it.

Block

Accessible within a block
Specific blocks
Can't be accessed by anything in outer scopes
Variables declared with var are not block scoped. Variables declared with const and let are block scoped.

Lexical Scope

Can access variables in outer scope
Can't access variable in nested scope

Cannot access variables in parent scope.

Functions

Jasmin Song — Mon, 23 May 2022 13:56:19 +0000

Functions allow us to wrap and reuse parts of our code. Allows us to control the flow of execution. We get to control when, where, and why our code runs.

A function is an object that contains a sequence of JavaScript statements. We can execute or call it multiple times.

call, invoke, or execute functions means to run the pieces that make it.

using function declaration using the function keyword:

Need 2 main pieces: () and {}
can invoke function before and after it's been defined.

using a variable with function expression:

can only be called after the function declaration.
return ends our function
not hoisted

if we don't specify the return value, end up getting undefined. if we do specify the return value, we get that value.

() is the invocation operator. It invokes the function.

the function call can actually come before the function declaration in the code file, due to hoisting. But it needs to exist somewhere; if you try to call a function that hasn't been declared somewhere in the code, you'll get an error.

Hoisting

JavaScript's ability to call functions before they appear in the code is called hoisting. For hoisting to work, the function must be defined using a function declaration.

Arrow Functions

Created with an arrow and using an assignment operator
cannot be hoisted

when there are no braces, arrow functions have an implicit return, i.e., they automatically return the result of the last expression! This is the only situation in which a JavaScript function doesn't require explicit return with the return keyword.

Callback Functions

when functions are passed as an argument to a function functions are objects
is not invoked immediately

Anonymous Functions

functions functions without an identifier or a name

Variables

Jasmin Song — Fri, 20 May 2022 14:55:13 +0000

A variable is a container where we can store a value.

let

can be reassigned but not redeclared

can declare let with a value when declaring the variable, or declare it and not give it a value.
with let arrays: you can update it at any point. let is the var keyword but block-scoped.

const

cannot be reassigned or redeclared

cannot declare const with a value and not give it a value. can't say const chicken; because const is supposed to say constant, so you need to know ahead of time what the value is going to be.
const array: the values can be updating the values/pushing onto the array. You're still changing the array. you're not updating the reference. pointing to the same array/object in memory. can't change the reference. We are not able to reassign the array itself but we can reassign any of its elements.

var

declares variables
declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

can declare a var with a value when you declare the variable, or declare it and not give it a value.
you can redeclare the variable at any time
var x = 10; var x = "hi";
You're not just updating/reassigning x, you are completely redeclaring it. can't do that with let or const.

hoisting

a variable can be used before it has been declared
when variables are set to undefined. declared before the rest of the code.
let and const get hoisted. they are not set to undefined like var.
var is scoped to the current execution context. scoped to their enclosing function if they are in a function. if not, they are part of the global scope.
let and const are block scoped. var is not block scoped. it is scoped to the current execution context.
when you declare var in global scope, it is added to the window object. const and let are not in the window object.