WEBVTT

1
00:00:00.640 --> 00:00:02.900
Hi and welcome to today's tutorial.

2
00:00:02.920 --> 00:00:04.530
What we're going to be doing today is

3
00:00:04.560 --> 00:00:08.540
we're going to set up Firebase
for our donation application.

4
00:00:08.570 --> 00:00:13.010
So let's just open our
donation app in the editor.

5
00:00:13.040 --> 00:00:15.300
And then I'm going to create a new

6
00:00:15.330 --> 00:00:21.460
terminal inside, which I'm going
to navigate to the root of our project.

7
00:00:21.480 --> 00:00:23.380
And then we're going to have to follow

8
00:00:23.400 --> 00:00:26.740
the Firebase documentation
for the react native setup.

9
00:00:26.760 --> 00:00:30.940
We're just going to go to Firebase
website for React native.

10
00:00:30.970 --> 00:00:34.700
I'm going to pull it up here.
Great.

11
00:00:34.730 --> 00:00:37.980
And now we have to follow instructions.

12
00:00:38.000 --> 00:00:41.780
So the first thing that they're telling us
to do is set up the react native

13
00:00:41.800 --> 00:00:44.180
development environment,
which we already have done.

14
00:00:44.210 --> 00:00:49.020
And we have a project running up here, so
we don't need to do that for our project.

15
00:00:49.050 --> 00:00:53.660
But if you do set up a new project,
then definitely follow this link and make

16
00:00:53.680 --> 00:00:58.140
sure that you have your project set up
before you follow this documentation.

17
00:00:58.170 --> 00:01:01.980
And then what we need to do is
create a new Firebase project.

18
00:01:02.010 --> 00:01:07.340
And for that, I just created a new
account here, best Programming Tools.

19
00:01:07.370 --> 00:01:09.570
And I have no project yet,

20
00:01:09.600 --> 00:01:13.410
so I'm starting out from scratch
just in case you are as well.

21
00:01:13.440 --> 00:01:16.740
So I'm just going to follow this
link and create my project.

22
00:01:16.770 --> 00:01:21.570
So the name of my project
will be Donation Application.

23
00:01:21.600 --> 00:01:24.455
I'm going to accept the terms, and I'm

24
00:01:24.655 --> 00:01:27.460
going to enable Google Analytics for it.

25
00:01:27.480 --> 00:01:28.740
And I'm going to say that I'm

26
00:01:28.770 --> 00:01:30.554
in United States and accept the

27
00:01:30.754 --> 00:01:32.740
Google Analytics terms and conditions.

28
00:01:32.770 --> 00:01:35.660
And I'm going to wait
for this to finish up.

29
00:01:35.690 --> 00:01:41.100
And once we have done that, what we should
do is install the Firebase via NPM.

30
00:01:41.130 --> 00:01:45.570
So here's where we're going to need our
terminal, and we're going to use NPM

31
00:01:45.600 --> 00:01:48.660
for that because we've been
using NPM for everything else.

32
00:01:48.690 --> 00:01:51.460
So I'm just going to copy
it here and paste it.

33
00:01:51.490 --> 00:01:53.930
And this should finish up very soon.

34
00:01:53.960 --> 00:01:59.060
And then they're saying that we have
to set up some stuff for Android.

35
00:01:59.090 --> 00:02:01.100
And to do that,

36
00:02:01.130 --> 00:02:06.780
we're going to have to connect Android
project to our newly created project.

37
00:02:06.810 --> 00:02:08.700
And here's the android link.

38
00:02:08.720 --> 00:02:10.380
So we're just going to press on that.

39
00:02:10.410 --> 00:02:13.980
And here they're going to be
asking us for the package name.

40
00:02:14.010 --> 00:02:16.580
So it says that your package name is

41
00:02:16.610 --> 00:02:21.220
generally the application ID in your
app level build gradle file.

42
00:02:21.250 --> 00:02:23.380
So let's go to Android app

43
00:02:23.410 --> 00:02:29.100
and Build Gradle
and then let's look for application ID.

44
00:02:29.130 --> 00:02:30.340
And here it is.

45
00:02:30.370 --> 00:02:32.100
It's com donation app.

46
00:02:32.130 --> 00:02:34.610
So let's just copy it and paste it here.

47
00:02:34.640 --> 00:02:36.520
And then we're not going
to give it a nickname.

48
00:02:36.550 --> 00:02:39.890
We don't need it.
And here we're just going to download

49
00:02:39.920 --> 00:02:45.580
the configuration file that we're going to
place inside one of the Android folders.

50
00:02:45.610 --> 00:02:48.100
So this goes into the app folder.

51
00:02:48.130 --> 00:02:50.220
Let's download it.

52
00:02:50.250 --> 00:02:55.700
And then we're going to copy and paste
this inside our android/app folder.

53
00:02:55.730 --> 00:02:58.660
And let's say sure refactor.

54
00:02:58.690 --> 00:03:01.660
And now my google service
JSON file is there.

55
00:03:01.690 --> 00:03:05.740
And we're not going to follow
these items given here.

