WEBVTT

1
00:00:00.320 --> 00:00:01.800
Hi everyone, and welcome back.

2
00:00:01.830 --> 00:00:07.650
Today, we're recording this lesson to make
sure that we have unique application ID

3
00:00:07.680 --> 00:00:12.300
for our application so that we can
upload it to Google Play Store later.

4
00:00:12.330 --> 00:00:16.520
Right now, if you'd wanted to find
what your application ID is.

5
00:00:16.520 --> 00:00:20.160
You're going to go to Android folder
and then you're going to click on app.

6
00:00:20.190 --> 00:00:23.900
And inside here you're
going to find build.gradle file.

7
00:00:23.920 --> 00:00:30.018
And if you go in there, you're going
to see that our application ID is com.donationapp

8
00:00:30.218 --> 00:00:32.500
Now, if you go to the link that was

9
00:00:32.530 --> 00:00:40.900
provided in the article above this lesson,
you're going to find that com.donationapp already exists

10
00:00:40.930 --> 00:00:44.800
and that is why we're going to create
something new and make sure that our

11
00:00:44.830 --> 00:00:48.580
application can work as it
did before with the new name.

12
00:00:48.610 --> 00:00:51.480
The name that I'm going to choose that is

13
00:00:51.510 --> 00:00:56.480
going to be unavailable for you later
since I'm going to create an application

14
00:00:56.510 --> 00:01:01.420
with that is going to be
altrudonationappvache.

15
00:01:01.450 --> 00:01:05.640
If I click on Enter here,
you're going to see that this URL is not

16
00:01:05.670 --> 00:01:10.340
found on the server, which means
that this Identifier is available.

17
00:01:10.370 --> 00:01:11.770
Now, once I use it,

18
00:01:11.800 --> 00:01:15.240
you won't be able to use it yourself,
so make sure that you come up

19
00:01:15.270 --> 00:01:20.020
with something of your own
and use that application ID.

20
00:01:20.050 --> 00:01:24.640
Now, the first things first is that we
want to make sure that our application is

21
00:01:24.670 --> 00:01:27.660
not going to break after
we make these changes and

22
00:01:27.690 --> 00:01:30.700
our Firebase setup that mainly is

23
00:01:30.720 --> 00:01:35.174
connected to Firebase
using the google services.json file here

24
00:01:35.374 --> 00:01:38.120
is connected to the application using our

25
00:01:38.150 --> 00:01:41.460
application ID, which means that we
have to generate a new one.

26
00:01:41.490 --> 00:01:45.440
In your Firebase console,
the URL is this here.

27
00:01:45.470 --> 00:01:48.700
You can just go to your console
and create a new project.

28
00:01:48.730 --> 00:01:55.100
Let's name this project,
altrudonationappvache.

29
00:01:55.130 --> 00:01:59.760
Let's continue with this, and I'm going
to click on Continue here as well.

30
00:01:59.790 --> 00:02:03.000
My selected account will be
the default account for Firebase.

31
00:02:03.030 --> 00:02:06.700
I'm going to click on Create this
project and wait for this to complete.

32
00:02:06.720 --> 00:02:09.280
Once this is completed,
please come back to the video and we're

33
00:02:09.310 --> 00:02:11.940
going to go through
the next steps together.

34
00:02:11.960 --> 00:02:13.200
Great.
The new project is ready,

35
00:02:13.230 --> 00:02:17.060
so I'm going to click on Continue
and I'm going to be taken to this page.

36
00:02:17.090 --> 00:02:21.100
Here, I want to connect
an application to get started, right?

37
00:02:21.130 --> 00:02:21.880
Unfortunately,

38
00:02:21.910 --> 00:02:26.500
since we're running on Windows, as you
know, you don't have access to iOS setup.

39
00:02:26.530 --> 00:02:29.920
If you'd like to set up iOS with your Firebase

40
00:02:29.950 --> 00:02:34.540
project as well, please make
sure that you have macOS handy.

41
00:02:34.570 --> 00:02:37.660
Otherwise, you're not going
to be able to complete it.

42
00:02:37.690 --> 00:02:40.960
If you do have MacOS,
then just discard this video.

43
00:02:40.990 --> 00:02:42.300
Don't even watch it.

44
00:02:42.330 --> 00:02:44.600
Grab your macOS computer and go

