1
00:00:00,150 --> 00:00:05,580
Don't tell anyone what you will see in this video, because this might be the coolest Python tool you

2
00:00:05,580 --> 00:00:06,630
have seen to date.

3
00:00:07,560 --> 00:00:14,670
It is very new and only a few know about it, and that is the stream late Python framework.

4
00:00:15,510 --> 00:00:23,580
And it is not just a framework, it is a complete free service which allows you to create molds or interactive

5
00:00:24,150 --> 00:00:32,460
Python web apps and also data visualization dashboards and deploy them instantly.

6
00:00:33,150 --> 00:00:40,710
The framework is tied to a cloud service, so your apps are public right away.

7
00:00:41,550 --> 00:00:47,160
So in this video, I'll show you how to create apps and data dashboards with stream let.

8
00:00:48,000 --> 00:00:51,230
That is the official web page of stream leads.

9
00:00:51,780 --> 00:00:53,980
And so you don't need to have and you can't.

10
00:00:54,000 --> 00:00:57,900
You just go straight away and create a Python script.

11
00:00:58,080 --> 00:01:05,459
So I'm using Ripple, as you know, already, you can do this on your favorite I.D. on your local computer,

12
00:01:05,459 --> 00:01:06,030
if you like.

13
00:01:09,640 --> 00:01:10,210
Create.

14
00:01:12,770 --> 00:01:13,820
Web apps

15
00:01:16,910 --> 00:01:18,080
and data dashboards.

16
00:01:22,190 --> 00:01:28,460
So I'll introduce you to stream lead by first creating a simple Web app, which is basically just a

17
00:01:28,460 --> 00:01:35,870
website which has some text, and then we add pandas data frame tables to that web app and also graphs.

18
00:01:36,440 --> 00:01:39,830
So you need to import swim, let's.

19
00:01:40,940 --> 00:01:48,560
It's a good practice to name vets as T, because that's what you will see among the documentation of

20
00:01:48,560 --> 00:01:52,730
stream leads and what are the programs we will use in the insurance community.

21
00:01:52,940 --> 00:01:56,360
So it's good to be in line with that style.

22
00:01:57,290 --> 00:02:05,360
Then you can refer to stream leads so as to in our case and said a title first for your website.

23
00:02:08,169 --> 00:02:11,320
Our first saw him lit up.

24
00:02:14,920 --> 00:02:17,640
And to add perhaps a sub header.

25
00:02:20,790 --> 00:02:25,290
Introducing stream lit in Ultimate.

26
00:02:27,870 --> 00:02:30,180
Everything with Python.

27
00:02:30,690 --> 00:02:39,210
So we have a totally subhead there, and let's add some text, such as this is our first web app.

28
00:02:40,380 --> 00:02:44,430
And if you want this to be multiple multi-line texts, you want to use triple quotes.

29
00:02:44,760 --> 00:02:51,750
Their triple quotes are there that allows you to add more lines such as enjoyed.

30
00:02:52,740 --> 00:02:53,580
Yeah, like that's.

31
00:02:54,810 --> 00:03:01,650
And that is enough for a simple website that let's run this now to around this, you don't just run

32
00:03:01,650 --> 00:03:03,240
with the run button.

33
00:03:04,020 --> 00:03:09,300
What you need to do is one way to run this is to go to the shell and to write.

34
00:03:11,990 --> 00:03:17,950
Stream, let's run Maine, though, it's p y, but don't do this.

35
00:03:18,190 --> 00:03:29,980
A better way to run is by creating an empty dodger apple lit file so that Ripple I.T. create that file

36
00:03:29,980 --> 00:03:30,370
in here.

37
00:03:32,350 --> 00:03:33,400
So that's an empty file.

38
00:03:33,430 --> 00:03:39,820
If you are running this locally, then you should use these commands in Ripple.

39
00:03:40,150 --> 00:03:49,690
You create that file and do wrong equals to double quotes open and close, and you put that command

40
00:03:49,690 --> 00:03:50,090
there.

41
00:03:50,110 --> 00:03:54,960
So stream, stream, let run mean that's p y.

42
00:03:55,510 --> 00:03:59,110
So our file where the code is is called Maine.

43
00:03:59,120 --> 00:04:01,000
That's why that's why we have that.

