1
00:00:00,790 --> 00:00:02,770
We still have a whole lot to learn around React Native.

2
00:00:02,830 --> 00:00:06,960
So in this video we're going to start to discuss the next big application we're going to work on.

3
00:00:07,060 --> 00:00:07,260
All right.

4
00:00:07,260 --> 00:00:07,690
Here we go.

5
00:00:07,690 --> 00:00:09,760
Couple of different mockups to take a look at.

6
00:00:09,820 --> 00:00:11,610
So I've got several different mockups here.

7
00:00:11,620 --> 00:00:15,560
This application we're going to start working on is rather large in nature.

8
00:00:15,580 --> 00:00:18,550
I'm going to first begin by telling you what the point of this application is.

9
00:00:18,550 --> 00:00:21,110
In other words what is this app going to do.

10
00:00:21,160 --> 00:00:23,560
Our app is going to show a map to a user.

11
00:00:23,560 --> 00:00:27,210
So this is going to be a normal map that you wouldn't normally make use of on your phone.

12
00:00:27,210 --> 00:00:32,320
So either Apple Maps or Google Maps or whatever else we're going to show the user's current location

13
00:00:32,350 --> 00:00:33,670
on that map.

14
00:00:33,670 --> 00:00:39,640
We're then going to record the user's location over time and as the user starts to move around in the

15
00:00:39,640 --> 00:00:44,460
actual world we're going to draw a kind of a little line on the map like the one you see right here.

16
00:00:44,470 --> 00:00:49,490
So users are going to be able to track the path that they make over time in the real world.

17
00:00:49,780 --> 00:00:55,240
A user might want to use this application if they're going on a hike or a bike ride or a road trip or

18
00:00:55,240 --> 00:01:00,550
something like that any use case where user starts to move around in the physical world and they just

19
00:01:00,550 --> 00:01:04,180
want to kind of recap and see what path they took.

20
00:01:04,330 --> 00:01:09,790
The main screen that a user is going to be making use of is a screen that we'll call track create screen.

21
00:01:09,880 --> 00:01:15,670
So on the screen a user will be able to see their current location whenever they hit this record button.

22
00:01:15,700 --> 00:01:17,780
We're going to record their location over time.

23
00:01:17,800 --> 00:01:22,210
And like I said we're going to draw a little line on the map just to tell the user exactly where they

24
00:01:22,210 --> 00:01:29,100
are after a user has recorded what we're going to call a track which is essentially a series of points

25
00:01:29,130 --> 00:01:30,620
in the real world.

26
00:01:30,690 --> 00:01:36,060
We're then going to save that information and list out all the different tracks that a user has recorded

27
00:01:36,150 --> 00:01:39,320
on another screen called Track List screen.

28
00:01:39,360 --> 00:01:44,190
So on the screen the user might have recorded a fun hike they went on and then maybe a bike ride a road

29
00:01:44,190 --> 00:01:45,690
trip and so on.

30
00:01:46,020 --> 00:01:49,390
Whenever a user taps on one of these different tracks they have recorded.

31
00:01:49,740 --> 00:01:54,600
Well then take them to a detailed screen where we will show them another map once again and show them

32
00:01:54,600 --> 00:02:00,210
the exact route they had taken when they did that given activity.

33
00:02:00,210 --> 00:02:04,140
Now in addition to these three kind of primary activity screens right here we're also going to have

34
00:02:04,140 --> 00:02:06,720
some navigation or somehow authentication.

35
00:02:06,720 --> 00:02:11,320
So we want to have a sign up screen where a user can sign up for an account with our application with

36
00:02:11,330 --> 00:02:12,780
an email and password.

37
00:02:12,780 --> 00:02:18,590
And we'll also have a sign in as well and then the last screen we're going to worry about is an account

38
00:02:18,590 --> 00:02:20,010
screen over here.

39
00:02:20,030 --> 00:02:20,480
That's right.