45
00:02:44.630 --> 00:02:48.680
to the videos in this section that are
dedicated to MacOS, and you're going to be

46
00:02:48.710 --> 00:02:53.900
able to set up automated deployment
system both for iOS and Android.

47
00:02:53.930 --> 00:02:56.560
But in this video and in the upcoming

48
00:02:56.590 --> 00:03:00.780
videos for Windows, we're only
going to be taking care of Android.

49
00:03:00.810 --> 00:03:03.120
Let's just click on Android here and what

50
00:03:03.150 --> 00:03:12.467
we want to do is generate a new name for
which we're going to type in here com.altrudonateappvache.

51
00:03:12.667 --> 00:03:16.420
I'm going to register this application and

52
00:03:16.450 --> 00:03:22.660
then once this is registered, I'm
going to download the google services.json file.

53
00:03:22.690 --> 00:03:28.240
Once this is downloaded, I'm going
to make sure that I open my folder.

54
00:03:28.270 --> 00:03:30.940
I will actually rename it.

55
00:03:30.970 --> 00:03:32.600
I don't need this one.

56
00:03:32.630 --> 00:03:38.320
I'm going to get rid of it
and I'm going to rename this one.

57
00:03:39.720 --> 00:03:40.340
Great.

58
00:03:40.370 --> 00:03:46.340
Then I'm going to place
this inside the app folder.

59
00:03:46.370 --> 00:03:48.360
A file like this already exists.

60
00:03:48.390 --> 00:03:51.860
I'm just going to say,
Yes, replace this one.

61
00:03:51.880 --> 00:03:52.300
Great.

62
00:03:52.330 --> 00:03:55.120
Now that that's done,
I'm going to click on Next.

63
00:03:55.150 --> 00:03:57.120
We're not going to follow any of these

64
00:03:57.150 --> 00:03:59.840
items, and I'm just going
to click on Continue.

65
00:03:59.870 --> 00:04:02.340
Here we are back to our console.

66
00:04:02.370 --> 00:04:05.940
Now we also need to make sure
that our authentication is set up.

67
00:04:05.970 --> 00:04:09.610
I'm just going to go here and I'm
going to click on Get started.

68
00:04:09.640 --> 00:04:12.120
I'm going to click on Email and password,
and I'm going to enable it.

69
00:04:12.150 --> 00:04:13.900
I'm going to save this.

70
00:04:13.930 --> 00:04:19.300
Now if I click on Users, you're going
to see that no users are registered.

71
00:04:19.330 --> 00:04:20.660
Great.

72
00:04:20.690 --> 00:04:25.080
Now that this is done and Google services.json file is set up correctly,

73
00:04:25.100 --> 00:04:29.980
what we need to do is make sure that every
instance of ,com.donationapp,

74
00:04:30.010 --> 00:04:34.540
our previous name is
changed to our new name.

75
00:04:34.570 --> 00:04:37.540
So for that, please go to the build.gradle

76
00:04:37.570 --> 00:04:43.520
file inside the app folder
of Android and just scroll down.

77
00:04:43.540 --> 00:04:47.180
And here you're going
to see com.donationapp.

78
00:04:47.210 --> 00:04:51.380
We're going to replace this and we're
going to say that this is now named

79
00:04:51.580 --> 00:04:52.580
com.altrudonateappvache

80
00:04:54.920 --> 00:05:00.780
I'm going to copy this
and I'm going to paste it here.

81
00:05:00.800 --> 00:05:03.240
I think this was the only two places where

82
00:05:03.270 --> 00:05:06.060
we were referencing this
name inside this file.

83
00:05:06.090 --> 00:05:11.020
I'm going to click on Control F real
quick and I'm going to type in com.donationapp

84
00:05:12.220 --> 00:05:14.180
here I see that there are no results,

85
00:05:14.210 --> 00:05:16.740
so there's nothing else
to be changed in this file.

86
00:05:16.770 --> 00:05:19.280
Now, I do know of some other places where

87
00:05:19.300 --> 00:05:22.500
we should change this,
so just follow me here.

88
00:05:22.530 --> 00:05:26.440
We have to go to the Android folder again

89
00:05:26.470 --> 00:05:31.480
and then app, and then inside there
we're going to find source folder.

90
00:05:31.510 --> 00:05:37.040
And inside the debug,
Java, you're going to see a folder com

