Prototype Report (PRO) Version 2.1. Prototype Report. PicShare. Team 02. Team Members

Transcription

1 Prototype Report PicShare Team 02 Team Members Sultan Alsarra Adil cem Albayrak Julapat Julnual Charles Reitz Mohammad Almunea Aref Shafaeibejestan Andrea Brown Travis Weaver 12/7/2015

2 Version History Date Author Version Changes made Rationale 10/09/15 JJ, CR 1.0 Created a draft version To mitigate risks of the project using Buying Information strategy 10/25/15 JJ, CR 1.1 Completed the draft version Completed for FC Package 12/06/15 JJ, CR, AS 2.0 Updated for DC Package Prototype Progress/New Prototype for DC Package 12/07/15 SA 2.1 Revised before submitting Corrected some mistakes/ Added hostgator links/admin prototype risk

3 Table of Contents Prototype Report...i Version History... ii Table of Contents... iii Table of Tables...iv Table of Figures... v 1. Introduction Purpose of the prototype Status of the prototype Navigation Flow Prototype Prototype 1 Facebook Login Integration Prototype 2 Server-Side Event Management Prototype 3 User Interface (mockup) Prototype 4 User Interface (ios) Prototype 5 Admin Interface... 22

4 Table of Tables Table 1: Risks and their Prototypes... 1 Table 2: Login with Facebook screen... 4 Table 3: Facebook account information screen... 5 Table 4: Server Algorithm Design... 6 Table 5: Server Deployment... 8 Table 6: Explore Nearby screen Table 7: Explore #Event screen Table 8: Picture sub menu screen Table 9: Posting picture to Nearby Table 10: Admin Page Dashboard Page Table 11: Admin Page - Users Page Table 12: Admin Page - Events Page Table 13: Admin Page - Pictures Page... 26

5 Table of Figures Figure 1: Navigation Flow of PicShare Mobile Application... 2 Figure 2: Login with Facebook screen (ios)... 4 Figure 3: Facebook account information screen... 5 Figure 4: Server algorithm diagram, retrieve list of nearby pictures... 7 Figure 5: Server algorithm diagram, retrieve nearby picture by name... 7 Figure 6: Server algorithm diagram, post to event... 8 Figure 7: Screenshot, server portal... 9 Figure 8: Explore #Event screen Figure 9: Explore Nearby screen (ios) Figure 10: Explore #Event screen (ios) Figure 11: Picture sub menu screen (ios) Figure 12: Posting picture to Nearby (ios) Figure 13: Admin Page - Dashboard Page Figure 14: Admin Page - Users Page Figure 15: Admin Page - Events Page Figure 16: Admin Page - Picture Page Figure 17: Admin Page - Picture Page: Showing Location... 27

6 1. Introduction 1.1 Purpose of the prototype This document, Prototype report, provides details about the prototypes which are used for mitigating risks of the project. The selected strategy is Buying Information strategy. Prototypes can be used for proving a concept of the system or be used for clarifying flows and user interfaces of the system with a client. In this document, three major risks and their prototypes are introduced and described in the table below. Table 1: Risks and their Prototypes No. Risk Prototype 1 Facebook login service. (External service integration) Facebook Login Integration prototype A proof-of-concept prototype that provides feasibility evidence about interoperability 2 Limited experience with servers & database. (Web service, Back-end side) 3 User interface of the application. (User interface) 4 Admin interface of the application. (Admin interface) 1.2 Status of the prototype between PicShare and Facebook Login service. Server-side event management flow A clarification prototype that provides a clear and mutual understanding of how the back-end side will operate. User Interface prototype (Mockup +ios) A user interface prototypes of mobile application that clarifies the client s expectations in terms of user interface of the mobile application Admin Interface prototype An Admin interface prototype of admin website that clarifies the client s expectations in terms of Admin interface of website. Since the prototype presentation, some improvements have been made, including: 1) Server-side event management concept revision and functional prototype creation. 2) User Interface prototypes have been made to clarify requirements and application s look and feel with the client. 1

