Code Monkey home page Code Monkey logo

ionic-angular-infoapp's Introduction

โšก Ionic Angular InfoApp

  • App to search for info from an API and display it using the Ionic framework.
  • Uses a movie database API to develop the app.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

๐Ÿ“„ Table of contents

๐Ÿ“š General info

  • 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.
  • The API searches the The Open Movie Database for search matches.

๐Ÿ“ท Screenshots

Home Page Home Page

๐Ÿ“ถ Technologies

๐Ÿ’พ Setup

  • Get yourself an API key from the The Open Movie Database - it's free :-)
  • 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 results
  searchData(title: string, type: SearchType): Observable<OmdbSearchResult> {
    return this.http
      .get<Observable<OmdbSearchResult>>(
        `${this.url}?&apikey=${this.apiKey}&s=${encodeURI(title)}&type=${type}`
      )
      .pipe(
        map((results) => {
          console.log("RAW: ", results);
          return results["Search"];
        })
      );
  }
  // Get detailed information using the "i" (not "id") parameter
  // @param {string} id imdbID to retrieve information
  // @returns Observable with detailed information
  getDetails(id: string): Observable<any> {
    return this.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

๐Ÿ“‹ Status & To-do list

  • Status: Working.
  • To-do: Nothing

๐Ÿ‘ Inspiration

๐Ÿ“ License

  • This project is licensed under the terms of the MIT license.

โœ‰๏ธ Contact

ionic-angular-infoapp's People

Contributors

andrewjbateman avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.