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
Documentation and Online Test. The IMDb-API is a web service for receiving movie, serial and cast information. APIs…
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 :-
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
Working examples available at Stackbliz
ag-grid with imdb data
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
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..