{this.props.changeRating(this.props.id, num)}}
17 | className={`star ${rating >= num ? 'active':''}`}
18 | />
19 | ))}
20 |
{deleteBook(id)}} />
21 |
22 | )
23 | }
24 |
25 | render() {
26 | let {title, author} = this.props;
27 |
28 | return (
29 |
30 |
33 |
34 | {author}
35 |
36 | {this.createStars()}
37 |
38 | );
39 | }
40 | }
41 |
42 | export default Book;
43 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/components/FormView.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import $ from 'jquery';
3 |
4 | import '../stylesheets/FormView.css';
5 |
6 | class FormView extends Component {
7 | constructor(props){
8 | super();
9 | this.state = {
10 | title: "",
11 | author: "",
12 | rating: 1,
13 | search: '',
14 | }
15 | }
16 |
17 | submitBook = (event) => {
18 | event.preventDefault();
19 | $.ajax({
20 | url: '/books', //TODO: update request URL
21 | type: "POST",
22 | dataType: 'json',
23 | contentType: 'application/json',
24 | data: JSON.stringify({
25 | title: this.state.title,
26 | author: this.state.author,
27 | rating: this.state.rating,
28 | }),
29 | xhrFields: {
30 | withCredentials: true
31 | },
32 | crossDomain: true,
33 | success: (result) => {
34 | document.getElementById("add-book-form").reset();
35 | return;
36 | },
37 | error: (error) => {
38 | alert('Unable to add book. Please try your request again')
39 | return;
40 | }
41 | })
42 | }
43 |
44 | handleSearch = (event) => {
45 | event.preventDefault();
46 | this.props.searchBooks(this.state.search);
47 | }
48 |
49 | handleChange = (event) => {
50 | this.setState({[event.target.name]: event.target.value})
51 | }
52 |
53 | render() {
54 | return (
55 |
86 | );
87 | }
88 | }
89 |
90 | export default FormView;
91 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0037-API-Development-and-Documentation-exercises/ec53547028737a45c40c5c5d8bf113610df9f866/6_Final_Starter/frontend/src/cover.jpg
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './stylesheets/index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(
, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 |
14 |
15 | //"start": "HOST='127.0.0.1' PORT='5000' react-scripts start",
16 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/star-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0037-API-Development-and-Documentation-exercises/ec53547028737a45c40c5c5d8bf113610df9f866/6_Final_Starter/frontend/src/star-black.png
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0037-API-Development-and-Documentation-exercises/ec53547028737a45c40c5c5d8bf113610df9f866/6_Final_Starter/frontend/src/star.png
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/stylesheets/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | display: flex;
3 | flex-direction: row;
4 | margin: 35px 10px 0px;
5 | }
6 |
7 | div#main-view {
8 | flex-basis: 70%;
9 | }
10 |
11 | div#form-view {
12 | flex-basis: 30%;
13 | }
14 |
15 | .bookshelf-container {
16 | display: flex;
17 | flex-wrap: wrap;
18 | }
19 |
20 | .pagination-menu {
21 | display: flex;
22 | width: fit-content;
23 | margin: 0px auto;
24 | text-align: center;
25 | }
26 |
27 |
28 | .page-num {
29 | display: inline-block;
30 | margin: 0px 3px;
31 | }
32 |
33 | .page-num.active {
34 | color: blue;
35 | font-weight: bolder;
36 | }
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/stylesheets/Book.css:
--------------------------------------------------------------------------------
1 | div.star {
2 | width: 20px;
3 | height: 20px;
4 | margin: 2px;
5 | background-size: contain;
6 | background-repeat: no-repeat;
7 | background-image: url('../star-black.png');
8 | }
9 |
10 | div.star.active {
11 | background-image: url('../star.png')
12 | }
13 |
14 | .delete {
15 | width: 20px;
16 | height: 20px;
17 | margin: 2px;
18 | background-size: contain;
19 | background-repeat: no-repeat;
20 | background-image: url('../trash.png')
21 | }
22 |
23 | .rating {
24 | display: flex;
25 | }
26 |
27 | .title {
28 | padding: 50% 5px;
29 | width: 65%;
30 | color: azure;
31 | }
32 |
33 | .book {
34 | flex-basis: 25%;
35 | height: 350px
36 | }
37 |
38 | .author {
39 | margin: 5px 0px;
40 | }
41 |
42 | .cover {
43 | width: 80%;
44 | left: 10%;
45 | height: 225px;
46 | padding: 5px 15px;
47 | text-align: center;
48 | background-size: contain;
49 | background-repeat: no-repeat;
50 | background-image: url('../cover.jpg')
51 | }
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/stylesheets/FormView.css:
--------------------------------------------------------------------------------
1 | #form-view {
2 | text-align: center;
3 | }
4 |
5 | label {
6 | display: block;
7 | margin: 10px 0px;
8 | }
9 |
10 | input {
11 | display: block;
12 | margin-left: auto;
13 | margin-right: auto;
14 | margin-bottom: 10px;
15 | }
16 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/stylesheets/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/6_Final_Starter/frontend/src/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/cd0037-API-Development-and-Documentation-exercises/ec53547028737a45c40c5c5d8bf113610df9f866/6_Final_Starter/frontend/src/trash.png
--------------------------------------------------------------------------------
/Bookshelf_database_files/setup.sql:
--------------------------------------------------------------------------------
1 | DROP DATABASE IF EXISTS bookshelf;
2 | DROP DATABASE IF EXISTS bookshelf_test;
3 | CREATE DATABASE bookshelf;
4 | CREATE DATABASE bookshelf_test;
5 | CREATE USER student WITH ENCRYPTED PASSWORD 'student';
6 | GRANT ALL PRIVILEGES ON DATABASE bookshelf TO student;
7 | GRANT ALL PRIVILEGES ON DATABASE bookshelf_test TO student;
8 | ALTER USER student CREATEDB;
9 | ALTER USER student WITH SUPERUSER;
--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @udacity/active-public-content
--------------------------------------------------------------------------------
/Examples_from_plants_database/FirstFlaskApp/flaskr/__init__.py:
--------------------------------------------------------------------------------
1 | # Import your dependencies
2 | from flask import Flask, jsonify
3 |
4 | # Define the create_app function
5 | def create_app(test_config=None):
6 | # Create and configure the app
7 | # Include the first parameter: Here, __name__is the name of the current Python module.
8 | app = Flask(__name__)
9 |
10 | @app.route("/")
11 | def hello_world():
12 | return jsonify({"message": "HELLO, WORLD!"})
13 |
14 | @app.route("/smiley")
15 | def smiley():
16 | return ":)"
17 |
18 | return app
19 |
--------------------------------------------------------------------------------
/Examples_from_plants_database/Flask-CORS-Example-0/flask-cors.ipynb:
--------------------------------------------------------------------------------
1 | {
2 | "cells": [
3 | {
4 | "cell_type": "markdown",
5 | "metadata": {
6 | "graffitiCellId": "id_b2slrdu"
7 | },
8 | "source": [
9 | "# Flask-CORS\n",
10 | "In your Flask applications, you'll use the Flask-CORS library to enable CORS. \n",
11 | "Below you'll see samples of how to use Flask-CORS to enable different configurations of CORS. Try reading and analyzing the code before using the tooltips to hear the explanations. "
12 | ]
13 | },
14 | {
15 | "cell_type": "code",
16 | "execution_count": null,
17 | "metadata": {
18 | "graffitiCellId": "id_f5o09dc"
19 | },
20 | "outputs": [],
21 | "source": [
22 | "# Import Dependencies\n",
23 | "from flask import Flask\n",
24 | "from flask_cors import CORS"
25 | ]
26 | },
27 | {
28 | "cell_type": "code",
29 | "execution_count": null,
30 | "metadata": {
31 | "graffitiCellId": "id_smo0qpl"
32 | },
33 | "outputs": [],
34 | "source": [
35 | "def create_app(test_config=None):\n",
36 | " app = Flask(__name__)\n",
37 | "# CORS(app)\n",
38 | " cors = CORS(app, resources={r\"/api/*\": {\"origins\": \"*\"}})\n",
39 | "\n",
40 | " # CORS Headers \n",
41 | " @app.after_request\n",
42 | " def after_request(response):\n",
43 | " response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization,true')\n",
44 | " response.headers.add('Access-Control-Allow-Methods', 'GET,PATCH,POST,DELETE,OPTIONS')\n",
45 | " return response\n",
46 | " \n",
47 | " @app.route('/messages')\n",
48 | " @cross_origin()\n",
49 | " def get_messages():\n",
50 | " return 'GETTING MESSAGES'"
51 | ]
52 | }
53 | ],
54 | "metadata": {
55 | "graffiti": {
56 | "firstAuthorId": "5362449611",
57 | "id": "id_j0as61w",
58 | "language": "EN"
59 | },
60 | "kernelspec": {
61 | "display_name": "Python 3",
62 | "language": "python",
63 | "name": "python3"
64 | },
65 | "language_info": {
66 | "codemirror_mode": {
67 | "name": "ipython",
68 | "version": 3
69 | },
70 | "file_extension": ".py",
71 | "mimetype": "text/x-python",
72 | "name": "python",
73 | "nbconvert_exporter": "python",
74 | "pygments_lexer": "ipython3",
75 | "version": "3.6.3"
76 | }
77 | },
78 | "nbformat": 4,
79 | "nbformat_minor": 2
80 | }
81 |
--------------------------------------------------------------------------------
/Examples_from_plants_database/Flask-CORS-Example-1/flaskr/__init__.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, jsonify, request, abort
2 | from models import setup_db, Plant
3 | from flask_cors import CORS, cross_origin
4 |
5 |
6 | def create_app(test_config=None):
7 | app = Flask(__name__, instance_relative_config=True)
8 | setup_db(app)
9 | # CORS(app, resources={r"*/api/*" : {origins: '*'}})
10 | CORS(app)
11 |
12 | @app.after_request
13 | def after_request(response):
14 | response.headers.add(
15 | "Access-Control-Allow-Headers", "Content-Type, Authorization"
16 | )
17 | response.headers.add(
18 | "Access-Control-Allow-Headers", "GET, POST, PATCH, DELETE, OPTION"
19 | )
20 | return response
21 |
22 | @app.route("/plants", methods=["GET", "POST"])
23 | # @cross_origin
24 | def get_plants():
25 | # Implement pagniation
26 | page = request.args.get("page", 1, type=int)
27 | start = (page - 1) * 10
28 | end = start + 10
29 |
30 | plants = Plant.query.all()
31 | formatted_plants = [plant.format() for plant in plants]
32 | return jsonify(
33 | {
34 | "success": True,
35 | "plants": formatted_plants[start:end],
36 | "total_plants": len(formatted_plants),
37 | }
38 | )
39 |
40 | @app.route("/plants/
")
41 | def get_specific_plant(plant_id):
42 | plant = Plant.query.filter(Plant.id == plant_id).one_or_none()
43 | if plant is None:
44 | abort(404)
45 | else:
46 | return jsonify({"success": True, "plant": plant.format()})
47 |
48 | return app
49 |
--------------------------------------------------------------------------------
/Examples_from_plants_database/Flask-CORS-Example-1/models.py:
--------------------------------------------------------------------------------
1 | import os
2 | from sqlalchemy import Column, String, Integer, Boolean, create_engine
3 | from flask_sqlalchemy import SQLAlchemy
4 | import json
5 | from sqlalchemy.sql.schema import PrimaryKeyConstraint
6 |
7 | database_name = "plantsdb"
8 | # Feel free to remove the password argument from the below format() method
9 | database_path = "postgresql://{}:{}@{}/{}".format(
10 | "postgres", "", "localhost:5432", database_name
11 | )
12 | db = SQLAlchemy()
13 |
14 |
15 | def setup_db(app, database_path=database_path):
16 | app.config["SQLALCHEMY_DATABASE_URI"] = database_path
17 | app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
18 | db.app = app
19 | db.init_app(app)
20 | db.create_all()
21 |
22 |
23 | """Plant class"""
24 |
25 |
26 | class Plant(db.Model):
27 | __tablename__ = "plants"
28 |
29 | id = Column(Integer, primary_key=True)
30 | name = Column(String)
31 | scientific_name = Column(String)
32 | is_poisonous = Column(Boolean)
33 | primary_color = Column(String)
34 |
35 |
36 | def __init__(self, name, scientific_name, is_poisonous, primary_color):
37 | self.name = name
38 | self.scientific_name = scientific_name
39 | self.is_poisonous = is_poisonous
40 | self.primary_color = primary_color
41 |
42 |
43 | def insert(self):
44 | db.session.add(self)
45 | db.session.commit()
46 |
47 |
48 | def update(self):
49 | db.session.commit()
50 |
51 |
52 | def delete(self):
53 | db.session.delete(self)
54 | db.session.commit()
55 |
56 |
57 | def format(self):
58 | return {
59 | "id": self.id,
60 | "name": self.name,
61 | "scientific_name": self.scientific_name,
62 | "is_poisonous": self.is_poisonous,
63 | "primary_color": self.primary_color,
64 | }
65 |
--------------------------------------------------------------------------------
/Examples_from_plants_database/plantsdb_setup.sql:
--------------------------------------------------------------------------------
1 | DROP DATABASE IF EXISTS plantsdb;
2 | DROP USER IF EXISTS student;
3 | CREATE DATABASE plantsdb;
4 | CREATE USER student WITH ENCRYPTED PASSWORD 'student';
5 | GRANT ALL PRIVILEGES ON DATABASE plantsdb TO student;
6 | ALTER USER student CREATEDB;
7 | ALTER USER student WITH SUPERUSER;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## About the Great Bookshelf of Udacity
2 |
3 | This project is a virtual bookshelf for Udacity students. Students are able to add their books to the bookshelf, give them a rating, update the rating and search through their book lists. This project will serve as a practice module for the current course. By completing this project, students learn and apply their skills structuring and implementing well-formatted API endpoints that leverage the knowledge of HTTP and API development best practices.
4 |
5 | All backend code follows [PEP8 style guidelines](https://www.python.org/dev/peps/pep-0008/).
6 |
7 | * **What we expect from you?**
8 | You'll use this base in various workspaces throughout the course to build the project incrementally as you expand your skills. At each stage, there will be **various 'TODO's marked for you to complete.** You'll also notice some TODOs in the frontend section in the upcoming workspaces.
9 |
10 | You should feel free to expand on the project in any way you can dream up to extend your skills. For instance, you could add additional book information to each entry or create individual book views including more information about the book, your thoughts, or when you completed it.
11 |
12 | ### Exercise starter code and solution
13 | The current repository contains the starter code and solution for six exercises based on the the *bookshelf* database. These exercises are namely:
14 | 1. Requests
15 | 2. Errors
16 | 3. Testing
17 | 4. TDD
18 | 5. API Doc
19 | 6. Final
20 | The solution for each exercise is present in the corresponding *Review* folder.
21 |
22 | ### Local setup
23 | The instructions for setting up your local environment is available in the first exercise's [README](https://github.com/udacity/nd0044-c2-API-Development-and-Documentation-exercises/blob/master/1_Requests_Starter/README.md).
24 |
25 |
26 | >Feel free to suggest updates and bugs/fixes in the Pull Requests.
27 | ---
28 |
--------------------------------------------------------------------------------