Capstone: Photo Tourist Web Application

Methode

Capstone: Photo Tourist Web Application

Coursera (CC)
Logo von Coursera (CC)
Bewertung: starstarstarstar_halfstar_border 7,2 Bildungsangebote von Coursera (CC) haben eine durchschnittliche Bewertung von 7,2 (aus 6 Bewertungen)

Tipp: Haben Sie Fragen? Für weitere Details einfach auf "Kostenlose Informationen" klicken.

Beschreibung

When you enroll for courses through Coursera you get to choose for a paid plan or for a free plan

  • Free plan: No certicification and/or audit only. You will have access to all course materials except graded items.
  • Paid plan: Commit to earning a Certificate—it's a trusted, shareable way to showcase your new skills.

About this course: 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 scenar…

Gesamte Beschreibung lesen

Frequently asked questions

Es wurden noch keine Besucherfragen gestellt. Wenn Sie weitere Fragen haben oder Unterstützung benötigen, kontaktieren Sie unseren Kundenservice.

When you enroll for courses through Coursera you get to choose for a paid plan or for a free plan

  • Free plan: No certicification and/or audit only. You will have access to all course materials except graded items.
  • Paid plan: Commit to earning a Certificate—it's a trusted, shareable way to showcase your new skills.

About this course: 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

Created by:  Johns Hopkins University
  • Taught by:  Jim Stafford, Adjunct Professor, Graduate Computer Science

    Computer Science, Whiting School of Engineering
Basic Info Course 6 of 6 in the Ruby on Rails Web Development Specialization Language English How To Pass Pass all graded assignments to complete the course. User Ratings 4.7 stars Average User Rating 4.7See what learners said 课程作业

每门课程都像是一本互动的教科书,具有预先录制的视频、测验和项目。

来自同学的帮助

与其他成千上万的学生相联系,对想法进行辩论,讨论课程材料,并寻求帮助来掌握概念。

证书

获得正式认证的作业,并与朋友、同事和雇主分享您的成功。

Johns Hopkins University The mission of The Johns Hopkins University is to educate its students and cultivate their capacity for life-long learning, to foster independent and original research, and to bring the benefits of discovery to the world.

Syllabus


WEEK 1


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.


21 videos expand


  1. Video: Course Introduction
  2. Video: Module 1 Introduction
  3. Video: Technical and Deployment Architecture (Part 1)
  4. Video: Technical and Deployment Architecture (Part 2)
  5. Video: Technical and Deployment Architecture (Part 3)
  6. Video: Development Environment Setup
  7. Video: Software Installation: MacOS
  8. Video: Software Installation: Specifics for Windows
  9. Video: Software Installation: Specifics for Linux and Docker
  10. Video: Application Setup
  11. Video: Application Setup Demo
  12. Video: Example Requirements
  13. Video: RDBMS-backed Resource
  14. Video: MongoDB-backed Resource
  15. Video: Regression Testing
  16. Video: Web Service Finishing Touches
  17. Video: CORS
  18. Video: Alternate Web Servers
  19. Video: Gemfile Summary
  20. Video: Provisioning mLab MongoDB
  21. Video: API Deployment
  22. 同学互评: Core API Development and Deployment


WEEK 2


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.


29 videos expand


  1. Video: Module 2 Introduction
  2. Video: Web Resources and Asset Pipeline Background
  3. Video: Asset Pipeline Packaging
  4. Video: Asset Pipeline Deployment
  5. Video: External Web Client Packaging with Gulp
  6. Video: Gulp Development Setup
  7. Video: Gulp Installation
  8. Video: Gulpfile Task Basics
  9. Video: Gulpfile Definitions
  10. Video: Gulp Build Tasks
  11. Video: Gulp Development Runtime Tasks
  12. Video: Gulp Distribution Tasks
  13. Video: External Web Client Deployment
  14. Video: External Web Client Rails Packaging
  15. Video: External Web Client Rails Deployment
  16. Video: Merging UI Branches
  17. Video: SPA Application Module
  18. Video: SPA Application Module External Packaging
  19. Video: Sample Resource CRUD Module
  20. Video: Sample Resource Service Skeleton
  21. Video: Sample Resource CRUD Controller Skeleton
  22. Video: Sample Directive and Template Page
  23. Video: Sample CSS Styling
  24. Video: List Resource Instances
  25. Video: Create Resource Instance
  26. Video: Select and Update/Delete Resource Instance
  27. Video: Sample Application in External Environments
  28. Video: SPA Application Deployments
  29. Video: CORS Revisited
  30. 同学互评: SPA Development and Deployment


