CS 340 Ohio State University Client and Server Development Project
part 1 OverviewFor this milestone, you will begin developing the Python code for a couple of your dashboard widgets in an IPYNB file in Jupyter Notebook. Specifically, you will begin coding the interactive data table and the geolocation chart. You will need to make sure that both of these components receive data from the MongoDB database. You will use the CRUD Python module from Project One to help you retrieve this data and pass it to the dashboard widgets. Recall that the MVC design pattern is a separation of application logic into a stack of software components, such as MongoDB for model storage, the web server for implementing application controller logic, and the web browser for production of the view.You will continue building on this work to complete Project Two, which will be due in Module Seven.PromptYou have been asked to create a data table on the dashboard which shows an unfiltered view of the Austin Animal Center Outcomes data set. You have also been asked to add a geolocation chart to the dashboard, which will help the client visualize the data. For more details about the dash components for data tables and the geolocation chart, refer to the Module Six resources.Open the ModuleSixMilestone.ipynb file, which contains the starter code for the Grazioso Salvare dashboard. Upload this file into Apporto and open it using the Jupyter Notebook application. Be sure to review all of the starter code that you have been given. Pay special attention to the import commands and the comments describing what each section of code does.Update the code to create an interactive data table on the dashboard which shows an unfiltered view of the Austin Animal Center Outcomes data set. To populate the data onto your table, you will utilize your previous CRUD Python module, from Project One, to run a “retrieve all” query and bring in the data from MongoDB. This data retrieval will serve to access the “model” portion of your MVC pattern: the MongoDB database. Be sure to hardcode in the username and password for the “aacuser” account. Note: It may take a few minutes for the data table to fully render and display, depending on the speed of your internet connection. Tip: Be sure to consider your client when creating the interactive data table. Consider optional features that will make the table easier to use, such as limiting the number of rows displayed, enabling pagination (advanced), enabling sorting, and so on. Review the Module Six resources on data tables to help you select and set up these features.Add a geolocation chart that displays data from the interactive data table to your existing dashboard.You are being given the function that sets up accessing the data for the geolocation chart and calls the Leaflet function: update_map:def update_map(viewData):
dff = pd.DataFrame.from_dict(viewData)
# Austin TX is at [30.75,-97.48]
return [
dl.Map(style={'width': '1000px', 'height': '500px'}, center=[30.75,-97.48], zoom=10, children=[
dl.TileLayer(id="base-layer-id"),
# Marker with tool tip and popup
dl.Marker(position=[30.75,-97.48], children=[
dl.Tooltip(dff.iloc[0,4]),
dl.Popup([
html.H1("Animal Name"),
html.P(dff.iloc[1,9])
])
])
])
]
You will need to structure this function into your dashboard code by putting the correct statements in the layout. These statements are important so that your layout has a place for the geolocation chart. Here is an example statement:html.Div(
id='map-id',
className='col s12 m6',
)
You will also need to add in the correct callback routines for the geolocation chart. These will look similar to the callback routines used for user authentication and your data table. Here is an example callback routine:@app.callback(
Output('map-id', "children"),
[Input('datatable-id', "derived_viewport_data")])
Note: The Leaflet geolocation chart will show the first row of the data table by default. As long as your chart shows the location of the dog in the first row, that is sufficient for checking that your geolocation chart is set up correctly.Finally, run the IPYNB file and take a screenshot of your dashboard as proof of this execution. Your screenshot should include 1) the interactive data table populated with the Austin Animal Center Outcomes data from MongoDB and 2) your geolocation chart showing the location of the first dog in the table. Additionally, your unique identifier (created in the Module Five assignment) should also be visible in the screenshot.Guidelines for SubmissionTo complete this project, you must submit a zipped folder containing both the IPYNB file with the code for your dashboard and the PY file containing your CRUD Python Module. All code files should follow industry standard best practices, including well-commented code. You must also submit the screenshot of your dashboard as proof of your executions.part 2____________________________________________________________________________________CompetenciesIn this project, you will demonstrate your mastery of the following competencies:Apply database systems concepts and principles in the development of a client/server applicationDevelop client-side code that interfaces with databasesScenarioYou work for Global Rain, a software engineering company that specializes in custom software design and development. Your team has been assigned to work on a project for an innovative international rescue-animal training company, Grazioso Salvare. You have been made the lead developer on this project.As part of its work, Grazioso Salvare identifies dogs that are good candidates for search-and-rescue training. When trained, these dogs are able to find and help to rescue humans or other animals, often in life-threatening conditions. To help identify dogs for training, Grazioso Salvare has reached an agreement with a non-profit agency that operates five animal shelters in the region around Austin, Texas. This non-profit agency will provide Grazioso Salvare with data from their shelters.In meeting with the client, you have discovered that they look for certain profiles in dogs to train. For example, search-and-rescue training is generally more effective for dogs that are no more than two years old. Additionally, different breeds of dogs are proficient at different types of rescue, such as water rescue, mountain or wilderness rescue, locating humans after a disaster, or finding a specific human by tracking their scent.Grazioso Salvare is seeking a software application that can work with existing data from the animal shelters to identify and categorize available dogs. Global Rain has contracted for a full stack development of this application, including a database and a client-facing web application dashboard through which users at Grazioso Salvare will access the database.In the initial phases of this development, you developed a database and a Python module enabling CRUD functionality for MongoDB. For Project Two, you will complete the development of this project by coding the dashboard and the database interface logic. This will include dashboard attributes. The dashboard must be a user-friendly, intuitive interface that will reduce user errors and training time.Additionally, Grazioso Salvare has requested that the code for this project be open source and accessible on GitHub, so that it may be used and adapted by similar organizations. To that end, they have asked that you also create a README file that documents and provides instructions for reproducing the project.DirectionsWEB APPLICATION DASHBOARD (PYTHON CODE)After successful completion of previous milestones and Project One, you have created a database and established successful CRUD routines in Python for MongoDB. For Project Two, you will now create a fully functional MongoDB dashboard. This will allow the client, Grazioso Salvare, to interact with and visualize the database.To create the dashboard, you will create the different components in Python code. Dashboard web applications lend well to the MVC design pattern. Using this design pattern, the model is contained and accessed in MongoDB, the views are dashboard widgets, and the controller uses your CRUD Python module for queries as part of the interaction between components. You will also be required to test and deploy the dashboard, taking screenshots to show that each of the components executes successfully.Before developing the Python code for the dashboard, be sure to review the Dashboard Specifications Document provided by the UI/UX developer at Global Rain. This document is located in the Supporting Materials section and will provide you with examples of the different dashboard widgets you will create:Interactive options to filter the Austin Animal Center Outcomes data setA data table which dynamically responds to the filtering optionsA geolocation chart and a second chart of your choice that dynamically respond to the filtering optionsIn addition to the widgets, you have been asked to include the Grazioso Salvare logo and a unique identifier containing your name somewhere on the dashboard. A high-resolution copy of the logo is included in the Supporting Materials section.Next, you will begin developing the Python code for your dashboard. Starter code is contained in the ProjectTwoDashboard.ipynb file, linked in the What to Submit section. Start by creating a data table on the dashboard which shows an unfiltered view of the Austin Animal Center Outcomes data set. To populate the data onto your table, utilize your previous CRUD Python module from Project One to run a “retrieve all” query and bring in the data from MongoDB. Tip: Be sure to consider your client when creating the interactive data table. Consider optional features that will make the table easier to use, such as limiting the number of rows displayed, enabling pagination (advanced), enabling sorting, and so on. Note: If you completed the Module Six Milestone, you have already completed this step. Copy your code for the data table into the ProjectTwoDashboard.ipynb file.Next, you will make sure that the dashboard filter options can properly retrieve data from the database. Start by developing database queries that match the required filter functionality. Refer to the Rescue Type and Preferred Dog Breeds Table, located in the Dashboard Specifications Document, to help you construct these queries. Note: Be sure to utilize your previous CRUD Python module (a PY file) from Project One to develop these database queries. You will need to hard code in the username/password for the “aacuser” account as part of the CRUD Python module class instantiation.You must develop the controller pieces to create interactive options that allow for the selection of data based on your filtering functions(such as radio items or drop-downs). Develop these pieces in your IPYNB file, and be sure to import and use your CRUD Python module queries from Step 3. These interactive options will enable the control of other dashboard widgets, such as the data table and charts. Tip: You may choose any interactive option that you wish, such as radio items, a drop-down menu, and so on, as long as the client is able to intuitively use the interactive option to filter the data. Refer to the Dash Core Components reading from the module resources to help you set up these options.Next, you must modify or create the dashboard widgets that receive input from the interactive options and present those dynamic updates to the client. Be sure to modify or create these widgets in your IPYNB file. Specifically, you must do the following:Modify the data table you created in Step 2 so that it is an interactive data table that responds to input from the interactive options.Create charts that display data in response to updates from the data table. As outlined in the Dashboard Specifications Document, you are required to create, at minimum, a geolocation chart and a second chart of your choice.Note: If you completed the Module Six Milestone, you have already begun work on this step by creating the geolocation chart. Copy your code into the ProjectTwoDashboard.ipynb file. You will need to make sure that this chart receives updates from the interactive options.Finally, after developing all of your code, you must test and deploy the dashboard to make sure that all of your components work. To complete this step, run your IPYNB file. You must either take screenshots or create a screencast of your dashboard and widget functionality. Each of your screenshots or your screencast should contain the Grazioso Salvare logo and your unique identifier. Your screenshots or screencast must show the following:The starting state of your dashboard, which should include your widgets for the interactive options to filter data (such as radio items or drop-downs), the interactive data table, and the chartsExecutions of your dashboard, showing the widgets after each of the following data filters has been applied (four screenshots total):Water RescueMountain or Wilderness RescueDisaster or Individual TrackingReset (returns all widgets to their original, unfiltered state)You will include all of these screenshots, or your screencast, in your README file when describing the functionality of your project. These screenshots are required as they demonstrate proof of your dashboard’s functionality.README FILEGrazioso Salvare has requested documentation to accompany the code for your dashboard. This will ensure that they are able to understand the work that was completed and more easily maintain the code for this project.You have been asked to create a README file that documents the project and includes instructions for reproducing the project. Be sure to address all of the following areas:Describe the required functionality of the project. Include the screenshots or screencast taken while testing and deploying your dashboard (Step 6) as proof that you have achieved the required functionality.Describe the tools used to achieve this functionality and a rationale for why these tools were used.Be sure to explain why MongoDB was used as the model component of the development, including what specific qualities or capabilities it provides for interfacing with Python.Be sure to explain the Dash framework that provides the view and controller structure for the web application.Be sure to include links to any resources or software applications that were accessed or used.Explain the steps that were taken to complete the project.Identify any challenges that were encountered and explain how those challenges were overcome.What to SubmitTo complete this project, you must submit the following:WEB APPLICATION DASHBOARD (PYTHON CODE)Submit a zipped folder containing all of the code for your dashboard. The zipped folder should include your completed ProjectTwoDashboard.ipynb file containing the source code for your dashboard. Be sure to also include the code for the CRUD Python module (PY file) that you originally developed in Project One. All code files should follow industry standard best practices, including well-commented code.READMEYour submission should be a Word document that documents the project and provides instructions for reproducing it. In your README file, be sure to include all required screenshots (or your screencast) to demonstrate the functionality of your dashboard.Supporting MaterialsThe following resource(s) may help support your work on the project:Reading: CS 340 Dashboard Specifications Document PDFThis document was created by your UI/UX developer and details the necessary functionality of your dashboard, as well as providing you with a prototype of the dashboard layout. This document also contains the Rescue Type and Preferred Dog Breeds table, which aligns dog breeds with their use in different types of rescue. Use this table to help structure the queries for your dashboard filtering options.Image: Grazioso Salvare LogoThis high-resolution PNG file contains the Grazioso Salvare logo. Be sure to include this logo as part of your dashboard to ensure that the application is properly branded.Data Set: Austin Animal Center Outcomes SpreadsheetGrazioso Salvare has provided you with this sample data set (CSV file) of animal center outcomes. This will become the basis of your database and can be used to test the functionality of your code. This data set has been modified for the purposes of this project. Specifically, the following columns have been added: location_lat (latitude), location_long (longitude), and age_upon_outcome_in_weeks (the age of the animal, given in weeks).Reference: Austin Animal Center. (2020). Austin Animal Center Outcomes [Data set]. City of Austin, Texas Open Data Portal. https://doi.org/10.26000/025.000001Reading: CS 340 Jupyter Notebook in Apporto (Virtual Lab) Tutorial PDFThis tutorial will help you navigate the technology you will be using in this course. You will learn how to get into the Jupyter Notebook via the Virtual Lab (Apporto), as well as how to complete, save, and download your work.Reading: CS 340 Mongo in Apporto (Virtual Lab) Tutorial PDFThis tutorial will help you navigate the different Mongo tools needed for your development.Textbook: Head First PythonThis Shapiro Library textbook was designed to teach the Python programming language. Refer to this resource if you need a refresher on any Python syntax as you develop your code.Reading: Style Guide for Python CodeRefer to this style guide when developing your Python code for this project. It is important that your code follows industry standard best practices, such as including clear variable names, exception handling, and in-line comments throughout your code.Reading: Make a READMEThis reading describes the purpose behind README files, and will help you keep in mind the purpose and intended audience for your README file. You are not required to use the same sections as suggested in this reading. As a note, the examples in this article use the MD format, which is a common format for README files on GitHub. You have been asked to submit your README file as a Word document for this project.part 3_________________________________________________________________________________OverviewFor this assignment, we will be demonstrating advanced query operations. Advanced queries will allow you to analyze data in a more programmatic fashion at the database layer. Since the key-value structure of a NoSQL database closely resembles the object-oriented data structures of many programming languages, this will enhance the ease and portability of MongoDB queries. The aggregation pipeline facility of MongoDB equips us with a set of operators to enable limited set theory operations (grouping, intersections, and so on) for documents within the same collection.PromptAfter completing the textbook reading and reviewing the module resources, complete the following tasks using the MongoDB shell.Using the mongoimport tool, create the database “companies” by loading the documents found in the “companies.json” file into the “research” collection. This file is located in the “/usr/local/datasets/” directory in Apporto. Verify your load by issuing the following queries:db.research.find({"name" : "AdventNet"})db.research.find({"founded_year" : 1996},{"name" : 1}).limit(10)Provide screenshots of your statements and the results as evidence.Perform the following tasks using MongoDB queries:List only the first 20 names of companies founded after the year 2010, ordered alphabetically.List only the first 20 names of companies with offices in either California or Texas, ordered by the number of employees and sorted largest to smallest.Provide screenshots of your statements and the results as evidence.Design and implement a MongoDB aggregation pipeline to show the total number of employees by state for all companies that have offices in the United States. Provide screenshots of your statements and the results as evidence.Guidelines for SubmissionYour assignment must be submitted as a Microsoft Word document (or equivalent) with the appropriate screenshots.