Capstone: Photo Tourist Web Application

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

Technical Architecture and API Development Setup
-In this module, we will start your journey into being part of an end-to-end application development as a Rails/AngularJS fullstack developer intern. You will learn the technical architecture and software requirements of the targeted application you will be a part of developing. You will also get a chance to shake off any rust that may have accumulated on your Rails development skills.

As a part of the technical architecture, you will learn of the various layers, technologies, libraries, and services used in the development, deployment, and operation of the targeted application. You will get an early sense that this course is "no joke" when it comes to challenges, but you will be shown a path through most of them. You may be able to skip the application installation until the end if you are using the same computer that you used in the first five (5) courses of the specialization. None of the new software installations are required for this module -- but are included in a single lesson for modularity. You will develop an end-to-end, API-to-Database, resource solution for ActiveRecord/RDBMS and Mongoid/MongoDB using Rails scaffold generator. You will establish a Git repository for this work, provision database and Rails resources on the internet for staging and production deployments, and deploy your solution to the Heroku to be accessible from the Internet.

If you are a seasoned Rails developer and competent with ActiveRecord, Mongoid, and Heroku -- you may want to initially skip the review lectures, review the final Git commit for module one (1), and try your hand at the optional assignment at the end. Aside from the technical architecture lesson, this module is mostly a quick breeze through many of the topics of courses one (1) through three (3). A similar, small-scale review of courses four (4) through five (5) will be covered in the next module. Please enjoy! Also, if you have not done so already I recommend that you read the Course Overview description which provides additional context on what you will be doing in this course. To access, please click the Resources tab on the left navigation.

SPA Development Setup
-In this module, you will develop an AngularJS web application for the purposes of managing a resource hosted by a Rails server. As a part of that, you will learn the details of the Rails Asset Pipeline for hosting web applications, key features to address when moving from development to production, and different deployment options that you have within this course. You will complete an end-to-end AngularJS/Rails application to manage the resource on the Rails server you developed and deployed as a part of module one (1). This application will consist of AngularJS 1.x, UI-Router, and ngResource modules as well as a sample service, directive, controller, and web page to manage the resource. You will learn the details of the Rails Asset Pipeline as an option for deploying web assets like AngularJS web applications and what features it provides and how to conform to its conventions to get those features. Novice and intermediate developers are encouraged to use the Asset Pipeline approach in this module and throughout the course for simplicity and consistency with the examples in follow-on modules as this will be the development approach used by all follow-on modules. You will optionally learn how to leverage node package manager, bower, and gulp to establish an external development environment that parallels many of the capabilities provided by Asset Pipeline (e.g., minification to reduce bandwidth requirements and concatenation to reduce the number of separate server HTTP connections). You may leverage this environment to form a deployment to Github, like performed during courses four (4) and five (5) except with deployment considerations addressed. Although there is a functional gulpfile developed during the module, you are encouraged to treat this as an optional topic. Additionally, you can optionally learn how to use a hybrid of external development and Rails by using Rails as a web server and deploying your web application to the public directory and forming a single development tree and deployment artifact to Heroku. Like the pure external development approach, you are encouraged to treat this approach as an optional topic.

Testing
-In this module, you will learn how to development model, request, and feature specs using RSpec and to leverage gems like DatabaseCleaner, FactoryGirl, and Faker in building those specs. You will also learn how to DRY their tests using RSpec shared_contexts and shared_examples as well as Ruby modules for helper methods. All use of tests within the capstone will be "integration-style" tests, going to the database and back. We will not have time to implement pure unit tests for individual components. For model testing, we will focus tests on factories, query scopes, relationships, and facade methods interacting directly with PostgreSQL and MongoDB databases. We will address the general purpose and custom techniques for managing the database state during cleanup. For API testing, we will form a hefty set of RSpec shared_contexts and Ruby helper methods for the request specs that will take care of the details of many CRUD behaviors and other tedious, repetitive tasks. The API is not only easier to test than the Web UI, it is a first-class external interface deserving of separate testing. During test coverage, you will learn internal Rails error handling techniques that will provide the web client a proper and sane web reply in the face of errors. For Web UI testing, we will introduce Capybara for building feature tests and the role of the RackTest, Selenium, and Poltergeist/PhantomJS drivers for implementing UI testing with Javascript. Although Capybara provides a nice interface for expressing Web UI tests, the asynchronous nature of Web UIs make them extremely difficult to test without well thought out decisions during development. This course has a special emphasis on teaching you how to develop automated integration tests at all levels of the architecture, including the Web UIs. It is recommended that you review this module and sample further test-related lectures in follow-on modules to get a good understanding of how testing can best be leveraged in a full stack development (within constraints of the course). Except for the seasoned RSpec and Capybara user, there is no shortcut through this module.

