Mock IMDB apis are available for free. Sample Angular 11 movie-app w/ IMDB api

Demo and walk-through of all the steps to implement in the video below

IMDB data is real-time and apis need to be bought via AWS Marketplace. Or there are support plans to consume via RapiApi.

(which btw have only 2 endpoints and require to enter your credit/debit card).

My suggestion is why do that if you have multiple endpoints for free.

It does not mean we cannot build Sample Movie applications using valid data if not real-time. Why should we miss out on the workflow learning of how Browsing Movies works. Let it be on Any device.

IMDB apis are available for Both Client and Server sdk implementation on (https://imdb-api.com/). Free registration and consume the related apis.

Below is a walk-through on how to use it in a Angular 11 app. With Keeping it simple AG-grid for filtering, sorting, styling and the works. Also a tutorial on faker and lodash for all those who prefer mock-data over live test-samples.

Step 1: Register at imdb-api.com

The site is sometimes inaccessible without accepting cookies and Login is Mandatory for an api-key.

Step 1 a: After registration test the apis with the key visible. Test the apis you want to run

The site has api documentation

IMDb API Documentation - IMDb-API

For example I need NOW SHOWING for my web app home page. So I will look at InTheatres() Api. (Demo available in video above)

It looks something like this :-

https://imdb-api.com/en/API/InTheaters/(API_KEY}

Where API_KEY is where you will have see your own on registration.

Step 2 : Sample Angular Application from scratch

Include the imdb api in server using http client

To save time run the following commands to create a new Angular Application.

ng new movies-app -p mov — routing true — skip-git true — skip-install true -S true — strict true — style scss — dry-run

— dry-run along with skip-install and — strict are the most useful CLI options for ng new.

Explanation as to Why these ng new options?

— dry-run Run through and reports activity without writing out results. Aliases: -d boolean false

— prefix The prefix to apply to generated selectors for the initial project. Aliases: -p string app

— routing Generate a routing module for the initial project.

boolean — skip-git Do not initialize a git repository. Aliases: -g boolean false

— skip-install Do not install dependency packages. boolean false

— skip-tests Do not generate “spec.ts” test files for the new project. Aliases: -S boolean false

— strict Creates a workspace with stricter type checking and stricter bundle budgets settings. This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/guide/strict-mode boolean false

— style The file extension or preprocessor to use for style files. css|scss|sass|less|styl

— create-application Create a new initial application project in the ‘src’ folder of the new workspace. When false, creates an empty workspace with no initial application. You can then use the generate application command so that all applications are created in the projects folder. boolean true

— defaults Disable interactive input prompts for options with a default.

boolean reference from https://angular.io/cli/new

On running the above command output should look something like this

Now lets run the code without — dryRun option

ng new movies-app -p mov — routing true — skip-git true — skip-install true -S true — strict true — style scss

You should see the new Angular App. With Default App Component.

Step 2 a: Create 2 components; one called HOME and the other called ABOUT by the below commands

ng g c home

ng g c about

Run the above commands one at a time.

Include routing for ABOUT and HOME Components from app.routing.ts . Something like this

Step 2 b. Include AG-GRID to display NOW Showing Content from IMDB website. Examples available at

https://www.ag-grid.com/angular-grid/getting-started

Working examples available at Stackbliz

ag-grid with imdb data

Output:

https://movies-app-ag-grid-imdb-api.stackblitz.io

Step 3 : Install json server for fakes and 100 records of mock data

npm i — save json-server

npm i faker lodash

installing json-server, faker and lodash using npm install

cd movies-app

now create a folder named server and a .js file named generate.js

It should look something like this

Code explanation is given in the video above.

lets see if the faker is running with definition we defined.

To make it consistent with the project. Make changes to package.json

Something like this

Now all we need to do is run the server and see if the data is available for the frontend

npm run generate

Open REST Client to test

Something like this

Now that fake data is available you can move to Designing your angular application.

So getting started with an angular app is that simple. Some if not most devs prefer to get mock data or faker ready first and then angular ui finally work on live data.

In such a case do steps 3, 2 and then 1. In that way e2e and unit tests need not wait.

Conclusion is that any angular app does not take more than 30 mins IMHO. Unless of course you have complex UI and highly observable State management included with your app.

HTTPClient, RxJS, NgRx and finally docker to be covered in the next blog for Angular 11.

Stay tuned for .NET 5 REST Api to interact with Angular removing CORS errors which will be after that.

And finally dockerizing and containerizing both these apps to interact via a Network bridge on Linux/Windows.

Until next time..