40
00:02:20,480 --> 00:02:24,330
Now really just going to be dedicated to allowing a user to sign out of our application.

41
00:02:24,400 --> 00:02:28,880
But if we wanted to we could also have some other type of configuration settings or something like this

42
00:02:28,910 --> 00:02:31,070
on this account screen as well.

43
00:02:31,160 --> 00:02:32,050
So that's pretty much it.

44
00:02:32,060 --> 00:02:34,040
That's what we're going to build now at this point.

45
00:02:34,040 --> 00:02:38,630
The purpose of the application or this map right here might still be a little bit unclear.

46
00:02:38,630 --> 00:02:39,440
That's really fine.

47
00:02:39,440 --> 00:02:40,310
We're going to build this.

48
00:02:40,310 --> 00:02:45,510
So you're going to end up having a really good idea of exactly what this application does.

49
00:02:45,530 --> 00:02:49,970
Now what I want to tell you a little bit more right now is the architecture we're going to use for this

50
00:02:49,970 --> 00:02:51,100
application.

51
00:02:51,410 --> 00:02:54,270
So we're going to have our app of course running on a device.

52
00:02:54,380 --> 00:02:59,750
Our app is going to communicate with an outside API that you and I are going to assemble together.

53
00:02:59,750 --> 00:03:01,910
So this is going to be an express API.

54
00:03:01,910 --> 00:03:03,650
That's going to handle authentication.

55
00:03:03,650 --> 00:03:06,240
So the ability of a user to sign in and sign up.

56
00:03:06,550 --> 00:03:10,820
And it's also going to handle storage of these different tracks that a user creates.

57
00:03:10,820 --> 00:03:16,940
I remember a track is essentially a collection of physical locations that a user passes through we're

58
00:03:16,940 --> 00:03:23,330
then going to store all the information tied to these users in their tracks inside of a mongo DV instance.

59
00:03:23,360 --> 00:03:28,190
So we're going to put this Express API together and we're going to make sure that it speaks to our Mongo

60
00:03:28,190 --> 00:03:29,920
DB instance.

61
00:03:29,930 --> 00:03:35,060
One thing I want make sure that is really clear right now you do not have to build the Express API with

62
00:03:35,060 --> 00:03:35,260
me.

63
00:03:35,270 --> 00:03:38,990
I'm going to show you how to build it from scratch but it's entirely optional.

64
00:03:39,050 --> 00:03:41,900
So if you don't want to build that API no problem.

65
00:03:41,900 --> 00:03:43,630
This is of course around React Native.

66
00:03:43,630 --> 00:03:46,790
After all had not expressed back in development.

67
00:03:46,790 --> 00:03:51,530
So if you do not want to build the Express API with me you can just skip to the next section which is

68
00:03:51,530 --> 00:03:56,200
going to be many videos ahead and you can download all the completed source code for the express app.

69
00:03:56,210 --> 00:04:01,960
At that point in time I do want to say that even if you skip the Express setup you still have to run

70
00:04:01,960 --> 00:04:09,490
the server manually or locally on your own computer if you do skip these setup videos and go directly

71
00:04:09,490 --> 00:04:10,900
over to that download link.

72
00:04:11,080 --> 00:04:14,560
Like many videos ahead I'm going to show you how to set up that server.

73
00:04:14,590 --> 00:04:18,460
So even if you decide not to set up the stuff with me or write out the actual code I'll still show you

74
00:04:18,460 --> 00:04:20,050
how to run the server locally.

75
00:04:20,140 --> 00:04:22,370
So you can use it inside of your application as well.

76
00:04:23,230 --> 00:04:23,450
OK.

77
00:04:23,480 --> 00:04:24,460
So that's pretty much it.

78
00:04:24,490 --> 00:04:25,540
Let's take a pause right here.

79
00:04:25,570 --> 00:04:29,260
When we come back the next section we're gonna start working on our Express API.