7 2. Navigation Flow Figure 1: Navigation Flow of PicShare Mobile Application 2

8 3. Prototype 3.1 Prototype 1 Facebook Login Integration Purpose of this prototype One of the major requirements of the application is the ability to allow users to login with their Facebook account. This will allow the application to fetch some data from the account such as name, , and profile picture, which will make beginning to use the application easier for the user. Since Facebook Login service is an external web service which provides a login API for any application, we have to ensure the interoperability between the Facebook Login API and our application. In addition, we must make sure that user s data provided by Facebook API are covered the requirement. PicShare will be developed for the ios platform, so we must ensure through prototyping that Facebook provides the base functionality necessary through the ios API Result After prototyping was completed, we found out that our ios prototype works properly with Facebook Login API. Moreover, Facebook provides all of the information we need in order to provide quick account creation/login for the application. In conclusion, we can ensure that the application would work properly with Facebook API by making prototypes. Facebook provides an API for ios and allows our application to login with their accounts system, and provides the user information that PicShare needs. The details of the prototype are described below. 3

9 Table 2: Login with Facebook screen Description Related Capability Pre-condition Post condition This screenshot is a login page of the Facebook Login Integration prototype. WC_3584: As a user, I can login to the application using my registered username or my Facebook account, so I can use the application with my own profile. A user opens the prototype application. The user can click Login with Facebook button to login with their Facebook account. Figure 2: Login with Facebook screen (ios) 4

10 Table 3: Facebook account information screen Description Related Capability Pre-condition Post condition This screenshot is a main page of the Facebook Login Integration prototype. WC_3584: As a user, I can login to the application using my registered username or my Facebook account, so I can use the application with my own profile. A user clicks Login with Facebook button, then allows the application to use their Facebook account for logging in. 1. The user can view their Facebook account information. 2. The user can logout by clicking Log out button. Figure 3: Facebook account information screen 5

11 3.2 Prototype 2 Server-Side Event Management Purpose of this prototype The team has limited experience in building an end-to-end system: back-end server to front-end application. The team does have experience in developing mobile applications, and also has some experience in web/database development, but it does not have as much experience in implementing an entire system. In order to begin the functionality of the server, algorithm diagrams were made, and a minimal system was made that implemented an Apace Server, PHP, and a MySQL database Result After prototyping, the team is better able to visualize and plan for the deployment of the back-end server. The prototype does not prove that the server can be implemented; however, proving this would simply be implementing the server. By elaborating and confirming the algorithm, the team is better able to plan for concurrent development by multiple team members, and the members who develop the mobile applications can plan for what the server will be expecting. This mitigates the risk of a lack of experience in end-to-end development and server implementation. To prove that the setup can be established, multiple php scripts were written and executed in an Apache server and connected to a MySQL server. The system allows a user to upload a picture, create, events, post pictures to specific events, post pictures to nearby, and more via a web console. Uploading a picture to Nearby and downloading pictures from events and Nearby can also be accomplished via GET and POST requests. Pictures are stored in folders that are organized by event or Nearby, and a reference to the picture is stored in the database. This prototype is now hosted on Hostgator, the web server we are going to use for our final application. You can view it using this link: Table 4: Server Algorithm Design Description Related Capability Pre-condition Post condition These screenshots are for retrieving events in the area and for posting a picture to an event. WC_3579: As a user, I can use a hashtag for a picture taken in a special event such as a basketball game, so the people miss the event will see what they missed. A user opens the prototype application. The user can view picture from events in the area, or post a picture to an event. 6

12 Figure 4: Server algorithm diagram, retrieve list of nearby pictures Figure 5: Server algorithm diagram, retrieve nearby picture by name 7

13 Figure 6: Server algorithm diagram, post to event Table 5: Server Deployment Description Related Capability Pre-condition Post condition This screenshot is for uploading pictures to the server. Storing pictures in server DB. User selects picture on local file system. The picture is uploaded into the server file system and displayed. 8

14 Figure 7: Screenshot, server portal 9

