Zuyi Cai
My Project is designed for people who want to search detailed information of National Parks in the US and who want to get a straightforward instruction of all parks. In my Flask application, users are able to get identical park travel plan determined by their own interests, which means they can view the information for specific park and make interaction with the application in order to get the result satisfied their demands.
- Anaconda installed
- Open your terminal window!
cd
to the place where you want this project to go. - This repository cloned to somewhere in your computer (the place).
git clone <git url>
cd
into where the project lives- Attention!!! Before you run the application, please change the path of "chromedriver" in the code file "SI507project_tools.py" to the place you installed "chromedriver" in. Actually I include "chromedriver" in my repository, so you just need to change the path to the place where you clone the repository. For example, if you clone my repo to "/Downloads", please change the path as below:
chromedriver = "/Users/<user_name>/Downloads/Final_Project_zuyicai/chromedriver"
Please change the line 295 in "SI507project_tools.py" with above path. Just like the following picture(This picture shows that I saved the "chromdriver" under the "Downloads" directory):
- Because I need "chromedriver" installed and ran appropriatly to make sure the fifth route in Flask running well! If it doesn't work, please install chromedriver by https://chromedriver.storage.googleapis.com/index.html?path=73.0.3683.68/ , choose the version with your computer and install it into the directory you cloned to, then change the line 295 in "SI507project_tools.py" to the path of "chromedriver" as well. Remember to save your change! After this step, go ahead!
- With all changes and installation steps done, create a virtual environment for it
virtualenv env
- Activate the virtual environment
$ source <projectname>-env/bin/activate # For Mac/Linux...
$ source <projectname>-env/Scripts/activate # For Windows
(finalproject-env) $ # you've succeeded if you see this after!
- install all requirement
pip install -r requirements.txt
Deactivate
- Just run the program!
python SI507project_tools.py
- Check out what’s happening in your terminal window!
- And the place where you cloned to will create the following files:
- The file called "states_info.csv" looks like:
- The file called "topics_info.csv" looks like:
- The file called "activities_info.csv" looks like:
- And the created database contains five tables: National_Park, States, Topics, Types and Activities.
- This picture is for Activities:
- This picture is for National_Park:
- This picture is for States:
- This picture is for Topics:
- This picture is for Types:
- You may need first loading http://localhost:5000/ [also the first route] to make the application running.
- Then you can either go to other routes by the links on the home page or type the URLs of other four routes to go to other pages.
- Be careful about the fifth route because it requires you to make a plan by route four(
/plan
) before then follow the instruction to go to the fifth route. - Please follow the instruction listed on the page and listed following to make sure the application running well. Enjoy it!
/
-> The home page of the Flask application. This page is a form that users need to input their name, email and password to register(used a new module called "wtforms"). After they submit the information and click the button they will directly go to the '/all_info' page.
- In this page, you will see a following picture. And this is a reusable form that users can input their information to register, once they register successfully, they will be directed to the second route without typing in the URL bar. And I have links in the views of the Flask application page/s that allow a user to navigate the application and view all its routes without typing in the URL bar (after first loading http://localhost:5000/ [this first route] with the application running).
- The following picture is what users will see after they register successfully.
/all_info
-> In this route, the application shows all parks with their type, all topics with their values, all activities with their values and all states with their values. Here I used the JavaScript files in the application that affect the view in html template.
- Once you submit successfully in the home page or you type the url of second route or you click the link of second route, you will be directed to all_info page. And you will see the following picture:
- And you will see this page looks like the following picture, it shows all National_Park names with their type.
- And this following picture shows all topics with their values.
- And this following picture shows all activities with their values.
- And this following picture shows all states with their values.
/parks
-> The detailed information of all parks including name, type, location, description and states. Here I also used the JavaScript files in the application that affect the view in html template, and I used table in the html in order to make the parks information in order.
- You will see the following picture once you go to this route. And here I used a table to show the parks information.
/plan
-> In this route, there is an instruction telling users how to input values into the pop-up Dialog Box. In this way, the application will give users a url. Once users input the url, they will directly go to the next route/query_example
to get their searching results.
- This picture shows the instruction of this route, please follow this instruction while inputting values:
- Once you click the "Enter Value" button, you will see the following picture. First please input the value of you selected state (here I choose "UT")
- Secondly, please input the value of your selected activity(here I choose "31")
- Finally, please input the value of your selected topic(here I choose "6")
- Then you will get the URL of your selection result.
- The following pictures are another example with state value="MI", activity value="3", topic value="9":
/query-example
-> The detail of a user's selection.(e.g.http://127.0.0.1:5000/query-example?state=AK&activity=3&topic=4) After users run this route, the original website including the parks satisfied their inputs and the clear information will automatically show up(used a new module called "selenium"), and the flask page will show the result text and parks' name of the searching results.
- You will see the following picture in the flask page:
- Followed by the example given in fourth route(state value="UT", activity value="31", topic value="6"), once the user input the given url, they will see a pop-up website like this, this website id the original website of user selection. Here please wait with patience because it usually need 10 seconds to make everything in order.
- And the flask page will give the result like this(Because there is no park satisfying this selection):
- Followed by the example(state value="MI", activity value="3", topic value="9"), users will see:
- And the flask page will give the result like this:
- And if you have a selection like state value="MI", you will see the following result:
cd
into where the project lives, run the "SI507project_tools.py" First
python SI507project_tools.py
- Then just run the "SI507project_tests.py" file to see whether this program going well
python SI507project_tests.py
- Then you will see the following picture:
- Templates
- index.html
- all_info.html
- parks.html
- plan.html
- query_example.html
- SI507project_tools.py
- SI507project_tests.py
- parks.csv
- advanced_expiry_caching.py
- chromedriver
- README.md
- requirements.txt
- db.final
- parks_collection.db
Please check the requirements you have accomplished in your code as demonstrated.
- This is a completed requirement.
- This is an incomplete requirement.
Below is a list of the requirements listed in the rubric for you to copy and paste. See rubric on Canvas for more details.
- Project is submitted as a Github repository
- Project includes a working Flask application that runs locally on a computer
- Project includes at least 1 test suite file with reasonable tests in it.
- Includes a
requirements.txt
file containing all required modules to run program - Includes a clear and readable README.md that follows this template
- Includes a sample .sqlite/.db file
- Includes a diagram of your database schema
- Includes EVERY file needed in order to run the project
- Includes screenshots and/or clear descriptions of what your project should look like when it is working
- Includes at least 3 different routes
- View/s a user can see when the application runs that are understandable/legible for someone who has NOT taken this course
- Interactions with a database that has at least 2 tables
- At least 1 relationship between 2 tables in database
- Information stored in the database is viewed or interacted with in some way
- Use of a new module
- Use of a second new module
- Object definitions using inheritance (indicate if this counts for 2 or 3 of the six requirements in a parenthetical)
- A many-to-many relationship in your database structure
- At least one form in your Flask application
- Templating in your Flask application
- Inclusion of JavaScript files in the application
- Links in the views of Flask application page/s
- Relevant use of
itertools
and/orcollections
- Sourcing of data using web scraping
- Sourcing of data using web REST API requests
- Sourcing of data using user input and/or a downloaded .csv or .json dataset
- Caching of data you continually retrieve from the internet in some way
- I included a link to my GitHub repository with the correct permissions on Canvas! (Did you though? Did you actually? Are you sure you didn't forget?)
- I included a summary of my project and how I thought it went in my Canvas submission!