DEV Community: Nikhil Devarasetty

Understanding Rails Seeds

Nikhil Devarasetty — Sat, 06 Jan 2024 13:59:27 +0000

What Are Seeds?

In a Ruby on Rails application, seeds are used to populate the database with predefined data. This data could include default user accounts, sample products, or any other records required for the application to function correctly. Seeds are especially useful during the development and testing phases, allowing developers to work with a database that contains meaningful data.

Configuring Seeds:

Configuring seeds involves creating a file named seeds.rb in the Rails application's db directory. This file contains Ruby code that specifies the data to be inserted into the database. The seeds.rb file is structured similarly to a Rails migration file but is focused on data rather than schema changes.

To run the seeds and populate the database, use the following command:

rails db:seed

How to Use Seeds:

Create the seeds.rb File:

Start by creating the seeds.rb file in the db directory of your Rails application.

Write Seed Data:

Inside seeds.rb, use Ruby code to define the data you want to insert. This may include creating instances of ActiveRecord models and populating their attributes.

# db/seeds.rb

User.create(username: 'admin', email: 'admin@example.com', password: 'password')
Product.create(name: 'Sample Product', price: 19.99, description: 'A description of the product.')

Run the Seeds:

Execute the following command to populate the database with the defined seed data:

rails db:seed

Other commands to work around:

Generate Seeds File: To create a new seeds file (users_seeds.rb), you can use the following command:

rails generate seed users_seed.rb

This command will generate an empty db/users_seed.rb file if it doesn't exist.

Run Seeds: To execute the seeds and populate the database with the defined data in the seeds.rb file, use:

rails db:seed

This command will run the code inside the seeds.rb file, creating records in the database.

Reset and Seed Database: If you want to reset the database (drop, create, and migrate) and then run the seeds, you can use the following command:

rails db:reset

This command is helpful during development when you need to recreate the database with the latest schema and seed data.

Specific Seed File: If you have multiple seed files or a custom seed file, you can specify the file to run:

rails db:seed:custom_seeds

Replace custom_seeds with the actual filename you want to execute.

Loading Seed Data in Development Environment: During development, you might want to run seeds frequently. You can use the following command to load the seeds:

rails db:seed RAILS_ENV=development

Running Custom Seed Tasks: You can create custom seed tasks in your lib/tasks directory and run them using:

rails db:seed:custom_task

Example lib/tasks/custom_seed.rake:

namespace :db do
  namespace :seed do
    desc 'Custom seed task'
    task custom_task: :environment do
      # Your custom seed logic
    end
  end
end

Pros of Using Seeds:

Data Consistency: Seeds provide a consistent set of initial data for all developers working on the project, ensuring a standardized environment.
Faster Development: Seeds help developers set up a working database quickly, saving time during the development process.
Testing: Seeds are invaluable for testing, allowing developers to create predictable scenarios and reproduce specific conditions for testing purposes.

Cons of Using Seeds:

Static Data: Seeds provide static data that might not evolve with changes in the application. Developers need to update seeds manually when the data model changes.
Security Concerns: Care must be taken not to include sensitive information in seed data, especially if the seeds file is committed to version control.
Maintenance Overhead: As the application evolves, maintaining and updating seed data may become a task, especially in larger projects.

Creating Chat Bot in Slack

Nikhil Devarasetty — Sun, 10 Jul 2022 11:06:41 +0000

What is bot? (from slack)

A bot is the same as a regular app: it can access the same range of APIs and do all of the magical things that a Slack App can do.

But when you build a bot for your Slack App, you're giving that app a face, a name, and a personality, and encouraging users to talk to it.

Your bot can send DMs, it can be mentioned by users, it can post messages or upload files, and it can be invited to channels - or kicked out.

Creating a bot:

Create a slack app choosing the workspace.
Then navigate to the created app and add bot permissions under OAuth & permissions, it will automatically create a bot user.
Hurray! your slack bot is created.

Users need to install the app to use it's bot features

Installing app:

App can be distributed publicly for users to install it from slack app directory.
App can also be installed through slack OAuth flow

Bot features:

1. Webhooks:

We can create webhook urls for a channel or user of the team and can use the webook url to post messages to selected target.

2. Slash commands:

With slash commands we provide utilities to interact with bot.
Ex: /get-users-list, and provided redirect url which handles the commands request and sends payload.

3. Events:

We can subscribe to the events provided by slack and upon triggering we can handle it with provided redirect url.
Ex: team-join, user_change...

