Screenshots • Key Features • Setup • App Center • Admob • TheMovieDB • License
Tech Stack:
- Hybrid (Ionic 3)
- Ionic Image Loader library for caching and preloading images.
Backend:
- TheMovieDB for movies data
- CodePush for hotfixes (if I need to)
- Microsoft App Center Analytics
Personally, I think I could have added more features, like a discover section to pop up random movies, and a favorites section to keep track of movies that the user likes and also get updates for when a movie is released or playing in a theater. Maybe I will revisit this project later on and implement those things, for now the whole repo and code is available here.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. You will also need Cordova and Ionic, follow the Ionic getting started guide for more.
From your command line:
# Clone this repository
$ git clone https://github.com/blacksector/moviecard
# Go into the repository
$ cd moviecard
# Install dependencies
$ npm install
# Run the app - All of the features won't work, I recommend deploying on an emulator
$ ionic serve --lab
Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.
Once you have setup the code and installed all of the dependencies, you will need to grab some API keys to get started. I used Microsoft App Center, so grab the Analytics API key and CodePush deployment keys from there and add it to the config.xml here:
<!-- Android configuration: -->
Line 44: <preference name="CodePushDeploymentKey" value="" />
Line 45: <preference name="APP_SECRET" value="" />
<!-- iOS configuration: -->
Line 82: <preference name="CodePushDeploymentKey" value="" />
Line 83: <preference name="APP_SECRET" value="" />App Center recommends having two separate deployment keys for Android and iOS, hence the two different key values.
If you do not wish to use App Center, just remove lines 44, 45, 82, and 83.
Google Admob Integration is easy! The plugin and code is already implemented, so all you need to do is modify line 110 in the file src/app/app.component.ts:
id: ''Replace the empty string with your Banner ID, and remove line 109 when you are done testing, this is important or you will not be earning anything as Admob will think you are in testing mode!
To grab yourself a copy of the MAIN API key for this project, head over to TheMovieDB!
Once you have created an app and have an API key, you will need to modify line 12 in the src/providers/api/api.ts and add your own key in the empty string:
apiKey: string = '';Note: DO NOT remove the logo at the bottom of the home screen of the app. Maybe you can put it on a different page but removing it will violate the Terms of Use for TheMovieDB, here is a link to their FAQ
The MovieCard Logo is Copyright © Omar Quazi. Do not in any way or form reproduce or reuse this logo. If you wish to use the logo, ask me first! The rest of the code is MIT Licensed:
Copyright 2018 Omar Quazi
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.