This project was designed to help further learn Angular, Typescript, HTML, and CSS. This project is called Movie Scrambler. Once a development server is started, it allows users to search for movie information using OMDb to gather the information. After the information is populated on the webpage, it also shows a scrambled version of the movie plot made up of random synonyms of every word of the plot. These synonyms are retrieved using WordsAPI, which is accessible through RapidAPI.
In order to run, the user needs API Keys from OMDb and from RapidAPI. Keys to these APIs can be obtained at limited free tiers, you can sign up for an OMDb Key here and the WordsAPI RapidAPI Key here.
I believe OMDb will stop responding with movies to requests that go over the rate limit, but I have not been in this situation to know. However, RapidAPI will charge your payment information if you go over the quota.
Once a RapidAPI account has been signed up for, to see the Key's Quota usage, navigate to the account's Subscription and Usage page.
A RapidAPI user can test endpoints using a built in tool here.
That tool can also be used to see how many requests have been made.
By making a request using the Test Endpoint
button, click on Results
to see the reply.
Then click Headers
and look for x-ratelimit-requests-remaining
, that associated number will be the number of remaining requests that key can make.
To test using the OMDb API, there is an example available on their website where a user can search for movies by filling in parameters and the website will construct the request, show the user the request, and show the user the reply and result.
After obtaining the API Keys, they need to be added to the project.
In order to add the API Keys, copy keys.ts.example
in movie-scrambler/src/app
, paste it into movie-scrambler/src/app
, and rename the key keys.ts
.
Put the OMDb key in between the quotes following MOVIE_API_KEY
.
Put the RapidAPI Key for WordsAPI in between the quotes following the WORDS_API_KEY
.
With the keys.ts
file being added, the project will successfully compile when running the development server as detailed below.
This project was generated with Angular CLI version 9.0.7.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.