Hi Alex here from rebeloer.com and welcome back to the channel! In this
tutorial series I will show you how you can take, save and of course upload and
download your images from Firebases Firebase Storage, so without further ado
let's jump right into it!
Okay, let me just show you what we are going to build out.
And this is a real simple app so let's just select iPhone X here and
basically you want to click the link down below to get the resources and we
will construct the app from scratch from those resources. But for now let's just
take a look at what this app basically looks like. Okay so not a big stuff here
only four buttons and these are tabBar items: Take, Save, Download and Upload.
and this grayish background is basically the background of UIImageView that is
stretched all the way on the screen. That is what we are going to build out
today please do go ahead and click the link down below for getting the
resources. And when you do you will see that we have a CustomAlbum, Error+,
Podfile and a RootViewController. Now let's just start off from the beginning
and we will see what we are going to build out. What we want to do is go
ahead and click on File-New and Project. Okay, it will be a Single View Application
and I will choose my very own custom template and I will name this ...
Okay! I will embed it in a navigation controller because yes that's what I
want to have navigation so I can basically add in there some navigation
tabBar items. Okay, let's click on next and let's just add it here and I will
create a git repository so you can take a look at the finished project.
Well there will be some milestones that you will see but basically you can get this
link from the resources on my site. Let's click on Create here. There we go!
First off let's just simply add in our podfile. Let's close this and let's
open up Terminal here. Type in CD and a space and go to your root folder of the
project. Hit return type in pod init to create a pot file and now let's
go to our resources and open up our podfile that I have provided. And you will
see that there are four pods there. Copy and paste those and open up the
created podfile and paste that in there. Oh sorry... let's just move that to the icon
and let's paste that in there. Basically we are using TinyConstraints
to constrain our views. Firebase Storage to store our image later on on a series
and Firebase Firestore to store the data, well basically the image URL in the
Firebase Firestores database. And Kingfishers to basically just fetch that
image from that URL. Okay, let's close this and what we want to do now is
install this so pod install is the command line that we want to add and
let's just wait for everything to install correctly. You should see a
message that we are ready so please close any current Xcode sessions and use
Xcode workspace from now on. Okay, let's do that!
SwiftImageMania here we go! Now in this first video I am just simply
going to teach you how you can save to your photo library. Let's just set up
our app for that and what we need to do is basically delete this RootViewController
and add in the one that I have provided. Or rather yet I will not
delete it I would just simply copy and paste the contents of that RootViewController.
Let's just open it up select all with command + A and copy it
with command + C. Alose that off and let's just paste all of that in. There we go!
Okay, now let's just hit command + B so we can see that everything works and I will
guide you through and this setup of our RootViewController and hopefully it will run.
First of all we have some keys that I'm using throughout the code like
the imagesFolder key and imagesCollection this is for Firebase, uid and you imageUrl
is for the storing of these data in a Filestore. And yeah this is a good way
of using constants because these are always typo sensitive. Okay, let's go and
take a look at our RootViewController. We have four UIBarButtonItems: takePhoto
savePhoto, uploadPhoto and downloadPhoto. And for those we have these
Objective C fileprivate functions that we will implement throughout this
tutorial series. Next up we have our imagePickerPontroller because... yeah I'm
not going to talk about picking images fluid UIImagePickerController
I have a separate video on that go ahead and take a look at it if you
want to dive into these in more details. Basically we are setting up our
imagePickerController. We are setting the delegate to self and the source type
will be camera. Go ahead and make sure that you do have your device ready for
this test and it may be plug it in or if you would rather use it through your WiFi
go ahead and take a look and how you can enable wireless debugging. Well I have a
special video for that too. Finally we have our imageView that is set to the
scaleAspectFill. And it has a background of a lightGray. And an
activityIndicator that is gray. Okay, that is basically it. We are setting up
our navigation item. We are adding the bar button items here left and right and
we are setting that the views up basically we are adding a background
color of white we are adding the image view and the activity indicator and we
are edging the image view to super view with the help of TinyConstraints.
And our activity indicator is in the center of our super view. Now as I told you I'm
not going to talk about taking photos we are showing or presenting the
imagePickerController and for that we are having our UINavigationControllerDelegate
and UIImagePickerControllerDelegate in the extension. And what we
are doing here is that if we do have a selected image then we add that image to
our image view and we dismiss the image picker controller. Of course this is when
we did finish picking media with info. Okay, one last thing we will have this
didFinishedSavingWithError function that we will use shortly and a helper
presentAlert that basically creates an alert
controller and presents it. And while we are here in some cases the activity
indicator will be animating so we are stopping that. Okay, in this video
we are going to save our photo to the library. What do we have to do here
and as you can see we are going to work only on these three. What we need is
to go into the savePhoto function and add one single line of code and that is
how easy it is to save to your photo library. Let's add some code into the
savePhoto function. Okay and that is UI Image write to see photos album image
context info. That is a long one but let's see here.
First we want to add or rather yet guard let unwrap our image = imagView.image esle ...
We just simply want to return don't want to
do anything if we don't get an image. There we go! And let's copy and paste
that in and there. Next up we have our completion target that is self because
we are going to use a completionSelector and that is #selector.
If you recall I have added in here an image didFinishSavingWithError.
That is what we are going to use... let's just start typing in imageDid...
...FinishSavingWithError there we go. And that is quite OK there.
And the contextInfo will be nil. Okay, and it should take care of it.
Let's hit command + B, so we can see that everything works as expected.
Build has succeeded. Great! Now before we run our app because if we would run now
yep would crash and we would have an error in the log but it's not always
that intuitive to figure out what's wrong. What we need to do is go into our
info.plist file and just select Info under your Target and let's add some
privacy keys. And there will be 3 for this app. The first one is Privacy and
a space and the line and it will be Camera Usage Description. There we go!
For the value let's add in here... The next one is Photo Library Usage Description.
Click on this plus button here and again Privacy and space and a line
in space and Library Usage Description. Where it is...
There we go! Again for the value... And why we are
here because we are going to save our photo to our photo library we still need
to add something else like Privacy
and Library and there should be Photo Library Editions
let me just spell that out right for you. Photo Library Editions Usage Description.
And that is what we need in order to be able to or to be allowed to write to
the users photo library. This is not location usage description sorry about that.
We need to added this because it's
Photo Library Usage Description. There we go!
Okay and for the key for the Photo Library Editions Usage Description we
will add This app wants to save photos to your photo library. These are required
by Apple so you give an explanation why you want to use these private settings
from your app. What we're going to do now is basically... Let's go back to our
RootViewControllers who may you may see this one line of code again and
let's build and run make sure you have selected your device and you have plug that in.
And let's build and run and you need a device because... yes I am going to use the
camera and of course the simulator nor Mac has a camera. Let's unlock this so
we may see what we are up to here. I'm having this QuickTime Player and first
of all let's take a photo. And as you can see it says SwiftImageMedia would like
to access the camera. This app wants to use your camera. Great!
Let's give it access by tapping OK. And now I will just simply snap a photo
here. There we go and I will use it. Okay, and as you can see there it is.
We have our photo populated in the UIViewController. Okay! Now let's save this by
clicking on the Save button and now it says: This app wants to save photos to
your photo library. Let's give access to that too.
And it says: Image successfully saved or Image saved successfully. There we go! Okay! Now let's
double check if we did get that image saved. Let's take a look at our photos
library here. There we go! Today. Great! Now that is it for this video tutorial
because I'm kind of running out of time. In the next one we will take a look at
how you can save an image not to the default saved photos album but to your
very own photos album that if you wanted to you can create. Now I hope you enjoyed
this video, if you did go ahead and give it a thumbs up, subscribe to the channel
and hit that notification bell as usual. And as always I will see you in the next one.