Popular Movies App

Alternate Project 1

Note to the Student

How to Use This Guide

“Popular Movies App” Project Overview

Stage 1 -  Main Discovery Screen, A Details View, and Settings

User Experience

Implementation Guidance - Stage 1

Setup - Library Configuration

A note on resolving poster paths with themoviedb.org API

Stage 1 - API Hints

Stage 1 - Evaluation Rubric

Project Submission (Popular Movies App, Stage 1)

Stage 2 - Trailers, Reviews, and Favorites

User Experience

Implementation Guidance - Stage 2

Stage 2 - API Hints

Stage 2 - Evaluation Rubric

Project Submission (Popular Movies App, Stage 2)

UX Mockups (Complete App)

Phone UX:

Tablet UX:

Note to the Student

Due to licensing limitations, some countries may not be cleared to play or retrieve content currently provided by the Spotify platform. So that means if you live in a country where spotify isn’t available, you might violate Spotify’s Developer Terms of Use by building and playing music clips. If you reside in a country where Spotify is not available, we have an alternate project for you that you will allow you to show off the developer skills you’ve learned throughout Developing Android Apps.

The app you’ll build is a movies app that will allow a user to discover popular movies.

How to Use This Guide

This guide will provide you with the project guidelines, directions, and submission instructions for Project 1 and Project 2 if you live in a country that does not support Spotify. Please refer back to this guide until you have successfully submitted your “Popular Movies App”, Stages 1 and 2.

Once you’ve completed the Popular Movies App, you will not have to build the “Spotify Streamer App”, so you will not need to return to those lessons in your Android Developer Nanodegree.

“Popular Movies App” Project Overview

Most of us can relate to kicking back on the couch and enjoying a movie with friends and family. In this project, you’ll build an app to allow users to discover the most popular movies playing.

You’ll build the complete functionality of this app in two stages which you will submit separately.

Here are the details:

Stage 1 -  Main Discovery Screen, A Details View, and Settings

User Experience

In this stage you’ll build the core experience of your movies app.

You app will:

Implementation Guidance - Stage 1 

Setup - Library Configuration 

We recommend that this project use:

  1. Picasso* - A powerful library that will handle image loading and caching on your behalf.

*if you prefer, you’re welcome to use an alternate library such as Glide.

We’ve included this to reduce unnecessary extra work and help you focus on applying your app development skills.

How to Setup Picasso

You’ll need to modify the build.gradle file for your app. These modifications will happen in the build.gradle file for your module’s directory, not the project root directory (it is the file highlighted in blue in the screenshot below).

In your app/build.gradle file, add:

 

repositories {

    mavenCentral()

}

Next, add compile 'com.squareup.picasso:picasso:2.5.2' to your dependencies block.

Using Picasso To Fetch Images and Load Them Into Views

You can use Picasso to easily load album art thumbnails into your views using:

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

Picasso will handle loading the images on a background thread, image decompression and caching the images.

A note on resolving poster paths with themoviedb.org API

You will notice that the API response provides a relative path to a movie poster image when you request the metadata for a specific movie.

For example, the poster path return for Interstellar is “/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg”

You will need to append a base path ahead of this relative path to build the complete url you will need to fetch the image using Picasso.

It’s constructed using 3 parts:

  1. The base URL will look like: http://image.tmdb.org/t/p/.
  2. Then you will need a ‘size’, which will be one of the following: "w92", "w154", "w185", "w342", "w500", "w780", or "original". For most phones we recommend using “w185”.
  3. And finally the poster path returned by the query, in this case “/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg”

Combining these three parts gives us a final url of http://image.tmdb.org/t/p/w185//nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg 

 

This is also explained explicitly in the API documentation for /configuration.

Stage 1 - API Hints

  1. To fetch popular movies, you will use the API from themoviedb.org.
  1. The API returns a JSON string.

Stage 1 - Evaluation Rubric

Your project will be evaluated by a Udacity Code Reviewer according to

this rubric for Stage 1.

Project Submission (Popular Movies App, Stage 1)

In order to submit P1: Popular Movies App, Stage 1, please use this link and follow instructions.

If you have any problems submitting your project, please email us at android-project@udacity.com.

Stage 2 - Trailers, Reviews, and Favorites

User Experience

In this stage you’ll add additional functionality to the app you built in Stage 1.

You’ll add more information to your movie details view:

Lastly, you’ll optimize your app experience for tablet.

Implementation Guidance - Stage 2

Stage 2 - API Hints

  1. To fetch the runtime of the film you will want to make a request to the /movies/{id} endpoint.
  2. To fetch trailers you will want to make a request to the /movies/{id}/videos endpoint.
  3. To fetch reviews you will want to make a request to the movies/{id}/reviews endpoint.
  4. You should use an Intent to open a youtube link in either the native app or a web browser of choice.

Stage 2 - Evaluation Rubric

Your project will be evaluated by a Udacity Code Reviewer according to this rubric for Stage 2.

Be sure to review it thoroughly before you submit. All criteria must "meet specifications" in order to pass.

Project Submission (Popular Movies App, Stage 2)

In order to submit P2: Popular Movies App, Stage 2, please use this link and follow instructions.

If you have any problems submitting your project, please email us at android-project@udacity.com.

UX Mockups (Complete App)

Phone UX:

Phone_main.png   Phone_detail_with_settings.png

Tablet UX:

Tablet_main_landscape_master_detail.png