Software Development Environment Setup

Download and Setup Anaconda and Microsoft Visual Studio Code (VSCode)

Steps:

1. Downloaded Anaconda Python 3.7 64-bit Graphical Installer and Command Line Installer from: https://www.anaconda.com/products/individual

2. Installed Anaconda using Command Line (Graphical Installer hung for some reasons) by following the instruction at https://docs.anaconda.com/anaconda/install/mac-os/

3. Launch a terminal window and go to the downloaded directory

• % bash *.sh

4. pick the default installed directory

5. follow the instruction to complete the installation

6. download Pycharm Community for Anaconda at: https://www.jetbrains.com/pycharm/promo/anaconda/ and install it.

7. close and reopen a terminal to let Anaconda take effect

8. To enable for each shell session to have the base environment activated, run

• % conda config --set auto_activate_base True

9. verify the installation

• % config list

• % python

• % jupyter notebook

Download and Setup Django

Install Django on MacBook Air using Anaconda

Use % conda init tcsh to make sure Anaconda uses tcsh before everything starts

1. Create an environment for Django installation:

   • % conda create --name DjangoProject django

2. Verify the environment is setup:

   • % conda info --envs

3. Activate the Django environment

   • % conda activate DjangoProject

4. Verify the Django installation

   • % python -m django --version

   • then 3.0.3 should be shown

5. Django Admin setup after a project is created

   • Do the migration

     • % python manage.py migrate

   • Create the superuser password

     • % python manage.py createsuperuser

     • Follow the instruction and type in the information to create the superuser password

   • Navigate to localhost:8000/admin and log in with the credentials just used to create a superuser

Download and Setup React (on MacOS)

1. Installed Visual Studio Code as React IDE

2. Installed Node.js (including npm)

   • to check if they're correctly installed:

     • % node --version

     • % npm --version

3. Installed create-react-app

   • % sudo npm install -g create-react-app

4. Created a React application

   • % create-react-app career-watch

5. Start a web server and run a React application in a web browser

   • % cd career-watch

   • % npm start // It cannot run in background

Download and Setup Anaconda and Microsoft Visual Studio Code (VSCode) on Linux(Ubuntu 18.04LTS)

Anaconda Installation Steps:

1. Update the local package manager.

• sudo apt-get update

2. Install curl if you don't have.

• sudo apt-get install curl

3. Download the lasted version of Anaconda (https://phoenixnap.com/kb/how-to-install-anaconda-ubuntu-18-04-or-20-04)

4. Change to the directory that the package has been downloaded.

   • bash <Anaconda package>

Then the installation finished.

5. Update anaconda.

• conda update conda

• conda update anaconda

VSCode Installation Steps:

1. Go to the VScode website (https://code.visualstudio.com/download)

2. Download the package with ".deb"

3. Open the .deb file by using "software install" and click "install".

Downloading and Setup Plotly.js in ReactJS

React-Plotly.js

Connect ReactJS and Django API

TBD

Setup a database in Django and display it on ReactJS Using Plotly.js

TBD

Download Fred and Run Codes of Data Analysis Team

1. In terminal: git clone https://github.com/zachwill/fred

2. Register for a FRED API key (this can be skipped if you'd prefer to use the given API key)

   • If you want your own - link to register: https://research.stlouisfed.org/useraccount/login/secure/

3. Follow README in fred package, in terminal: (this is the DA team API key)

export FRED_API_KEY=055c32fc7695db23c71dd4a01f80efbb

4. Also run: (This installs the fred package modules)

python setup.py install

5. You may need to install mock package, so:

pip install mock

After successfully completing all of the above steps, you should be able to run the Python documents without any problems. Be sure to use Anaconda Jupyter Notebook, rather than JupyterLab, otherwise the maps cannot show up properly.

Plotly

https://plotly.com/graphing-libraries/

Scatter Mapbox Documentation:

https://plotly.com/python/reference/#scattermapbox

Django

Create an application in Django

1. Go to the project folder in terminal, and type the command:

   • python manage.py startapp [Your_APP_Name]

   • For example: python manage.py startapp tutorial

2. Add the code to INSTALLED_APPS in settings.py under your main folder:

   • '[Your_APP_Name].apps.[Your_APP_Name(First_Letter_Uppercase)]Config',

   • For example: 'tutorial.apps.TutorialConfig',

3. Run the following command to migrate:

   • python manage.py migrate

4. Run the following command to include your application in the project:

   • python manage.py makemigrations [Your_APP_Name]

5. Finally you can see the updated project by running the following command and then navigating to localhost:8000/admin

   • python manage.py runserver

django-related documents, including setup, development, deployment, etc.

React

react-related documents, including setup, development, deployment, etc.

Map-based Dashboard

Sample Project 1- Gentelella

Github/Website: https://github.com/GiriB/django-gentelella

Set up and Operation Procedure (on MacOS)

1. Launch a Terminal

2. Set up and activate the separate Python environment for the project

• % conda deactivate

• % conda create -n django-gentelella-env

• % conda activate django-gentelella-env

3. Clone the project source code from the GitHub repo

• % git clone https://github.com/GiriB/django-gentelella.git

• % cd django-gentelella

4. Install the project requirements

• % pip install -r requirements.txt

5. set up and instantiate the database

• % cd gentelella

• % python manage.py migrate

6. Launch the web server and run the website (in the background)

• % python manage.py runserver &

7. If the web browser isn't launched, start a web browser and go to http://127.0.0.1:8000. The website should show up.

Sample Project-2 covid19-dashboard

1. This dashboard downloads CSV data file with column names: FIPS,Admin2,Province_State,Country_Region,Last_Update,Lat,Long_,Confirmed,

Deaths,Recovered,Active,Combined_Key,Incidence_Rate,Case-Fatality_Ratio

2. It reads CSV file and stores as a dataframe

• df = pd.read_csv('https://covid.ourworldindata.org/data/ecdc/new_cases.csv')

3. It creates plotly.graph_objects.Figure instance by plotly express

• fig = px.scatter_mapbox(

df,

lat = 'Lat', lon='Long_',

color = 'Confirmed',

size = 'Confirmed',

hover_name = 'Country_Region',

hover_data = ['Combined_Key','Confirmed'],

labels ={ 'Combined_Key':'loc'},

zoom = 1,

center = {'lat': 20.0, 'lon': -20.0}, height=450

)

4. Create graph

• plot_div = plot(fig, include_plotlyjs=False, output_type='div', config={'displayModeBar': False})

Get Access to Leapland Server

To get access to leapland remote server, use the following command in your terminal:

ssh username@143.198.74.37

Plain text

replace username with your username and enter password after this command.

After connecting to the remote server successfully, you can change your passward, use:

passwd

Plain text

set up ssh keys

To login without password in the future, you can set up ssh keys.

First check your local PC for ~/.ssh/id_rsa.pub. If this file doesn't exist, use:

ssh-kengen

Plain text

Open this file and copy everything inside it, which is your public key.

Then login to your remote server, create a file named "authorized_keys" under directory ~/.ssh, paste your public key inside the file.

Finally, modify the permission the file:

chmod 600 authorized_keys

Discussion Forum

Sample project: https://github.com/endiliey/rengorum

Reference

Django tutorial: https://data-flair.training/blogs/django-tutorial/

Covid-19 Dashboard: https://github.com/BrianRuizy/covid19-dashboard