In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family.
In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to
• Create an account
• Upload and download photos to the site and make them accessible to others
• Provide descriptions of trips and photos that others can read
• Organize photos by location and trip,
• Find photos based on location
• Find photos based on text searches of descriptions
• Locate the place where the photo was taken on a map

Reviews

EA

Great Course Jim has really thought me more than enough to get my career started. All a student has to do is just study.

KT

May 04, 2017

Filled StarFilled StarFilled StarFilled StarFilled Star

Excellent course. Mr. Stafford is a very good teacher.

From the lesson

Image Content

In this module, you will implement image content within the end-to-end application. At the data tier, you will use the BSON::Binary type to store binary data within MongoDB, manipulate image sizes and content using ImageMagick/MiniMagick, implement model validation and content size queries using Mongoid. At the API tier, you will implement content size queries and web caching of write-once, read-many content using a custom HTTP ETag and Cache-Control headers. Within the UI, you will load, manage, edit, and upload new content using AngularJS, ng-file-upload, and ui-cropper modules. You will also implement a re-usable component to vview full size images with embedded information and controls that allow you to cycle through a series of images.

Taught By

Jim Stafford

Adjunct Professor, Graduate Computer Science

Transcript

[MUSIC] Hey, this application's really coming to life with the topics of this module. You've already mastered the management of information within our application. Now we're going to add images to that, and have a real need to bring in MongoDB to satisfy your techie side. So when we get started, we'll go to data tier. We'll still use the relational database in order to manage the image metadata, but we'll create a child object that we'll manage over in MongoDB for the image content. And we'll leverage Mongo's BSON binary type in order to store the image bits directly into the document. There'll be no need to use GridFS. This'll be a very simple solution. And at the API layer, we have the normal lifecycle things to take care of, except it's a child object of an image. And also, it's a child object that's in a separate database from the image. And we'll be bringing in ImageMagick to resize the image going from thumbnail up to large, in order to satisfy the different sizes needed by our users. And then we'll get into a great deal of caching. The image metadata, that's only a few hundred bytes, and you might change a caption here or there. But the actual contents, that never changes. And it could be upwards in the megabytes. So when the browsers receive their first copy of the image, we want to be able to tell them, you can hold onto that. And you don't have to come back to the server for any updates. And things start to get really interesting once we add our UI on top of this. We're going to add an image tag to our existing references to image, so that we can start depicting the image that the text is talking about. And then we'll add an editor, where users can select, edit, and upload new images to the site. And we'll have some cropping software, so we have some standardization of what images get contributed to the site. And then we'll create a viewer that we'll be able to use in multiple places within the application that allow a user to just browse through the images on the site and enjoy it. And one of the nice things about our website is it's available not only on a normal browser, but on your cellphone. So on your desktop, you might upload images from the file system. But on your cellphone, you'll be able to take a picture from the camera and upload it directly to the site after editing on your phone. Okay, let's get started.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.