1
00:00:00,570 --> 00:00:03,490
Now, before we write a single line of code,

2
00:00:03,490 --> 00:00:06,370
we first need to plan this project,

3
00:00:06,370 --> 00:00:09,210
because this one is a little bit more complex

4
00:00:09,210 --> 00:00:11,933
than the other projects that we have been building.

5
00:00:13,440 --> 00:00:18,000
So until now we have always simply started to code,

6
00:00:18,000 --> 00:00:20,990
but without much thought about the features,

7
00:00:20,990 --> 00:00:23,620
or the architecture before writing

8
00:00:23,620 --> 00:00:25,650
the implementation itself.

9
00:00:25,650 --> 00:00:30,150
I mean, we actually did use a flowchart a couple of times,

10
00:00:30,150 --> 00:00:32,910
but I always simply provided that flow chart,

11
00:00:32,910 --> 00:00:34,810
and we never did it together.

12
00:00:34,810 --> 00:00:38,120
So we never planned an application together.

13
00:00:38,120 --> 00:00:41,030
So in the real world, it's very important

14
00:00:41,030 --> 00:00:43,980
that you always start with a planning phase

15
00:00:43,980 --> 00:00:46,150
before building any project,

16
00:00:46,150 --> 00:00:49,080
because otherwise you're setting yourself up

17
00:00:49,080 --> 00:00:52,810
to a lot of confusion and problems down the road.

18
00:00:52,810 --> 00:00:56,320
So to avoid all that, we will now do the planning

19
00:00:56,320 --> 00:00:58,520
of the Mapty project together.

20
00:00:58,520 --> 00:01:02,180
And so then you will get a feeling of how it works.

21
00:01:02,180 --> 00:01:06,010
Now, there are many different ways of planning a project,

22
00:01:06,010 --> 00:01:08,610
but I'm gonna show you my favorite process here,

23
00:01:08,610 --> 00:01:13,320
which works great for many small and medium sized projects.

24
00:01:13,320 --> 00:01:15,340
So I always like to start out

25
00:01:15,340 --> 00:01:18,290
with a concept called User Stories.

26
00:01:18,290 --> 00:01:21,240
And many companies, and teams use this idea

27
00:01:21,240 --> 00:01:22,750
of user stories.

28
00:01:22,750 --> 00:01:25,840
So you will see this everywhere when you start working

29
00:01:25,840 --> 00:01:28,330
on a real developer job.

30
00:01:28,330 --> 00:01:32,230
So a user story is basically a description

31
00:01:32,230 --> 00:01:34,480
of the application's functionality

32
00:01:34,480 --> 00:01:36,670
from the user's perspective.

33
00:01:36,670 --> 00:01:39,860
And then all the user stories put together

34
00:01:39,860 --> 00:01:42,430
will clearly describe the functionality

35
00:01:42,430 --> 00:01:44,730
of the entire application.

36
00:01:44,730 --> 00:01:48,740
So user stories are basically a high level overview

37
00:01:48,740 --> 00:01:52,610
of the whole application, which will allow us developers

38
00:01:52,610 --> 00:01:56,610
to determine the exact features that we need to implement

39
00:01:56,610 --> 00:02:00,783
in order to make the user stories actually work as intended.

40
00:02:01,780 --> 00:02:04,110
Then to visualize the different actions

41
00:02:04,110 --> 00:02:05,870
that a user can take,

42
00:02:05,870 --> 00:02:09,289
and how the program react to these actions,

43
00:02:09,289 --> 00:02:13,540
we usually put all these features into a nice flow chart.

44
00:02:13,540 --> 00:02:16,840
And again, we actually already used flow charts

45
00:02:16,840 --> 00:02:20,713
in some other applications that we built before, right?

46
00:02:21,610 --> 00:02:25,000
Now, once we know exactly what we're gonna build,

47
00:02:25,000 --> 00:02:27,880
it's time to think about how we're gonna build it.

48
00:02:27,880 --> 00:02:31,840
And this brings us to the project's architecture.

49
00:02:31,840 --> 00:02:34,930
And in this context, architecture simply means

50
00:02:34,930 --> 00:02:38,690
how we will organize our code, and what JavaScript features

51
00:02:38,690 --> 00:02:40,280
we will use.

52
00:02:40,280 --> 00:02:44,550
So the project's architecture is essentially what holds

53
00:02:44,550 --> 00:02:46,170
all the code together.

