CS373 - InDangerEd

Slides

Transcript

1. InDangerEd Evan Han, Aaiyshah Mohammad, Dristi Patel, Kevin Hsiang, Maria Larina, Steven Chen
2. Members
3. What is InDangerEd? • Motivation • User stories • Pillars and attributes
4. • Phase I ◦ Designed RESTful API using Postman ◦ Implemented GUI ◦ Static website on GCP with Dummy Data • Phase 2 ◦ Scraping data ◦ Models ◦ Embedded Media • Phase 3 ◦ Filtered queries and pagination Introduction and Workflow
5. Major Data Source Embedded Google Images Data Sources
6. Backend Tools
7. Backend Design - Our models
8. Backend Unit Tests Model Unit Tests Postman Unit Tests • Response Status 200 • Response Attributes and Data Types
9. Frontend Design • Splash Page • Persistent App Bar, Logo, and Global Search Bar • Pillar Pages ◦ Toolbar with search input, select for filters and sorting/ordering ◦ Grid of entity cards (paginated) • Single-entity Views ◦ Embedded media ◦ List of related entities from other pillars w/ hyperlinks
10. Frontend Tools • React Router ◦ <App/> contains routing to each page in design ◦ useParams() for getting id of singular entities • React Hooks ◦ State hooks used to update results for current search ▪ search, sortBy, order (asc./desc.), filters, page, entities per page ◦ Material UI onChange attribute used to interact with UI elements • Axios ◦ API pulls stored at top-level of App and passed down as props to each class • Google Maps API
11. Reflection • What did we do well? ◦ Card view, responsive layout ◦ Mobile response ◦ Many-to-many model building • What can we do better? ◦ Expand database (better APIs) ◦ Automate deployment ◦ Better individual instance page layouts • What did we learn? ◦ Integrating Material UI components into React & React Router ◦ API queries and filtering ◦ ORMs ◦ GCP Deployment • What puzzles us? ◦ How to create a database through a script ◦ How to make generic components for repetitive frontend layouts ◦ Increasing security by hiding the API key in the backend
12. Critique of
13. What Impressed Us
14. Nice Touches on Frontend
16. Nice touches on Backend Usage of caching • Simple Cache • Flask-Caching package Optimize lookup times using Indexes
17. What can they do better?
18. Frontend Can't jump to middle of table Hard to Read Unit Test Results From Their Wiki: Color Saturation is used to indicate what elements of the site are functional or purely aesthetic No Pokemon Type CSS
19. Model Design: Relations CSV - Comma Separated Values move_list_id_csv: "1, 17, 19, 30..."
20. Violation of First Normal Form - A single column should store a single value Downsides : ◦ Harder to work with; requires hacky workarounds ◦ Can’t ensure that each value is the right data type: no way to prevent 1,2,3,banana,5 ◦ No way to enforce referential integrity. ◦ Can’t enforce uniqueness: no way to prevent 1,2,3,3,3,5 ◦ Can’t delete a value from the list without fetching the whole list. ◦ Can't store a list longer than what fits in the string column. ◦ Hard to count elements in the list, or do other aggregate queries. ◦ Hard to join the values to the lookup table they reference. ◦ Hard to fetch the list in sorted order. Source: https://stackoverflow.com/questions/3653462/is-storing-a-delimited-list-in-a-database-column-really-that-bad Why is storing foreign keys in a Comma Separated List bad?
21. Code Example of Fix Old Improved
22. What puzzled us?
23. Gripes as a Pokemon Fan • Missing Data ◦ Pokemon can have two types ◦ Flavor Text of Moves ◦ Pokedex Entries ◦ Stats of Pokemon ◦ Type Chart ▪ Only offense is shown, not resistances
24. InDangerEd.me