Javascript Project — Movie App

This project is my Fourth project. I had to build a Single Page Application by using HTML , CSS and Javascript as the frontend. Frontend will communicate with a backend API that build with Ruby and Rails. I decided to make a Movie app , where is user can log in the app and able to left reviews on the movies.

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages.

All interactions between client and server were required to be handled asynchronously (AJAX) and use JSON as the communication format. It was required to be Object Oriented JavaScript to encapsulate related data and behavior. The Rails backend needed to have a resource with a has-many relationship and have at least 3 AJAX calls (at least two of Create, Read, Update, and Delete).Manipulating the DOM and using asynchronous fetch requests were the main focus in our project for this phase. The object model relationship in my movie app has users has many movies and has many reviews, movies has many reviews , reviews belongs to movie and users.

Cors

I uncommented the line gem ‘rack-cors’ to allow cross-origin resource sharing (CORS). CORS is a mechanism that allows restricted resources on a web page to be requested from another domain outside the server’s domain. It provides browsers a way to request remote URLs only when they have permission and allows servers to reject requests from unknown origins.

For this project, the config/initializers/cors.rb is configured to allow requests from all origins and to allow [:get, :post, :patch, :delete] requests to the API.

Inside the allow block, origins '*' means we are allowing requests from all origins and are allowing [:get, :post, :patch, :delete] requests to the API.

Active Record Serializer

I added the gem 'active_model_serializers' to serialize the data and select only the information I want to display. It also provides access to the has_many relationship with a single request.Essentially, we need to convert our data into a format that can be easily transferred across a network as a string and reconstructed later. Remember, our frontend and backend live in different repositories and therefore have to make requests across the interwebs.We can use the serializer gem to specify the shape of our data when making requests

Getting an API key

I used an API to display an information of all movies from themoviedb.org. I have to take few steps to generate API key .I have to create an account in this website then head to settings tab in your account and click to generate an API . I used an HTTP Gem, which is an easy-to-use client library for making requests from ruby. To obtain an HTTP::Response object instead of the response body, all we have to do is omit the #to_s on the end:

Create Movie Search Function

I created an asynchronous function that will fetch API to retrieve the movie information the MovieDB API and display the information into our component. I added my search function to display searched movies in index.js is:-

This project as difficult as other projects but only way to learn is to utilize google , youtube to help through . After i finish with my all code , it was time to style my app with CSS. I got help through google to look around to style my website with many style elements.

Thank you for reading.