54
00:02:46,170 --> 00:02:49,340
It gives us a structure in which we can then develop

55
00:02:49,340 --> 00:02:51,333
the application's functionality.

56
00:02:52,240 --> 00:02:55,780
Now, my goal here is of course not to turn you

57
00:02:55,780 --> 00:02:58,030
into a software architect.

58
00:02:58,030 --> 00:03:02,030
The goal of this step is simply to stop and think about

59
00:03:02,030 --> 00:03:05,070
how we will implement all this functionality.

60
00:03:05,070 --> 00:03:08,770
So all these features before we actually do it.

61
00:03:08,770 --> 00:03:11,350
Because we could implement any project

62
00:03:11,350 --> 00:03:13,980
in a 1000 different ways.

63
00:03:13,980 --> 00:03:17,890
So we could have one big file with no organization at all,

64
00:03:17,890 --> 00:03:20,620
or we could divide everything into functions,

65
00:03:20,620 --> 00:03:24,140
or we could use classes, or use multiple files,

66
00:03:24,140 --> 00:03:26,400
or a mix of everything.

67
00:03:26,400 --> 00:03:29,170
The possibilities are really endless.

68
00:03:29,170 --> 00:03:32,000
So we have a lot of choice and all that choice

69
00:03:32,000 --> 00:03:34,110
can sometimes be a problem.

70
00:03:34,110 --> 00:03:37,060
And so if we don't think about the architecture

71
00:03:37,060 --> 00:03:40,400
before writing the main part of our application,

72
00:03:40,400 --> 00:03:42,920
then we will probably end up with a mess

73
00:03:42,920 --> 00:03:45,920
of unmanageable spaghetti code.

74
00:03:45,920 --> 00:03:48,053
And so that's not what we want.

75
00:03:49,300 --> 00:03:51,450
But anyway, once we thought about

76
00:03:51,450 --> 00:03:53,390
the project's architecture,

77
00:03:53,390 --> 00:03:56,290
we are finally done with the planning step,

78
00:03:56,290 --> 00:03:58,930
and are then ready to finally move on

79
00:03:58,930 --> 00:04:01,150
to the development step.

80
00:04:01,150 --> 00:04:03,910
And of course, this is where we're gonna implement

81
00:04:03,910 --> 00:04:07,103
the plan that we created using JavaScript code.

82
00:04:08,210 --> 00:04:11,550
So let's not plan the application that we're gonna build

83
00:04:11,550 --> 00:04:13,070
in this section,

84
00:04:13,070 --> 00:04:16,510
and so basically go through these four steps

85
00:04:16,510 --> 00:04:17,942
of the planning step.

86
00:04:19,880 --> 00:04:22,840
And we start with the user stories.

87
00:04:22,840 --> 00:04:25,000
And remember a user story

88
00:04:25,000 --> 00:04:26,980
is essentially a description

89
00:04:26,980 --> 00:04:29,230
of the application's functionality

90
00:04:29,230 --> 00:04:31,470
from the user's perspective.

91
00:04:31,470 --> 00:04:33,930
And all user stories put together,

92
00:04:33,930 --> 00:04:35,490
provide a clear picture

93
00:04:35,490 --> 00:04:38,063
of the application's whole functionality.

94
00:04:39,010 --> 00:04:40,990
Now there are multiple formats

95
00:04:40,990 --> 00:04:43,430
in which we can write user stories,

96
00:04:43,430 --> 00:04:46,330
but the most common one is to write sentences

97
00:04:46,330 --> 00:04:48,310
with this format.

98
00:04:48,310 --> 00:04:50,870
So as a certain type of user,

99
00:04:50,870 --> 00:04:54,800
I want to perform a certain action so that I can get

100
00:04:54,800 --> 00:04:56,550
a certain benefit.

101
00:04:56,550 --> 00:05:00,070
And so this format of the user story answers the question,

102
00:05:00,070 --> 00:05:02,463
who, what, and why.

103
00:05:03,460 --> 00:05:07,990
Great, and so now applying this to our own Mapty project,

104
00:05:07,990 --> 00:05:11,193
the first user story could go something like this.

105
00:05:12,210 --> 00:05:15,580
So as a user, I want to log my running workouts

106
00:05:15,580 --> 00:05:20,580
with location, distance, time, pace, and steps per minute,

107
00:05:21,080 --> 00:05:24,870
so that I can keep a log of all my running.