Security and the Photo Tourist Domain Model
-In this module, you will learn how to implement authenticated interfaces providing role-based authorization required to protect web resources. You will also practice these techniques while implementing the core resources for the Photo Tourist application. You will learn how to manage user accounts with the Devise Ruby gem and how to implement token-based authentication with the devise_token_auth Ruby gem and ng-token-auth AngularJS module. With this starting point -- the student is on a straightforward path to implementing external authentication (e.g., via Facebook, Twitter, Github) through OAuth2 (not part of the capstone). Additionally, how to implement end-to-end account registration from the UI, through the API, to Devise through the intermediate libraries and implement an authenticated session component in Angular and make that available through a Navbar based on a Bootstrap implementation. You will learn how to add role-based security to their resources with the aid of the Pundit Ruby gem to determine access not only on authentication -- but also on assigned roles for the anonymous and authenticated user. The content and code-along exercises provide opportunities to implement role-based access checks within the Web UI to help guide a user to making authorized choices appropriate for their assigned roles. And how to write optimized SQL queries to implement compound, custom resource payloads for efficient expression of related object information -- including mapping roles to resources accessed by specific users. ************* This is a very long module with very important material relative to security and the targeted application. It will likely be broken up into two (2) or more modules in the future. You should budget extra time for this and treat it as if it were two (2) modules for the amount of time spent. Yes -- that means the novice developer could spend upwards to forty-eight (48) hours going through the lectures, performing the optional code-alongs, and completing the mandatory assignment. *************. The mandatory assignment for this module will be posted shortly after the last lectures are posted and there is a Git commit available in Github for that lecture.


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.

Geolocation
-In this module you will add geolocation capabilities to the end-to-end application. This will allow your users to assign a geolocation position to images as well as identify the current origin and distance limits for future API queries. You will implement the model and API queries for subjects within this module and complete the UI components within the next module. At the data tier you will add geolocation coordinates to the Image model, make those geolocation coordinates available to ThingImage though the 1:1 relationship between them, implement geolocation queries using the Geokit Rails gem that determine all items within a distance limit from an origin and supply their distance from origin. These queries will leverage custom SQL selects, joins (inner, right outer, and left outer join) and will be encapsulated within ActiveModel query scopes. At the API tier you will implement API service endpoints to geocode addresses and reverse geocode positions into a resolved location using the Geokit Rails gem and the Google Maps Geocode service, implement a persistence cache of geocode results using MongoDB to help stay within free service limits and speed up lookups, enable an API service endpoint to query for subjects (ThingImages) of a certain type, within a distance limit, and dynamically annotate them with the distance from the supplied origin, implement HTTP caching headers for both geocode and subject results. At the UI tier you will implement a geocoder service to lookup a location by (partial) address or position from the API implemented on the Rails server, add geocoding to the Image editor to allow a user to specify the Image's position using an address, build a current origin component to express and retain the center origin and distance limits for future subject queries.

UI Layout and Subjects Page
-In this module you will add generic UI framework and Subject-specific components to implement a Subjects page that will show the user different views of Subjects (Things and Images) matching query criteria as well as the ability to express and depict the currently selected Subject. As part of the UI framework you will implement a set of parent/child components to manage areas of the page and tabs within areas. You will make heavy use of transcludes to implement this visual layering and to encapsulate the details away from the Subject-based components. You will implement dynamic styling to shrink and expand areas as directed by the user. As part of interacting with Subjects you will implement a Subjects page; divide the page up into sides, areas, and tabs; insert a set of Subject/view-specific components (e.g., lists, images, and details); integrate these components with a new Current Subjects service that will enable each of the components to maintain a consistent view of the user's query results and currently selected Subject. At the end of this module you will have implemented a complete UI framework -- ready to implement the visual display of Subjects using maps in the next module.

Mapping
-In this module you will learn to display and interact with subjects on a map using the Google Javascript Map API. You will learn how to display a map, display markers on the map, customized markers to distinguish different types of subjects, and add display information windows for markers to indicate subject identity and image You will learn how to synchronize elements of the map with the other Subject components. You will learn to clear the map of markers, add new markers, activate marker(s) through a method call, and react to markers being clicked. This will complete our subjects page and course topics and leave you on the doorstep of building more interesting extensions to the example in the assignment. Good luck!