44
00:04:01,390 --> 00:04:06,160
So when we were on the project now with this button, this button will execute.

45
00:04:06,160 --> 00:04:07,060
That's commands.

46
00:04:07,570 --> 00:04:10,780
Normally that button executes the command.

47
00:04:14,120 --> 00:04:20,899
Python main, that's why, but when you have vets, that's a reptile, it's file in here that the bots

48
00:04:20,899 --> 00:04:25,520
and reads are the content of this file and runs the commands inside those quotes.

49
00:04:26,540 --> 00:04:34,460
So we're ready to run run stream lights will be installed now, so this should take a while.

50
00:04:35,210 --> 00:04:39,980
Once the installation is complete, then you should get this prompt here.

51
00:04:41,120 --> 00:04:42,680
You don't have to answer an email.

52
00:04:42,680 --> 00:04:43,430
You can just press.

53
00:04:43,430 --> 00:04:43,910
Enter your.

54
00:04:49,640 --> 00:04:50,920
And here is the Web.

55
00:04:53,920 --> 00:04:58,180
There's a title that's a subheading, and that's the contents.

56
00:04:58,450 --> 00:05:00,440
Now let's take a look at the address of the.

57
00:05:00,970 --> 00:05:09,220
This is a local IP address that means you cannot access the app from the outside of the network, so

58
00:05:09,640 --> 00:05:14,590
not anyone can view your app just yet a view in some ripples.

59
00:05:14,920 --> 00:05:23,410
You will get a public URL if you don't get a public URL, then you can deploy your app, and I'll show

60
00:05:23,410 --> 00:05:28,420
you how now to deploy your app so that everyone can visit your web app.

61
00:05:28,510 --> 00:05:35,950
You need to have GitHub, so you need to have a GitHub account and you need to be looked in in that

62
00:05:35,950 --> 00:05:37,420
gets up accounts in your browser.

63
00:05:37,840 --> 00:05:40,870
So, for example, I'm logged in in my GitHub account here.

64
00:05:41,170 --> 00:05:50,080
And then what you need to do is you have to go to the version control section or for.

65
00:05:52,060 --> 00:05:58,120
If you are locally on your computer, if you're using Pi Charm, Visual Studio code, etc, you can

66
00:05:58,120 --> 00:05:59,020
still do this.

67
00:05:59,050 --> 00:06:02,890
So you have to upload your code into GitHub.

68
00:06:03,190 --> 00:06:11,350
So do that if you are using a local I.D. If you are Apple, you have to go here as I'm doing creates

69
00:06:11,350 --> 00:06:12,250
a for.

70
00:06:14,010 --> 00:06:20,700
No, if you are not still connected with your GitHub account, Ripple will ask you through a window

71
00:06:20,700 --> 00:06:24,660
here to connect to your robot to your target, HarperCollins.

72
00:06:25,350 --> 00:06:31,400
Make sure that you allow pop up windows for your browser in your browser for this page.

73
00:06:31,410 --> 00:06:39,750
Otherwise, a window might be hiding here, which will ask you to login to GitHub so you may have a

74
00:06:39,750 --> 00:06:44,520
bar or a notification here, so be careful of that.

75
00:06:44,820 --> 00:06:51,030
In my case, I can just press connect to GitHub because I have already clicked on that pop up window

76
00:06:51,030 --> 00:06:52,590
that I got previously.

77
00:06:52,920 --> 00:06:55,860
So here you create a GitHub repository.

78
00:06:55,860 --> 00:06:59,580
Where do you want to upload your code to the GitHub servers?

79
00:07:00,810 --> 00:07:06,100
The visibility of the repository should be public, otherwise this will not work.

80
00:07:06,750 --> 00:07:09,630
Stream leads will not be able to get to your repository.

81
00:07:09,990 --> 00:07:12,060
Press public and then create a repository.

82
00:07:14,840 --> 00:07:17,180
Right then, if you click here.

83
00:07:18,510 --> 00:07:21,750
This should take you to that GitHub repository.

84
00:07:21,900 --> 00:07:28,800
So that's all codes mean that if you why is the code we have been writing in this video?

85
00:07:30,910 --> 00:07:33,280
And that's the home page of the repository.

86
00:07:34,720 --> 00:07:38,620
So here now, the next step is to go to.

