UCD Eats. Applications User Guide May Josh Ketellapper, Sharon Gong, Tyler Whitman, William Nguyen

Transcription

1 UCD Eats Applications User Guide May 2015 Josh Ketellapper, Sharon Gong, Tyler Whitman, William Nguyen

2 Contents 1. Preface 2. Overview 3. Installation 4. Functionality 4.1 Finding a Food Item Dining Commons Categorized Menus Searching in Menus 4.2 Customizable Meals 4.3 Nutrition Facts 4.4 Logging to Fitbit 4.5 Coho Database Upload Website 4.6 DC Menu Website Scraper 5. Troubleshooting 6. Frequently Asked Questions What are the proportions of the foods represented by the nutrition information in the app? Is a Fitbit account required? How do I make a Fitbit account? Where does the calorie information come from? Can I sync with providers other than Fitbit? Will more restaurants ever be added? 7. Contact Information 8. Index 9. Appendix 9.1 Design Technology Background Design Goal Architectural Choices and Corresponding Pros and Cons Parse by Facebook Database as a service Ionic Framework Hybrid mobile framework UCD Eats: Applications User Guide, May

3 AngularJS Javascript framework Fitbit REST API Selected Architecture Implementation Notes 9.2 Testing Summary of Product to be Tested Resources Required for Testing Packaging, Building, Configuration and Option Process for Defect Reporting & Repair Functional Testing Plan Non Functional Testing Plan Test Cases 9.3 Additional Documentation UCD Eats: Applications User Guide, May

4 1. Preface This user guide is intended for developers involved in the future development of the UCD Eats mobile app. The topics discussed include where to find the code, what the code entails, and the vision for the app. Additional information regarding the groups affiliated with this project and additional documentation for the technology used may be found in the appendix. UCD Eats: Applications User Guide, May

5 2. Overview Previously, UC Davis Coffee House, henceforth referred to as the CoHo, had inefficiently communicated nutrition facts for the foods they offer to their customers. To educate and raise awareness of the nutrition content, this application was created such that it allows its users to access this information with ease. This application then expanded with other vendors as well, including the three on campus Dining Commons: Segundo, Tercero and Cuarto. This application s intended audiences are the CoHo and DC s guests, which includes students, faculty, and visitors. This application is planned to be released through the Google Play Store and ios App Store. With this application, the user can view everyday foods from the CoHo or foods offered that particular day from the Dining Commons. Besides seeing the menu, the user is able to search for a particular food and view its nutrition content. If the user wishes, he can log the nutrition information to a third party fitness/nutritional logging application. Currently, we extended this logging feature to the Fitbit application. Besides the UCD Eats application, CoHo administrators have access to a data upload tool to import or update recipes. The Dining Commons data is collected through a web scraper. UCD Eats: Applications User Guide, May

6 3. Installation To set up the development environment, the following tools listed below are needed. Node.js and npm Cordova Ionic Framework Parse by Facebook Node.js and npm may be obtained from Cordova and the Ionic Framework may be obtained by running the following in Terminal after the installation of node.js. $ sudo npm install g cordova $ sudo npm install g ionic Note that the repo is private. To gain access, please notify one of the developers. To obtain the UCD Eats repo, run $ git clone From now on, any updates of the repo can be obtained by running the following inside the SeniorDesign directory. $ git pull To build and run the UCD Eats application, run the following inside the SeniorDesign directory. $ ionic serve lab This UCD Eats mobile web app should open up the Ionic lab in a web browser. The Ionic lab provides a live rendering of the mobile web app on iphone and Android phone mock ups. If no tab opens up, first check to see if Ionic prompts for user input. If so, address any issues (e.g. multiple addresses available). Otherwise, the website should be accessible via the dev server link listed in the print out provided by Ionic. To access the Ionic lab, append /ionic lab to the dev server link. To view the database, please create an account with Parse, at and provide the username to any of the developers in order to gain access. UCD Eats: Applications User Guide, May

7 4. Functionality 4.1 Finding a Food Item The UCD Eats app uses a series of menus to help users to easily find a food item. There are a total of three menus: the restaurant menu, vendor menu, and food menu. Each of these menus are alphabetized. After selecting a specific food item on the food menu, users will be presented with the nutrition facts page for that food item Dining Commons Categorized Menus For the Dining Commons, the food items are categorized by the mealtime (i.e. breakfast, lunch, dinner, or late night) that the food items are available. To filter the food items by the mealtime, select the appropriate tab. Going from left to right, the tab filters are breakfast, lunch, dinner, and late night. Selecting a tab will filter the food items list with the food items available for that mealtime. For the Dining Commons, this list will include a daily update to provide the most current meal options available. UCD Eats: Applications User Guide, May

