Learn Openapi, Rails and React-storybook

In this course, we will build a ToDo API that stores notes using the OpenAPI Specification (Swagger). We will start with a blank API definition using the Swagger Online Editor. The Swagger definition file will be used to create a Node.js API. Along the way, we will discover how to implement additional details required for a fully functional API requests and responses. We will also learn about the powerful capabilities of Swagger to generate server side code and client libraries.

Open API Initiative (OAI) is focused on creating, evolving and promoting a vendor neutral API Description Format based on the Swagger Specification

openapi

Build Node.js APIs with OpenAPI Spec (Swagger)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Learn how to test ActiveRecord named scopes using RSpec.

In this lesson, we will test a `User` model that will have a `by_ci_email` method 
that we will define on the model. We will test this method in our `user_spec.rb` file and pass in a lower case email argument to demonstrate that the `by_ci_email` method is functioning correctly by finding the correct user.

Test ActiveRecord Named Scopes

Learn how to test ActiveRecord validations using RSpec.

In this lesson we'll write a test that expects the `name` attribute to be present on the User model instance. We'll see that at first this test fails because we need to add this validation on the model.

Test ActiveRecord Validations

Learn how to test custom ActiveRecord validations using RSpec.

In this lesson we'll write a test that expects the `email` to be found on the `invitations` table. We'll see that at first this test fails because we need to add the custom validation on the user model. Once we implement the validation and create the `InvitedValidator`, the test will pass.

Test Custom ActiveRecord Validations

If you make a mistake when naming your database column, and have data that you want to keep unchanged. You can use the change method with the rename_column definition in your migrations files to update a single column name in your database.

Rename A Database Column with Ruby on Rails Active Record Migrations

If you want to give the users the ability to follow or become friends with each other. Rails lets you create a join table in your database and have it reference the user database table. 

You can use Active Record to associate the new table with User table by using the `class_name` method

Create Active Record Self-Referential Relationships In Ruby on Rails

When you create a User model with Devise using the command `rails generate devise User`. Devise will create  default columns in the database for your User model. To add your own columns for your users you can create a new Rails migration and add any columns you want for your users.

Add Custom Fields to a Devise User Model with a Ruby on Rails Migration

[Storybook](https://storybook.js.org/) is a framework that allows you to develop components in isolation. It is ideal for a variety of use cases, most commonly when you're building some shared component toolkit. As such, Nx comes with a dedicated package `@nrwl/storybook` that adds a series of useful code generators to add storybook to an existing React library, but also to automatically generate stories and more.

Use Storybook to Develop React Components in Nx

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

[Nx](https://nx.dev) combines a lot of the best tools on the market, integrates them, and provides tooling to provide the best possible developer experience. One such pair is [Cypress](https://www.cypress.io/) and [Storybook](https://storybook.js.org/). Storybook allows developing components in isolation, which is also a great basis for testing components, which is where Cypress shines.
In this lesson, we're exploring some of the `@nrwl/storybook` code generation utilities that allow you to not only configure Storybook for a React application but automatically also set up a Cypress test configuration for it along with some spec files generated from the Storybook stories.

Use Cypress and Storybook to test your React Components in Isolation

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

Swagger is a project used to describe restful APIs using the OpenAPI Specification. It allows you to document your API so consumers understand the endpoints, parameters, and responses. In this lesson, I'll show you how to install the swagger command line tool, create a new API project using swagger, and introduce you to the swagger API editor.

Create an API with Swagger

In this lesson, you will learn how to define an HTTP GET endpoint using Swagger with URL parameters to identify the ID of the Todo item being requested.

Define an HTTP GET Endpoint with URL Parameters for a Node.js Server with Swagger

Schema definitions allow you to define the format and types of data sent and received by your API. This allows consumers of your API to be confident in using your API. In this lesson, you will learn how to create a schema definition for the Todo API server. 

Create An API Schema Definition Using Swagger

In this lesson, you will learn how to create an HTTP GET endpoint for a node.js server using Swagger. This endpoint will be used to return all of the Todo items from Elasticsearch to the client.

Define an HTTP GET Endpoint for a Node.js API Server with Swagger

This lesson shows you how to delete a Todo item from Elasticsearch using the Todo ID from the URL parameters according to the specifications defined in your Swagger API docs.

Create a Node.js function for an HTTP DELETE request for a Swagger API

This lesson demonstrates how to access the ID of a Todo item being deleted from the URL parameters when used with an HTTP DELETE method.



Define an HTTP DELETE Endpoint for a Node.js API Server with Swagger

In this lesson, you will learn how to define HTTP POST operations for your Todo API server using Swagger. Creating the endpoint, passing the todo in the request body, and parsing the todo are all demonstrated.

Define an HTTP POST Endpoint for a Node.js Server with Swagger

This lesson will teach you how to create the javascript functions defined by the Swagger specification to return all Todo items to the client when requested with an HTTP GET method.

Create a Node.js function for an HTTP GET request for a Swagger API

In this lesson, you will learn how to define multiple parameters in the API specification to identify the ID of the Todo item being updated in the URL, as well as the contents for the updated Todo item in the body of the request.

Define an HTTP PUT Endpoint for a Node.js API Server with Swagger

APIs created with Swagger have a built-in mock function, allowing you to mock responses from your API prior to writing the backend code to make it functional. In addition to learning how to enable this feature, I will show you how to write your own functions to enhance the mock responses returned when using the Swagger mock feature.

Topics

Instructors

Content Type