To enable user interactivity with bot enable Allow users to send Slash commands and messages from the messages tab under App Home

With slack block kit we can create interactive forms, surveys, send formatted messages, and more. Explore slack block-kit

Getting started with SSR in Reactjs

Nikhil Devarasetty — Mon, 23 May 2022 05:58:15 +0000

Introduction:

Server side rendering or SSR is a technique to build fully rendered HTML page in the server side, which is then travels through network and gets rendered in the client side browser.
Conventionally server submits an empty index.html page which have build script in a script tag to the client’s initial request and then javascript start’s its part where it builds index.html page or renders the components to index.html and for consecutive navigations.

why SSR? 🤔

Loads pages faster which results in better user experience
Ideally on client’s initial request it gets an empty index.html page, then javascript tries to render components to it.
Assume that the initial page consisting of complex components need to rendered with server data as it will be slow and user need to wait the whole time while page is being rendered.
In which SSR comes into scene in providing fully rendered pages with server data(no external api call required as it is taking place in server) which is fast.
Content is rendered before initial page load which is SEO friendly
Old ways of SEO includes adding meta information title and description to the page so that they are indexed according to the content in title and description.
Search engines no longer gives any points to it.
So when a fully rendered page is being served, the search engine crawls over the content and index the web pages in a better way.
By this content in page contributes to the better index.

Rendering server-side may be ideal for initial static site generation, but frequent server requests and full page reloads for all consecutive navigations can result in overall slower page rendering in more complex applications.

Steps to initiate SSR in React app:

Creating new project with create-react-app skipped here

Step 1 - Modify index.js file in src directory:

ReactDOM.render is changed to ReactDOM.hydrate in index.js file, hydrate method is same as render but it indicates ReactDOM to hydrate the server-side rendered content

Step 2 - Create express server and render app component on initial request:

App component is imported and converted static html string and this static content with rendered React components which is attached to div with id root returned as string in response.
This fully rendered page is hydrated to DOM on client side.

Step 3 - webpack configuration:
Create a file with name webpack.server.js

Use of target: ‘node’ and externals: [nodeExternals()] avoid including node-module files in bundle as server directly access them.

Conclusion:

SSR can be implemented using Nextjs framework which is build on top of React library which provides different SSR techniques like SSG, SSR and ISR.

Each technique generates a fully rendered html page with required data(no external api calls needed) and send it to client on initial request.

Server side rendering or SSR:
One need to navigate to the page to get server rendered page and whenever the page is visited again, page is build in server again and sent it to client.

Static site generation or SSG:
One need to navigate to the page to get server rendered page and on consecutive visits to the page will not be re-rendered in server.

Incremental static regeneration or ISR:
One need to navigate to the page to get server rendered page and the page will be re-rendered in the server, will be sent to client on defined time interval.

Handful Hooks

Nikhil Devarasetty — Sun, 22 May 2022 17:32:38 +0000

Hooks are backward-compatible, which are introduced in React16.8, it makes use of state and other react features without writing class components.

It does not introduce new concepts, helps in writing simplified and more understandable code implementing existing concepts.

Conventionally functional components are used for representational purposes, referred to as dumb or stateless components, but with the introduction of Hooks, we can implement all class-based components concepts with functional components.

🤔 Ever faced a situation where for earlier requirements you have implemented functional component, and now you have to implement state in component, provided you would have done it by converting it into the class component.

😇 Now simply just use Hooks to implement state in functional components.

There are Handful of Hooks which are handy and can improve the way of coding, which I will introduce in a bit.

Why Hooks?

Complex components with side effects: components are easy to understand and build at the start but growing stateful logic and side-effects including fetching data makes it harder to understand and maintain, while hooks make it easy by decoupling the logic.
Classes confuses a lot: while implementing class-based components you should have known how to use this, scope, different life-cycle methods, and their use-cases. Every time you refer to a function in class component you should have bound it with this(class context) to the function in the constructor or call it with this context.
Clean and neet code: with Hooks, all class-based life-cycle and state management can be implemented in functional components and easy to de- couple the logic with Hooks. We can implement the same logic with functional components in fewer lines.

Hooks

Basic hooks which need to have look at when getting started with are useState and useEffect

With useState we can implement state management in functional components, syntax is likely

useState returns two arguments, state variable, and state setter.
With useState, we can use any number of state variables.

Recommended way of setting state is:
setState(preState => {
   //use preState to create new state
   return newState
})

