{"id":734,"date":"2018-10-01T06:00:44","date_gmt":"2018-10-01T06:00:44","guid":{"rendered":"http:\/\/buklijas.info\/blog\/?p=734"},"modified":"2018-12-14T21:14:58","modified_gmt":"2018-12-14T21:14:58","slug":"making-web-apps-with-jupyter-notebook","status":"publish","type":"post","link":"http:\/\/buklijas.info\/blog\/2018\/10\/01\/making-web-apps-with-jupyter-notebook\/","title":{"rendered":"Making web apps with Jupyter notebook"},"content":{"rendered":"

Published on:<\/strong> 01.10.2018<\/p>\n

This article will explain how to make Jupiter notebook as a GUI app on the web<\/strong>.<\/p>\n

What is Jupiter notebook<\/h3>\n

Jupiter notebook<\/a> is browser-based REPL<\/a>.<\/p>\n

REPL enables you to program in an interactive environment<\/strong>, you can write and then execute your next line of code while all previous lines are already in the executed state.<\/p>\n

This trivial feature enables me to cut prototyping development time<\/strong> because for testing the next line of code I do not need to run the whole program again. (REPL is useful only for some types of situations)<\/p>\n

I know this explanation is useless if you do not know what is a programming language and have no experience with REPL style prototyping, but if you are in this category I do not know how to explain it (probably it is impossible).<\/p>\n

Point is, it makes programming prototyping faster<\/strong> because for testing next line in your code you do not need to run the previous code again and again.<\/p>\n

Previously Jupiter notebook was called IPython Notebooks<\/strong>, at that time only Python was available as programing language.<\/p>\n

Now it is possible to use Jupiter notebook with many programming languages<\/a>, altho my experience is only with Python.<\/p>\n

Personally, I use Jupiter notebook for exploratory data analysis<\/strong>.
\nLoading data to Pandas and then trying to understand data with visualizations (Seaborn, Bokeh).<\/p>\n

Sharing Jupiter notebook with non-technical persons<\/h3>\n

Often I would run the same code with different parameters<\/strong>, to produce slightly different visualizations.<\/p>\n

If you are familiar with Jupiter notebook environment than you know that this means running the same cell with SHIFT + ENTER, from Cell menu or some other shortcut.<\/p>\n

This got me thinking if I wanted to give my notebook to a non-technical person<\/strong> (somebody who know how to use Word, and Excel without knowledge of how to write formulas ) it would be trivial for that person to use it.<\/p>\n

Also, a person could change the code and get the unintended outcome (syntax error or wrong result).<\/p>\n

Ipywidgets<\/h3>\n

This problem could be solved with Ipywidgets widgets<\/a>.<\/p>\n

With Ipywidgets widgets you can make GUI inside of Jupiter notebook<\/strong>, it is perfect when you want for somebody (even you) to expose some functionality of your Jupiter notebook with GUI elements.<\/p>\n

For having this kind of GUI
\n\"Coin<\/p>\n

This is the necessary code:<\/p>\n

# UI\nslider = widgets.IntSlider(min=10, max=100, value=10)\nlabel = widgets.Label(value='Select number of games')\n\nbutton = widgets.Button(description='Start Simulation', button_style='info', tooltip='Start Game')\nprogress = widgets.IntProgress(description='Progress:')\nlabel2 = widgets.Label()\n\n# Interactions\nbutton.on_click(start_game)\n\n# UI Layout\ntop_box = widgets.HBox([label, slider])\ndown_box = widgets.HBox([button, progress, label2])\nui = widgets.VBox([top_box, down_box]) \ndisplay.display(ui)\n<\/code><\/pre>\n
Appmode<\/h3>\n
This was good but still there where 2 problems:<\/p>\n