87
00:07:40,540 --> 00:07:43,690
Shared stream leads, dots, i o.

88
00:07:47,900 --> 00:07:50,780
And then you want to connect to continue with GitHub.

89
00:07:53,780 --> 00:07:58,100
And you want to offer ice stream leads to connect with your kids, Harper Collins.

90
00:08:01,000 --> 00:08:03,640
The community version should be fine, so continue.

91
00:08:05,270 --> 00:08:08,240
You have to fill in these dots and press and continue.

92
00:08:14,700 --> 00:08:22,950
Then this page should show up, so you want to press on that dropdown list and go to from existing Ripple,

93
00:08:23,610 --> 00:08:34,340
then go here to paste GitHub URL and you should now go to your repository and click on Main.

94
00:08:34,350 --> 00:08:35,400
That's why.

95
00:08:37,549 --> 00:08:43,909
And then copy the URL that you see in your browser, so copy that.

96
00:08:45,980 --> 00:08:47,600
And paste it in here.

97
00:08:50,420 --> 00:08:51,890
And press on deploying.

98
00:08:57,260 --> 00:09:00,470
And wait a while until the deployment is completed.

99
00:09:02,460 --> 00:09:12,720
That's the app, that's Euro, so that's where you can copy it, and you can close this page, perhaps

100
00:09:12,720 --> 00:09:14,730
open a private browser.

101
00:09:16,360 --> 00:09:22,500
Paste, that's your over and you'll see that you can access the app so it's visible for everyone.

102
00:09:23,640 --> 00:09:23,970
All right.

103
00:09:24,180 --> 00:09:32,690
Let's go back to our development environment now and see how we can add a graph to create a graph.

104
00:09:32,700 --> 00:09:33,690
We need some data.

105
00:09:34,810 --> 00:09:39,330
And Panda's basic goods at library to work with Delta.

106
00:09:39,690 --> 00:09:48,930
So let's create, for example, some dots of first using a Python dictionary and that creates a pandas

107
00:09:48,930 --> 00:09:51,000
dataframe out of a dictionary.

108
00:09:51,750 --> 00:09:56,520
So let's suppose we have serious one of this string.

109
00:09:56,910 --> 00:10:01,830
It has a least of one three four five seven.

110
00:10:02,070 --> 00:10:06,800
So one, two, three, four or five items in the list a comma.

111
00:10:07,450 --> 00:10:08,830
Series two.

112
00:10:10,380 --> 00:10:17,540
It has a list of 10, 30, 40, 100, 250.

113
00:10:18,270 --> 00:10:21,720
So five items, they're five items in there.

114
00:10:22,290 --> 00:10:27,790
So that's the key value pairs of keys and value.

115
00:10:27,810 --> 00:10:29,460
That's how a dictionary is made of.

116
00:10:30,240 --> 00:10:33,660
And then we create a data frame out of that.

117
00:10:34,110 --> 00:10:38,190
Let's say the f is equal to pandas.

118
00:10:38,500 --> 00:10:42,900
That's data from the different class, which can get the data.

119
00:10:44,310 --> 00:10:49,560
As inputs, so this will create a data frame out of the data dictionary.

120
00:10:51,210 --> 00:10:57,720
Now I can print this data frame out here in the command line for you to see, but we don't have to do

121
00:10:57,720 --> 00:10:58,000
that.

122
00:10:58,000 --> 00:11:08,190
So when we can just say as T dot right and pass the f there so that data frame you were right, it's

123
00:11:08,460 --> 00:11:16,730
easier now if you go to the local app, in your local browser, in the local IP address and you see

124
00:11:16,740 --> 00:11:17,400
rerun.

125
00:11:19,810 --> 00:11:23,540
You should see the dataframe displayed there in the Web.

126
00:11:24,310 --> 00:11:31,960
But if you go to the IP address to the public URL of your app, you will not see that update.

127
00:11:32,230 --> 00:11:36,580
To update this, you want to first upload the changes to GitHub.

128
00:11:37,000 --> 00:11:43,270
So once you do the change, go to the version control section adds a commit message here.

129
00:11:43,320 --> 00:11:46,060
So at table or something like that?

130
00:11:46,690 --> 00:11:53,350
Just a note to know what you're doing and commit a push to push the data to the GitHub account.

