Cisco on Demand Mobile App Code Challenge

With Cisco on Demand, companies can deliver a personalized, collaborative, and proactive support experience enriched by Cisco’s deep knowledgebase. Users can collaborate on design, problem resolution, learning and more. Companies can add their own knowledge and solution repositories for optimal peer-to-peer community support. Our goal is to create a compelling and highly usable mobile experience that leverages Cisco on Demand capabilities to expedite problem resolution and reduce support costs.

About the Challenge

This challenge is to make a few UI prototype screens and capabilities functional with API calls for a mobile app. A highly functional prototype will be provided, so this challenge only requires “wiring” the prototype to the proper APIs and adding the necessary code for smooth functionality. The focus is more on complete functional capabilities with high quality, rather than the volume of APIs or screens with wired functions. 

Final Submission Guidelines

Registration & Preparation

After you register for this challenge on topcoder there are some extra steps.

1. You will need a Cisco.com User ID - if you don’t have one already, you can get one here
2. You will receive a confirmation email shortly after registering. After confirming your email address, you need to go to http://supportforums.cisco.com, login, and accept the terms and conditions.
3. Please email your Cisco User ID to ondemand_support@cisco.com, upon which we will provide you the relevant Community ID & the necessary token to post to the community
4. Once you have a Cisco ID, the community ID, and token, you are ready to begin!  Please login with your own credentials through your browser at cisco.com, from which you will get you an obssoCookie that also needs to be set and passed into your application code. See the example below.
5. API URLs will begin with https://wsgx.cisco.com/caas/sc/

Considerations

1. Please provide a summary of all the working functionality in a text or Word document
2. Registered participants will be provided designs and a working prototype that leverages HTML, CSS, Angular.js, and bootstrap
3. Please make minimal modifications to the design, unless to improve functional usability (i.e. a specific action or task, spacing for touch interactions, etc), code quality, or optimal use of the API methods
4. Scoring will not be dependent on departure from the original prototype, but rather on the overall quality of the code and application functionality – extensive modification of the underlying prototype code is allowed
5. This mobile app is pure web – please do not use iOS, Android, or Windows Mobile application packaging. The web app will communicate with the APIs. You can find the entire set of APIs available here
6. The provided examples are comprised of JavaScript, HTML, and CSS but wrapped in a JSP – the JSP aspect does not imply any requirement for your submission

Required Screens & Required Functionality

** Below is a list of the functional requirements for this challenge.  We have also attached a pdf document to this challenge that lists the same requirements with the screenshots mapping to the html prototype screens to be implemented in this challenge. Please refer to the requirements document for additional guidance.

1. Dashboard / Home

1. Please ensure Home has working “My Questions” section of most recent and count of new items
2. Allow selection of a Question via user touch gesture to link to Question Detail
3. Each section has a Notification icon based on the number of new Notifications per section; Ignore the small numbers on the dashboard – these show counts that are not required – they can be static or not present
4. Useful code:
5. http://ondemand.cisco.com/assets_mkt/widgets/downloads/standalone/RelatedDiscussionsWidget.zip

2. Menu

1. Please ensure operational links of Home, Questions, and Search only (any other active links are BONUS)
2. Note:  No APIs calls are required from this Menu view, and no Login view nor action is required   

3. Question Detail (aka Discussions)

1. Please ensure an operational Question detail page with Replies, Rating, Following, and Problem vote all operational
2. Please display Question title, details, date, author, & status (open, closed, assigned) at a minimum – icons plus labels should be used – in order of date posted
3. Include a visual indicator for “Follow this Discussion”
4. Include a visual indicator for “I have this problem too” – shows the number of people with the same problem
5. Include a visual indicator Heart icon to Follow the discussion
6. Include a visual indicator for Rating – stars up to 5
7. Include a visual indicator for Status and Status change (open, closed, assigned)
8. Include a Reply option with a field to include a response as well as Submit & Cancel buttons for that reply. Question Detail field must support basic formatting and UI for applying bold, underline, italic, bullets, and numbered lists.
9. Show page scrolling for longer items
10. Replies and threads in the Question/Discussion should be collapsible and expandable
11. Replies designated, as Correct should have a translucent overlay indicating Status when marked as such
12. Include a button for marking a Response/Reply as correct, ie “Mark Correct” should be included on the Reply detail (please see Reply view in the provided prototype)
13. The core concept of Questions/Discussions and Replies is that they are thread-based like a discussion forum. It is important within a thread that navigation UI elements and detail views are carefully considered, as it is the most critical user interaction…

Useful code: (feel free to use additional APIs or sample working widgets)

• GET getDiscussionVotersByUserID
• GET getForumMessage
• GET getForumThread
• GET getMessagesByThreadID
• GET getMessageVotes
• GET getRating
• GET getRootMessage

4. Ask a Question

1. Please ensure an operational Question Submission page using APIs
2. Include fields for “Your Question” title, Description (detail), and Tags (to indicate Subject Matter per user entry)
3. Detail field must support basic formatting and UI for applying bold, underline, italic, bullets, and numbered lists
4. Include action buttons in this view ie Submit, Cancel, and a visual element to indicate “Add Attachment”
5. Icon indicators of attachments placed by user

• Sample Code: http://ondemand.cisco.com/assets_mkt/widgets/downloads/standalone/AskQuestionWidget.zip
• Useful APIs/Code:  POST addAttachment, POST createThreadAsQuestion

5a. Search

1. Using APIs, please enable simple Search with advanced Search options for the global navigation search, accessible from the top navigation bar with detail view link for Questions only. Functionality for Filtering not required.
2. - Allow a user to initiate Search by typing a keyword and tap to view the search results
3. - Advanced Search to include "Sort by": Date Created, Rating, Author, Last Updated, Title; "Filter by" Type: Web, Document, Blog, Discussion, Knowledge Base; Date: Any, Today, Last 7, Last 30, Last 60

• Sample code: http://ondemand.cisco.com/assets_mkt/widgets/downloads/standalone/SearchWidget.zip

5b. Search Results

1. ���Please show summary information including title, Question summary, date, author, & status (open, closed, assigned) at a minimum – icons for status should be used instead of labels
2. Title link to detail view
3. Results to include discussions, blogs, documents, videos and download result samples with content type icons
4. Results filter should include date, content type, rating, status, tags
5. Incorporate pagination for lengthy result sets
6. Search detail should include title, author, author image, date, last updated [Date], full text, content type icon, rating/stars, share icon, reply button, bookmark button
7. Sample filtered Search Results in Prototype if the user makes filtering/sorting choices in Advanced Search and Search Filters
8. Search Filters:  same attributes as Advanced Search, slides from right side as an overlay when the upper right icon is tapped

BONUS:  Any additional list view screen that works (blogs, videos, documents) & working filter 

Screen resolutions:  Android: 1280 x 768px, iPhone: 1136 x 640px