56
00:03:05.770 --> 00:03:08.660
We're actually going to just
continue to console.

57
00:03:08.690 --> 00:03:11.980
So now that we have the Google services

58
00:03:12.010 --> 00:03:16.380
JSON file downloaded, we have
to get the signing certificate.

59
00:03:16.400 --> 00:03:18.980
So let's do that.
Let's copy this

60
00:03:19.010 --> 00:03:26.260
given here and go to Android folder
and then set up the signing report.

61
00:03:26.290 --> 00:03:28.060
This will take some time to run.

62
00:03:28.090 --> 00:03:33.220
And meanwhile let's read what
dependencies we have to include here.

63
00:03:33.250 --> 00:03:37.780
So we're going to have to go to
Android Build gradle file.

64
00:03:37.810 --> 00:03:41.100
So here we are inside the Android folder.

65
00:03:41.130 --> 00:03:44.380
And then we're going to go
to the Build gradle file.

66
00:03:44.410 --> 00:03:50.610
And here we're going to place this
dependency inside our dependencies.

67
00:03:50.640 --> 00:03:52.180
So let's do that.

68
00:03:52.210 --> 00:03:55.720
Make this the last item.

69
00:03:55.760 --> 00:04:02.120
And I'm just going to put this
in the parentheses as given here above.

70
00:04:02.760 --> 00:04:03.660
Great.

71
00:04:03.690 --> 00:04:08.260
And then what we need to do is
apply plugins.

72
00:04:08.280 --> 00:04:09.880
So for that we're going to have to go

73
00:04:09.910 --> 00:04:18.160
to app Build Gradle and let's go up here
and let's copy and paste this here.

74
00:04:18.440 --> 00:04:20.900
Great.
And now we should be all set with that.

75
00:04:20.920 --> 00:04:22.700
Let's see how this ran.

76
00:04:22.720 --> 00:04:25.740
We're having problem with that.

77
00:04:25.770 --> 00:04:26.980
Let's just rerun it.

78
00:04:27.010 --> 00:04:28.380
I think we should be okay.

79
00:04:28.410 --> 00:04:30.620
But since you're already in the Android

80
00:04:30.650 --> 00:04:37.500
folder, we don't need this anymore
and we don't need the do here.

81
00:04:37.530 --> 00:04:39.752
Maybe this was the problem.

82
00:04:39.952 --> 00:04:40.740
Okay, great.

83
00:04:40.770 --> 00:04:46.540
So I think this will successfully
run right now and yes it did.

84
00:04:46.570 --> 00:04:50.740
And then what we need to do
is set up the iOS project.

85
00:04:50.770 --> 00:04:53.960
And here they're telling us that we need

86
00:04:53.980 --> 00:04:57.740
to set up the project
from Firebase as well.

87
00:04:57.770 --> 00:04:59.820
So let's go to project overview.

88
00:04:59.840 --> 00:05:07.640
We now have the Android application
and we need to add iOS application.

89
00:05:07.800 --> 00:05:10.500
So add app.

90
00:05:10.530 --> 00:05:13.620
And here we're going
to need apple bundle ID.

91
00:05:13.650 --> 00:05:16.180
And that Apple bundle ID can be found

92
00:05:16.210 --> 00:05:23.300
inside the X workspace file
that is inside our iOS folder.

93
00:05:23.330 --> 00:05:30.780
So let's go to our iOS border and let's
open workspace for donation app.

94
00:05:30.800 --> 00:05:33.900
And the we can just click
here and go to General.

95
00:05:33.920 --> 00:05:35.060
And here we go.

96
00:05:35.090 --> 00:05:37.660
We have the bundle Identifier given here.

97
00:05:37.690 --> 00:05:40.740
So all we need to do is just copy this

98
00:05:40.770 --> 00:05:45.620
bundle Identifier from here
and then paste it here.

99
00:05:45.650 --> 00:05:47.700
You could actually change this bundle

100
00:05:47.730 --> 00:05:53.280
Identifier to something else,
something like com.DonationApp.

101
00:05:54.040 --> 00:06:03.000
And if we just go back right now,
we should see this changed.

102
00:06:05.000 --> 00:06:07.620
Great.
So we could use that instead.

103
00:06:07.650 --> 00:06:10.500
That's going to be simpler.

104
00:06:10.520 --> 00:06:11.900
We don't need the app nickname.

105
00:06:11.920 --> 00:06:16.140
Let's register the application
and download the configuration file.

106
00:06:16.170 --> 00:06:19.820
And then we're not going
to follow these directions.

107
00:06:19.850 --> 00:06:23.220
We're just going to go here

108
00:06:23.250 --> 00:06:26.820
and follow the directions given
from here for react native.

109
00:06:26.850 --> 00:06:33.100
So here they're telling us that we need to
add this info plist file to our project.

110
00:06:33.130 --> 00:06:37.380
So we're going to say
add files to donation app.

111
00:06:37.400 --> 00:06:39.020
And they're saying that we shouldn't

112
00:06:39.040 --> 00:06:43.920
forget to make sure that copy items if
needed is checked so if this is not