131
00:11:54,370 --> 00:11:54,700
Right?

132
00:11:55,030 --> 00:11:56,080
That's completed.

133
00:11:56,080 --> 00:11:57,310
The commits is completed.

134
00:11:59,790 --> 00:12:07,740
If you go to Strimling, no surprise, you have the table already there, so the public URL is updated

135
00:12:07,740 --> 00:12:09,060
with the latest changes.

136
00:12:09,900 --> 00:12:14,260
So there are automatic updates from your GitHub account.

137
00:12:15,220 --> 00:12:23,640
Let's add the graph now that we have the data frame for a line graph, you have the line chart methods

138
00:12:24,480 --> 00:12:31,800
past the ever and you should get this button again automatically on the browser.

139
00:12:31,950 --> 00:12:32,670
So we run.

140
00:12:34,610 --> 00:12:36,500
And locally, we see the graph in here.

141
00:12:37,660 --> 00:12:42,470
So we have one line for the first series and the second life for the second series.

142
00:12:43,360 --> 00:12:45,130
The tremlett is not.

143
00:12:48,010 --> 00:12:54,560
The public you are, of course, is not yet updated because we need to do a commit and the push adds

144
00:12:54,610 --> 00:12:57,610
Graf as a commit message, commit and push.

145
00:13:00,250 --> 00:13:04,690
Go to the public sites and voila, we have the graph there.

146
00:13:05,740 --> 00:13:13,330
You can also add other types of graph, such as a city dot area chart the F.

147
00:13:14,920 --> 00:13:15,730
Rerun.

148
00:13:18,620 --> 00:13:20,450
And so we should see another graph here.

149
00:13:21,680 --> 00:13:22,460
That's one in there.

150
00:13:23,990 --> 00:13:28,370
You could also add widgets to your Web app.

151
00:13:28,670 --> 00:13:33,770
For example, let's say my slider is equal to the slider.

152
00:13:34,280 --> 00:13:37,430
Let's give this the label Celsius.

153
00:13:37,610 --> 00:13:40,460
You'll see in just a bit of why I named this Celsius.

154
00:13:41,540 --> 00:13:44,270
Once you have a slider, then you want to write.

155
00:13:46,130 --> 00:13:54,800
You want to add basically that slider to the Web up, so writes my slider, lets say in focus tonight.

156
00:13:56,960 --> 00:13:57,560
Is.

157
00:14:02,520 --> 00:14:08,670
Mice line two times nine, divided by five.

158
00:14:12,010 --> 00:14:13,090
Plus, 32.

159
00:14:13,480 --> 00:14:17,440
So that is a formula that's converts Celsius to foreign nights.

160
00:14:17,620 --> 00:14:19,300
You will understand everything in just a bit.

161
00:14:19,930 --> 00:14:20,950
Yeah, well, that's it.

162
00:14:21,580 --> 00:14:22,930
Let's run this app.

163
00:14:26,240 --> 00:14:27,980
And let's scroll down.

164
00:14:28,520 --> 00:14:29,480
There's a slider.

165
00:14:31,090 --> 00:14:34,540
So zero Celsius degree is 30 to Fahrenheit.

166
00:14:35,200 --> 00:14:35,830
How about.

167
00:14:36,880 --> 00:14:37,540
21.

168
00:14:38,640 --> 00:14:40,230
It's sixty nine point eight.

169
00:14:40,680 --> 00:14:40,930
Yeah.

170
00:14:41,790 --> 00:14:48,360
So there you have an app that gets input from the user in a very interactive, fun way.

171
00:14:48,570 --> 00:14:51,060
And it returns the outputs instantly.

172
00:14:51,330 --> 00:14:57,360
In here, let me commit this as well at slider commits and push.

173
00:15:00,430 --> 00:15:02,230
And there we go.

174
00:15:03,080 --> 00:15:04,120
That's a complete F..

175
00:15:05,810 --> 00:15:08,510
That's concludes this video.

176
00:15:08,720 --> 00:15:16,220
I hope you found this interesting, and it's just amazing how much you can do with just 20 lines of

177
00:15:16,220 --> 00:15:17,090
Python codes.

178
00:15:17,480 --> 00:15:20,210
I hope this worked for you, and I'll talk to you in the next videos.

179
00:15:20,210 --> 00:15:20,430
See?