1 00:00:00,210 --> 00:00:05,400 So now you know the logic behind embedding Bokeh charts more or less and 2 00:00:05,400 --> 00:00:11,370 you'll understand it better now that we start coding. So these are the files of 3 00:00:11,370 --> 00:00:16,560 my Flask website and you should have these files if you follow the section 4 00:00:16,560 --> 00:00:21,300 where we built the website with Flask. If you don't have these files I'm providing 5 00:00:21,300 --> 00:00:27,660 them in the resources, so please download them if you don't have them. The demo 6 00:00:27,660 --> 00:00:36,239 folder contains those Flask files and this is the virtual environment so I'll 7 00:00:36,239 --> 00:00:47,629 open this with Atom and so before I go and edit these files, I want to make sure my 8 00:00:47,629 --> 00:00:53,940 web application is running smoothly. It's been a while since I built this so 9 00:00:53,940 --> 00:01:04,350 let me try if things are working, and so in the virtual folder we got the scripts 10 00:01:04,350 --> 00:01:09,180 folder where you have pip and Python so we're using the Python installation of 11 00:01:09,180 --> 00:01:15,689 our virtual environment. So this is like a small computer I'd say where we have 12 00:01:15,689 --> 00:01:21,479 installed Python which is not affected by the main installation in your 13 00:01:21,479 --> 00:01:30,450 computer so we are in the my site folder, so to run the web, the website you 14 00:01:30,450 --> 00:01:35,310 want to say virtual so it point to the virtual folder and then we want to 15 00:01:35,310 --> 00:01:43,500 locate the Python.exe which is inside scripts. You can check that if you want. So we're 16 00:01:43,500 --> 00:01:48,270 using the Python virtual environment and then we want to point to the demo folder, 17 00:01:48,270 --> 00:01:59,579 and then to the script.py file. There seems to be an error so a good 18 00:01:59,579 --> 00:02:06,149 practice in this case would be to go ahead and delete this virtual folder 19 00:02:06,149 --> 00:02:12,000 because it's been a while since we've built this, so there may be a new version 20 00:02:12,000 --> 00:02:15,099 of virtualenv so we want to use that new 21 00:02:15,099 --> 00:02:20,829 version so what you want to do is you may want to create another virtual 22 00:02:20,829 --> 00:02:24,299 environment, so there's no visual environment there anymore. 23 00:02:24,299 --> 00:02:31,239 First of all though you want to make sure you have the virtualenv library 24 00:02:31,239 --> 00:02:37,470 installed so this is what used to create virtual environments, so pip install virtualenvv. 25 00:02:37,680 --> 00:02:44,280 So I did not have this, so this is being downloaded and now it's installed and 26 00:02:44,280 --> 00:02:53,849 once you do that, you go ahead and use Python with the M argument then ven. 27 00:02:53,849 --> 00:02:59,500 So if you are on Windows you write ven. If you are on Linux you'd want to 28 00:02:59,500 --> 00:03:06,040 write virtualenv, so like this one and then let's say virtual for the name of 29 00:03:06,040 --> 00:03:14,650 the folder, execute that. The folder is created and we should wait a while there. 30 00:03:14,650 --> 00:03:18,729 So I didn't get an error. That means my virtual environment was successfully 31 00:03:18,729 --> 00:03:26,010 created as you see here in the folder tree. Now let's go ahead and try the same 32 00:03:26,010 --> 00:03:32,949 command so we use Python which is inside the script folder and then 33 00:03:32,949 --> 00:03:38,139 we execute the script.py so this is a new brand Python, so it will not 34 00:03:38,139 --> 00:03:45,849 have Flask I suppose. It says can't open file demo script.py. 35 00:03:45,849 --> 00:03:51,669 Actually it's a demo script1.py. And that's so we don't have the module 36 00:03:51,669 --> 00:03:55,989 name Flask, so let's go ahead and install those modules. We need to install 37 00:03:55,989 --> 00:04:00,819 Flask and we need to install Bokeh as well and Pandas, and the Pandas data 38 00:04:00,819 --> 00:04:07,449 reader library. And you can install these libraries with pip but you need to 39 00:04:07,449 --> 00:04:15,419 point to the virtual environment so you want to use the virtualenv pip 40 00:04:15,419 --> 00:04:24,520 and virtual scripts. Pip install Flask and then we need 41 00:04:24,520 --> 00:04:31,030 Bokeh so install Bokeh as well and Numpy is also being installed with 42 00:04:31,030 --> 00:04:35,070 Bokeh because Bokeh is dependent on Numpy, and you also have other 43 00:04:35,070 --> 00:04:41,830 dependencies as well as you can see here. And that was successfully installed. 44 00:04:41,830 --> 00:04:52,630 Now let's try Pandas, so Panels was not installed in my system. If you are on a 45 00:04:52,630 --> 00:04:57,970 Linux you don't get this error or Mac but on Windows you probably do, so to fix 46 00:04:57,970 --> 00:05:02,410 this the first thing we ought to do you want to upgrade pip to the latest 47 00:05:02,410 --> 00:05:13,120 version so you want to upgrade the virtualenv pip, so virtual scripts Python 48 00:05:13,120 --> 00:05:21,970 with m argument pip install with un upgrade flag there and pip. 49 00:05:21,970 --> 00:05:32,430 So successfully installed pip version 8. Now try again Pandas and that was successful. 50 00:05:32,430 --> 00:05:36,330 If that didn't work for you either you want 51 00:05:36,330 --> 00:05:48,150 precompiled Python libraries which you can get here, so you'd want to locate 52 00:05:48,150 --> 00:05:54,490 the precompiled distributions of Pandas so you want to pick your version here 53 00:05:54,490 --> 00:05:57,820 and then download that file and then point it to this file with 54 00:05:57,820 --> 00:06:02,440 pip, so instead of saying pip install Pandas, you would say 55 00:06:02,440 --> 00:06:11,440 something like pip install Pandas and dash 0.8 etc. So here we go. 56 00:06:11,440 --> 00:06:18,780 Pandas was installed. What else do we need? Well, Pandas data reader. 57 00:06:21,569 --> 00:06:31,169 Yeah, that's basically it. Now let's go ahead and round the Flask app so this is the 58 00:06:31,169 --> 00:06:43,580 code demo script1.py. It's running, so it's on localhost port 59 00:06:43,580 --> 00:07:00,779 5,000, so localhost 5,000 and this is the Flask website and it seems to be working 60 00:07:00,779 --> 00:07:09,919 well, so now that we have a running website we need to add more things there. 61 00:07:09,919 --> 00:07:15,569 So I'd like to add another menu here which will be connected to a page so 62 00:07:15,569 --> 00:07:28,589 link that to a page and let's create the route for the page .Let's say plot with 63 00:07:28,589 --> 00:07:33,209 slashes so when the user visits localhost 64 00:07:33,209 --> 00:07:40,579 column 5000/plot this function will be executed. Let's call the function plot 65 00:07:40,579 --> 00:07:52,259 and then here goes the Bokeh code, so you want to copy all this here we have 66 00:07:52,259 --> 00:07:56,099 the libraries. Datetime is a built-in library so you don't have to install 67 00:07:56,099 --> 00:08:07,189 that and by the way so copy that. And go and paste it here. 68 00:08:10,360 --> 00:08:17,139 All this code should be indented so go ahead end edit lines 69 00:08:17,139 --> 00:08:25,599 indent and you indent all the lines. Here should be a colon, that's it, then 70 00:08:25,599 --> 00:08:31,990 you're basically done with the Python script, then you want to go to your 71 00:08:31,990 --> 00:08:42,130 templates. Maybe copy one of them like duplicated, call it plot, so we 72 00:08:42,130 --> 00:08:49,089 got the plot.html. As you know this plot extends the layout.html. 73 00:08:49,089 --> 00:08:54,160 So the layout.html contains the HTML code of the head of the website which is 74 00:08:54,160 --> 00:09:01,269 this one here, so title and the menus, so the title 75 00:09:01,269 --> 00:09:09,850 and the links to the menus. So actually there's quite a lot of discussion whether 76 00:09:09,850 --> 00:09:17,260 we where we want to embed the script, the JavaScript inside the body tag like 77 00:09:17,260 --> 00:09:24,579 we were doing here because this plot.html will be embedded inside the 78 00:09:24,579 --> 00:09:33,279 body tags, or you can also embed that in the inside the header tags so which is 79 00:09:33,279 --> 00:09:43,089 here, so basically any way it will work. All you have to do is give the placeholders 80 00:09:43,089 --> 00:09:50,709 in the correct way, so you use these double curly brackets and then you want to 81 00:09:50,709 --> 00:09:59,800 check, let me split this on the right. Here we are again, so you want to insert 82 00:09:59,800 --> 00:10:09,699 the script1 variable there. Separate it with a vertical bar from the 83 00:10:09,699 --> 00:10:18,430 safe method and then you do the same thing for the div1 and safe again. 84 00:10:18,430 --> 00:10:28,080 Then two more placeholders in here, so you remember that we have this two 85 00:10:28,080 --> 00:10:36,540 links, so the link of the CSS and the link of the JavaScript files, so you can copy 86 00:10:36,540 --> 00:10:42,990 them like this or you can choose to generate them dynamically as we did in 87 00:10:42,990 --> 00:10:49,260 the script, so here we are generating them dynamically. That's what we want to 88 00:10:49,260 --> 00:10:56,960 do here, so you don't want a static string, but you want to pass there the 89 00:10:56,960 --> 00:11:06,320 cdn we are in the CSS link here so cds. CDN CSS for this and 90 00:11:06,320 --> 00:11:13,650 then for JavaScript we do the same thing. The safe method there and same thing 91 00:11:13,650 --> 00:11:24,850 here so cdn js and safe. So save that plot.html, make 92 00:11:24,850 --> 00:11:32,800 sure you save the script as well and so the web app restarted automatically so 93 00:11:32,800 --> 00:11:43,960 we can go now here. Refresh the page once and then you want to go to the plot web 94 00:11:43,960 --> 00:11:53,740 page, plot and we got an error there, we have a debugger on so we can see errors 95 00:11:53,740 --> 00:12:03,070 and here is the script. So debug equal to true so it says view function did not 96 00:12:03,070 --> 00:12:05,910 return a response. Apparently our function actually is not 97 00:12:10,270 --> 00:12:15,700 returning any response so Python is right there. So this is the function so it 98 00:12:15,700 --> 00:12:22,360 needs to return the render template method there, we should have some 99 00:12:22,360 --> 00:12:27,970 arguments, so the first one is plot.html so the name of the template 100 00:12:27,970 --> 00:12:36,480 that we built earlier and then we have these variables so we've got script1 101 00:12:36,480 --> 00:12:43,540 which is equal to script1, so that means this script1 variable that contains 102 00:12:43,540 --> 00:12:53,140 string of the Bokeh plot will be embedded in the script placeholder here, script1 103 00:12:53,140 --> 00:12:58,420 placeholder here. Yeah, so we do the same for the other elements as well. Div1 equals 104 00:12:58,420 --> 00:13:07,990 to div1 and you can also break the line there where you have a comma, so just 105 00:13:07,990 --> 00:13:13,480 after the coma you are allowed to break the lines, so let me keep the consistency there. 106 00:13:13,480 --> 00:13:20,200 And what else do we have? Cdn.css equals to cdn.css. 107 00:13:20,200 --> 00:13:31,160 And one more cdn.js, underscore.js. Sorry. Cdn_js, yep. 108 00:13:31,160 --> 00:13:38,460 Save the script and the web app restarted so we are returning these four 109 00:13:38,460 --> 00:13:49,710 elements and now let's check what we got. F5 to reload, and we got nothing and that 110 00:13:49,710 --> 00:13:55,430 means you probably have a problem with the files that you're retrieving from the 111 00:13:55,430 --> 00:14:01,620 remote servers so JavaScript and the CSS files and let me check. 112 00:14:01,620 --> 00:14:08,220 So actually yeah we are returning the list here not the actual links, so as you 113 00:14:08,220 --> 00:14:15,270 know I showed this earlier, if you just pass the cdn_js you get a list, 114 00:14:15,270 --> 00:14:21,240 but with a zero there you get to the actual string, so let's go ahead here 115 00:14:21,240 --> 00:14:28,700 and that's zero and the same for JavaScript, save the script 116 00:14:28,700 --> 00:14:41,730 and go and reload the webpage. And, yeah finally this is the graph. 117 00:14:41,730 --> 00:14:46,350 Probably it's not the fancier embed that you can do out there but you get 118 00:14:46,350 --> 00:14:48,570 the idea. Now you can play around with the 119 00:14:48,570 --> 00:14:53,640 divisions and the CSS styling so you can make this probably more visually 120 00:14:53,640 --> 00:15:05,130 appealing, but I think this is good, so it does the job. And yeah that's what I wanted 121 00:15:05,130 --> 00:15:11,130 to teach you. So I hope I didn't miss anything here, and if you have questions 122 00:15:11,130 --> 00:15:16,980 please feel free to ask! Maybe I was a bit quick in doing these things here but 123 00:15:16,980 --> 00:15:23,760 you can probably try things out and see how they work with you. So in the next 124 00:15:23,760 --> 00:15:29,370 lecture I'll go ahead and deploy this web app on the Heroku cloud so we can 125 00:15:29,370 --> 00:15:32,000 visit it through a URL, so see you later.