1
00:00:02,060 --> 00:00:03,200
So let's plan

2
00:00:03,200 --> 00:00:08,920
the app we'll build and we'll build a basic shopping app, a basic online shop in an app

3
00:00:08,930 --> 00:00:17,120
you could say. So therefore in this application here, we'll definitely need a bunch of products which can

4
00:00:17,120 --> 00:00:17,680
be listed,

5
00:00:17,710 --> 00:00:24,590
so we'll have like a product overview screen where we see these cards with our products, with an

6
00:00:24,680 --> 00:00:30,770
image, with the title and the price maybe, something like this

7
00:00:30,770 --> 00:00:37,930
and also a cart or an add to cart button and a details button,

8
00:00:37,970 --> 00:00:42,440
so basically a button that allows us to go to a detail page and a button that allows us to add this

9
00:00:42,440 --> 00:00:43,730
to a cart.

10
00:00:43,760 --> 00:00:47,060
Because if you do tap this cart button here,

11
00:00:47,060 --> 00:00:53,900
so if you do select this cart button, then this is added to a cart and you can reach that cart with an

12
00:00:53,900 --> 00:00:56,360
action button here in the action bar,

13
00:00:56,390 --> 00:01:01,300
so in the top header, there I want to have such a cart

14
00:01:01,570 --> 00:01:08,060
icon, probably a bit nicer than what I drew here but this icon here in the end allows us to go to a

15
00:01:08,060 --> 00:01:14,480
separate page thereafter, a separate screen of this application where we of course then can also go

16
00:01:14,480 --> 00:01:23,240
back where we will see like a total sum in dollars here which our total cart items add up to

17
00:01:23,510 --> 00:01:26,910
and then a list of our items like a book

18
00:01:26,930 --> 00:01:28,360
and what this cost

19
00:01:28,520 --> 00:01:29,510
and something like this.

20
00:01:29,540 --> 00:01:33,140
So basically we see our cart here, we see a sum of that

21
00:01:33,140 --> 00:01:35,580
and then we see the individual items

22
00:01:35,630 --> 00:01:42,470
and of course, I also want to have a button that allows me to order what's in the cart and actually

23
00:01:42,530 --> 00:01:46,070
that button should be not below this,

24
00:01:46,070 --> 00:01:47,530
so here we'll have an order button.

25
00:01:47,600 --> 00:01:48,890
Actually this should be here,

26
00:01:48,890 --> 00:01:53,450
so here I want to have one row where we have the total sum and then next to it, the order button.

27
00:01:54,110 --> 00:01:55,310
So that's basically the goal

28
00:01:55,310 --> 00:01:57,250
but you could place this wherever you want,

29
00:01:57,250 --> 00:02:02,930
in the end, we want have a button that allows us to order whatever we have in the cart and on each cart item

30
00:02:02,930 --> 00:02:03,470
here,

31
00:02:03,470 --> 00:02:12,150
I also want to have like a trash icon here which allows me to delete an item from the cart.

32
00:02:12,200 --> 00:02:22,300
So where this places an order, this icon over here will basically just delete an item from the

33
00:02:22,300 --> 00:02:23,410
cart.

34
00:02:23,410 --> 00:02:24,220
So that's the idea,

35
00:02:24,220 --> 00:02:29,760
of course if you add the same item multiple times to the cart, you should not add multiple rows for that

36
00:02:29,830 --> 00:02:36,520
but instead here, I also want to show like a quantity of the item which simply increases if we

37
00:02:36,520 --> 00:02:41,920
add it more often to the cart and which decreases if we delete it until all items are deleted in which

38
00:02:41,920 --> 00:02:44,080
case the entire row would be deleted here.

39
00:02:44,080 --> 00:02:46,000
So that's how this cart page will work,

40
00:02:46,000 --> 00:02:54,070
this is the overview page here, of course therefore we can also tap the detail button or maybe the item

41
00:02:54,070 --> 00:02:56,950
in general, so anywhere on the image or anything like that

42
00:02:56,980 --> 00:03:00,250
and then we should be taken to a detail page.

43
00:03:00,250 --> 00:03:04,810
So that's another screen in this application where we of course also can go back.

44
00:03:04,810 --> 00:03:08,190
That's detail page of the icon where we should see the image,

45
00:03:08,260 --> 00:03:12,490
we should probably see like the title here in the header,

46
00:03:12,490 --> 00:03:23,710
so that would be the title of the item. Then below that, we see like the price, we see the description

47
00:03:24,190 --> 00:03:32,300
and we probably want to have a to cart button here as well, where we can also add items to the cart

48
00:03:32,310 --> 00:03:37,460
here. So that's the flow regarding our products

49
00:03:37,470 --> 00:03:38,630
we have here. Now

50
00:03:38,640 --> 00:03:44,060
the important thing in this app will be that we can not just see products and shop them and add them

