Justice SWEague Presentation

A presentation of our Marvel comic database website, sweague.me

Transcript

1. Justice SWEague sweague.me
2. The Team Nick Roberts • Pagination, sort, navigation, LoL page Leslie Rice • Server, database, API, unit tests, models, search, splash page, style Nathan Hotz • About page, unit tests, presentation, planning poker Danny Chen • Wiki, Apiary doc, data scraping, unit tests Ben Holder • yUML diagram, wiki, travis, makefile, models
3. The Site
4. The Site Comics
5. The Site Comics comics
6. The Site Comics comics comics! Marvel comics, characters, and creators • Many characters and creators for each comic • Many comics for each character • Many comics for each creator
7. The Site - Uses Returning comic fans: • Can browse favorite comics, learn more about them • May discover a comic or related series they missed • Can learn who created their favorite comics Curious comic novices: • Can discover the origins and adventures of their favorite characters
8. API http://docs.justicesweague.apiary.io/#
9. The API - Item Lists http://sweague.me/api/comics • retrieves the list of comics http://sweague.me/api/characters • retrieves the list of characters http://sweague.me/api/creators • retrieves the list of creators Add ?offset=start&limit=count • retrieves list of count items, beginning at start
10. The API - Items by ID http://sweague.me/api/comic/comic_id • retrieves the comic with ID comic_id http://sweague.me/api/character/character_id • retrieves the character with ID character_id http://sweague.me/api/creator/creator_id • retrieves the creator with ID creator_id
11. The API - Searching http://sweague.me/api/search/search_terms • retrieves a list of both And and Or results for Characters, Comics, and Creators that have attributes which match search_terms
12. The API - Example http://sweague.me/api/characters? offset=0&limit=5 { "characters": [ { "description": "AIM is a terrorist organization bent on destroying the world.", "id": 1009144, "name": "A.I.M.", "number_of_comics": 30, "number_of_series": 22, "number_of_stories": 28, "Thumbnail": "http://i.annihil.us/u/prod/marvel/ i/mg/6/20/52602f21f29ec.jpg" }, …], “count”: 1385 }
13. UML Diagram
14. Tools We Used • Version control through Git and GitHub • Collaboration through Slack • Hosted on Rackspace using Carina • RESTful API documented using Apiary • Webpage GUI implemented using Bootstrap • Frontend implemented using JavaScript and React • Backend implemented using Python and Flask • Database implemented using SQLAlchemy and MySQL
15. Tour of the Site http://sweague.me/
16. Critique of SWEague Pros: • Splash Page • Responsive • Lots and lots of data • API documentation is specific Cons: • And / Or search clunky • We sort only entries in the page, rather than all entries • Pages retrieved from API calls, not formed user-side • Search API searches everything; no option to search a subset • API documentation hard to read
17. Critique of SWEague Things learned: • API doc: More specific and structured is not always more clear ◦ Unnecessary keys make query results difficult to read • Server should do less work ◦ Website should do pagination, not ask the server with an API call Puzzling challenges: • Sorting across large datasets without long loading periods • Docker unreliability
18. League of Legends Page • Uses API from SWE Hall of Fame • Computes statistics on Champions, Summoners, and Teams • Displays the results in graphs
19. Tour of the Page http://sweague.me/legends/
20. Critiques of SWE HoF Pros: • Fast, Real-time search • Consistent and unobstructive background • Search API allows for searches by detail • Results from API calls compact and easy to read Cons: • And search doesn’t verify words are together; also only highlights first word • Individual champion pages lack links • Small dataset
21. Critiques of SWE HoF Things Learned: • API doc: Giving a concrete example works well Puzzling challenges: • No links going out of Champion pages ◦ Halts flow; user experience hits a dead-end
22. Questions?