WEEK 3


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.


32 videos expand


  1. Video: Module 3 Introduction
  2. Video: RSpec DSL
  3. Video: Spec Anatomy Part 1: Database Interaction and Blocks
  4. Video: Spec Anatomy Part 2: Thinning Examples
  5. Video: Spec Anatomy Part 3: Pending Examples and Lazy/Eager Let Blocks
  6. Video: RSpec with Mongoid
  7. Video: DatabaseCleaner with ActiveRecord
  8. Video: DatabaseCleaner and SharedContexts
  9. Video: DatabaseCleaner with Mongoid
  10. Video: DatabaseCleaner Optimizations
  11. Video: FactoryGirl and Faker
  12. Video: FactoryGirl Factories
  13. Video: FactoryGirl and Faker Data
  14. Video: Request Specs Overview
  15. Video: First Request Spec
  16. Video: API GET Resource Instances and Helper ApiModule
  17. Video: API GET Instance and Not Found Error Reporting
  18. Video: API Create and Wrapped Parameters
  19. Video: API Update/Delete and DRYing with Ruby Metaprogramming
  20. Video: DRYing API Tests with RSpec Shared Examples
  21. Video: Shared Examples with API GET Instance
  22. Video: Capybara Setup
  23. Video: Selenium Webdriver
  24. Video: Debugging Capybara/Selenium Tests
  25. Video: Poltergeist/PhantomJS Headless Webdriver
  26. Video: Capybara Testing with Docker (Optional Lecture)
  27. Video: Capybara Usage
  28. Video: Capybara Waits
  29. Video: Foo Feature Spec: Foo List
  30. Video: Foo Feature Spec: Create Foo
  31. Video: Foo UI Helper Module
  32. Video: Code Coverage
  33. 同学互评: Testing


WEEK 4


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.


49 videos expand


  1. Video: Module 4 Introduction
  2. Video: BTA Interview
  3. Video: Token-based Authentication
  4. Video: Server: Devise Token Auth Setup
  5. Video: API: Authentication Requirements
  6. Video: API: Account Signup
  7. Video: API: Account Signup Failures and Error Payloads
  8. Video: Server: Devise Setup Errors Discovered/Fixed
  9. Video: API: Authenticated Access Control
  10. Video: API: Authenticate
  11. Video: API: Authenticated Access
  12. Video: API: DRY Token Authentication Specs
  13. Video: Server: Domain Model and Authn Policy
  14. Video: Server: Image (Metadata) and Authn Policy
  15. Video: Server: Things and Authn Policy
  16. Video: DB: ThingImages Model
  17. Video: DB: Custom SQL and Query Scopes
  18. Video: API: ThingImages Resource and Authn Policy
  19. Video: API: ThingImages Resource and Authn Specs
  20. Video: UI: ng-token-auth Setup and Authentication Requirements
  21. Video: UI: Signup
  22. Video: UI: Signup Error Handling and Form Feedback
  23. Video: UI: Navbar and Authn Session
  24. Video: UI: Successful Login
  25. Video: UI: Logout and Persisted Session
  26. Video: UI: Login Error Handling and Styling
  27. Video: UI: Authenticated Access
  28. Video: DB: Populating Sample Data with Rakefile
  29. Video: UI: Images Page and Image Selector Component
  30. Video: UI: Display Image Metadata
  31. Video: UI: Image Authz Directive
  32. Video: UI: Image Authz Policy Enforcement
  33. Video: UI: Authenticated Things Management
  34. Video: UI: Displaying Thing/Image Links
  35. Video: UI: Creating Thing/Image Links
  36. Video: UI: Managing Thing/Image Links
  37. Video: Server: Rule-based Authorization with Pundit Gem
  38. Video: Server: Role Authorization Requirements
  39. Video: Server: User Roles
  40. Video: Server: Image Authorization Policy Enforcement
  41. Video: DB: Image Authorization Policy Enforcement Queries
  42. Video: Server: Thing Authorization Policy Enforcement
  43. Video: Server: Thing/Image Links Authorization Policy Enforcement
  44. Video: API: WhoAmI Service with User Roles
  45. Video: UI: Authorization Architecture
  46. Video: UI: Authz Service
  47. Video: UI: Authorization Policy Services
  48. Video: UI: Image Authorization
  49. Video: UI: Thing Authorization

Graded: Fullstack Information

WEEK 5


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.


