1 00:00:00,980 --> 00:00:01,880 Hey, welcome back. 2 00:00:01,910 --> 00:00:05,060 At this point, we have come up with this app. 3 00:00:05,600 --> 00:00:10,910 So we have two columns and we have some content here outside of those columns. 4 00:00:10,940 --> 00:00:15,020 Now we're going to have to add two more columns. 5 00:00:15,020 --> 00:00:20,390 So if we look at that PDF, the sketch we did. 6 00:00:21,290 --> 00:00:21,920 Which is here. 7 00:00:21,920 --> 00:00:28,010 I've added it to my project directory to have it here handy for convenience. 8 00:00:28,010 --> 00:00:31,040 And so this is what we're going to add. 9 00:00:31,920 --> 00:00:32,820 One app here. 10 00:00:32,820 --> 00:00:33,900 One app here. 11 00:00:34,170 --> 00:00:37,200 Three for answer one. 12 00:00:38,530 --> 00:00:45,850 And for each app, we're going to have the title, the description of the app, the image thumbnail, 13 00:00:45,850 --> 00:00:53,410 and also the link to the source code, which is going to be the link to the GitHub repository for each 14 00:00:53,410 --> 00:00:54,180 app. 15 00:00:54,190 --> 00:01:01,290 We don't have those links currently, so we're just going to have one simple link for every page at 16 00:01:01,300 --> 00:01:02,380 the same link. 17 00:01:02,710 --> 00:01:07,030 And so these data are stored in CSV. 18 00:01:07,360 --> 00:01:13,990 So we have the title, the description of the app, the URL and the image file path. 19 00:01:14,260 --> 00:01:20,950 For example, we have the two two app, the portfolio website app, the PDF templates app and so on. 20 00:01:21,860 --> 00:01:23,560 Images are stored in here. 21 00:01:23,830 --> 00:01:33,070 And with that let's go to Main SPI and under this aren't indented, we will add two columns. 22 00:01:33,070 --> 00:01:41,590 So first let's say call three and call for create them as objects dot sd dot columns. 23 00:01:41,770 --> 00:01:48,850 So this columns method will create two columns, store each column object in these two variables. 24 00:01:51,440 --> 00:01:53,610 And then we say call three. 25 00:01:54,060 --> 00:01:57,300 So what do we put in column three? 26 00:01:57,300 --> 00:02:01,350 Which is this one in here? 27 00:02:05,130 --> 00:02:10,979 So that here is column three and that one there will be column four. 28 00:02:12,150 --> 00:02:14,580 So let's add the title first. 29 00:02:20,380 --> 00:02:22,420 Before accessing the title. 30 00:02:22,420 --> 00:02:28,360 We need to access the actual data, the complete data from data CSV. 31 00:02:28,510 --> 00:02:32,470 And for that, we're going to use pandas. 32 00:02:33,160 --> 00:02:34,750 So import pandas. 33 00:02:35,910 --> 00:02:38,250 Pandas is a third party library. 34 00:02:38,430 --> 00:02:41,520 It is used to read CSV data. 35 00:02:45,680 --> 00:02:49,610 So let me demonstrate you in the Python console how pandas works. 36 00:02:49,640 --> 00:02:57,950 No, pandas has already been installed by streaming it because it's a dependency of stream late. 37 00:02:58,100 --> 00:03:02,660 Otherwise, you could go to Python packages, Search for pandas. 38 00:03:04,300 --> 00:03:09,300 And if you see the install button in here, then you can install it. 39 00:03:09,310 --> 00:03:11,070 In my case, it's already installed. 40 00:03:11,080 --> 00:03:13,690 I hope it's the case for you too. 41 00:03:14,170 --> 00:03:16,960 Then you can import pandas. 42 00:03:16,960 --> 00:03:21,400 So like I did and we can import it in the python console as well. 43 00:03:24,160 --> 00:03:31,030 And then you say you have this variable and you point to pandas that reads See CSV. 44 00:03:31,210 --> 00:03:36,400 So CSV is a function of the Pandas third party library. 45 00:03:36,400 --> 00:03:41,800 And this function expects as output the path to the CSV file. 46 00:03:42,730 --> 00:03:44,080 In this case it is data. 47 00:03:44,080 --> 00:03:50,140 Does CSV data that CSV is located in the project directory in my computer in here. 48 00:03:50,140 --> 00:03:52,420 So it should be the case for you as well. 49 00:03:52,900 --> 00:03:54,550 So provide it there and. 50 00:03:54,550 --> 00:03:59,110 Presenter And now the F is. 51 00:04:00,230 --> 00:04:01,170 But this. 52 00:04:04,920 --> 00:04:13,220 However, the reading was not done correctly here, actually, because pandas actually the read see 53 00:04:13,230 --> 00:04:17,550 as the method doesn't know how to read this data. 54 00:04:17,940 --> 00:04:21,779 So what we got is just a bunch of texts. 55 00:04:22,470 --> 00:04:31,350 It's not formatted correctly, so to format it correctly, press the upper arrow key until you get this 56 00:04:31,350 --> 00:04:33,950 expression where we read the CS with data. 57 00:04:34,440 --> 00:04:36,470 Then you give another argument. 58 00:04:36,480 --> 00:04:40,780 So after a comma you need you need another argument for the function. 59 00:04:40,800 --> 00:04:44,610 This will be the CEP argument is equal to. 60 00:04:45,900 --> 00:04:50,400 Semicolon as a string you see in double in double quotes. 61 00:04:51,240 --> 00:04:53,160 So I'm giving it a semicolon. 62 00:04:53,160 --> 00:04:59,670 So I'm telling the reader as a function that the data are divided, are separated. 63 00:04:59,670 --> 00:05:01,980 CEP stands for separator. 64 00:05:02,370 --> 00:05:06,060 So these data are separated by a semicolon. 65 00:05:06,300 --> 00:05:10,380 If I press enter now and then I call the F again. 66 00:05:10,590 --> 00:05:15,930 This time you're going to see a better structure. 67 00:05:16,500 --> 00:05:18,990 So you see we have the title column. 68 00:05:19,620 --> 00:05:22,770 So all these belong to that title column. 69 00:05:23,220 --> 00:05:28,140 We have other columns as well, but they are not being displayed here because it's too much data. 70 00:05:28,800 --> 00:05:32,150 However, you can also view the dataframe in here. 71 00:05:32,160 --> 00:05:37,800 You can press that view dataframe button and py charm will show you this. 72 00:05:38,070 --> 00:05:45,600 So python and pandas have passed this dataframe as a table. 73 00:05:45,780 --> 00:05:53,760 So all the data are well structured now and we can access these data using some other functions which 74 00:05:53,760 --> 00:05:55,800 you'll see in just a minute. 75 00:05:56,490 --> 00:06:02,370 So that's what we have, the title, the description of the URL and the image, that's what PANDAS does. 76 00:06:02,370 --> 00:06:12,690 So you could also do this parsing using that with open data CSV method as file. 77 00:06:12,690 --> 00:06:16,050 And so you can load this as a string. 78 00:06:16,050 --> 00:06:20,610 Let's say you say content is equal to file dot read. 79 00:06:23,450 --> 00:06:28,580 The contents and the contents variable will be just a string. 80 00:06:28,580 --> 00:06:37,360 So these are not ports and you could pass them using Python methods like string methods to split this 81 00:06:37,370 --> 00:06:38,480 text and so on. 82 00:06:38,480 --> 00:06:41,150 But that would be too much work. 83 00:06:41,160 --> 00:06:43,640 It would be like reinventing the wheel. 84 00:06:43,640 --> 00:06:52,430 So Pandas gives you the data structured in a tabular format so you can access what data you want. 85 00:06:52,430 --> 00:06:58,070 So in this case, we want to access the titles of these data. 86 00:06:58,850 --> 00:07:02,720 So basically we want that column. 87 00:07:02,720 --> 00:07:05,930 We want to display all these titles on the web page. 88 00:07:06,380 --> 00:07:16,910 To do that, we need to iterate over that data frame, which would be for index row in D, F, So F 89 00:07:16,910 --> 00:07:20,060 is the variable that contains the data frame the table. 90 00:07:21,930 --> 00:07:27,600 And then you see print row and we only want the title. 91 00:07:27,780 --> 00:07:31,500 So the title is the name of that column. 92 00:07:32,400 --> 00:07:33,720 So let's execute. 93 00:07:33,720 --> 00:07:34,560 Execute again. 94 00:07:38,790 --> 00:07:40,290 Now we've got an error here. 95 00:07:41,360 --> 00:07:47,190 And the problem is that I forgot to add something here. 96 00:07:47,210 --> 00:07:53,600 So let me call that again with the operator Key in point, Sean, you can call the previously executed 97 00:07:53,600 --> 00:07:54,330 statement. 98 00:07:54,350 --> 00:07:57,320 You can go with the upper arrow key above here. 99 00:07:57,410 --> 00:07:58,060 Right. 100 00:07:58,070 --> 00:07:58,910 Arrow key. 101 00:07:58,940 --> 00:08:07,310 Go to DF and add a method itr rows you see with double or it arrows. 102 00:08:07,310 --> 00:08:09,050 That's a method with parentheses. 103 00:08:09,440 --> 00:08:13,490 So basically we access know the rows of the dataframe. 104 00:08:13,490 --> 00:08:18,380 So this method gives access to the rows and then we iterate over those rows. 105 00:08:18,620 --> 00:08:25,010 So now you need to go with your down arrow key to the last dots here and press enter. 106 00:08:26,090 --> 00:08:28,610 This time we got the correct results. 107 00:08:28,730 --> 00:08:30,620 So these are all the titles. 108 00:08:30,620 --> 00:08:38,570 So basically that gives you the title of each row in the dataframe to do app portfolio websites, PDF 109 00:08:38,570 --> 00:08:39,890 templates and so on. 110 00:08:41,179 --> 00:08:45,020 So with that we can go to main dot SPI. 111 00:08:45,050 --> 00:08:48,860 We import pandas before creating columns. 112 00:08:48,860 --> 00:08:55,580 We read the dataframe using pandas that reads CSV data. 113 00:08:55,830 --> 00:09:03,620 CSV another set of arguments which is going to be a semicolon. 114 00:09:04,190 --> 00:09:12,560 If this was a comma, you'd have to write a comma here, although this could be omitted if the data 115 00:09:12,560 --> 00:09:18,410 are separated by commas, because by default this RCEP argument is equal to a comma. 116 00:09:18,410 --> 00:09:24,740 But when the data are not separated by commas, you have to explicitly declare the separator here. 117 00:09:25,280 --> 00:09:33,500 And then with call three you say for index row in DF that it rows. 118 00:09:34,730 --> 00:09:36,530 That's a method, a colon. 119 00:09:36,530 --> 00:09:40,460 And then I'm going to use a header to write a big text. 120 00:09:40,460 --> 00:09:47,930 You can also write the right method, but a reader will write an H one header, so that would be row. 121 00:09:50,050 --> 00:09:50,610 Title. 122 00:09:51,730 --> 00:09:58,210 So in the case of the Python console, we just printed out the titles, but here we write them on the 123 00:09:58,210 --> 00:09:59,020 web page. 124 00:09:59,890 --> 00:10:00,080 Yep. 125 00:10:00,100 --> 00:10:05,530 I'll make some space here and let's run the app in the terminal. 126 00:10:05,770 --> 00:10:08,500 So that would be stream lit. 127 00:10:08,500 --> 00:10:10,570 Run Main dot P. 128 00:10:10,600 --> 00:10:12,880 That's the name of my file. 129 00:10:15,170 --> 00:10:18,230 And the browser should open automatically. 130 00:10:18,380 --> 00:10:19,430 Yeah, that's it. 131 00:10:23,510 --> 00:10:25,760 So these are all the titles. 132 00:10:25,910 --> 00:10:33,230 They are rendered in one single column for now, but we can fix that easily. 133 00:10:34,040 --> 00:10:40,760 The way I would fix that is by adding here another column. 134 00:10:40,940 --> 00:10:43,610 So call three that one. 135 00:10:45,620 --> 00:10:50,750 Again, we iterate for index row in default eight rows. 136 00:10:54,870 --> 00:10:59,310 See that header row title. 137 00:10:59,370 --> 00:11:01,080 I know you are confused. 138 00:11:01,200 --> 00:11:04,580 What I just did is identical with this one. 139 00:11:05,070 --> 00:11:09,540 But we can do some small change here. 140 00:11:09,960 --> 00:11:12,750 So let me show that to you in the python console. 141 00:11:12,750 --> 00:11:19,510 First we've got the DF dataframe, which has 20 rows you can see at the end. 142 00:11:19,530 --> 00:11:22,800 We get the statistics about this dataframe. 143 00:11:22,800 --> 00:11:26,040 So it has 20 rows and four columns or both. 144 00:11:26,070 --> 00:11:37,380 If you use a list indexing syntax such as 0 to 10 or just that which is the shortcut of 0 to 10, if 145 00:11:37,380 --> 00:11:41,280 you execute that, you're going to get only the ten first rows. 146 00:11:42,250 --> 00:11:43,270 You can cancel that. 147 00:11:43,270 --> 00:11:47,380 So only the first ten rows we've got in here. 148 00:11:48,630 --> 00:11:53,420 And if you are the last ten rows, you can do ten like that. 149 00:11:53,430 --> 00:11:54,600 And that's what we get. 150 00:11:54,630 --> 00:11:58,830 So from 1011 up to 913. 151 00:11:58,830 --> 00:12:01,530 So that's the indexing of the data frame. 152 00:12:01,530 --> 00:12:03,060 It starts from zero. 153 00:12:03,570 --> 00:12:13,500 So zero is the index of the first app up to nine for the first ten apps and 10 to 19 for the second 154 00:12:13,500 --> 00:12:14,340 ten apps. 155 00:12:14,880 --> 00:12:19,780 So therefore, we can go to the code here and say DF. 156 00:12:21,960 --> 00:12:23,790 Up to ten and. 157 00:12:27,780 --> 00:12:31,140 From ten up to the end of the dataframe. 158 00:12:32,370 --> 00:12:39,120 I can save this script, go to the browser refresh and yeah, those are the titles. 159 00:12:39,120 --> 00:12:42,210 Split it into two columns. 160 00:12:43,340 --> 00:12:46,490 And that's how you work with pandas. 161 00:12:47,360 --> 00:12:55,520 So as you can see, this might be looking like a simple website, but it does teach you some very fundamental 162 00:12:55,520 --> 00:12:57,950 advanced, actually Python concepts. 163 00:12:58,040 --> 00:13:04,790 PANDAS is more into the advanced part of Python where you work with data. 164 00:13:06,880 --> 00:13:09,970 And before we close the video, let's commit the changes. 165 00:13:10,660 --> 00:13:12,520 This would be day 22. 166 00:13:12,520 --> 00:13:19,840 And what we did is render the titles, the app titles. 167 00:13:19,840 --> 00:13:25,360 Let's be more explicit in two columns and commit. 168 00:13:25,960 --> 00:13:26,640 And that's it. 169 00:13:26,650 --> 00:13:28,390 Thanks a lot and I'll see you in the next video.