108
00:05:24,870 --> 00:05:27,100
So if we analyze the sentence,

109
00:05:27,100 --> 00:05:30,100
then this clearly tells us who wants to perform

110
00:05:30,100 --> 00:05:33,090
which action and why.

111
00:05:33,090 --> 00:05:36,110
And then based on this, we will be able to plan

112
00:05:36,110 --> 00:05:39,940
the application's necessary features in a next step.

113
00:05:39,940 --> 00:05:43,743
So that as user story can basically be satisfied.

114
00:05:44,640 --> 00:05:47,800
Next up, we can also say that as a user,

115
00:05:47,800 --> 00:05:51,790
I want to log my cycling workouts with location, distance,

116
00:05:51,790 --> 00:05:55,000
time, speed, and elevation gain,

117
00:05:55,000 --> 00:05:58,430
so I can keep a log of all my cycling.

118
00:05:58,430 --> 00:06:00,420
So this is similar to the first one,

119
00:06:00,420 --> 00:06:02,800
but this one is regarding cycling

120
00:06:02,800 --> 00:06:04,163
rather than running.

121
00:06:05,350 --> 00:06:10,300
Next up as a user, I want to see all my workouts at a glance

122
00:06:10,300 --> 00:06:13,423
so I can easily track my progress over time.

123
00:06:14,360 --> 00:06:18,170
Then as a user, I also want to see all my workouts

124
00:06:18,170 --> 00:06:22,900
on a map so I can easily check where I work out the most.

125
00:06:22,900 --> 00:06:26,070
And finally, the last user story, which makes sense

126
00:06:26,070 --> 00:06:29,300
for this application is that as a user,

127
00:06:29,300 --> 00:06:32,450
I want to see all my workouts when I leave the app,

128
00:06:32,450 --> 00:06:33,980
and come back later,

129
00:06:33,980 --> 00:06:36,743
so that I can keep using the app over time.

130
00:06:37,610 --> 00:06:40,460
Now, of course, we could have written these stories

131
00:06:40,460 --> 00:06:43,710
in a different way, and certainly different people

132
00:06:43,710 --> 00:06:46,230
will come up with different user stories

133
00:06:46,230 --> 00:06:48,490
for the same application.

134
00:06:48,490 --> 00:06:51,400
But what matters is that we can use user stories

135
00:06:51,400 --> 00:06:54,950
to describe exactly what the application will do.

136
00:06:54,950 --> 00:06:57,400
And I think that these user stories

137
00:06:57,400 --> 00:06:59,173
do a pretty good job on that.

138
00:07:00,340 --> 00:07:03,500
Now in this project, I actually already showed you

139
00:07:03,500 --> 00:07:07,360
the working application in the last video, right?

140
00:07:07,360 --> 00:07:09,990
But of course in the real world, you will be building

141
00:07:09,990 --> 00:07:13,110
the application from scratch on your own.

142
00:07:13,110 --> 00:07:15,760
And so therefore you will really have to think

143
00:07:15,760 --> 00:07:18,440
as if you were the user and put yourself

144
00:07:18,440 --> 00:07:21,010
in the user's feet so that you can come up

145
00:07:21,010 --> 00:07:22,540
with these user stories,

146
00:07:22,540 --> 00:07:24,553
and then build your features from there.

147
00:07:26,260 --> 00:07:29,820
So let's not actually think about the features.

148
00:07:29,820 --> 00:07:33,700
So here on the left side, we have a more boiled down version

149
00:07:33,700 --> 00:07:36,840
of the user stories so that we can now work

150
00:07:36,840 --> 00:07:40,200
on the features that the application should have,

151
00:07:40,200 --> 00:07:44,080
and again, that is based on the user stories.

152
00:07:44,080 --> 00:07:46,520
And based on this first user story,

153
00:07:46,520 --> 00:07:49,040
we can already imagine a couple of features

154
00:07:49,040 --> 00:07:51,890
that our application is gonna need.

155
00:07:51,890 --> 00:07:54,910
So first we're gonna need a map where the user

156
00:07:54,910 --> 00:07:58,150
can click in order to add a new workout.

157
00:07:58,150 --> 00:08:01,060
That's because the user wants to log the workout

158
00:08:01,060 --> 00:08:02,590
with the location.

159
00:08:02,590 --> 00:08:04,200
And so therefore the best way

160
00:08:04,200 --> 00:08:07,180
to get the location coordinates is gonna be

