Group 4: IBD Presentation

Transcript

1. ✳ TripSmart By: Ayon Das, Cecilia Mai, Eli Zunker, Jeffrey Chen, Nathaniel Ruiz Your ultimate travel companion
2. ✳ Introduction
3. ✳ Cecilia Mai • Page Components and Features ◦ Created the layouts and styling for the Destinations, Hotels, and Points of Interest pages. ◦ Integrated pagination to manage the display of results on each page. ◦ Implemented SearchBar component for user interaction ◦ Developed functionality to highlight search terms within content for better user visibility. • Pagination Component ◦ Designed a reusable Pagination component for managing navigation through paginated content. ◦ Included dynamic page number generation and navigation controls. • Search Bar Component ◦ Developed a Search Bar component to handle user input and trigger search functionality. ◦ Ensured consistent search capabilities across multiple pages. Role: Frontend
4. ✳ Eli Zunker • Instance Page ◦ Created the instance pages using a single class ▪ The class takes in the information to be displayed and boolean values that describe which fields we're looking to display • Page Navigation ◦ Improved navigation between pages by adding links to our instance pages that take the user to the other two models • Filtering and Sorting ◦ Implemented filtering and sorting for the three model pages ◦ Sorting can be done by any attribute that is sortable (i.e. all the non-url attributes) and by ascending or descending order ◦ Added value filtering for latitude and longitude for Destinations and rating and total rating for Hotels and Points of Interest Role: Frontend
5. ✳ Ayon Das • Design of the About Page ◦ Utilized Bootstrap components to create a clean and organized layout. ◦ Included individual GitLab data for each team member, displayed in uniform Bootstrap cards. ◦ Implemented dynamic updates to reflect changes in data, ensuring up-to-date information. • Implementation of Pagination on the Backend ◦ Developed backend logic using Flask to handle pagination requests efficiently. • Use of RESTful API ◦ Utilized RESTful API endpoints for CRUD operations on destinations, hotels, and points of interest. ◦ Implemented secure API routes with proper authentication and authorization mechanisms. ◦ Provided detailed API documentation to facilitate easy integration with the frontend and other services. • Aggregation and Structuring of Data ◦ Aggregated data from various sources, including Google Maps APIs and Wikipedia API. ◦ Implemented data validation and cleaning processes to ensure data integrity and consistency. Role: Backend
6. ✳ Jeffrey Chen • API instance collection ◦ Employed RESTful API to collect instances for each of the three models ◦ Specified various keywords for Google Maps Places API to filter API results to provide detailed information pertinent to the project data models. • GCP server setup and deployment ◦ Created two projects in GCP to deploy frontend and backend separately ◦ Linked a custom website domain “tripsmart.me” to the frontend project via DNS records verification ◦ Implemented app.yaml files to define the project runtime environment and configuration settings ◦ Deployed the frontend and backend • SQL database ◦ Designed a PostgreSQL database hosted on GCP to store data instances ◦ Created database tables for each of the three models and defined relationships to link the data models ◦ Utilized SQLAlchemy to connect the database to the backend Role: Backend
7. ✳ Nathaniel Ruiz • Underlying RESTful API with Postman ◦ Designed a RESTful API for our website using Postman as a design platform ◦ Programmed paths for our 3 models in the backend: Destinations, Points of Interest, and Hotels ▪ Get All Instances (matching query parameters) ▪ Get One Instance ▪ Get Number of Instances ◦ Created unit tests for each of the paths using Postman ◦ Formatted the Postman documentation to be clear and concise • Front-end Visualization for RESTful API ◦ Developed a front-end display of our API results in a simple, plaintext JSON format ◦ Added error results for users when attempting to access invalid API paths Role: Frontend/Backend
8. ✳ Demonstration
9. ✳ Navigation
10. ✳ Navigation Cont.
11. ✳ Navigation Cont.
12. ✳ Search
13. ✳ Self Critique
14. ✳ Self Critique • What we did well ◦ The website looks clean and is easy to navigate ◦ Website has a consistent visual theme ◦ Everything loads relatively fast ◦ Data is organized relatively well • What we learned ◦ Overcame challenges related to API limitations and data integration by pivoting to more suitable APIs. ◦ Developed problem-solving skills by finding and implementing effective solutions to technical issues. ◦ Learned to make the frontend interact with the backend using Axios for HTTP requests.
15. ✳ Self Critique Cont. • What we can do better ◦ We could add country values to the destinations so we could then sort and filter by country ◦ The filtering doesn't entirely work for non-Chrome browsers ◦ Perhaps by using the latitude and longitude coordinates, we could further use the Google Maps API or something similar to offer a plotting for each destination in the instance page. ▪ We could then also add latitude and longitude to hotels and points of interest to add the same feature. ◦ Better management of GCP credits. We used APIs made by Google and stored 550+ instances in the SQL database, which rapidly consumed credits. ◦ The /api path could have displayed information about how to use the API without having to visit the collection • What puzzles us ◦ Were having some issues with some website functionality not fully working on anything but Chrome ▪ At first, our instance and navigation pages would not fully render all information needed in order to traverse properly
16. ✳ Other Critique
17. ✳ Other Critique: Group 5 FinDB Data Visualizations Sector, ex: Technology Industry, ex: Consumer Electronics Stock, ex: Apple Data Layout Data Hierarchy Sortable Attributes
18. ✳ Other Critique: Group 5 FinDB Cont. • What'd they do well ◦ Splash Page ▪ The splash page model is very well made and interesting to look at ◦ Instance Pages ▪ The stock price history graph on the instance page is very well made, allowing for clear visualization of stock performance and is interactable, showing the price marks at each day ◦ Aesthetic ▪ The aesthetics of the website match the topic well • What'd we learn ◦ One thing we picked up was the idea of visualizing our data, like this group does with its stock history chart
19. ✳ Other Critique: Group 5 FinDB Cont. • What they can do better ◦ Data ▪ A majority of the instances don't have a sector or industry values ▪ Very nitpicky but there's a record that has every value as N/A ◦ Filtering ▪ Could add filtering by attribute values for all 3 models vs. just having categorical filtering ▪ Some of the categories result in 0 values when filtered ▪ Another minor nitpick, but after filtering there's no reset button other than refreshing the page/pressing the search bar • What puzzles us about their website ◦ The model on the splash page
20. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik ✳ Thanks