23 videos expand


  1. Video: Module 5 Introduction
  2. Video: Image Content Introduction
  3. Video: DB: Image Content and BSON::Binary
  4. Video: DB: Read Image Content Size
  5. Video: DB: Validate Image Content
  6. Video: DB: Assign Image Content to Image
  7. Video: DB: Generating Image Content Sizes
  8. Video: DB: ImageContent Queries and Management
  9. Video: API: Image Content API Overview
  10. Video: API: Image Content API Lifecycle - Part I: Create
  11. Video: API: Image Content API Lifecycle - Part II: (Get) Content
  12. Video: API: Image Content API Lifecycle - Part III: Destroy, Index, and Show
  13. Video: API: Image Content Validation
  14. Video: API: Image Content Queries
  15. Video: API: Image Content Caching
  16. Video: UI: Display Existing Image Content
  17. Video: UI: Upload New Image Content - Part I: Content Preview
  18. Video: UI: Upload New Image Content - Part II: Create Image
  19. Video: UI: Edit Image Content
  20. Video: UI: Image Viewer Content Display
  21. Video: UI: Image Viewer Information Display and Controls
  22. Video: UI: Determining Image Query Sizes
  23. Video: Server: Image Cropping and Marking
  24. 同学互评: Images


WEEK 6


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.


19 videos expand


  1. Video: Module 6 Introduction
  2. Video: DB: Geolocation Coordinates
  3. Video: DB: Image Position and Value Objects
  4. Video: DB: Geolocation Queries with Geokit Rails
  5. Video: DB: Associated Object Geolocation Queries
  6. Video: DB: ThingImage Geolocation Query Scopes
  7. Video: DB: PostalAddress and Location Value Objects
  8. Video: Server: Geocoding and Setup
  9. Video: API: Geocode API
  10. Video: Server: Geocode Cache
  11. Video: API: Image Position
  12. Video: API: Subject Queries
  13. Video: API: Subject Query Results Caching
  14. Video: UI: Image Position
  15. Video: UI: Current Origin - Identify Origin by Address
  16. Video: UI: Current Origin - Identify Origin by Current Location
  17. Video: UI: Current Location Override and Error Handling
  18. Video: UI: Distance Limit and Styling
  19. Video: Heroku Deployment
  20. 同学互评: Geolocation


WEEK 7


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.


14 videos expand


  1. Video: Module 7 Introduction
  2. Video: UI: Overall Layout
  3. Video: UI: Subject Page Tabs
  4. Video: UI: Subject Page Areas
  5. Video: UI: Area Left/Right Sides
  6. Video: UI: Subject Page Styling
  7. Video: UI: Images List View (Part 1)
  8. Video: UI: Images List View (Part 2)
  9. Video: UI: Things List View
  10. Video: UI: Image/Thing Synchronization
  11. Video: UI: Current Image View, Part 1: Image Display
  12. Video: UI: Current Image View, Part 2: Image Synchronization
  13. Video: UI: Current Thing Information View
  14. Video: UI: Error Fix and Subject Caching
  15. 同学互评: UI Display


WEEK 8


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!


9 videos expand


  1. Video: Module 8 Introduction
  2. Video: UI: Display Map, Part 1: Implementation
  3. Video: UI: Display Map, Part 2: Logistics and Completion
  4. Video: UI: Display Origin Marker
  5. Video: UI: Display Subject Markers
  6. Video: UI: Display Info Windows
  7. Video: UI: Map/Subject Synchronization, Part 1: Current Subject
  8. Video: UI: Map/Subject Synchronization, Part 2: Current Origin
  9. Video: Course Outro

Graded: Fullstack Geolocated Images and Maps

Werden Sie über neue Bewertungen benachrichtigt

Es wurden noch keine Bewertungen geschrieben.

Schreiben Sie eine Bewertung

Haben Sie Erfahrung mit diesem Kurs? Schreiben Sie jetzt eine Bewertung und helfen Sie Anderen dabei die richtige Weiterbildung zu wählen. Als Dankeschön spenden wir € 1,00 an Stiftung Edukans.

Es wurden noch keine Besucherfragen gestellt. Wenn Sie weitere Fragen haben oder Unterstützung benötigen, kontaktieren Sie unseren Kundenservice.

Bitte füllen Sie das Formular so vollständig wie möglich aus

Anrede
(optional)
(optional)
(optional)
(optional)
(optional)

Haben Sie noch Fragen?

(optional)
Damit Ihnen per E-Mail oder Telefon weitergeholfen werden kann, speichern wir Ihre Daten.
Mehr Informationen dazu finden Sie in unseren Datenschutzbestimmungen.