• In your working directory, you can create the following file structure.

  

• You may follow the convention mentioned below -

  • app.py contains web layout and server function. We will be referring to it as our main file.

  • model.py is where we will implement a machine learning model for forecasting the stock price.

  • The assets folder is where we keep our CSS files for styling and any other miscellaneous files like images (if u wish to include it in your site)

  • requirements.txt is created so that other developers can install the correct versions of the required Python packages to run your Python code.

  • The Procfile is created for deployment using Heroku. It is not needed to run the app locally.

• Install necessary libraries using pip package installer. It is recommended to use the following packages/libraries for this project.

  

• Import relevant libraries as shown below:

  import dash
  
  import dash_core_components as dcc
  
  import dash_html_components as html
  
  from datetime import datetime as dt
  

• Create a Dash instance and store it in an app variable. Also, store the application's server property in a server variable as it will be frequently used.

  app = dash.Dash(__name__)
  
  server = app.server
  

• Make the web layout using Dash HTML Components and Dash Core Components, then store it in the app's layout component i.e. the app.layout. Your code should look something like this :

  app.layout = html.Div([item1, item2])
  

• We mainly need two divisions (.Div) for the entire layout.

  • The first one is for our inputs like stock code, date range selector, number of days of forecast and buttons. These components are the ones which the user will be interacting with. They should be given appropriate IDs and class names for the upcoming tasks. You can follow the code given below:

    html.Div(
              [
                html.P("Welcome to the Stock Dash App!", className="start"),
                html.Div([
                  # stock code input
                ]),
                html.Div([
                  # Date range picker input
                ]),
                html.Div([
                  # Stock price button
                  # Indicators button
                  # Number of days of forecast input
                  # Forecast button
                ]),
              ],
            className="nav")
    

  • The second division will be for the data plots and company's basic information (name, logo, brief intro) only. Leave the divisions inside them as blank and give unique IDs because these will get updated as you will see in the next task. You can refer to the code below :

    html.Div(
              [
                html.Div(
                      [  # Logo
                        # Company Name
                      ],
                    className="header"),
                html.Div( #Description
                  id="description", className="decription_ticker"),
                html.Div([
                    # Stock price plot
                ], id="graphs-content"),
                html.Div([
                    # Indicator plot
                ], id="main-content"),
                html.Div([
                    # Forecast plot
                ], id="forecast-content")
              ],
            className="content")
    

• Write the following at the end of the main file for running the app in development mode (mandate this step for now)

  if __name__ == '__main__':
      app.run_server(debug=True)
  

• Give a class name to the parent division (the one which contains both our main divisions) you created in Task 1. Name it something appropriate like container.
• Style the container division by giving the display property flex value. This will ensure that both the divisions are laid out in the same horizon.

.container {
  display: flex;
}

• Similarly, style the first division (the one containing our inputs). Again, give the display property flex value and the flex-direction property column value. Give it a suitable width too, ideally less than 40%. You can keep the items aligned at the center.

.inputs {
  width: 25vw;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: rgb(5, 107, 107);
}

• Give class names to any of the components you want to further style.

  * {
  margin: 0;
  padding: 0;
  box-sizing: 0;
  font-family: "Roboto", sans-serif;
}

• In the main file, import relevant libraries as shown below

  import yfinance as yf
  
  import pandas as pd
  
  import plotly.graph_objs as go
  
  import plotly.express as px
  

• Make callback functions to update the empty divisions (.Div) we created in the basic web layout previously(for company information, stock graph and indicator graph ). Dash's callback functions are called whenever an input component's property changes. List out the Output along with their respective IDs and property of the components you want to change. After that list the Input along with their IDs and property of the components which will be used as a trigger for the change in Output components. You may also enlist State to just use the component values without using them as a trigger. You may refer to the code example below.

  @app.callback([
      Output("component-id-1", "property"),
      Output(# Output of component-id-2),
      ],
    [Input(# Input of component-id-2)],
    [State("component-id-4", "property")])
  def update_data(arg1, arg2):  # input parameter(s)
      # your function here
      return output1, output2
  

• In the first callback function, use the input field (for stock code) and submit buttons as State and Input components respectively. For the Output component use the first empty Div you had created in Task 2. Use the yfinance library's Ticker function to fetch the company info and return it from the first callback function (you may refer to the code snippet below)

  ticker = yf.Ticker(val)
  inf = ticker.info
  df = pd.DataFrame().from_dict(inf, orient="index").T
  return # df's first element of 'longBusinessSummary', df's first element value of 'logo_url', df's first element value of 'shortName'
  

• For making the second callback function, use the date range picker's start date, end date and also the stock price button as Input components. For the Output component use the second empty Div we had created in Task 2. You can download the stock price history with the download function of the yfinance library. We get a DataFrame in return. You can pass that DataFrame to a user defined function (which we will make) that returns the required plot (using plotly library). Finally, that plot can be returned from our callback function as a Dash Core Component Graph. You may refer to the code examples below.

  df = yf.download(# input parameter, start_date str, end_date str )
  df.reset_index(inplace=True)
  fig = get_stock_price_fig(df)
  return # plot the graph of fig using DCC function
  

  User defined function for stock price graph generation from a given DataFrame

  def get_stock_price_fig(df):
      fig = px.line(df,
                    x= # Date str,
                    y= # list of 'Open' and 'Close',
                    title="Closing and Opening Price vs Date")
      return fig
  

• The third callback will be for generating our indicator graph. You may use estimated moving average (EMA) for it. The callback function for it will be similar to the second one. However, we need to make a new user defined function which will return an EMA plot over time. You can refer to the code given below

  def get_more(df):
      df['EWA_20'] = df['Close'].ewm(span=20, adjust=False).mean()
      fig = px.scatter(df,
                      x= # Date str,
                      y= # EWA_20 str,
                      title="Exponential Moving Average vs Date")
  
      fig.update_traces(mode= # appropriate mode)
      
      return fig
  

• Till here we have completed the app.py file, i.e. the web layout and server functions are in place and hence the app is partially functional (prediction feature is yet to be implemented).

• Make the model in the model.py file.
• Use the support vector regression (SVR) module from the sklearn library. Fetch the stock prices for the last 60 days. Split the dataset into 9:1 ratio for training and testing respectively.
• Use the rbf kernel in GridSearchCV for tuning your hyperparameters.
• Then, train the SVR model with the training dataset.
• Test your model's performance by using metrics such as Mean Squared Error (MSE) and Mean Absolute Error (MAE) on the testing dataset.
• After the model is built, make sure another callback function (as seen in Task 2) for the same is made in the main file i.e. app.py (where the model is to be imported).

• Create a Heroku account.

• Run $ pip install gunicorn in the terminal.

• Run $ pip freeze > requirements.txt in the terminal. This creates a text file containing all our dependencies.

• Create a Procfile in the working directory. In that paste web: gunicorn app:server

• Run $ sudo snap install --classic heroku on terminal to install the Heroku CLI.

• In the terminal, run the commands below:

  $ heroku create unique-name-here

  $ git add .

  $ git commit -m 'Initial app template'

  $ git push heroku master

• Finally, run the app on one dyno by doing $ heroku ps:scale web=1