51
00:03:44,060 --> 00:03:50,010
to cart and so on but of course that we can also view our orders and most importantly, that we can also

52
00:03:50,130 --> 00:03:52,110
add new products.

53
00:03:52,110 --> 00:03:59,100
Hence here, we need a drawer and this drawer will present us with a couple of options. Now

54
00:03:59,120 --> 00:04:05,940
the first option of course is that we go to our shop so to say, that's this part here where we are

55
00:04:05,940 --> 00:04:07,770
on when the app starts.

56
00:04:07,830 --> 00:04:10,110
The second option should be our orders

57
00:04:10,110 --> 00:04:17,340
and the third option should be like a manage products option, where we can manage our own products

58
00:04:17,370 --> 00:04:19,920
which you want to offer to other users.

59
00:04:19,950 --> 00:04:22,810
So as I said, shop is basically what we see already.

60
00:04:22,830 --> 00:04:31,500
Now if we tap on orders, well then I want to be taken to a screen where we of course also can open that

61
00:04:31,500 --> 00:04:34,540
drawer because that will then allow us to go back

62
00:04:34,590 --> 00:04:40,530
but on that screen we should see the orders where we basically have items where we kind of see like

63
00:04:40,960 --> 00:04:49,800
the sum of that order, the date and then also a button where we can tap on where we see more

64
00:04:49,800 --> 00:04:56,850
details and if we tap this button, then we have this optional area which opens or closes and in there,

65
00:04:56,860 --> 00:05:02,040
I basically want to see the items of the order which is basically what we had in the cart.

66
00:05:02,040 --> 00:05:09,810
So we had two books in here with a price of 19 for example, well then this would show up here in the

67
00:05:09,810 --> 00:05:11,590
detail area when we open this.

68
00:05:11,610 --> 00:05:12,490
So that's the idea here

69
00:05:12,540 --> 00:05:13,230
in the order,

70
00:05:13,230 --> 00:05:18,030
we can expand an order so that we don't just see the sum and the date but we also see the cart items we

71
00:05:18,030 --> 00:05:19,200
placed in there basically,

72
00:05:19,230 --> 00:05:23,720
so basically what we had here in the cart, that's showing up in the orders.

73
00:05:23,960 --> 00:05:25,380
So that's the orders screen,

74
00:05:25,380 --> 00:05:33,480
we also have managed products and let's draw that here maybe. Managed products is another area of this

75
00:05:33,480 --> 00:05:40,620
app where we also have that menu button to open that drawer again so that we can reach the other parts

76
00:05:40,620 --> 00:05:47,130
of the app but here in the managed products screen where we have our own products,

77
00:05:47,280 --> 00:05:52,980
so the user products and in this app, we won't add authentication yet but we'll add this later but here,

78
00:05:53,340 --> 00:05:55,380
we have our own products. Here

79
00:05:55,380 --> 00:06:01,290
the idea is again that we basically see a list of products which is pretty close to what we see here

80
00:06:01,350 --> 00:06:08,790
on the shop screen, so that we have like our cards here with with an image, with the title and the price

81
00:06:08,790 --> 00:06:11,980
maybe, so we can reuse this list here probably

82
00:06:12,510 --> 00:06:18,720
but of course the options we have on each product, that differs. Instead of adding it to a cart and viewing

83
00:06:18,720 --> 00:06:22,400
the details, we can delete it,

84
00:06:22,440 --> 00:06:28,710
that's one button and we can also edit it. Of course we can only edit our own products but again, we'll

85
00:06:28,710 --> 00:06:35,400
have no real user mapping here, we can do this with some dummy user ID which we attach to each product

86
00:06:35,730 --> 00:06:37,470
but that's it for now.

87
00:06:37,530 --> 00:06:39,330
So we have the edit and delete button,

88
00:06:39,330 --> 00:06:41,920
now in addition here in the header,

89
00:06:41,940 --> 00:06:47,640
so we need more space here, in the header we'll also have an action button that allows us to add a new

90
00:06:47,640 --> 00:06:48,390
product.

91
00:06:48,390 --> 00:06:53,310
So basically that should just be a little bit broader here, I drew this too narrow.

92
00:06:53,340 --> 00:07:00,030
So we have this action button here and this action button here, this plus button, this should take us

93
00:07:00,030 --> 00:07:02,480
to a new page where we can add a new product,

94
00:07:02,490 --> 00:07:12,630
so this will take us to the added product page here where we can of course go back and there, we can

95
00:07:12,720 --> 00:07:19,720
add a new product and that allows us to add a title here with a text input and that text input can also

96
00:07:19,720 --> 00:07:23,650
be below the title label, you can build this however you want.

97
00:07:23,670 --> 00:07:25,770
We should be able to add the price,

98
00:07:25,890 --> 00:07:32,390
we should be able to add description here, might be a multiline input here,