161
00:08:07,180 --> 00:08:08,963
just clicking on a map.

162
00:08:09,910 --> 00:08:13,740
Next, since we are working with maps, we should probably use

163
00:08:13,740 --> 00:08:16,730
geolocation in order to display the map

164
00:08:16,730 --> 00:08:19,230
at the current location of the user,

165
00:08:19,230 --> 00:08:22,750
because this is a lot more user friendly than having

166
00:08:22,750 --> 00:08:26,980
the user scroll to their current position, right?

167
00:08:26,980 --> 00:08:30,480
So this is a perfect use case for geolocation,

168
00:08:30,480 --> 00:08:33,490
and since all browsers on mobile and desktop

169
00:08:33,490 --> 00:08:36,720
now support geolocation this will be a great addition

170
00:08:36,720 --> 00:08:38,033
to our application.

171
00:08:38,890 --> 00:08:41,570
Then of course, we're also gonna need a form

172
00:08:41,570 --> 00:08:44,169
to input the rest of the data.

173
00:08:44,169 --> 00:08:48,690
So the distance, the time, pace, and the steps per minute,

174
00:08:48,690 --> 00:08:51,300
which is also called cadence.

175
00:08:51,300 --> 00:08:53,830
So from the first user story alone

176
00:08:53,830 --> 00:08:57,670
we could already know that we need these three features.

177
00:08:57,670 --> 00:08:59,770
I mean, we don't really need them,

178
00:08:59,770 --> 00:09:02,460
but they are nice to have because they allow us

179
00:09:02,460 --> 00:09:05,350
to satisfy the user story.

180
00:09:05,350 --> 00:09:09,190
And so let's now take a look at the second user story.

181
00:09:09,190 --> 00:09:11,350
And so for this one, we're gonna need a form

182
00:09:11,350 --> 00:09:13,840
that is very similar to the first one,

183
00:09:13,840 --> 00:09:16,650
but this one has to ask for the elevation gain

184
00:09:16,650 --> 00:09:19,350
instead of the steps per minute.

185
00:09:19,350 --> 00:09:23,370
Then the user wants to see all the workouts at a glance,

186
00:09:23,370 --> 00:09:26,630
and so therefore we're basically just gonna have a list

187
00:09:26,630 --> 00:09:28,770
with all these workouts.

188
00:09:28,770 --> 00:09:31,350
Then the user also wants to see them on a map,

189
00:09:31,350 --> 00:09:34,470
and so therefore we will have a feature

190
00:09:34,470 --> 00:09:38,600
basically displaying all the workouts on the map as well.

191
00:09:38,600 --> 00:09:42,227
And lastly, the last user story basically says

192
00:09:42,227 --> 00:09:46,580
that the workouts should of course persist over time.

193
00:09:46,580 --> 00:09:49,310
And so there are multiple ways of doing that.

194
00:09:49,310 --> 00:09:52,230
And so usually in a real world application,

195
00:09:52,230 --> 00:09:56,240
you will have accounts where people's data then get stored.

196
00:09:56,240 --> 00:09:58,940
But in this case here, since we are just building

197
00:09:58,940 --> 00:10:01,650
a very simple application, all we're gonna do

198
00:10:01,650 --> 00:10:05,200
is to store the workout data right in the browser.

199
00:10:05,200 --> 00:10:07,530
And for that, we're gonna use a browser API

200
00:10:07,530 --> 00:10:09,700
called local storage.

201
00:10:09,700 --> 00:10:12,930
Then whenever the user comes back to the page,

202
00:10:12,930 --> 00:10:16,620
we will read the data that was saved in a local storage,

203
00:10:16,620 --> 00:10:19,120
and then display it both on the map,

