Final-Project_zuyicai

Zuyi Cai

Project Description

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.

How to run

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:

How to use

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!

Routes in this application

First route(`/`)

/ -> 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.

Second route(`/all_info`)

/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.

Third route(`/parks`)

/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.

Fourth route(`/plan`)

/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":

Fifth route(`/query_example`)

/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:

How to run tests

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:

In this repository:

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

Code Requirements for Grading

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.

General

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

Flask Application

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

Additional Components (at least 6 required)

Submission

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!

zuyicai / final-project_zuyicai Goto Github PK