1
00:00:00,240 --> 00:00:02,484
Applications always require data.

2
00:00:02,484 --> 00:00:07,034
For example, the internet movie database
is only useful because it lets you

3
00:00:07,034 --> 00:00:10,250
access data about movies,
actors, and directors.

4
00:00:11,250 --> 00:00:11,790
Using and

5
00:00:11,790 --> 00:00:16,052
maintaining data is normally handled
by connecting the app to a database.

6
00:00:16,052 --> 00:00:20,640
To use our flash card application as
an example, a data base would store

7
00:00:20,640 --> 00:00:24,790
the text for the prompts answers and
hints for each flash cards.

8
00:00:24,790 --> 00:00:29,647
For applications requiring a log in user
data will also be stored in the database.

9
00:00:29,647 --> 00:00:34,210
Databases are a big topic though,
too big for this course.

10
00:00:34,210 --> 00:00:37,054
We can still set up a power
app to use data and

11
00:00:37,054 --> 00:00:40,537
hook up database later in
the development process.

12
00:00:40,537 --> 00:00:45,753
In fact developers will always work
this way, creating an app to use some

13
00:00:45,753 --> 00:00:51,328
local data for development and testing,
then connecting a database later.

14
00:00:51,328 --> 00:00:56,170
We can add our flash card data in what
sometimes called a flat data file.

15
00:00:56,170 --> 00:00:59,040
We would put the data that
the database would store

16
00:00:59,040 --> 00:01:01,070
into the that file and load it.

17
00:01:01,070 --> 00:01:06,235
Let's create a flat data file to
provide the app splash card data.

18
00:01:06,235 --> 00:01:13,828
I'll create a folder called data
in the root of my directory,

19
00:01:13,828 --> 00:01:21,870
and then I'll create a new folder
called flashcardData.json.

20
00:01:21,870 --> 00:01:26,135
Now, I'll just paste in
some flash card data I've

21
00:01:26,135 --> 00:01:30,460
included this snipit in
the teacher's notes.

22
00:01:30,460 --> 00:01:33,970
You can just copy and
paste that into your own file.

23
00:01:33,970 --> 00:01:38,330
This file contains a JSON
object with the data property.

24
00:01:38,330 --> 00:01:43,960
The data property refers to an object
with one property called cards.

25
00:01:45,430 --> 00:01:50,600
Cards is an array of objects that
contain each flashcards' data.

26
00:01:52,720 --> 00:01:57,956
Feel free to change these questions and
answers in hints, or add more cards.

27
00:01:57,956 --> 00:02:03,970
Just make sure not to change the JSON
structure or our app won't work.

28
00:02:03,970 --> 00:02:07,325
Let's pull this data into
our card's routes file.

29
00:02:07,325 --> 00:02:11,420
On the third line,
I'll require the data file.

30
00:02:20,378 --> 00:02:25,190
I'll store the JSONs data property
into a constant, named data.

31
00:02:32,234 --> 00:02:35,270
Then I will go further and
install the card data separately.

32
00:02:38,625 --> 00:02:43,494
I've separated out the cards because the
cards will be the main data we will want

33
00:02:43,494 --> 00:02:44,870
to use.

34
00:02:44,870 --> 00:02:49,231
If you're not familiar with
the ES6 syntax here and here.

35
00:02:52,190 --> 00:02:57,624
This is just the equivalent
of saying cards = data.cards.

36
00:03:00,286 --> 00:03:05,823
And data, .data.

37
00:03:09,020 --> 00:03:11,030
It's just more concise this way.

38
00:03:13,950 --> 00:03:17,220
You can also include
JSON directly in Node.

39
00:03:17,220 --> 00:03:22,330
It reads the text file and then parses the
text and coverts it into a JSON object so

40
00:03:22,330 --> 00:03:26,174
you don't have to call json.parse.

41
00:03:28,180 --> 00:03:31,705
Let's connect the template to the first
question just to be sure it's

42
00:03:31,705 --> 00:03:33,630
loading correctly.

43
00:03:33,630 --> 00:03:37,616
In the objects we're
passing in to the template.

44
00:03:42,449 --> 00:03:45,530
I'll point the prompt property.

45
00:03:45,530 --> 00:03:47,740
To the first card's question property.

46
00:03:54,360 --> 00:03:56,610
And the hint to the card's hints.

47
00:04:04,906 --> 00:04:06,320
Now let's look at it in the browser.

48
00:04:08,260 --> 00:04:11,340
It's pulling in the data,
and displaying it.

49
00:04:11,340 --> 00:04:16,568
That's great, but how will we pull up
any card that we want in the browser?

50
00:04:16,568 --> 00:04:19,300
Let's use a route parameter for that.

51
00:04:19,300 --> 00:04:23,280
A route parameter is
a variable that a user can put

52
00:04:23,280 --> 00:04:26,930
right into the URL to point
to a particular resource.

53
00:04:27,940 --> 00:04:32,120
For our current URL,
we want to place a number at the end

54
00:04:33,370 --> 00:04:35,500
indicating which card to display.

55
00:04:36,950 --> 00:04:39,190
Our first one would server like this.

56
00:04:40,610 --> 00:04:43,650
Our second one would be 1 and so on.

57
00:04:44,830 --> 00:04:49,505
Right now if i hit Enter,
I get a 404 page.

58
00:04:49,505 --> 00:04:54,810
Let's set up our parameter route
to take the parameters like this.

59
00:04:54,810 --> 00:04:55,614
In express,

60
00:04:55,614 --> 00:05:00,010
we can indicate a route parameter
right here where we declared the URL.

61
00:05:00,010 --> 00:05:06,693
I can use a colon to tell express the
treat this part of the URL as a variable.

62
00:05:06,693 --> 00:05:11,409
And if I put :id for
example Express will treat this

63
00:05:11,409 --> 00:05:16,792
portion of URL as a variable or
a route parameter named id.

64
00:05:16,792 --> 00:05:21,063
The value for the route parameter
from the URL will be stored in

65
00:05:21,063 --> 00:05:23,706
the request object params property.

66
00:05:25,680 --> 00:05:29,565
Let's use the ID parameter to access
the elements in the card's array,

67
00:05:29,565 --> 00:05:34,525
I'll replace the two zeroes
with references to the value in

68
00:05:34,525 --> 00:05:40,275
rec.params.id.

69
00:05:44,780 --> 00:05:49,638
Again, I'm using the id
property on the params

70
00:05:49,638 --> 00:05:54,747
because that's what I
called it in the URL above.

71
00:05:54,747 --> 00:06:00,470
Refreshing the URL in the browser is
no longer 404ing and it's working.

72
00:06:00,470 --> 00:06:05,390
Using URL parameters is a powerful
way to access different resources.

73
00:06:05,390 --> 00:06:09,870
In the next video we'll take
a look at another way to use a URL

74
00:06:09,870 --> 00:06:13,910
to post specific data from
a resource called the query string