8 4.1.2 Searching in Menus For vendors with a long food menu, searching can be performed to save on scroll time. Users may select the search icon on the upper right hand corner of the food item page, and a search page will appear where users may type in the food item name. Food item names that match the given search text will appear, allowing users to select the food items they are searching. 4.2 Customizable Meals The UCD Eats app allows customizable meals for the various customizable meals offered at the CoHo. A customizable food item will have a Build Your Own section in its food item page with selectable options. Upon selecting the available options the nutrition facts for that meal will be updated automatically to show the user the cumulative nutrients of that custom ordered food item. UCD Eats: Applications User Guide, May

9 4.3 Nutrition Facts The nutrition facts available for the food items in the UCD Eats app follow the usual nutrition facts label found on most food items. Below are the nutrition categories with the units the app uses for that category. Nutrition Units Calories Total Fat Saturated Fat Trans Fat Cholesterol Sodium Total Carbohydrates Dietary Fiber Sugars Protein Vitamin A Vitamin C Calcium Iron kcal g g g mg mg g g g g % DV % DV % DV % DV 4.4 Logging to Fitbit The application has the ability to log food items to a user's Fitbit account. In order to log the foods eaten into Fitbit, users must first navigate to the food they want to log. Once the user is on the food s page, the share icon in the top right corner of the UCD Eats app can be tapped to open the share menu. From the share menu, the user must tap on the Fitbit logo, and a browser page will be opened for the user to enter their Fitbit account credentials. After entering credentials the user must accept the permissions and then will be redirected back to the foods page in the UCD Eats app and presented with the message Food Logged!. This indicates that the food was successfully logged in the Fitbit account. After logging in with the user s credentials for the first time, they will no longer be needed. UCD Eats: Applications User Guide, May

10 4.5 Coho Database Upload Website The CoHo database upload tool allows a user to choose a vendor and upload a csv. The tool removes the old data and updates it with the new data. This allows non technical authorized users to update the database in a convenient way. 4.6 DC Menu Website Scraper In order to keep the DC menu up to date we made a node server script that can be run to scrape the DC menu and all nutritional data from the Dining Common menu online. This is the only access to this information and thus it will have to be run daily at the very minimum. UCD Eats: Applications User Guide, May

11 5. Troubleshooting A food failed to sync to my Fitbit Account. When presented with an error while syncing with a Fitbit account we ask that the user please repeat the syncing process. If the problem persists, check the internet connection and make sure the Fitbit account is still active and the correct credentials were entered via Fitbit.com. If there are still issues related to syncing, contact the developers. The app fails to display information. The UCD Eats app requires an active internet connection. Please make sure the device is connected through a carrier s wireless network or is connected through wifi. If the application is still not loading, check to make sure the connection is not down, and as a last resort the developers. The app feels very slow on my Android Device. If the application is running slowly on an Android device, this may be due to the power of the phone the app are running it on. We are working hard to provide a cross platform and fully compatible app for everyone. In our testing we noticed some of the older Android devices suffered from performance issues while running the app. There is currently no fix except keeping the app up to date as we work to resolve the issue. DC food data is not updating. If the DC data becomes outdated it is most likely because the DC made changes to their website or our server cron job failed to run. To debug this issue first look to make sure the DC s menu online is to date. If all look good, look at the script in the parser fold to find out why it is not being run or broken. Coho upload tool is not working. This issue is most likely because the CSV files format was changed. Compare the new file with example files in the repository. UCD Eats: Applications User Guide, May

12 6. Frequently Asked Questions 1. What are the proportions of the foods represented by the nutrition information in the app? All formation in our app represents one serving of the items seen. 2. Is a Fitbit account required? No, a Fitbit account is not required to use our application. 3. How do I make a Fitbit account? A Fitbit account can be made on Fitbit.com or from our app after clicking the fitbit logo in the share menu of the Food page. 4. Where does the calorie information come from? All calorie information comes directly from the restaurants and services that prepare and serve the foods. If any inconsistency is found please any of the developers and notify them of the situation. 5. Can I sync with providers other than Fitbit? We hope to provide more partners in the future. 6. Will more restaurants ever be added? We are working our best to get as much done as possible and see the number of restaurants as a priority. We hope to cover all of the UC Davis on campus dining in the future. UCD Eats: Applications User Guide, May