113
00:06:43.920 --> 00:06:47.440
checked, please make sure it's checked
and then just select Google Service Info

114
00:06:47.470 --> 00:06:51.620
plist file to make sure
that our configuration is okay.

115
00:06:51.650 --> 00:06:56.360
We're going to have to go to iOS folder
and then we're going to have to go

116
00:06:56.390 --> 00:07:03.940
to Donation App and AppDelegate Mm
file and import Firebase.

117
00:07:03.970 --> 00:07:11.540
And then we have to look for this function
inside our editor and we need to add this.

118
00:07:11.570 --> 00:07:14.620
So I just looked for that function.

119
00:07:14.650 --> 00:07:16.060
It's inside here.

120
00:07:16.090 --> 00:07:23.260
And all I'm going to do here is paste
this item given on the documentation.

121
00:07:23.280 --> 00:07:25.700
Great.
So now when that's done,

122
00:07:25.730 --> 00:07:30.720
we're going to have to alter
the Cocoa Pods to use Frameworks and they

123
00:07:30.750 --> 00:07:36.820
are telling us to use this line at the top
of our targets in the Pod file.

124
00:07:36.850 --> 00:07:39.660
So let's open the Pod file inside the iOS

125
00:07:39.690 --> 00:07:45.620
folder and let's use it here
inside the targets as they told us to.

126
00:07:45.640 --> 00:07:47.440
And then the are telling us that we're

127
00:07:47.470 --> 00:07:51.860
going to need a global variable
on the top of our file in the Pod file.

128
00:07:51.890 --> 00:07:56.700
So I'm just going to place it here and
then there are some notes to read about.

129
00:07:56.730 --> 00:07:59.180
So they're telling us that they're using

130
00:07:59.210 --> 00:08:04.740
use Frameworks and it has compatibility
issues with Flipper, Hermis, and Fabric.

131
00:08:04.770 --> 00:08:10.380
So what we need to do is comment
out the Flipper configuration.

132
00:08:10.410 --> 00:08:12.460
Sounds good to me.

133
00:08:12.480 --> 00:08:18.740
So let's comment this out
and then they're telling us to

134
00:08:18.770 --> 00:08:25.500
make sure that we use Frameworks
with linkage static and

135
00:08:25.530 --> 00:08:29.413
we should comment this line out

136
00:08:29.613 --> 00:08:32.920
and paste this instead here.

137
00:08:33.200 --> 00:08:36.700
Great.
I think we are all set here.

138
00:08:36.730 --> 00:08:40.680
So we're going to have
to install the pods.

139
00:08:42.160 --> 00:08:43.240
So let's do that.

140
00:08:43.270 --> 00:08:45.576
Let's go to iOS folder and then do

141
00:08:45.776 --> 00:08:47.306
pod install --repo-update

142
00:08:47.506 --> 00:08:49.020
as they're telling us to do.

143
00:08:49.040 --> 00:08:49.420
Great.

144
00:08:49.440 --> 00:08:54.020
Some pods are installed,
some pods are removed, such as Flipper,

145
00:08:54.050 --> 00:08:58.500
and I'm going to say
read from disk

146
00:08:58.530 --> 00:09:00.980
so now all left to do is check and make

147
00:09:01.010 --> 00:09:04.820
sure that our application is
working fine for Android and iOS.

148
00:09:04.850 --> 00:09:08.484
So let's do that.
I'm going to do

149
00:09:08.684 --> 00:09:10.338
npx react-native run-ios

150
00:09:10.538 --> 00:09:13.440
and hopefully
everything's going to run okay.

151
00:09:13.680 --> 00:09:16.260
Get my application was successfully built.

152
00:09:16.290 --> 00:09:18.140
Everything's looking good.

153
00:09:18.170 --> 00:09:20.500
So we're good with iOS.

154
00:09:20.530 --> 00:09:23.940
And now let's make sure that Android
is working fine as well.

155
00:09:23.970 --> 00:09:27.748
I'm just going to close the simulator
and I'm going to do

156
00:09:27.948 --> 00:09:29.140
npx react-native run-android

157
00:09:29.170 --> 00:09:33.260
Great.

158
00:09:33.280 --> 00:09:35.820
Everything's looking really
good for Android as well.

159
00:09:35.850 --> 00:09:37.420
And just in case,

160
00:09:37.440 --> 00:09:42.700
by the time you're watching this video,
the documentation has changed.

161
00:09:42.730 --> 00:09:45.420
Please follow the documentation
instead of my video.

162
00:09:45.440 --> 00:09:48.900
But I do hope to keep this course updated.

163
00:09:48.930 --> 00:09:50.620
So if anything should change,

164
00:09:50.650 --> 00:09:55.180
I will make sure to rerecord this video
so that you have the latest information.

165
00:09:55.200 --> 00:09:57.780
Now we're done with the Firebase

166
00:09:57.810 --> 00:10:02.340
configuration for our application and I'll
see you the next video where we're going

167
00:10:02.370 --> 00:10:07.140
to set up the authentication
for Firebase and our application.

168
00:10:07.160 --> 00:10:08.080
Thanks so much for watching.