V4A Example 01 - Username and Password.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# V4A Example 01 - Username and Password\n",
    "\n",
    "This notebook demonstrates how you might write a notebook using blocking features like `input()`, and how you might have to restructure the notebook to make it work in Voila.\n",
    "\n",
    "If you're still in the **\"Run-All\"** section of V4A, we haven't talked about all this stuff yet.  This is just to give you a quick idea of what things might look like."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T20:05:23.080068Z",
     "start_time": "2020-10-06T20:05:23.074626Z"
    }
   },
   "outputs": [],
   "source": [
    "import getpass\n",
    "import os\n",
    "import ipywidgets as widgets\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "from IPython.display import display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Function requiring user input\n",
    "\n",
    "Suppose you have a function that requires a username and password before it returns data.  How do you get those parameters from the user?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T19:24:54.154613Z",
     "start_time": "2020-10-06T19:24:54.151359Z"
    }
   },
   "outputs": [],
   "source": [
    "def get_data(username, password):\n",
    "    return pd.DataFrame(np.random.randn(4, 3), columns=['A', 'B', 'C'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Classic Jupyter with blocking input\n",
    "\n",
    "In a classic Jupyter notebook, you might use `input()` and `getpass()` to prompt the user for these values.  They will block the rest of the notebook from executing until the user enters values, so you can write the notebook in a linear fashion and either run it cell by cell or all at once.\n",
    "\n",
    "Note: these two cells are commented out here because they will cause Voila to error!  They don't cause a timeout, but the Python kernel will detect that the Voila front end doesn't support raw input requests and throw an error.  Uncomment them if you want to run them in Jupyter, but make sure to re-comment before running in Voila."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T20:21:24.407954Z",
     "start_time": "2020-10-06T20:21:21.920989Z"
    }
   },
   "outputs": [],
   "source": [
    "#username = input('Username: ')\n",
    "#password = getpass.getpass('Password: ')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T20:21:25.280869Z",
     "start_time": "2020-10-06T20:21:25.240134Z"
    }
   },
   "outputs": [],
   "source": [
    "#get_data(username, password)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T19:21:14.753281Z",
     "start_time": "2020-10-06T19:21:14.741804Z"
    }
   },
   "source": [
    "## Restructuring for Voila with interact\n",
    "\n",
    "A quick way to restructure for Voila is to use something from the [interact family](https://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html). We'll talk about this in the **\"Widget Interaction\"** section of V4A."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T19:59:28.464817Z",
     "start_time": "2020-10-06T19:59:28.386786Z"
    }
   },
   "outputs": [],
   "source": [
    "widgets.interact_manual(\n",
    "    get_data,\n",
    "    username=widgets.Text(),\n",
    "    password=widgets.Password()\n",
    ");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Restructuring for Voila with widgets\n",
    "\n",
    "For more complicated scenarios, we might use [container widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#Container/Layout-widgets) and [output widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html).  We'll talk about this in the **\"Widget Events\"** section of V4A."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-10-06T20:06:28.389692Z",
     "start_time": "2020-10-06T20:06:28.306395Z"
    }
   },
   "outputs": [],
   "source": [
    "username = widgets.Text(description='username')\n",
    "password = widgets.Password(description='password')\n",
    "button = widgets.Button(description='Get data')\n",
    "output = widgets.Output()\n",
    "\n",
    "@output.capture()\n",
    "def click_callback(w):\n",
    "    display(get_data(username.value, password.value))\n",
    "button.on_click(click_callback)\n",
    "\n",
    "widgets.VBox([username, password, button, output])"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.8.5"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}