13 7. Contact Information The developers may be contacted by . Contact Josh Ketellapper Sharon Gong Tyler Whitman William Nguyen UCD Eats: Applications User Guide, May

14 8. Index AngularJS 15, 24 Build Your Own 7 Coffee House 4 Developer Contacts 2 Dining Commons 4, 6 Mealtimes 6 Fitbit 8 10 Account 8 Logging 8 Issues 10 Functionality 6 9 Build your own 7 Categories 6 Logging to Fitbit 8 Searching 7 Installation 5, 18 AngularJS 5, 18 Cordova 5, 18 Git 5, 18 GitHub 5, 18 Ionic Framework 5, 18 Node.js 5, 18 Ionic Framework 5, 18, 24 Nutrition Facts 8 Parse Database 5, 9 Dining commons Scraper 9 Upload tool 9 Questions 11 Troubleshooting 10 Upload Tool 9 UCD Eats: Applications User Guide, May

15 9. Appendix 9.1 Design Technology Background As a mobile web app, our program will be accessible on any device connected to the Internet including smartphones and computers. It will be coded in HTML, CSS, and JavaScript, require access to a database of food items and nutrition facts, and have the ability to push nutrition data to a third party nutrition monitoring app. The latter feature will require pre existing APIs to be able to push information from our webapp to the nutrition monitoring app Design Goal Our mobile web app will consist of a paginated interface, taking users through a series of lists to find the food item they're interested in buying and giving them the food's nutrition information. The pages in order are the restaurants/locations, vendors, menu, and nutrition information. The first three pages will be an alphabetically ordered list that lets users pick where and what they are eating. The final page, the nutrition information page, will show information about the ingredients that went into making the food and the nutrition information for the food items. The nutrition information includes what is usually expected from a nutrition label, such as calories, sugar, fat, fibers, vitamins, etc. In addition to the nutrition information, there will be a button that allows users to push the nutrition information to a nutrition monitoring app such as Fitbit. To allow the CoHo to easily update the menu and nutrition facts, there will also be a page that allows an authorized user to upload data. Our database will then update with the given information to bring up to date information to the user Architectural Choices and Corresponding Pros and Cons For our application we are using various tools available to make our application the best we possibly can. We are creating HTML5/CSS/Javascript hybrid mobile applications. One perk to this is that we are able to package them using phonegap as both an ios and Android application. Along with this, using the Ionic Framework we are able to create many of the visual appearances of an app with HTML5 very easily. One of the biggest drawbacks is performance. For our application, only implementing simple lists and pages, the performance should be enough to feel like a native application. UCD Eats: Applications User Guide, May

16 Parse by Facebook - Database as a service This is what powers our entire backend. Using the javascript API built by Parse we have simple access to a scalable and secure database. Along with this it will always be live and will not require any maintenance by us. It is also free to use as long as we stay under 30 requests per second. Ionic Framework - Hybrid mobile framework Ionic is a hybrid mobile framework built to create HTML mobile applications and package them as native apps. This tool makes it simple to create tabs, menus, mobile animations, lists, and various other aspects of native apps, all using HTML, Javascript, and CSS. The only flaw to using this framework is that it is frequently updated because it is in beta, so in order to stay on top of the releases and have the most stable product we will have to keep it up to date. AngularJS - Javascript framework This framework is a javascript framework that allows for better declaration of dynamic views in web applications. The resulting environment is extraordinarily expressive, readable, and quick to develop. This framework goes hand in hand with Ionic, and allows us even more flexibility in creating our application using HTML. Fitbit - REST API We will use the Fitbit REST API in order to push what our users have eaten to the Fitbit nutritional logging application. Using this API, created and maintained by Fitbit, we will be able to log foods users eat, create foods for them to easily add again, and manage any nutritional logging with the Fitbit app necessary. Using this API we can create a simple button users can simply tap, allowing them to log foods they have eaten at the CoHo Selected Architecture Our application will use the Ionic Framework and AngularJS to code the front end of the website and will connect to the Parse database on the back end. The Parse database will store the locations, vendors, menu items, and nutrition information necessary for our web app Implementation Notes The flowchart below illustrates the details beyond our chosen architecture. When users initially opens the application, they can select their restaurant, vendor, menu, and food item they wish to view more nutritional information on. Once the food item is found, users may choose to export the nutritional information to another third party application, like Fitbit. This frontend view utilizes the Ionic Framework to create a mobile application look. Angular allows all the code for manipulating the view, or html, in a controller. All code that talks to that UCD Eats: Applications User Guide, May