15 3.3 Prototype 3 User Interface (mockup) Purpose of this prototype Since the project includes building a mobile application which its user interface and interaction is one of the most critical parts, making the GUI prototype could mitigate risks regarding to requirements, application flow, and user interface. This prototype can be used to clarify requirements and user interface expectations of client Result In this document, screens of some important features are shown which their details are described below. 10

16 Table 6: Explore Nearby screen Description Related Capability Pre-condition Post condition This screenshot is an Explore Nearby page of PicShareApp. It lists all nearby (location) pictures. This screen is the home screen which means user will be automatically redirected to this screen after logged in. WC_3599: As a user, I can report any inappropriate picture, so that it will be removed from the event. WC_3623: As a user, I can save one or many pictures from an event/hashtag to my phone so that I can keep the photos after the event/hashtag expires. WC_3751: As a user, I can like a picture. WC_3754: As a user, I can use a caption for the pictures while posting them, so that my pictures will be more descriptive. A user login the application with PicShare account or Facebook account. 1. A user will be redirected to Explore Nearby screen. 2. A user can view nearby pictures with some information including posted user, location, caption, and likes. 3. A user can like pictures by clicking a like button (heart icon). 4. A user can download pictures by clicking a sub menu button [ ] then select menu Download. 5. A user can report pictures by clicking a sub menu button [ ] then select menu Report. 11

17 Figure 8: Explore Nearby screen 12

18 Table 7: Explore #Event screen Description Related Capability Pre-condition Post condition This screenshot is an Explore Event page of PicShareApp. It lists all pictures in specific #Event. For example, #USCTrojanFootball in this screenshot. WC_3585: As a user, I can reserve my event's hashtag for a limited time (one week), so I and event attendees can use the hashtag to post pictures of the event. WC_3599: As a user, I can report any inappropriate picture, so that it will be removed from the event. WC_3623: As a user, I can save one or many pictures from an event/hashtag to my phone so that I can keep the photos after the event/hashtag expires. WC_3627: As a user, I can save the hashtags to save time searching for them later and see my history of hashtags. WC_3754: As a user, I can use a caption for the pictures while posting them, so that my pictures will be more descriptive. From Explore Nearby screen, user click the #Event button at the top of screen. 1. A user will be redirected to Explore #Event screen. 2. A user then input specific #Event to view pictures of specific #Event 3. If #Event is public, list of pictures will be shown. 4. If #Event is private, a user will be asked to input #Event password. With the correct password, list of pictures will be shown. 5. A user can create new event by clicking a new event button (plus icon). 6. A user can view #Event pictures with some information including posted user, caption, and likes. 7. A user can like pictures by clicking a like button. 8. A user can download pictures by clicking a sub menu button [ ] then select menu Download. 9. A user can report pictures by clicking a sub menu button [ ] then select menu Report. 13

19 Figure 8: Explore #Event screen 14

20 3.4 Prototype 4 User Interface (ios) Purpose of this prototype Since the user interface (mock up) prototype is acceptable for the client, the ios prototype is created in order to demonstrate client what looks and feels of the real ios application will be. The prototype demonstrates three main features of the application which are exploring nearby pictures, exploring specific event s pictures, and posting picture to nearby location. This prototype can be used to clarify requirements and user interface expectations of client when using the real ios application Result In this document, for exploring nearby pictures and exploring specific event s pictures, they will show only screenshots because their descriptions are the same as user interface mock up. For picture sub menu and posting picture to nearby, descriptions are provided. Their details are described below. 15

21 Figure 9: Explore Nearby screen (ios) 16

22 Figure 10: Explore #Event screen (ios) 17

23 Table 8: Picture sub menu screen Description Related Capability Pre-condition Post condition This screenshot is a Picture sub menu page of PicShareApp. It shows the sub menu of each picture. WC_3599: As a user, I can report any inappropriate picture, so that it will be removed from the event. WC_3623: As a user, I can save one or many pictures from an event/hashtag to my phone so that I can keep the photos after the event/hashtag expires. From Explore Nearby screen or Explore - #Event screen, user click the sub menu button [ ] at the top-right corner of each picture. 1. A picture sub menu screen will show up. 2. A user can select either Download the picture or Report the picture, also the user can select Cancel if they don t want to do any action. 18

