Hi and welcome to today's tutorial.
What we're going to be doing today is
we're going to set up Firebase for our donation application.
So let's just open our donation app in the editor.
And then I'm going to create a new
terminal inside, which I'm going to navigate to the root of our project.
And then we're going to have to follow
the Firebase documentation for the react native setup.
We're just going to go to Firebase website for React native.
I'm going to pull it up here. Great.
And now we have to follow instructions.
So the first thing that they're telling us to do is set up the react native
development environment, which we already have done.
And we have a project running up here, so we don't need to do that for our project.
But if you do set up a new project, then definitely follow this link and make
sure that you have your project set up before you follow this documentation.
And then what we need to do is create a new Firebase project.
And for that, I just created a new account here, best Programming Tools.
And I have no project yet,
so I'm starting out from scratch just in case you are as well.
So I'm just going to follow this link and create my project.
So the name of my project will be Donation Application.
I'm going to accept the terms, and I'm
going to enable Google Analytics for it.
And I'm going to say that I'm
in United States and accept the
Google Analytics terms and conditions.
And I'm going to wait for this to finish up.
And once we have done that, what we should do is install the Firebase via NPM.
So here's where we're going to need our terminal, and we're going to use NPM
for that because we've been using NPM for everything else.
So I'm just going to copy it here and paste it.
And this should finish up very soon.
And then they're saying that we have to set up some stuff for Android.
And to do that,
we're going to have to connect Android project to our newly created project.
And here's the android link.
So we're just going to press on that.
And here they're going to be asking us for the package name.
So it says that your package name is
generally the application ID in your app level build gradle file.
So let's go to Android app
and Build Gradle and then let's look for application ID.
And here it is.
It's com donation app.
So let's just copy it and paste it here.
And then we're not going to give it a nickname.
We don't need it. And here we're just going to download
the configuration file that we're going to place inside one of the Android folders.
So this goes into the app folder.
Let's download it.
And then we're going to copy and paste this inside our android/app folder.
And let's say sure refactor.
And now my google service JSON file is there.
And we're not going to follow these items given here.
We're actually going to just continue to console.
So now that we have the Google services
JSON file downloaded, we have to get the signing certificate.
So let's do that. Let's copy this
given here and go to Android folder and then set up the signing report.
This will take some time to run.
And meanwhile let's read what dependencies we have to include here.
So we're going to have to go to Android Build gradle file.
So here we are inside the Android folder.
And then we're going to go to the Build gradle file.
And here we're going to place this dependency inside our dependencies.
So let's do that.
Make this the last item.
And I'm just going to put this in the parentheses as given here above.
Great.
And then what we need to do is apply plugins.
So for that we're going to have to go
to app Build Gradle and let's go up here and let's copy and paste this here.
Great. And now we should be all set with that.
Let's see how this ran.
We're having problem with that.
Let's just rerun it.
I think we should be okay.
But since you're already in the Android
folder, we don't need this anymore and we don't need the do here.
Maybe this was the problem.
Okay, great.
So I think this will successfully run right now and yes it did.
And then what we need to do is set up the iOS project.
And here they're telling us that we need
to set up the project from Firebase as well.
So let's go to project overview.
We now have the Android application and we need to add iOS application.
So add app.
And here we're going to need apple bundle ID.
And that Apple bundle ID can be found
inside the X workspace file that is inside our iOS folder.
So let's go to our iOS border and let's open workspace for donation app.
And the we can just click here and go to General.
And here we go.
We have the bundle Identifier given here.
So all we need to do is just copy this
bundle Identifier from here and then paste it here.
You could actually change this bundle
Identifier to something else, something like com.DonationApp.
And if we just go back right now, we should see this changed.
Great. So we could use that instead.
That's going to be simpler.
We don't need the app nickname.
Let's register the application and download the configuration file.
And then we're not going to follow these directions.
We're just going to go here
and follow the directions given from here for react native.
So here they're telling us that we need to add this info plist file to our project.
So we're going to say add files to donation app.
And they're saying that we shouldn't
forget to make sure that copy items if needed is checked so if this is not
checked, please make sure it's checked and then just select Google Service Info
plist file to make sure that our configuration is okay.
We're going to have to go to iOS folder and then we're going to have to go
to Donation App and AppDelegate Mm file and import Firebase.
And then we have to look for this function inside our editor and we need to add this.
So I just looked for that function.
It's inside here.
And all I'm going to do here is paste this item given on the documentation.
Great. So now when that's done,
we're going to have to alter the Cocoa Pods to use Frameworks and they
are telling us to use this line at the top of our targets in the Pod file.
So let's open the Pod file inside the iOS
folder and let's use it here inside the targets as they told us to.
And then the are telling us that we're
going to need a global variable on the top of our file in the Pod file.
So I'm just going to place it here and then there are some notes to read about.
So they're telling us that they're using
use Frameworks and it has compatibility issues with Flipper, Hermis, and Fabric.
So what we need to do is comment out the Flipper configuration.
Sounds good to me.
So let's comment this out and then they're telling us to
make sure that we use Frameworks with linkage static and
we should comment this line out
and paste this instead here.
Great. I think we are all set here.
So we're going to have to install the pods.
So let's do that.
Let's go to iOS folder and then do
pod install --repo-update
as they're telling us to do.
Great.
Some pods are installed, some pods are removed, such as Flipper,
and I'm going to say read from disk
so now all left to do is check and make
sure that our application is working fine for Android and iOS.
So let's do that. I'm going to do
npx react-native run-ios
and hopefully everything's going to run okay.
Get my application was successfully built.
Everything's looking good.
So we're good with iOS.
And now let's make sure that Android is working fine as well.
I'm just going to close the simulator and I'm going to do
npx react-native run-android
Great.
Everything's looking really good for Android as well.
And just in case,
by the time you're watching this video, the documentation has changed.
Please follow the documentation instead of my video.
But I do hope to keep this course updated.
So if anything should change,
I will make sure to rerecord this video so that you have the latest information.
Now we're done with the Firebase
configuration for our application and I'll see you the next video where we're going
to set up the authentication for Firebase and our application.
Thanks so much for watching.