99
00:07:32,400 --> 00:07:36,530
we of course need to be able to add an imageUrl as well.

100
00:07:36,570 --> 00:07:41,460
So that's what we can add here and then we need a button here in the action bar, a check mark button or

101
00:07:41,460 --> 00:07:46,440
anything like that which allows us to confirm this. We'll not care too much about all that user input

102
00:07:46,440 --> 00:07:47,120
handling here

103
00:07:47,130 --> 00:07:52,230
at this stage because I'll have a separate module where I dive into all the details there, how you can

104
00:07:52,530 --> 00:07:57,330
do this in an elegant way, how you can add validation, so here in this app we'll keep this very basic, we'll

105
00:07:57,330 --> 00:08:00,870
not check whether the user entered something correct or anything like that,

106
00:08:00,870 --> 00:08:02,350
we'll do that later in the course.

107
00:08:02,430 --> 00:08:07,470
Here we just gathered that basic input when this button here, this check mark button here is pressed,

108
00:08:07,830 --> 00:08:13,560
we're taken back to this page and of course we use Redux in our state management system to add a new

109
00:08:13,560 --> 00:08:20,100
product to the list of products which then also shows up here in our shop and which shows up here in

110
00:08:20,100 --> 00:08:23,280
our product list of course which we can administrate.

111
00:08:23,340 --> 00:08:24,420
So that's what we have here.

112
00:08:24,480 --> 00:08:32,100
Now if we tap edit here, if we select this edit button here, then we're also taken to that same edit product

113
00:08:32,100 --> 00:08:40,410
page but of course now we have some prepopulated values here, prepopulated with the product we loaded

114
00:08:40,770 --> 00:08:43,110
and there are certain fields which we can't edit,

115
00:08:43,110 --> 00:08:49,080
for example the price should not be editable because if the price would be editable, then if we had it

116
00:08:49,080 --> 00:08:51,230
in the cart already, that would be a problem,

117
00:08:51,480 --> 00:08:54,390
so we'll not allow editing the price here,

118
00:08:54,390 --> 00:08:57,840
we will allow editing the title, the description and the imageUrl though,

119
00:08:57,930 --> 00:09:00,210
so that's something which is possible.

120
00:09:00,210 --> 00:09:01,210
So that's the one difference,

121
00:09:01,260 --> 00:09:04,180
we have prepopulated fields and the price is not editable.

122
00:09:04,260 --> 00:09:09,840
If we press the checkmark in the edit mode and we can find out whether we're editing or not by the

123
00:09:09,840 --> 00:09:14,220
fact whether we received a product ID as a parameter for example,

124
00:09:14,220 --> 00:09:20,100
so once we're done editing, we can press that checkmark icon and then we're also taken back and we simply

125
00:09:20,100 --> 00:09:23,660
save whatever we edited here back to our product.

126
00:09:23,670 --> 00:09:25,780
This is the app here.

127
00:09:25,890 --> 00:09:30,700
As I mentioned, this will be a basis for the subsequent modules as well,

128
00:09:30,700 --> 00:09:38,100
there we will then also add HTTP request, authentication, we'll do all that form validation here in

129
00:09:38,100 --> 00:09:40,020
a more elegant way and so on

130
00:09:40,050 --> 00:09:46,110
but this module here now is a great practice for how to build such an app, for how to work with components,

131
00:09:46,200 --> 00:09:51,240
style them, how to add navigation because obviously we have a lot of navigation in this app and how

132
00:09:51,240 --> 00:09:54,940
to manage our state in this shopping app.

133
00:09:55,020 --> 00:09:59,850
As I mentioned in the last lecture, you could skip this module but then you should definitely dive into

134
00:09:59,850 --> 00:10:05,100
the finished code so that you're able to follow along in the next modules but my recommendation of course

135
00:10:05,100 --> 00:10:10,840
is that you a) either try this all on your own and of course your result will not be the same

136
00:10:10,860 --> 00:10:16,230
I get, so you should definitely also watch my videos thereafter to see how I did this and so that you

137
00:10:16,230 --> 00:10:18,360
have the same code basis to follow along

138
00:10:18,360 --> 00:10:23,280
but this will be a great practice even if your result there first because there is no wrong or right

139
00:10:23,280 --> 00:10:28,890
approach necessarily or b) your other option of course is that you don't try it on your own and you just

140
00:10:28,890 --> 00:10:29,870
follow along,

141
00:10:29,970 --> 00:10:34,830
also a valid option but I believe you'll get a bit more out of the course if you do try it on your own

142
00:10:34,830 --> 00:10:35,490
first

143
00:10:35,490 --> 00:10:40,080
but in the end, do whatever you like. In the next lecture, we'll dive right into this and start building

144
00:10:40,080 --> 00:10:40,500
this app.