1
00:00:00,830 --> 00:00:05,600
All right, my friends, many videos ago, I told you they were going to spend a lot of time learning

2
00:00:05,600 --> 00:00:07,230
the basic syntax of TypeScript.

3
00:00:07,580 --> 00:00:11,690
We've now gone through all that basic stuff and we've got a reasonable understanding of some of the

4
00:00:11,690 --> 00:00:12,980
low levels of typescript.

5
00:00:13,340 --> 00:00:17,840
But I think it's very fair to say that we still don't really understand how to build an application

6
00:00:17,840 --> 00:00:18,230
with it.

7
00:00:18,710 --> 00:00:21,500
So starting this video, we're going to work on our first application.

8
00:00:21,770 --> 00:00:25,910
And throughout the rest of this course, all we're going to focus on is design patterns.

9
00:00:26,420 --> 00:00:31,070
We're going to learn how to use TypeScript effectively inside of an application and how to leverage

10
00:00:31,070 --> 00:00:33,450
its features to write really reusable code.

11
00:00:33,980 --> 00:00:37,550
So let's talk about what we're going to build for our first application.

12
00:00:38,340 --> 00:00:38,870
All right.

13
00:00:38,870 --> 00:00:41,230
So here it is, Mucca.

14
00:00:42,080 --> 00:00:42,440
All right.

15
00:00:42,440 --> 00:00:45,220
So we're going to make a very basic little Web application.

16
00:00:45,680 --> 00:00:48,140
So this is going to be something that's going to run inside of your browser.

17
00:00:48,770 --> 00:00:52,750
Our application is going to randomly generate two different entities.

18
00:00:53,240 --> 00:00:57,000
It's going to randomly generate a user and randomly generate a company.

19
00:00:57,710 --> 00:01:01,880
Now, when I say randomly generate all, I mean is that we're going to have a user with a randomly generated

20
00:01:01,880 --> 00:01:05,000
name and last name and age and stuff like that.

21
00:01:05,510 --> 00:01:09,970
And our company will have a random name and a random business and some stuff like that as well.

22
00:01:11,390 --> 00:01:16,040
Every user in every company is going to have a location property tied to it as well.

23
00:01:16,280 --> 00:01:18,890
So this is going to be like a longitude and latitude.

24
00:01:19,860 --> 00:01:25,020
After we generate the user and the company, we're going to use that location to show them as markers

25
00:01:25,020 --> 00:01:26,920
on a Google map inside the browser.

26
00:01:27,510 --> 00:01:31,260
So this marker right here, I know it's kind of hard to see what these colors might represent.

27
00:01:31,260 --> 00:01:34,650
The user and this over here might represent the company.

28
00:01:35,580 --> 00:01:41,130
So the entire goal of this application is to get you more familiar with classes and how to understand

29
00:01:41,340 --> 00:01:47,460
how to make use of interfaces really effectively to get some amount of code reuse on the applications

30
00:01:47,460 --> 00:01:48,030
you work on.

31
00:01:48,180 --> 00:01:49,060
That's the whole goal.

32
00:01:49,080 --> 00:01:53,670
And like I said, that's pretty much the whole goal of the entire course, understanding classes and

33
00:01:53,670 --> 00:01:54,450
interfaces.

34
00:01:55,290 --> 00:01:55,590
All right.

35
00:01:55,590 --> 00:01:59,250
So now that we understand what's going on here, we're going to do just a tiny bit of setup inside this

36
00:01:59,250 --> 00:02:03,850
video in order to actually get some typescript code running inside the browser very easily.

37
00:02:04,020 --> 00:02:06,400
We're going to use a tool called Passell Bundler.

38
00:02:07,020 --> 00:02:11,009
This is a command line tool that we're going to use in place of T.S.A..

39
00:02:11,580 --> 00:02:16,130
Perzel bundler is all about getting some typescript executed inside the browser very easily.

40
00:02:16,500 --> 00:02:18,740
So it's going to automate a lot of tooling for us.

41
00:02:19,380 --> 00:02:22,980
We will eventually learn how to set up a typescript project manually.

42
00:02:23,100 --> 00:02:26,070
But right now we're going to start off nice and easy using Pursell.

43
00:02:26,970 --> 00:02:30,300
So to set up Passell, all we have to do is run this command at our terminal.

44
00:02:30,870 --> 00:02:37,170
It's going to flip over to my terminal right now and I'll do an install dagi pursell dash bundler like

45
00:02:37,170 --> 00:02:37,470
so.

46
00:02:39,030 --> 00:02:42,660
This is going to take a minute or two to install, so I'm going to let it do its thing and I'll join

47
00:02:42,660 --> 00:02:44,160
back up with you in just a minute.