24 Figure 11: Picture sub menu screen (ios) 19

25 Table 9: Posting picture to Nearby Description Related Capability Pre-condition Post condition This screenshot is a Photo page of PicShareApp. It shows the camera screen of iphone which allows user to take a picture and post to nearby location. WC_3619: As a user, I can take a photo from the PicShare app or choose a picture from my gallery, so that I can take a picture from another app. From any main screens, such as Explore Nearby screen, user click the Photo tab at the bottom of the screen. 1. A user will be redirected to Photo screen. 2. A user can take a picture by clicking the white button with blue border at the middle-bottom of the screen. 20

26 Figure 12: Posting picture to Nearby (ios) 21

27 3.5 Prototype 5 Admin Interface Purpose of this prototype Admin site was added after the FC review, since it was a new feature requested by the owner, and he considers it very important, we decided to create a prototype for it. Furthermore, when we decided to add this feature to our project, we were not sure about what we should include. So, by creating a prototype we wanted to make sure that developers and owner has the same idea about administrator feature and its components Result After creating this prototype, owner reviewed it and gave us some feedback. Screen shots that are shown in the following pages are the result of these feedbacks. This prototype is now hosted on Hostgator, the web server we are going to use for our final application. You can view it using this link: 22

28 Table 10: Admin Page Dashboard Page Description Related Capability Pre-condition Post condition This screenshot is the first page of admin site. Admin can see an overview of system and its status. WC_3773: As an admin, I can generate reports regarding events, users and pictures, so that I can have more information about the system. Admin has logged into the admin site. 1. Admin sees the number of total and active users. 2. Admin sees the number of total and active images. 3. Admin sees the number of total and active events. 4. Admin can see a chart that shows number of new users, images and events in each month. Figure 13: Admin Page - Dashboard Page 23

29 Table 11: Admin Page - Users Page Description Related Capability Pre-condition Post condition This screenshot is Users page in admin site. Admin can see list of users and filter this list. WC_3765: As an admin, I can browse users of the app and view pictures that they posted, so that I can manage users and their contents. WC_3766: As an admin, I can suspend a user, so that I can have more control over users. Admin has logged into the admin site and clicked on Users page link. 1. Admin sees list of users and fields to filter this list. 2. Admin can use Delete button to delete users. Figure 14: Admin Page - Users Page 24

30 Table 12: Admin Page - Events Page Description Related Capability Pre-condition Post condition This screenshot is Events page in admin site. Admin can see list of events and filter this list. WC_3769: As an admin, I can create an event hashtag, so that I can reserve it. WC_3770: As an admin, I can update an event, so that I can change the event's name or expiration date. WC_3771: As an admin, I can delete events with all their pictures, so that I can have more control over events. Admin has logged into the admin site and clicked on Events page link. 1. Admin sees list of events and fields to filter this list. 2. Admin can use Delete button to delete events. 3. Admin can modify events using the Modify button. 4. Admin can create events by putting a name and clicking on Create Event button. Figure 15: Admin Page - Events Page 25

31 Table 13: Admin Page - Pictures Page Description Related Capability Pre-condition Post condition This screenshot is Pictures page in admin site. Admin can see list of pictures and filter this list. WC_3767: As an admin, I can list pictures by all, location, event or report count, so that I will have more control over pictures. WC_3768: As an admin, I can delete pictures from the system, so that I will have more control over pictures. WC_3774: As an admin, I can restore pictures that has been marked inappropriate, so that I have better control over the pictures. Admin has logged into the admin site and clicked on Pictures page link. 1. Admin sees list of pictures and fields to filter this list. 2. Admin can use Delete button to delete pictures. 3. Admin can restore reported pictures using the Restore button. 4. Admin can view the location of pictures that are associated with location. Figure 16: Admin Page - Picture Page 26

32 Figure 17: Admin Page - Picture Page: Showing Location 27