91
00:05:37.070 --> 00:05:40.420
and then you're going to see
a new folder donationapp.

92
00:05:40.450 --> 00:05:43.560
We need to change this
donationapp name here.

93
00:05:43.590 --> 00:05:46.480
I'm going to rename this folder and I'm

94
00:05:46.510 --> 00:05:52.820
going to name it as
altrudonateappvache.

95
00:05:52.850 --> 00:05:56.860
I'm going to click on Enter and now
this is going to be my file name.

96
00:05:56.880 --> 00:06:00.134
I'm just quickly going to open
this Android manifest.xml

97
00:06:00.334 --> 00:06:03.217
file and make sure
that there's no com.donationapp

98
00:06:03.417 --> 00:06:05.120
mentioned here and I still get no

99
00:06:05.150 --> 00:06:09.380
results in my editor,
so there is nothing to be edited here.

100
00:06:09.410 --> 00:06:13.840
Then I'm going to open up the main
folder here and go to Java again.

101
00:06:13.860 --> 00:06:16.960
Here I see the donation app pop up again.

102
00:06:16.980 --> 00:06:26.860
Let's rename this folder again and name it
as altrudonateappvache.

103
00:06:26.890 --> 00:06:31.420
I'm going to click on Enter and I'm
going to go into mainactivity.java file.

104
00:06:31.450 --> 00:06:34.800
Here I do see that there is
one instance of this name.

105
00:06:34.830 --> 00:06:40.580
I'm going to make sure that I get rid
of this name and I input a new name.

106
00:06:40.600 --> 00:06:43.500
The new name is going to be com.altrudonateappvache

107
00:06:43.530 --> 00:06:47.820
I'm going to put semicolon
here and save this file.

108
00:06:47.850 --> 00:06:50.420
I'm going to do the same
in mainapplication.

109
00:06:50.450 --> 00:06:51.240
Java file.

110
00:06:51.270 --> 00:06:54.880
Here I have the package name,
again, as com.donationapp.

111
00:06:54.910 --> 00:06:57.500
I'm going to select this and

112
00:06:57.530 --> 00:07:02.300
make sure that I paste in a new
name and put a semicolon there.

113
00:07:02.320 --> 00:07:05.480
I'm going to save this and I'm going
to check if there's any other instances

114
00:07:05.510 --> 00:07:09.020
and there is no other
instances here either.

115
00:07:09.040 --> 00:07:12.940
Great.
After that, let's go to Android manifest

116
00:07:12.970 --> 00:07:16.240
file and I don't see any
instances here either.

117
00:07:16.270 --> 00:07:20.560
Then we're going to close the main
folder and the debug folder.

118
00:07:20.560 --> 00:07:22.760
We edited everything
that we needed to there.

119
00:07:22.790 --> 00:07:28.740
Then I'm going to open the release
one and I do see the com.donationapp folder here as well.

120
00:07:28.770 --> 00:07:35.580
I'm going to rename it and I'm going to
name it as altrudonateappvache again.

121
00:07:35.600 --> 00:07:40.372
Here is my folder name right now and I'm
going to go to reacnativeflipper.java

122
00:07:40.572 --> 00:07:44.960
and I'm going to make sure that this
is replaced with the new name as well.

123
00:07:44.980 --> 00:07:47.860
File, and I'm going to save it.
Great.

124
00:07:47.890 --> 00:07:55.244
We have edited the folder names
along with the reacnativeflipper.Java files.

125
00:07:55.444 --> 00:07:57.978
We edited mainapplication.java,

126
00:07:58.178 --> 00:08:00.380
mainactivity.java files.

127
00:08:00.410 --> 00:08:06.180
I think we are done with everything
that we needed to change here.

128
00:08:06.210 --> 00:08:08.280
Technically, I think that we do have

129
00:08:08.300 --> 00:08:13.095
a global search here,
so I could search for com.donationapp

130
00:08:13.295 --> 00:08:16.020
and see if it
appears anywhere else.

131
00:08:16.040 --> 00:08:18.320
It does seem like that we have it

132
00:08:18.350 --> 00:08:22.560
in the Google services info plist,
which is inside the iOS folder.

133
00:08:22.590 --> 00:08:26.200
We're not going to change
anything inside iOS folders.

134
00:08:26.230 --> 00:08:31.880
This is not something that's applicable,
but there is one more file that we need