17 database will be put in a service. The controllers for each page will talk to the services to get the needed data for a specific page. For example: Menu HTML Menu Controller Restaurant Service Parse API Database The application will be packaged with PhoneGap so that it can be delivered as a website, Android, and ios application. UCD Eats: Applications User Guide, May

18 Database Table Relations (The way values in our database relate to each other) Restaurants relates to many vendors, if no vendors it relates directly to food Each vendor is related to the food they serve Each food item holds nutritional information UCD Eats: Applications User Guide, May

19 9.2 Testing Summary of Product to be Tested UCD Eats is a mobile web app that will be used by customers of the UC Davis Coffee House to search up nutritional information of a meal and log the information on their FitBit. This mobile web app features menus to search for a food vendor and the food item in question nutrition information page build your own meal feature push nutrition information to FitBit Resources Required for Testing UCD Eats requires the following hardware and software listed A computer with a web browser Node.js and npm Cordova Ionic Framework Node.js and npm may be obtained from Cordova and the Ionic Framework may be obtained by running the following in Terminal after the installation of node.js. $ sudo npm install g cordova $ sudo npm install g ionic Testing is estimated to take around 0.5 hours Packaging, Building, Configuration and Option Once the environment has been set up, the UCD Eats mobile web app can be tested. Note that the repo is private. To gain access, please notify one of the developers. To obtain the UCD Eats repo, run $ git clone From now on, any updates of the repo can be obtained by running the following inside the SeniorDesign directory. $ git pull To build and run the UCD Eats application, run the following inside the SeniorDesign directory. $ ionic serve lab UCD Eats: Applications User Guide, May

20 This UCD Eats mobile web app should open up the Ionic lab in a web browser. The Ionic lab provides a live rendering of the mobile web app on iphone and Android phone mock ups. If no tab opens up, first check to see if Ionic prompts for user input. If so, address any issues (e.g. multiple addresses available). Otherwise, the website should be accessible via the dev server link listed in the print out provided by Ionic. To access the Ionic lab, append /ionic lab to the dev server link Process for Defect Reporting & Repair Any Defects found can be reported through our Github repository issue tracking. Steps to report an issue are as follows: 1. Navigate to our repository and log in to an account with granted permissions (please let us know your Github username if you need access). 2. After logging in, click on the issues tab found on the right hand side of the page. 3. Click the green New Issue button and fill out the requested information. 4. Submit your issue and a developer will get back to you on it. All updates on reported issues will be sent through the comments attached to your issue you created in GitHub. After a fix has been made for the issue, we will push a new commit and tab that commit in the comments letting you know it is finished, you can then test the issue to verify it is fixed and close it on Github. If it is not fixed, reopen the issue and leave a comment to let us know what is wrong Functional Testing Plan User Identification User Goal Test ID Estimated Time (Devs) Estimated Time (Testers) Standard User Standard User Standard User Admin User Open the application in the Coho and have the ability to view the menu Open the application in the Coho and have the ability to view nutrition data Open the application in the Coho and have the ability to view the menu and sync meals with your fitbit account Ability to control the backend and meal information via an admin control panel website 1 1 hour 1 hour 2 1 hour 1 hour 3 1 hour 1 hour 4 1 hour 1 hour UCD Eats: Applications User Guide, May

21 UCD Eats: Applications User Guide, May

22 9.2.5 Non-Functional Testing Plan Category Sub Category Specific goal Use Case Estimated Time (Devs) Estimated Time (Testers) Performance Response Time under load App performs well during use Make sure the application performs well with normal use. Eg scrolling speed, page transitions, and syncing 2 hours 2 hours Fault Testin g Network Testing App doesn't crash when there is no network connection Test that the application doesn't crash when there is no available internet connection by turning off wifi and data in the Coho and using the application 1 hour 1 hour Fault Testin g Fitbit Sync Testing Meal data is synced to all fitbit accounts Verify that you are able to sync meals with your fitbit account and they are reflected in the fitbit app and website by syncing meals in the Coho 1 hour 1 hour Fault Testin g Coho Menu Testing Users are able to read the nutritional menu Test that you are able to view menu items for the Coho vendors and can see nutritional information for the items while using the app in the Coho 1 hour 1 hour UCD Eats: Applications User Guide, May

