An active search bar enables the user to search for movies, with a list of matches appearing below. Each returned movie card can be clicked on to see more details.
Add your movie database access credentials to environment.ts for dev. work
npm i
To start the server on localhost://8100 type: 'ionic serve'
The Ionic DevApp was installed on an Android device from the Google Play app store.
π» Code Examples
functions to search for info and retrieve more detailed info.
// Get data from the Omdb Api// map the result to return only the results "Search" that we need// @param {string} title Search Term// @param {SearchType} type movie, series, episode or empty// @returns Observable with the search resultssearchData(title: string,type: SearchType): Observable<OmdbSearchResult>{returnthis.http.get<Observable<OmdbSearchResult>>(`${this.url}?&apikey=${this.apiKey}&s=${encodeURI(title)}&type=${type}`).pipe(map((results)=>{console.log("RAW: ",results);returnresults["Search"];}));}// Get detailed information using the "i" (not "id") parameter// @param {string} id imdbID to retrieve information// @returns Observable with detailed informationgetDetails(id: string): Observable<any>{returnthis.http.get<Observable<OmdbDetailResponse>>(`${this.url}?i=${id}&plot=full&apikey=${this.apiKey}`).pipe(tap(res=>console.log("response: ",res)))}
π Features
Working search bar
Ion icons look cool although I have made no attempt to optimise this app for a compact build file, otherwise I would replace with svg files
API response interface models added
API search function code commenting is good - I have Simon Grimm to thank for that fine example