Explanation Notebook.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# C$50 Finance\n",
    "\n",
    "In this guide we want to implement a website via which users can “register”, “login” “buy” and “sell” stocks, like below:\n",
    "\n",
    "<img src=\"https://github.com/magnooj/CS50-finance/blob/main/static/1.png?raw=true\" alt=\"Picture of dashboard\">\n",
    "\n",
    "## Background\n",
    "\n",
    "If you’re not quite sure what it means to buy and sell stocks (i.e., shares of a company), head [here](https://www.investopedia.com/articles/basics/06/invest1000.asp) for a tutorial.\n",
    "\n",
    "We’re about to implement C$50 Finance, a web app via which you can manage portfolios of stocks. Not only will this tool allow us to check real stocks’ actual prices and portfolios’ values, it will also let you buy and sell stocks by querying [IEX](https://iextrading.com/developer/) for stocks’ prices.\n",
    "\n",
    "Indeed, IEX lets you download stock quotes via their API (application programming interface) using URLs like `https://cloud.iexapis.com/stable/stock/nflx/quote?token=API_KEY`. \n",
    "\n",
    "Before getting started on this project, we’ll need to register for an API key in order to be able to query IEX’s data. To do so, follow these steps:\n",
    "\n",
    "- Visit iexcloud.io/cloud-login#/register/.\n",
    "- Select the “Individual” account type, then enter your email address and a password, and click “Create account”.\n",
    "- Once registered, scroll down to “Get started for free” and click “Select Start” to choose the free plan.\n",
    "- Once you’ve confirmed your account via a confirmation email, visit (https://iexcloud.io/console/tokens).\n",
    "- Copy the key that appears under the Token column (it should begin with `pk_`).\n",
    "- In a terminal window execute:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "export API_KEY=value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "where `value` is that (pasted) value, without any space immediately before or after the `=`. You also may wish to paste that value in a text document somewhere, in case you need it again later.\n",
    "\n",
    "## Install requirements\n",
    "\n",
    "This guide wrote for Windows Terminal and if you have another OS you may change it. \n",
    "\n",
    "Before we start, you should clone this [GitHub repo](https://github.com/magnooj/CS50-finance) and then install the dependencies.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "git clone https://github.com/magnooj/CS50-finance.git\n",
    "cd CS50-fincance\n",
    "pip install -r requirements.txt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Through the files\n",
    "\n",
    "Now, we are ready to run and test our project. By running `ls` you can see these files:\n",
    "\n",
    "- [`app.py`](https://github.com/magnooj/CS50-finance/blob/main/app.py) : The APIs\n",
    "- [`finance.db`](https://github.com/magnooj/CS50-finance/blob/main/finance.db) : Database of users and transactions\n",
    "- [`helpers.py`](https://github.com/magnooj/CS50-finance/blob/main/helpers.py) : Some helpers algorithms\n",
    "- [`requirements.txt`](https://github.com/magnooj/CS50-finance/blob/main/requirements.txt) : Required packages \n",
    "- [`/static/`](https://github.com/magnooj/CS50-finance/static/) : Favicon and CSS files\n",
    "- [`/templates/`](https://github.com/magnooj/CS50-finance/templates/) : All the HTML files we needed to run this app that includes `jinja` codes in them.\n",
    "\n",
    "### ***Flask API***\n",
    "\n",
    "The first step in building APIs is to think about the data we want to handle, how we want to handle it and what output we want with our APIs. In our example, we want users can register, log in, log out and buy, sell and qout stocks; Finally, see the history of their transactions.\n",
    "\n",
    "Let's tale a look at `app.py`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# We got some help from this youtube playlist: https://www.youtube.com/playlist?list=PLsJNRspv63XRbsJizNi55DE6FAjx7yK-x\n",
    "import os\n",
    "\n",
    "from cs50 import SQL\n",
    "from flask import Flask, flash, redirect, render_template, request, session\n",
    "from flask_session import Session\n",
    "from tempfile import mkdtemp\n",
    "from werkzeug.exceptions import default_exceptions, HTTPException, InternalServerError\n",
    "from werkzeug.security import check_password_hash, generate_password_hash\n",
    "\n",
    "from helpers import apology, login_required, lookup, usd\n",
    "\n",
    "# Configure application\n",
    "app = Flask(__name__)\n",
    "\n",
    "# Ensure templates are auto-reloaded\n",
    "app.config[\"TEMPLATES_AUTO_RELOAD\"] = True\n",
    "\n",
    "\n",
    "# Ensure responses aren't cached\n",
    "@app.after_request\n",
    "def after_request(response):\n",
    "    response.headers[\"Cache-Control\"] = \"no-cache, no-store, must-revalidate\"\n",
    "    response.headers[\"Expires\"] = 0\n",
    "    response.headers[\"Pragma\"] = \"no-cache\"\n",
    "    return response\n",
    "\n",
    "\n",
    "# Custom filter\n",
    "app.jinja_env.filters[\"usd\"] = usd\n",
    "\n",
    "# Configure session to use filesystem (instead of signed cookies)\n",
    "app.config[\"SESSION_FILE_DIR\"] = mkdtemp()\n",
    "app.config[\"SESSION_PERMANENT\"] = False\n",
    "app.config[\"SESSION_TYPE\"] = \"filesystem\"\n",
    "Session(app)\n",
    "\n",
    "# Configure CS50 Library to use SQLite database\n",
    "db = SQL(\"sqlite:///finance.db\")\n",
    "\n",
    "# Make sure API key is set\n",
    "if not os.environ.get(\"API_KEY\"):\n",
    "    raise RuntimeError(\"API_KEY not set\")\n",
    "\n",
    "\n",
    "@app.route(\"/\")\n",
    "@login_required\n",
    "def index():\n",
    "    \"\"\"Show portfolio of stocks\"\"\"\n",
    "    user_id = session[\"user_id\"]\n",
    "\n",
    "    stocks = db.execute(\n",
    "        \"SELECT symbol, name, price, SUM(shares) as totalshares FROM transactions WHERE user_id = ? GROUP BY symbol\", user_id)\n",
    "    cash = db.execute(\"SELECT cash FROM users WHERE id = ?\", user_id)[0][\"cash\"]\n",
    "\n",
    "    total = cash\n",
    "\n",
    "    for stock in stocks:\n",
    "        total += stock[\"price\"] * stock[\"totalshares\"]\n",
    "\n",
    "    return render_template(\"index.html\", stocks=stocks, cash=cash, usd=usd, total=total)\n",
    "\n",
    "\n",
    "@app.route(\"/buy\", methods=[\"GET\", \"POST\"])\n",
    "@login_required\n",
    "def buy():\n",
    "    \"\"\"Buy shares of stock\"\"\"\n",
    "    if request.method == \"POST\":\n",
    "        symbol = request.form.get(\"symbol\").upper()\n",
    "        item = lookup(symbol)\n",
    "\n",
    "        if not symbol:\n",
    "            return apology(\"Please enter a symbol!\")\n",
    "        elif not item:\n",
    "            return apology(\"Invalid symbol!\")\n",
    "\n",
    "        try:\n",
    "            shares = int(request.form.get(\"shares\"))\n",
    "        except:\n",
    "            return apology(\"Shares must be an integer!\")\n",
    "\n",
    "        if not shares > 0:\n",
    "            return apology(\"Shares must be positive integer!\")\n",
    "\n",
    "        user_id = session[\"user_id\"]\n",
    "        cash = db.execute(\"SELECT cash FROM users WHERE id = ?\", user_id)[0][\"cash\"]\n",
    "\n",
    "        item_name = item[\"name\"]\n",
    "        item_price = item[\"price\"]\n",
    "        total_price = item_price * shares\n",
    "\n",
    "        if cash < total_price:\n",
    "            return apology(\"Not enough money!\")\n",
    "        else:\n",
    "            db.execute(\"UPDATE users SET cash = ? WHERE id = ?\", cash - total_price, user_id)\n",
    "            db.execute(\"INSERT INTO transactions (user_id, name, shares, price, type, symbol) VALUES (?, ?, ?, ?, ?, ?)\",\n",
    "                       user_id, item_name, shares, item_price, \"buy\", symbol)\n",
    "\n",
    "        return redirect(\"/\")\n",
    "    else:\n",
    "        return render_template(\"buy.html\")\n",
    "\n",
    "\n",
    "@app.route(\"/history\")\n",
    "@login_required\n",
    "def history():\n",
    "    \"\"\"Show history of transactions\"\"\"\n",
    "    user_id = session[\"user_id\"]\n",
    "    transactions = db.execute(\"SELECT type, symbol, price, shares, time FROM transactions WHERE user_id = ?\", user_id)\n",
    "\n",
    "    return render_template(\"history.html\", transactions=transactions, usd=usd)\n",
    "\n",
    "\n",
    "@app.route(\"/login\", methods=[\"GET\", \"POST\"])\n",
    "def login():\n",
    "    \"\"\"Log user in\"\"\"\n",
    "\n",
    "    # Forget any user_id\n",
    "    session.clear()\n",
    "\n",
    "    # User reached route via POST (as by submitting a form via POST)\n",
    "    if request.method == \"POST\":\n",
    "\n",
    "        # Ensure username was submitted\n",
    "        if not request.form.get(\"username\"):\n",
    "            return apology(\"must provide username\", 403)\n",
    "\n",
    "        # Ensure password was submitted\n",
    "        elif not request.form.get(\"password\"):\n",
    "            return apology(\"must provide password\", 403)\n",
    "\n",
    "        # Query database for username\n",
    "        rows = db.execute(\"SELECT * FROM users WHERE username = ?\", request.form.get(\"username\"))\n",
    "\n",
    "        # Ensure username exists and password is correct\n",
    "        if len(rows) != 1 or not check_password_hash(rows[0][\"hash\"], request.form.get(\"password\")):\n",
    "            return apology(\"invalid username and/or password\", 403)\n",
    "\n",
    "        # Remember which user has logged in\n",
    "        session[\"user_id\"] = rows[0][\"id\"]\n",
    "\n",
    "        # Redirect user to home page\n",
    "        return redirect(\"/\")\n",
    "\n",
    "    # User reached route via GET (as by clicking a link or via redirect)\n",
    "    else:\n",
    "        return render_template(\"login.html\")\n",
    "\n",
    "\n",
    "@app.route(\"/logout\")\n",
    "def logout():\n",
    "    \"\"\"Log user out\"\"\"\n",
    "\n",
    "    # Forget any user_id\n",
    "    session.clear()\n",
    "\n",
    "    # Redirect user to login form\n",
    "    return redirect(\"/\")\n",
    "\n",
    "\n",
    "@app.route(\"/quote\", methods=[\"GET\", \"POST\"])\n",
    "@login_required\n",
    "def quote():\n",
    "    \"\"\"Get stock quote.\"\"\"\n",
    "    if request.method == \"POST\":\n",
    "        symbol = request.form.get(\"symbol\")\n",
    "\n",
    "        if not symbol:\n",
    "            return apology(\"Please enter a sumbol!\")\n",
    "\n",
    "        item = lookup(symbol)\n",
    "\n",
    "        if not item:\n",
    "            return apology(\"Invalid symbol!\")\n",
    "\n",
    "        return render_template(\"quoted.html\", item=item, usd=usd)\n",
    "    else:\n",
    "        return render_template(\"quote.html\")\n",
    "\n",
    "\n",
    "@app.route(\"/register\", methods=[\"GET\", \"POST\"])\n",
    "def register():\n",
    "    \"\"\"Register user\"\"\"\n",
    "    if request.method == \"POST\":\n",
    "        username = request.form.get(\"username\")\n",
    "        password = request.form.get(\"password\")\n",
    "        confirmation = request.form.get(\"confirmation\")\n",
    "\n",
    "        if not username:\n",
    "            return apology(\"Username is required!\")\n",
    "        elif not password:\n",
    "            return apology(\"Password is required!\")\n",
    "        elif not confirmation:\n",
    "            return apology(\"Confirm your password, please!\")\n",
    "\n",
    "        if password != confirmation:\n",
    "            return apology(\"Passwords did not match!\")\n",
    "\n",
    "        hash = generate_password_hash(password)\n",
    "\n",
    "        try:\n",
    "            db.execute(\"INSERT INTO users (username, hash) VALUES(?, ?)\", username, hash)\n",
    "            return redirect(\"/\")\n",
    "        except:\n",
    "            return apology(\"Username has alredy been registered!\")\n",
    "    else:\n",
    "        return render_template(\"register.html\")\n",
    "\n",
    "\n",
    "@app.route(\"/sell\", methods=[\"GET\", \"POST\"])\n",
    "@login_required\n",
    "def sell():\n",
    "    \"\"\"Sell shares of stock\"\"\"\n",
    "    user_id = session[\"user_id\"]\n",
    "\n",
    "    if request.method == \"POST\":\n",
    "        symbol = request.form.get(\"symbol\")\n",
    "        shares = int(request.form.get(\"shares\"))\n",
    "\n",
    "        if shares <= 0:\n",
    "            return apology(\"Shares must be a positive number!\")\n",
    "\n",
    "        item_price = lookup(symbol)[\"price\"]\n",
    "        item_name = lookup(symbol)[\"name\"]\n",
    "        price = shares * item_price\n",
    "\n",
    "        shares_owned = db.execute(\"SELECT SUM(shares) as tshare FROM transactions WHERE user_id = ? AND symbol = ?\", user_id, symbol)[\n",
    "            0][\"tshare\"]\n",
    "        if shares_owned < shares:\n",
    "            return apology(\"You don't have enough shares!\")\n",
    "\n",
    "        current_cash = db.execute(\"SELECT cash FROM users WHERE id = ?\", user_id)[0][\"cash\"]\n",
    "        db.execute(\"UPDATE users SET cash = ? WHERE id = ?\", current_cash + price, user_id)\n",
    "        db.execute(\"INSERT INTO transactions (user_id, name, shares, price, type, symbol) VALUES (?, ?, ?, ?, ?, ?)\",\n",
    "                   user_id, item_name, -shares, item_price, \"sell\", symbol)\n",
    "\n",
    "        return redirect(\"/\")\n",
    "    else:\n",
    "        symbols = db.execute(\"SELECT symbol FROM transactions WHERE user_id = ? GROUP BY symbol\", user_id)\n",
    "        return render_template(\"sell.html\", symbols=symbols)\n",
    "\n",
    "\n",
    "def errorhandler(e):\n",
    "    \"\"\"Handle error\"\"\"\n",
    "    if not isinstance(e, HTTPException):\n",
    "        e = InternalServerError()\n",
    "    return apology(e.name, e.code)\n",
    "\n",
    "\n",
    "# Listen for errors\n",
    "for code in default_exceptions:\n",
    "    app.errorhandler(code)(errorhandler)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The main HTML file in our app is `layout.html`. We created a template that other HTML files cand extend that. Let's see inside of it:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "<!DOCTYPE html>\n",
    "\n",
    "<html lang=\"en\">\n",
    "\n",
    "    <head>\n",
    "\n",
    "        <meta charset=\"utf-8\">\n",
    "        <meta name=\"viewport\" content=\"initial-scale=1, width=device-width\">\n",
    "\n",
    "        <!-- http://getbootstrap.com/docs/4.5/ -->\n",
    "        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\n",
    "\n",
    "        <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->\n",
    "        <link href=\"/static/favicon.ico\" rel=\"icon\">\n",
    "\n",
    "        <link href=\"/static/styles.css\" rel=\"stylesheet\">\n",
    "\n",
    "        <!-- http://getbootstrap.com/docs/4.5/ -->\n",
    "        <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>\n",
    "        <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx\" crossorigin=\"anonymous\"></script>\n",
    "\n",
    "        <title>C$50 Finance: {% block title %}{% endblock %}</title>\n",
    "\n",
    "    </head>\n",
    "\n",
    "    <body>\n",
    "\n",
    "        <nav class=\"navbar navbar-expand-md navbar-light bg-light border\">\n",
    "            <a class=\"navbar-brand\" href=\"/\"><span class=\"blue\">C</span><span class=\"red\">$</span><span class=\"yellow\">5</span><span class=\"green\">0</span> <span class=\"red\">Finance</span></a>\n",
    "            <button aria-controls=\"navbar\" aria-expanded=\"false\" aria-label=\"Toggle navigation\" class=\"navbar-toggler\" data-target=\"#navbar\" data-toggle=\"collapse\" type=\"button\">\n",
    "                <span class=\"navbar-toggler-icon\"></span>\n",
    "            </button>\n",
    "            <div class=\"collapse navbar-collapse\" id=\"navbar\">\n",
    "                {% if session.user_id %}\n",
    "                    <ul class=\"navbar-nav mr-auto mt-2\">\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/quote\">Quote</a></li>\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/buy\">Buy</a></li>\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/sell\">Sell</a></li>\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/history\">History</a></li>\n",
    "                    </ul>\n",
    "                    <ul class=\"navbar-nav ml-auto mt-2\">\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/logout\">Log Out</a></li>\n",
    "                    </ul>\n",
    "                {% else %}\n",
    "                    <ul class=\"navbar-nav ml-auto mt-2\">\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/register\">Register</a></li>\n",
    "                        <li class=\"nav-item\"><a class=\"nav-link\" href=\"/login\">Log In</a></li>\n",
    "                    </ul>\n",
    "                {% endif %}\n",
    "            </div>\n",
    "        </nav>\n",
    "\n",
    "        {% if get_flashed_messages() %}\n",
    "            <header>\n",
    "                <div class=\"alert alert-primary border text-center\" role=\"alert\">\n",
    "                    {{ get_flashed_messages() | join(\" \") }}\n",
    "                </div>\n",
    "            </header>\n",
    "        {% endif %}\n",
    "\n",
    "        <main class=\"container p-5\">\n",
    "            {% block main %}{% endblock %}\n",
    "        </main>\n",
    "\n",
    "        <footer class=\"small text-center text-muted\">\n",
    "            Data provided for free by <a href=\"https://iextrading.com/developer\">IEX</a>. View <a href=\"https://iextrading.com/api-exhibit-a/\">IEX’s Terms of Use</a>.\n",
    "        </footer>\n",
    "\n",
    "    </body>\n",
    "\n",
    "</html>\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In this example, we create Flask eight routs so that we can serve HTTP traffic on that route.\n",
    "\n",
    "- `/` or `index` : Is the homepage of our app. If user loged in, it display the user’s current cash balance along with a grand total (i.e., stocks’ total value plus cash). But, if user didn.t log in, it displays the login page.\n",
    "- `register` : It has a form that user can register by filling it.\n",
    "- `buy` : In this route, users can input a stock’s symbol and buy some shares.\n",
    "- `sell` : In this page, users can `SELECT` from theis stocks’ symbol and sell their shares.\n",
    "- `qoute` : Users can lookup the price each share in a stock’s symbol.\n",
    "- `history` : It displays an HTML table summarizing all of a user’s transactions ever, listing row by row each and every buy and every sell.\n",
    "- `login` and `logout` : These routes start and terminate user’s session.\n",
    "\n",
    "Of course there is some files like `apology.html` that displays the error to the user. You can check other files.\n",
    "\n",
    "Let's see one of HTML files. I think `index` page is good to look at it:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "{% extends \"layout.html\" %}\n",
    "\n",
    "{% block title %}\n",
    "    Dashboard\n",
    "{% endblock %}\n",
    "\n",
    "{% block main %}\n",
    "    <table class=\"table table-striped\">\n",
    "        <thead>\n",
    "            <tr>\n",
    "                <th>Symbol</th>\n",
    "                <th>Name</th>\n",
    "                <th>Shares</th>\n",
    "                <th>Price</th>\n",
    "                <th>TOTAL</th>\n",
    "            </tr>\n",
    "        </thead>\n",
    "        <!-- Create a table  by jinja that shows the stocks -->\n",
    "        <tbody>\n",
    "            {% for stock in stocks %}\n",
    "                {% if stock[\"totalshares\"] != 0 %}\n",
    "                    <tr>\n",
    "                        <td> {{ stock[\"symbol\"] }}</td>\n",
    "                        <td> {{ stock[\"name\"] }}</td>\n",
    "                        <td> {{ stock[\"totalshares\"] }}</td>\n",
    "                        <td> {{ usd(stock[\"price\"]) }}</td>\n",
    "                        <td> {{ usd(stock[\"totalshares\"] * stock[\"price\"]) }}</td>\n",
    "                    </tr>\n",
    "                {% endif %}\n",
    "            {% endfor %}\n",
    "            <tr>\n",
    "                <td>CASH</td>\n",
    "                <td colspan=\"3\"></td>\n",
    "                <td>{{ usd(cash) }}</td>\n",
    "            </tr>\n",
    "        </tbody>\n",
    "        <tfoot>\n",
    "            <td colspan=\"4\"></td>\n",
    "            <td><strong>{{ usd(total) }}</strong></td>\n",
    "        </tfoot>\n",
    "    </table>\n",
    "{% endblock %}"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, We cheked our files and sqw how our app is working. To run the app, when you are in `CS50-finance` directory, enter `flask run` in the terminal.\n",
    "\n",
    "I hope you enjoyed how to stocks' exchange web application using flask. if you have any comments please do not hesitate to send me an [e-mail](mailto:magnooj@gmail.com).\n",
    "\n",
    "Regards,\n",
    "\n",
    "Ali Ganjizadeh"
   ]
  }
 ],
 "metadata": {
  "interpreter": {
   "hash": "ecf5722fdaf1897a315d257d89d94520bfcaa453217d5becf09b39e73618b0de"
  },
  "kernelspec": {
   "display_name": "Python 3.9.7 64-bit ('base': conda)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.7"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}