23 9.2.6 Test Cases TEST CASE 1 1. User Type: Standard (CoHo Customer) 2. Goal: Access a Vendor s menu 3. Initial Conditions/Required Resources/Configurations: Have the application downloaded on their phone 4. Test Script: a. User Action 1: Opens application on their phone b. Expected Response 1: Application opens and allows user to select a Restaurant c. User Action 2: Selects Coffee House d. Expected Response 2: A list of vendors from the selected Restaurant appears and allows user to specify a vendor e. User Action 3: Selects Vendor f. Expected Response 3: A list of foods from the selected Vendor appears and allows user to specify a food item g. Expected Response indicating Completion: A list of foods from the selected Vendor appears 5. Checking for correct completion (for function test cases) or Measuring degree of compliance (for some non function cases, e.g., measured response time): The list of food items matches the offerings from the vendor. TEST CASE 2 1. User Type: Standard (CoHo Customer) 2. Goal: Access a food s nutrition page 3. Initial Conditions/Required Resources/Configurations: Have the application downloaded on their phone 4. Test Script: a. User Action 1: Opens application on their phone b. Expected Response 1: Application opens and allows user to select a Restaurant c. User Action 2: Selects Coffee House d. Expected Response 2: A list of vendors from the selected Restaurant appears and allows user to specify a vendor e. User Action 3: Selects Vendor f. Expected Response 3: A list of foods from the selected Vendor appears and allows user to specify a food item g. User Action 4: Selects Food h. Expected Response 4: A nutrition page from the selected Food appears and the user is allowed to log the information to a supported third party application UCD Eats: Applications User Guide, May

24 i. Expected Response indicating Completion: A nutrition page from the selected Food appears 5. Checking for correct completion (for function test cases) or Measuring degree of compliance (for some non function cases, e.g., measured response time): The nutrition page provides correct values for the food item. TEST CASE 3 1. User Type: Standard (CoHo Customer) 2. Goal: Export nutrition data to supported 3rd party application 3. Initial Conditions/Required Resources/Configurations: Have the application downloaded on their phone, have the Fitbit application downloaded on their phone and registered account 4. Test Script: a. User Action 1: Opens application on their phone b. Expected Response 1: Application opens and allows user to select a Restaurant c. User Action 2: Selects Coffee House d. Expected Response 2: A list of vendors from the selected Restaurant appears and allows user to specify a vendor e. User Action 3: Selects Vendor f. Expected Response 3: A list of foods from the selected Vendor appears and allows user to specify a food item g. User Action 4: Selects Food h. Expected Response 4: A nutrition page from the selected Food appears i. User Action 5: Clicks Log Food to export nutrition data to a 3rd party application j. Expected Response 5: A pop up with a list of supported applications appear k. User Action 6: Selects an application to sync the nutrition data with l. Expected Response indicating Completion: Successfully logged CoHo s data to a third party application 5. Checking for correct completion (for function test cases) or Measuring degree of compliance (for some non function cases, e.g., measured response time): FitBit app has the correct information logged for the food item. TEST CASE 4 1. User Type: Admin (CoHo Management) 2. Goal: Upload spreadsheet of new nutrition data to update database and have the changes reflect the application 3. Initial Conditions/Required Resources/Configurations: Have the application downloaded on their phone, has spreadsheets to upload, has access to admin page to upload spreadsheets 4. Test Script: a. User Action 1: Opens link to admin page UCD Eats: Applications User Guide, May

25 b. Expected Response 1: Application opens and allows user to select a spreadsheet from their file system to upload c. User Action 2: Selects Choose a File button d. Expected Response 2: User s local file system directory pops up and prompts user to select a file e. User Action 3: Chooses a file and clicks Select f. Expected Response 3: File is successfully uploaded g. Expected Response indicating Completion: User can verify successful integration of new nutrition data by going on the application and searching for the particular food item 5. Checking for correct completion (for function test cases) or Measuring degree of compliance (for some non function cases, e.g., measured response time): Information on the database matches the information imported from the imported file. UCD Eats: Applications User Guide, May

26 9.3 Additional Documentation The UCD Eats mobile app uses the Ionic Framework, AngularJS, and Facebook Parse database. Documentation for these software can be found on their website in the links provided below. Ionic Framework: AngularJS: Facebook Parse: UCD Eats: Applications User Guide, May