135
00:08:31.910 --> 00:08:41.100
to edit, and it is particularly
inside android/app/source/debug/java/com folder

136
00:08:41.300 --> 00:08:47.440
altrudonateappvache, and ReactNativeFlipper.java file.

137
00:08:47.470 --> 00:08:50.957
It's inside the debug folder, so make
sure to go inside the

138
00:08:51.157 --> 00:08:54.860
reactnativeflipper.java file, inside the debug folder.

139
00:08:54.890 --> 00:08:56.620
This is the path again.

140
00:08:56.650 --> 00:08:59.100
We're going to change this package

141
00:08:59.130 --> 00:09:03.020
and we're going to reference
a new name that we have.

142
00:09:03.050 --> 00:09:07.180
I'm going to paste it here,
put a semicolon there, and save this.

143
00:09:07.200 --> 00:09:09.320
Wait, now that we are sure

144
00:09:09.350 --> 00:09:13.220
that everything's been edited and we
missed out on nothing,

145
00:09:13.250 --> 00:09:18.140
what we want to do is make sure that our
application works the way it used to work.

146
00:09:18.170 --> 00:09:22.960
For that, please make sure that you
open up your command-line tools.

147
00:09:22.960 --> 00:09:24.760
I'm actually going to close everything.

148
00:09:24.790 --> 00:09:27.620
It's better to start from scratch.

149
00:09:27.650 --> 00:09:35.500
Open up your terminal and then go
to the desktop and then go to donation app

150
00:09:35.530 --> 00:09:40.140
and then go to Android file
and here do gradlew clean.

151
00:09:40.170 --> 00:09:43.260
This is going to clean all of the caches

152
00:09:43.290 --> 00:09:48.980
inside your Android folder, which will
make you able to build application

153
00:09:49.010 --> 00:09:53.060
from scratch without any
caches messing with you.

154
00:09:53.080 --> 00:09:55.360
So wait for this step to complete and come

155
00:09:55.390 --> 00:09:59.280
back to the video once
you're done with this.

156
00:09:59.310 --> 00:10:00.920
Great, it's been done.

157
00:10:00.940 --> 00:10:05.072
Now let's get out of this folder
of Android and run

158
00:10:05.272 --> 00:10:07.340
npx react-native run android

159
00:10:07.370 --> 00:10:12.820
inside the root of our
project and wait for it to complete.

160
00:10:12.850 --> 00:10:14.880
You're going to see the emulator openup,

161
00:10:14.910 --> 00:10:18.300
you're going to see
the Metro Bundler open up.

162
00:10:18.320 --> 00:10:22.040
So once this is built,
we should be able to log in to our

163
00:10:22.060 --> 00:10:27.160
application again if we register
because currently we have no users.

164
00:10:27.160 --> 00:10:29.860
So we're going to go through
the registration process again.

165
00:10:29.890 --> 00:10:33.340
Let's just wait for this
build to be completed.

166
00:10:33.360 --> 00:10:35.940
Great.
We can now see the application splash

167
00:10:35.970 --> 00:10:38.120
screen that we've been
working on together.

168
00:10:38.150 --> 00:10:41.600
So our application is opening up
and it has rendered.

169
00:10:41.630 --> 00:10:44.760
Now, what we need to do is make
sure that we create an account.

170
00:10:44.790 --> 00:10:47.500
I'm just going to click
on Don't have an account.

171
00:10:47.530 --> 00:10:55.400
I'm going to enter my full name and
then I'm going to enter my e-mail address

172
00:10:55.720 --> 00:11:01.980
and I'm going to enter my password
and I'm going to click on registration.

173
00:11:02.010 --> 00:11:04.300
Here, if I come back

174
00:11:04.330 --> 00:11:09.720
and I refresh this page, I'm going
to see my Identifier appear here.

175
00:11:09.750 --> 00:11:14.340
Now I can use this to log in.

176
00:11:14.370 --> 00:11:17.180
I'm going to click on Login and

177
00:11:17.210 --> 00:11:22.580
we're going to see
that this has worked just fine.

178
00:11:22.610 --> 00:11:26.600
Our naming and Firebase setup
changes have worked successfully.

179
00:11:26.610 --> 00:11:27.560
For the next video,

180
00:11:27.580 --> 00:11:31.240
we're all ready to upload our
application on Google Play Store.