1
00:00:02,770 --> 00:00:07,410
So which kind of application will we build in this module here?

2
00:00:07,450 --> 00:00:15,580
We'll build a meals app, an app where we can view some recipes, favorite some recipes and also filter recipes

3
00:00:15,820 --> 00:00:19,370
and for this in this application, we'll need some navigation.

4
00:00:19,390 --> 00:00:25,810
We'll have our header there with some title in the middle and with a menu button here on the left which

5
00:00:25,810 --> 00:00:29,210
allows us to open a side drawer to which I'll come back in a second

6
00:00:29,470 --> 00:00:33,610
and at the bottom of this page here, we'll have tabs,

7
00:00:33,610 --> 00:00:42,700
we'll have two tabs - one for all meals, all recipes and one for our favorites which we'll of course be

8
00:00:42,700 --> 00:00:45,310
able to add in this app.

9
00:00:45,310 --> 00:00:49,800
Now on that all page, we'll have a grid of categories,

10
00:00:49,810 --> 00:00:59,310
so basically something like Italian, exotic, maybe German food,

11
00:00:59,470 --> 00:01:02,100
so basically different food categories

12
00:01:02,200 --> 00:01:09,490
and when we tap one of these categories, we'll be taken on a second screen where we'll then have a back

13
00:01:09,490 --> 00:01:13,660
button at the top to go back with another title, the category title

14
00:01:13,660 --> 00:01:17,110
and on that screen, we'll then have the recipes.

15
00:01:17,110 --> 00:01:24,910
So there, we'll have multiple such cards with let's say an image, a title, some extra information about

16
00:01:24,910 --> 00:01:29,250
the recipe like how long it takes to create it and so on,

17
00:01:29,260 --> 00:01:33,220
so when we click the back button, we're of course taken back here.

18
00:01:33,250 --> 00:01:37,300
Now that's one part and that's all where we're on the all tab down there,

19
00:01:37,300 --> 00:01:44,470
so when this is the active tab. Now we're not done in this flow though, of course we can tap a single recipe

20
00:01:44,890 --> 00:01:50,590
and that will take us to yet another page here where we can view the details about this recipe.

21
00:01:50,650 --> 00:01:56,530
So where we also have a header and an image of this recipe and also have a back button which takes

22
00:01:56,530 --> 00:02:02,950
us back to this page here, where we then also have more information about the recipe, like for example

23
00:02:02,950 --> 00:02:11,740
the ingredients which is such a list and then also the steps it takes to create this recipe, like cut

24
00:02:11,800 --> 00:02:12,860
onions and so on.

25
00:02:13,390 --> 00:02:17,370
So that's the information about the recipe we have here and we can go back.

26
00:02:17,710 --> 00:02:26,050
Important, we'll also have the functionality to mark a recipe as a favorite there, for example here

27
00:02:26,050 --> 00:02:31,710
in the header, we could have a star icon which allows us to do that,

28
00:02:31,720 --> 00:02:32,850
well that's an ugly star

29
00:02:32,880 --> 00:02:39,790
but that's something we could have here to mark a recipe as a favorite and we'll add it to this favorites

30
00:02:39,790 --> 00:02:43,210
list because that's the other tab we got here, right?

31
00:02:43,220 --> 00:02:50,980
That's the second tab we got here. When we press this tab here, we're basically switching the tab on this

32
00:02:51,040 --> 00:02:53,540
starting screen where we have that menu button,

33
00:02:53,740 --> 00:02:58,500
we still have our tabs here with all and with favorites

34
00:02:58,510 --> 00:03:01,750
but now let's say favorites is the active tab.

35
00:03:02,050 --> 00:03:10,660
Well in this case if favorites is the active tab, then here we essentially see a list of recipes which

36
00:03:10,660 --> 00:03:15,700
looks just like this list here of recipes when we click on a category

37
00:03:15,700 --> 00:03:24,790
but now only with a list of recipes with the recipes we marked as a favorite.

38
00:03:24,790 --> 00:03:30,890
Now we can still have a single recipe done and we're taken to that recipe detail page up there

39
00:03:30,970 --> 00:03:35,050
and if we now would press the back button, we'd of course go back to this page,

40
00:03:35,080 --> 00:03:40,130
so the back button takes us to different pages depending on where we're coming from.

41
00:03:40,180 --> 00:03:47,980
Now what happens when we press that drawer here though, when we tap this menu button? What happens in this

42
00:03:47,980 --> 00:03:49,110
case?

43
00:03:49,120 --> 00:03:56,860
Well in this case, we open a side drawer which allows us to go to the meals app which in the end is this

44
00:03:56,860 --> 00:04:05,830
app we're starting on, where we have all the favorites and also the filters screen. Now filters is a brand

45
00:04:05,860 --> 00:04:12,730
new screen which we have in this application, where we also have a menu button to go to that same

46
00:04:12,850 --> 00:04:22,150
menu here and possibly go back to the meals page and on filters, we can set filters like glutenFree

47
00:04:22,490 --> 00:04:30,740
or vegan and we'll have some switches here which allow us to toggle these options on and off

48
00:04:31,160 --> 00:04:38,690
and we also have like a save button here at the top which allows us to then save our selection and

49
00:04:38,720 --> 00:04:48,430
then we can go back and the recipes we see here will be filtered by our selection on the filter screen.

50
00:04:49,070 --> 00:04:54,270
So this is the application we're building and now this sketch here shows two things - 

51
00:04:54,290 --> 00:05:00,500
for one, my drawing skills aren't that awesome. Shouldn't matter too much though because this is thankfully

52
00:05:00,590 --> 00:05:02,360
not a drawing class.

53
00:05:02,390 --> 00:05:07,330
The more important thing this sketch shows is that we'll have a lot of navigation, 

54
00:05:07,370 --> 00:05:08,170
we have tabs,

55
00:05:08,180 --> 00:05:15,760
we have a side drawer and we have forth and back navigation, so we'll go back and forth between pages,

56
00:05:15,800 --> 00:05:21,080
we'll have to change the title in the header based on where we're going, we'll have to change the content

57
00:05:21,080 --> 00:05:26,510
on the screen based on where we're going and therefore, we need a powerful navigation solution where

58
00:05:26,510 --> 00:05:33,200
we don't just use if checks as we did it thus far in the course. Not only because that would be very

59
00:05:33,200 --> 00:05:39,800
cumbersome to write but also because we want these beautiful animations, these transitions between screens

60
00:05:40,250 --> 00:05:44,220
and that's something we thankfully can add in a relatively easy way.