useEffect is another common Hook that can be used to implement class-based life-cycle methods like ComponentDidMount and ComponentDidUpdate. It also has a clean-up callback which is executed before every respective useEffect call.

useEffect accept args array which is trigger useEffect on change of args in array, if given empty array only triggers at mounting

useRef:

useRef can be used to refer Dom elements and can be used to create static content.

const ref = useRef(intialValue) and refered by ref.current

useMemo and useCallback:

useMemo and useCallback are memoization purpose hooks, which also accept args array, trigger upon any args in array changes. Mainly used for computing expensive calculations and avoid doing it on re-renders.

useContext and useReducer:

context Api can be implemented by using useContext, useContext will helps in consuming context value coming from the parent(context is created using React.createContext).

useReducer will help in maintaining complex state management, it works in the same fashion as Redux. We define reducers and dispatch actions to perform a required state change.

Good use-case is using useContext and useReducer together, to create gobal or localised state for component tree.

React-router-dom Hooks:

useParams: to extract params from the URL.

useHistory: to use history API in component at any level.

useLocation: provide pathname, match, and location information.

React-Redux Hooks:

react-redux provides hooks that make life easy, implementing redux logic using the hooks provided by react-redux is easy to understand and implement.

useDispatcher: return a dispatcher which dispatches actions to modify state

useSelector: to get a slice or select slice of the store from the global store.

useStore: returns the whole store which contains all store slices.

Conclusion:

These are the hooks I feel come in handy and can be used commonly, although there are few other hooks that can be used on-demand. Explanation of each hook can be huge and can’t be done in one page so do explore the above hooks individually✌️

OAuth with slack

Nikhil Devarasetty — Sun, 22 May 2022 08:21:53 +0000

🤔 What is OAuth? 👇
OAuth is a protocol that lets your app request authorization to private details.

With slack we can implement OAuth for the required scopes, to access the workspace channels, members, conversations, calls, listen to events, etc...

Ohh, 🤔 What are scopes then? 👇
Scopes are used to grant your app permission to perform functionality in Slack like,

Call Web API methods, users.list, channels.read, channels.write, etc...
Receive Events API events like, user joined, channel created, etc...

Then how to do it? 👉 Follow the below steps

Create and Install app to workspace:

Create slack workspace, by going to https://slack.com
After that, create an app, by going to https://api.slack.com/apps, choosing respective workspace.
After creating app, go to the created app and under OAuth & permissions section give the required scopes.
After giving scopes you can able to install app to your workspace or publish it to slack open directory.

Performing OAuth

To perform OAuth we need to generate authorization redirect url, to do so navigate to https://api.slack.com/authentication/sign-in-with-slack

The url will look like,

GET /openid/connect/authorize?
 response_type=code
 &scope=openid%20profile%20email
 &client_id=s6BhdRkqt3
 &state=af0ifjsldkj
 &team=T1234
 &nonce=abcd
 &redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb 
HTTP/1.1
Host: https://slack.com

The redirect_uri in above url, is the request handler for which slack to redirect with temporary access code.
With that temporary access code we need to request for access-token using api slack.com/api/openid.connect.token?code={access_code}&client_id=###&client_secret=###&redirect_uri=###, for more details about api method, headers and parameter look into https://api.slack.com/methods/openid.connect.token
With the access-token received, you can store it securely and use it whenever required.

Hurray! It's done 😇

Conclusion:

I have provided basic walkthrough, please do explore https://api.slack.com/authentication/basics, for detailed explanation.
And explore the Refresh token concept, how to opt for it, refresh the access-token using refresh token.

Preview locally running Rails app in mobile

Nikhil Devarasetty — Sun, 22 May 2022 05:55:59 +0000

I used to make things that were comfortable for the screen resolution I was using as a novice, but as time went on and I started producing substantial stuff, I realised I needed to construct mobile-first features.

Of course, Chrome comes with a responsive view and a mobile view, but why do you need to preview in mobile? 🤔 🤔 🤔

Let say when trying to input something in text fields in mobile, keyboard will pop up, and sticky footer might cover up text fields, which we usually not observe in laptops.

Cases like above require to preview app in mobile before pushing into production.

So to preview in the Rails app in mobile follow the steps:

Make sure your laptop and phone are connected
Start sever in local with rails s -p 3000 -b <IPv4 address of network>
To get IPv4 address of the network connected
- Go to settings > netwrok
- Run ipconfig in command line