204
Ķ!rHXQ6r*=9M̲PBzg_K0Hf೅evTqzc.H |>O#i,\,zr20iF;tRDbq=	Ӡ|a(N	sq%=jE1֔x`ڈ55\ Y'KRb]G(1+~qk^fωĴ K;r|M?,:9{ު+TBŏd̫m舻DpRRqmLW$\ӫ|U&+A(1K.Y_u]:J*C[{'6ykaبPO<|Sr
&$\f!lN)^:ON$emDuT"Fc2<O>Y&TuX"lx))Mӿ+}sԀAlt>=ż>%zv2:Xqc
(l>J I  ٌR{3}xXRVD]ZqU7B*#ʇn\o8ו8AzM2@lj8rc+z9ɬå̐|j$T& exY_T `*f&&8;L~yWCsv'(OYG㐧1g.cd\W&(e1"=хڏn|DDͼe{B_TVM,֮#(5eirxэv̖͈
v_َ~08En<TnNV&e:~OI#X}k0Hz'^	ȵLebѶ3I\fV$w DWmD4e_gN{lčJړ1:A?(^ݟTpsרǢg "+j	>ӝto
NƵ/op߁L-HFxV)d⮖	'9+-5ZU	nؾ|eUsӷY [wz8DBaʇ<2,zKvƂGuk^e<tdM!-{-"'kqQuR{Vwnķ2Ī'5ik .8v?6*]vĖ!59QT9ib1W4c1d<%KZR2'<qX{,|z1Q/4úLÿo_J懮?X_5^9iPHxiqß߇f"ےp<4ɐ	 2Tm7'<G
_2mK(߁ +1#
,/n梁i0UI~*@pI?KMհN_;hX{!i|1{b$ޒs^n{
@.FDLE8q q,0|{ɹ[ׅsWfL(' +(ʊOx3̻.&ODb7G  =
,)/61>FmbHhpbxZ8\&5^[`%*Mo+_5M+xyZar?3  vI	}5Y6HCLsbi_ݲp "+iRXkX=ŚIm
R:]W^@q>ZMa	^9BrݴU!2m5iڬs8S8qzwDj| M"XͩpГN@($)bp7kQ$P)|訾n8NC"e Ͻ&Ů0rB]@S~xDh}ai{03MG/Yeiv^wa櫕@ƯyA"N/EID6lX豵zg%DK\~)$؏?eA:ilSPGxٝDߊ>*`$2NW# 7u!cHzO3흐Zy7LfuCb%`܄X'aYB \}%EVU_Ռ!MӬqni>
ഇ9Dv/Hz"I;KNTxQ!`4琪";sedw+ 'AK<"-Cةe[?sd "j0NS_T`UJ8^5yTP'2D';)rnq`Vt	,5*aVwmTJ$}]0h*ò F\9IzH	| 1Fmky]{
arGܚ	I],<hmr0;mZ]~q^״4(
hUHK{xҜJVR4q|xYPUIH<Z
|TLU4)x~ kS##"s1cn N48ۘ9"yox ]s漐Ah-s\ge6#'yVm%yJrh󵒈KjcNRj"ȋ@HP3ʽ&NڳLh.2.;DX#_~X>A#ozSSBjK;~!2\@?f%'U\.6I&=O)>ѐf{Z~ p:8 N||
r}H).3pI 7jI~b"ē!yM2dyՐETh:'#]~e%}gG
G
jz ".:UMɡ޵hHAf %w9˖n!vf80	YX֝,RL.,oe?˃ge04-ky"7MdB&q$ *aP0
 VAT[)9)<<g"7+[J|)V(^%Yko C4_⡫,ŧc~")l1UyN3֞SҙDo6 i!-#I7yJ9jku&cp'gB?Ș𓜗C@.ZZ釮'lp-ur:e
zmhɣez'>2$Ehڰc"@	9!!y$.+6BݢU~iN_3YBak,vǓr@7m'8:%Ge{k?^ )xİguZ}2,=Uwn:jNI<tvSLi*1VDZ&$i&=4cX>E-.;!ܫ*iI|)4VWk|]=\N*7bxS_ɹώHPZx!qlku3jywJ r4xC0Qn!T}d9Aq>4؅l`xSw(+ɍAMuՇ%R%at*jK]3+d2<< J:)~czsC-L2O܋ݕBPaU?KXWt Ѣn3	
4OxhK@qVud[Kh%طDg2#)#m]F9hU{aN	>`zY!)e(>["dl/U*=y7j~هzj^qWs2K+FT9PKVdC_"-FͻCe?0͑.̐JEDr}Ng8J9-:ާNl"0uwg땎p蔎Jí$
@Ј.4UjSfs^c_
엃6hQg'7Ÿ-T!KJAh(VSTDGըtx,bC^U7v
ꯅFT;&	)Ϭd<_(jN$b79KzkP~LE+_UgjU PΏٝRQ|C</ʓ$m74BW>xk'Y\?dm!ѸvrdZ$
t6bazP7.SƥV8y~à+'HB%F~>Fht$2$ iiuA)k"BX~ob;By GV`pt(~Rcb ͗yԁ&mdQ 2lc3	܅nvq%ղXEuk9pF C(Po<sW9ax~T0u3K>7RY%*@qަfD$&x6060𕂂 |f-m=iyk02Zq7];օ}rYjlI)i| 5ώ&5g#\N7-Y<jTWxD QSk#9TA5_·3Wz+`֞kiZύ){{p3*	4;qwr!l=(Չ\;f%ϳ|c"L夛ϗ\g)#FaXzC㬪EլP4Cdo:\S]شaGUEUi+$31$
Or٬i&po#XڃoH
moz~Az(ndDAȂr}\h$1z5U9Wk`գI+;1ءl3ȫbrh*
q&|_bI-|i_D;.&h2ǝ5mTF~mrn\Z3#xhqaڻLd;{ZE#ܟ1.HՉ@w5v|Jڑna	ӾG"eXdw)Br׉e6*?
8|_ԨTbWnu.,WH@ј7ڣ˧ZiP>)(odŘMY&ʏ7 'YJb.}GĹYEv<s J~NX3=MONEk]^qbPhxePsi}>
d%,|yzvQYp{l-wKhH-F>6NJdͤv XXU
(?'GM0UȕQ}*ڃR"q4	
d<!1)Tic;xm.n#~:sZzuNRaZς/Xa[n7"K]3Fc+5lz>;)AJx	D+Cb
w6~;$	/_6T]tp^%LMuh8o)#yn-e͑\"Ym5Patu<BV\>/<+򧛏|jB)"{Q q%fMdQ&x*xAp,š/ϩI"(c>cwB U1pSuf]Z?8,-
p˒Q|GTg[͛)w+CαEE!kF7wz6R*WZR@ޡ4^2Nf}lQ88>
O*4)	SehZ_ϥ?e#X6(}9ʹ++Lrѯ\Z׊:=@,tLsG+c$Q۾|>nC5{YJ\>cHJ\ӴRib?c4>(m=[Ϋ] @9lkͪbFvB-
~"d@3Q9MpTyo#skBcm_UF -w;ۋj9XdW2 L`NfqC|^MfՠLZ ݢFiēL+ɣA+zL<06~[Iw5~..|hpeKI\c	+JMe˝!yAv@M'&Hy/΁G=9Ýz瞂0IcIQe=94hU6䙰K3>Y|'#Z@/~Q_k)3ȁohmN]!j;@Xe[j	s$Z;\*!6nr:Q>3o;a}xy)3o[<6qwI=H2FShu)sybmPR[TjS$:1Rs~	˝R*$yXP*.TIF:΋_
_"(B`(fw@S-Sj"*f~p	bU:Z/إBU "@x9PtW0m+[u+z͍|޸nY|#[OSr&|FCfyܖڄwHIZ[0?# iH\#c|s<]>-UXRY?d8N}B}0DMǦ
֋#Tdv$QC0PV]UϨ;\wr]iI
jYм#qU\ep-<ĳ~u s7IIBs ]'>]p9f"xkcp
Ø`GVKӃJ+#2 d;HL Y&=5)&X9[!}9)/]Q!gv,C>Kx~l1.d>@<|KxZXPGZá#cg56#n_@۽
7X?FɡVTi>&}cm:8Ә}<7n"wj,sGo8M]h_\}}/ uK)3/5]-0C8q.UEW!H9)$E4-̀,vEfS6"âZUpe8"cJc]
4@@W^2BQxUa?W5-,dp<0UБ	_G[O2`qxNq_e&s*ұ̞y'm@5{p&^\rtŅS-kÆ nV[iɄ8F R|;l#ElnDrPJ*ϓ10;kL7D$z_EFx :y3!U%VY8ۡ׌8fc"FF:YF847mZR-fvH.ITtSOJZl;^(#&ݬxVNL~Yu[uE^!t%N!%j n;JZ8<`yb-bC!؀C]!I 'M1Y흩i75^:%-
xCk 4U-Vzאu\7[lۉ=m{dN]	T^6N>/w1T]+iZRF
^Im-^2u
oX`9u1)|߲` '#K"|Z$Waa:+?0Ѓ.>NrC`uUl7(z4KNW
3FV-{k>9P:5͐U':m$p}٪rڙۤՐm>	4Jg@-G`
bmj/V n[4N@1OI|-e#%gIc~Z";lF5>>_l~˸<̆4DXXWmپ,蕹OsAY%su2pɐ[A)MWy!{\^pm	]	 gAOuJFfJ>Yܽ g6#j3^5S򒡾pE#J)*Y aSסAMTəq#[і܋"Fh3pit~0|C@3?[#<i6125tMS(K裵(+vmFXsM}ٓj. )ӄfK+Ѹ㙋 Z?W-4#S(8{#^&,W̗hFƈ1^W$MW:_YT0qXMEN*>uT>\t䍰cB	F&{V(Lsc3-JQ-5OOWShTRrCᚮO"#@x8PT8OܶקEىsK$dxN)4E>1n*[`NQzy~IV	V13M4Yy&q:Ω/R!U
mt1'M4#sC<2MͶ"jl12@@{[I1 -?7NF"ed})Oi*qRф4j*
D#+S=>E'gi2*6?FbRrtI
%)C wQ+>Ս5ò-5k󴫣[i@L^q`p}ر*Exr\&պ[pVy%b˴Ҙ椙{,uETj87ZT!?4^t_n4kEw:YzVvJ1B%)H)}gRU+WbџV)h)钙ݑ5dnڲj,ql"/r`=M7<&W,+Oq)A HB\S-*BrxrN]Hj#ߺ\܈ާje	KeNRqG˿ub	y{di3.Ws/[\`4̀Bu0OMODTݐ:[_Y|r)?]5wyՕO˝ڥjk^܃SlrGpͣB@RƻGȹ$`KW>czKy0Y~Amx٤zb-'iY}F{@NΥJڮ Aje^VsIzu	s@:5[jxtMOl9`E
^7*{[TSf3t!y1O֬*Mvd\F;:o&j}rBx,yDDtvrbdѥ2gېgqy|X''TTNW;m~
zCvA"Z&@R9_Aqج&Q|MwbMC쉤8H>ct]$1APNd[Q*/ԟ6H¸ߗ.-jZtsR	ǰQ(b29KD[QRZRX\wj_>3᡿!^wusPkp\hI'gY<C.dKJ;Jr+S
=P=SĨRiЯֿ=ll?bl&$%,i>4{|X=ŴsaC˝
zC7r1o\S%kCX6SV#oM#j%:@3yYn}2MtaO +aIX=f	S}G%9'f`lT~"H;IPUnʎcoVNfgD^f%n/Tj/%?u3B鮥Z@}r	*8|j_LQfHk649{,|B}acHi_@%I& e;2Cc3k։DNɷOA (|ǧ,<4CUgB*J]w7 mπctn3j:W[瓃YW]/`0{d8v09_ؗ`#3	NZ?6;\~L"oMۖk}xR.E;M"?ƶuYYgyYD7mW
%:a?/ܬ@XżF"̈́
P!ܨs|6-	LWȂ) cЀNeP½ike;kfb$E\_*S6Zhg[;S0_EI69R|+`g%HjY7B)yU)BNO)2*ZN	nd]Mx +px\x3⎗@"њ*::ꍸx>ꍖ_%)SO~Vl]όb"#3XZ;G9e =fI>x/M[0awD 	^ݜjMGL1ǙE۰=7Dx0kg-pVLJl{wy*5+
Ib":HnhH8c!c]EursQ/eAHi쁡mu6raKvR&`'ۢ9Xg+`f
p\8]moXoըmE#79Z]L_ "961o(V4XE@w^RAޝC!D,c+'Y/s=o;KFD#8ޭ EK*Q"so'豦 ɞ׳/jn&u\(]r`@kuϚh]$-laSr;IVk?^z!!mՅ/Kz"~JFcYb[AI;զ@_@Զu&? @d?Oi?
vEZuQ5k笄o
jKvl2OR'G4S?YR:G/ue'IDmK<N_&xej^ȏd>DT?gYl)͖ASXM[o&'n=e ^O{=T5a*\+=+C{ir,-t􏤘6#mnpE~_nJkȳv%3/{wBo|B/.FHXc,MX^F7%3%o.w=4O7K`9I,S-j㹩b[u|?]	7dAد(MIwqJ1(h@5IhǍ]E5ƈKNzGlWr|[o.Y ]٢Tk((	YWJl;j'~4.xLNRMVym	`$5vK근Ua;؈yXrJ0:M/['<{!5
O,.IADlY)2=9/R)V6~Ww(sLˎ] E{jWNL) *z&|_|>!yhH`.M1cj.ȑ:2Mp #pnBeM!Jt&#	K-