1
00:00:01,130 --> 00:00:04,940
In the last video we did a little bit of environment setup and now we're ready to start working on our

2
00:00:04,940 --> 00:00:05,960
first project.

3
00:00:06,020 --> 00:00:08,200
So let's talk about what we're going to make.

4
00:00:08,270 --> 00:00:11,650
All right so we're gonna start off with a very simple first little application.

5
00:00:11,750 --> 00:00:16,010
We're gonna make a little tiny application that's just gonna make a network request to some outside

6
00:00:16,010 --> 00:00:22,230
API fetch some data and we're going to try to print that data inside of our terminal and that's it.

7
00:00:22,840 --> 00:00:27,870
Now with this first application I'm not trying to teach you any specific syntax or anything like that.

8
00:00:27,970 --> 00:00:31,070
I just want to show you why we use typescript in general.

9
00:00:31,180 --> 00:00:37,060
So as we write this program we're going to accidentally quote unquote know kind of accidentally introduce

10
00:00:37,060 --> 00:00:42,280
one or two bugs into our application and then we're going to very quickly see that typescript has the

11
00:00:42,280 --> 00:00:47,770
ability to help us catch those bugs while we are writing our code as opposed to when we execute our

12
00:00:47,770 --> 00:00:48,720
code.

13
00:00:48,730 --> 00:00:53,800
So again the point in this application is just to show you the typical workflow of typescript that's

14
00:00:53,800 --> 00:00:56,000
it all right so that mind.

15
00:00:56,020 --> 00:01:00,230
Let's talk about the flow that we're going to go through to actually build this application so step

16
00:01:00,230 --> 00:01:04,250
one we're going to take a look at the API that we're going to use to fetch some data.

17
00:01:04,280 --> 00:01:06,750
After that we're going to create a new project directory.

18
00:01:07,040 --> 00:01:12,920
We're going to create a package dot Jason File inside there and then install axioms as an NPM module

19
00:01:13,900 --> 00:01:18,550
XP exiles is a little module that we're going to use just to make a network request.

20
00:01:18,550 --> 00:01:21,720
If you've never worked with this module before totally fine.

21
00:01:21,750 --> 00:01:24,120
Acciona doesn't really have anything to do with typescript.

22
00:01:24,160 --> 00:01:26,410
We're just going to use it to make a network request.

23
00:01:26,410 --> 00:01:27,460
That's it.

24
00:01:28,110 --> 00:01:32,190
So once we do all that setup then we'll start to write out some code.

25
00:01:32,320 --> 00:01:32,550
All right.

26
00:01:32,580 --> 00:01:33,870
So onto step number one.

27
00:01:33,870 --> 00:01:38,970
Let's take a look at the API that we're going to use to fetch some data so here's a link to the API.

28
00:01:39,010 --> 00:01:42,190
Right here on the screen and this is a fake API.

29
00:01:42,190 --> 00:01:47,500
In other words it serves up fake data that we can use just for like testing or learning purposes.

30
00:01:47,500 --> 00:01:50,220
In other words it's perfect for what we are trying to do right now.

31
00:01:51,100 --> 00:01:55,550
So I going to pull up that documentation inside of a new tab and then scrolling down to a section called

32
00:01:55,610 --> 00:01:59,050
resources.

33
00:01:59,230 --> 00:01:59,510
All right.

34
00:01:59,520 --> 00:02:01,590
So here's resources right here.

35
00:02:01,590 --> 00:02:06,150
So these are all the different types of records so we can make a request to you or attempt to fetch

36
00:02:06,150 --> 00:02:07,740
from this API.

37
00:02:07,740 --> 00:02:10,860
We're going to attempt to fetch this list of to dos right here.

38
00:02:10,940 --> 00:02:16,110
So going to click on that slash to dos link as soon as I do so you're going to see a ton of information

39
00:02:16,110 --> 00:02:17,580
appear on the screen.

40
00:02:17,640 --> 00:02:22,470
You'll notice that on my screen it appears to be very nicely formatted if it looks like a big blob of

41
00:02:22,470 --> 00:02:24,650
text on your screen that's totally fine.

42
00:02:24,720 --> 00:02:30,350
I've got a little chrome extension to automatically format Jace on data for me so if we make a network

43
00:02:30,350 --> 00:02:37,520
request to this you are all right here we're going to get back a big list of fake to do items now we

44
00:02:37,520 --> 00:02:38,690
don't really need this whole list.

45
00:02:38,720 --> 00:02:41,930
I just want to try to fetch like one individual item.

46
00:02:41,930 --> 00:02:48,080
So if that's just this first item off the list or the to do with an idea of one we can modify the URL

47
00:02:48,170 --> 00:02:49,450
up here slightly.

48
00:02:49,670 --> 00:02:58,080
So at the very end of the URL I'll add on slash 1 like so once I visit that link I'll then see a single

49
00:02:58,080 --> 00:02:59,960
to do appear on the screen.

50
00:03:00,030 --> 00:03:02,720
So this is the exact data that we want to fetch.

51
00:03:02,850 --> 00:03:06,960
I want to fetch this data inside of our application and then just try to print out some information

52
00:03:06,960 --> 00:03:08,490
from this to do to our terminal.

53
00:03:08,490 --> 00:03:10,930
Like I said that's it.

54
00:03:11,170 --> 00:03:11,380
All right.

55
00:03:11,380 --> 00:03:15,820
So now that we understand the API we're going to work with we'll now flip on over to our terminal and

56
00:03:15,820 --> 00:03:20,070
create a new project directory over inside my terminal.

57
00:03:20,090 --> 00:03:22,380
I'm inside of a workspace directory of sorts.

58
00:03:22,400 --> 00:03:28,630
You can place this folder anywhere on your machine that you want to I'll make a new project folder inside

59
00:03:28,630 --> 00:03:31,090
of here and I'm going to call it batch.

60
00:03:31,120 --> 00:03:37,940
Jason I'll then change into that directory and then I'm going to generate a new package not just on

61
00:03:37,940 --> 00:03:39,300
file inside of here.

62
00:03:39,470 --> 00:03:43,910
Remember Package dot Jason files are used to record all the different dependencies that we install into

63
00:03:43,910 --> 00:03:44,970
a project.

64
00:03:45,290 --> 00:03:50,510
Normally that's the case for JavaScript projects but this is same thing for typescript as well we record

65
00:03:50,510 --> 00:03:55,180
dependencies inside of a package not just on file so to generate that file.

66
00:03:55,200 --> 00:03:57,180
I'll run NPM in it Dash y

67
00:04:00,180 --> 00:04:04,940
that's going to generate that file and now I can safely install that access module.

68
00:04:04,980 --> 00:04:09,230
Remember Acciona is going to be used just to make that network request.

69
00:04:09,230 --> 00:04:12,300
So to do so I'll run npm install axioms like so

70
00:04:15,360 --> 00:04:16,700
Acciona is really small.

71
00:04:16,740 --> 00:04:23,420
So this should install rather quickly once it's all done well then open up my code editor inside this

72
00:04:23,420 --> 00:04:27,620
folder and we'll start to work on our project.

73
00:04:27,730 --> 00:04:27,930
All right.

74
00:04:27,940 --> 00:04:28,810
So here we go.

75
00:04:28,870 --> 00:04:33,520
I should see inside of here the package dot JS on file and the node modules directory which has that

76
00:04:33,590 --> 00:04:37,260
axis project or module that we just installed.

77
00:04:37,320 --> 00:04:38,580
Now we've got everything set up.

78
00:04:38,580 --> 00:04:41,880
Let's take a quick pause right here and we'll start to write some code in the next video.