1
00:00:02,180 --> 00:00:07,730
Now to get started, I again have the app running on an Android and an iOS simulator,

2
00:00:07,730 --> 00:00:13,820
It's my default starting app and again, attached you find that starting Project which you can work with

3
00:00:13,830 --> 00:00:16,820
to have to same starting setup as I do,

4
00:00:16,940 --> 00:00:24,060
for me it's just a new React Native project created with expo and this is the project we'll build upon.

5
00:00:24,200 --> 00:00:30,740
Now the important question of course is, which kind of app do we build here? What is the goal of this

6
00:00:30,740 --> 00:00:38,240
module? In this module, we're going to build an application where I want to have a little header at the

7
00:00:38,240 --> 00:00:48,380
top, so a little bar at the top which simply displays the title which is guess a number because we'll

8
00:00:48,380 --> 00:00:54,620
build an application where you enter a number and the computer, the app will try to guess it and therefore

9
00:00:54,620 --> 00:01:02,360
we'll have a starting screen where you have an input for your number which the user of the app can enter

10
00:01:02,960 --> 00:01:12,010
and then of course, we'll have two buttons, basically a confirm button here and a reset button here,

11
00:01:12,080 --> 00:01:18,770
so two buttons that allow us to control that input, then a button to basically start the game,

12
00:01:18,770 --> 00:01:25,460
so once you chose a number which basically loads a different screen you could say which still has our

13
00:01:25,460 --> 00:01:33,240
title at the top but where now the computer will output I guess let's say 63 initially,

14
00:01:33,290 --> 00:01:38,720
so that's guess from the computer which you kind of output in a nicer way here and then you have to

15
00:01:38,720 --> 00:01:46,370
tell whether the actual number is lower or greater than what the computer guess here,

16
00:01:46,370 --> 00:01:48,710
so you've got two buttons to control this.

17
00:01:48,740 --> 00:01:52,910
We want to show an alert if you give the user a wrong hint,

18
00:01:52,940 --> 00:01:58,280
so if your number is lower and you say greater, then I want to show an alert where we say something like

19
00:01:58,310 --> 00:02:00,190
don't cheat, anything like that,

20
00:02:00,260 --> 00:02:05,660
so little check in there and once the computer guessed the right number,

21
00:02:05,660 --> 00:02:12,980
so once the game is over basically, we'll have a game over screen here where we say something like game

22
00:02:13,460 --> 00:02:19,760
over, where I then want to output an image here, maybe such a rounded image like some

23
00:02:19,760 --> 00:02:26,810
goal image, a summit, something like this and below that, we'll output some info text like the computer

24
00:02:27,020 --> 00:02:31,820
guessed your number 15 in 10 guesses,

25
00:02:31,820 --> 00:02:39,440
so basically a summary and also a button to basically restart and play a new round with a new number.

26
00:02:39,440 --> 00:02:46,130
So the nice thing about this application is that whilst it of course isn't overly complex,

27
00:02:46,140 --> 00:02:52,220
there aren't tens of dozens of screens involved but whilst that is the case, we have a lot of different

28
00:02:52,220 --> 00:02:58,970
components which we also can style and layout, we use an image, we'll use our own custom fonts and we

29
00:02:58,970 --> 00:03:05,960
have also quite a bit of business logic in there to control the guessing, to check whether the correct

30
00:03:05,960 --> 00:03:12,800
number was guessed and so on. So it's a really nice app, a real nice second step which will make sure

31
00:03:12,800 --> 00:03:18,910
that all the basics are super clear and set after this module so that you are more than well-prepared

32
00:03:19,010 --> 00:03:22,730
for more advanced applications after this great application here.