Intro To iOS Backend Development: Image Uploads | Alexander Paterson | Skillshare

Intro To iOS Backend Development: Image Uploads

Alexander Paterson, Full-stack Web And Mobile Development

Intro To iOS Backend Development: Image Uploads

Alexander Paterson, Full-stack Web And Mobile Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (42m)
    • 1. Introduction

    • 2. Installing Node With NVM

    • 3. Introduction To Node

    • 4. Introduction To NPM

    • 5. Introduction To Express

    • 6. Setting Up An S3 Bucket

    • 7. Installing Alamofire And SwiftyJSON

    • 8. Setting Up An Image Picker

    • 9. Writing The Backend

    • 10. Retrieving Signed URL's

    • 11. Performing The Image Upload

    • 12. Deploying To Heroku

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Hoping to build more complex apps than you're currently capable of?

  • See for yourself how easy it is to develop your own mobile app backends with Node

Struggling to implement image uploads in an iPhone app you're currently working on?

  • Master image uploads to Amazon S3 once and for all

Half of any great mobile app is the backend, yet there are few resources online to teach beginners how to develop API's to power their apps. Most iOS development courses will point you towards Parse and Firebase, and in my opinion, this is a waste of time. 

In the process of bootstrapping large, real-world mobile apps, I found that backend-as-a-service platforms were insufficient to fully realise my ideas, so I learned to build my own backends. API development with node is easy and you'll never look back.

This is a mini-course, just to give you a feel for what it's like to develop backends with Node. I'll be covering the installation of Node, and some basic Javascript syntax for beginners. I'll then explain how to use the Express microframework, and we'll use it to upload some images from an iPhone app to Amazon S3.

If you enjoy this course and want to keep learning about Node and Express, check out my other courses.

Meet Your Teacher

Teacher Profile Image

Alexander Paterson

Full-stack Web And Mobile Development


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: Hello and welcome to intro toe IOS Back and development image uploads. This is a mini course, a sort of sample of my other course on mobile back in development, which is a lot more exhausted. Feel interested in developing room back ends? Well, you just say to implement image up loads in an apple working on, then this is what you're looking for. This cause is perfect for anybody. Has never written a line of JavaScript or developed back end on their here. I'll introduce you to back in development with node by helping you master a notoriously tricky task off uploading images from an iPhone app to 1/3 party service. We're not gonna be developing any sort of impressive app, but by the end of this short course, you'll have a good feel for what it's like to develop your own back ends. And you'll never struggled to implement image upwards again. I highly encourage you to watch these videos because you'll realize how easy and satisfying it is to build your own service to go along with your iPhone. APs. I'll see you in the first leg so 2. Installing Node With NVM: in this video we're gonna install Note on your Mac will be using node version Manager Envy in for Short, which allows us to easily switch between different versions of note. First navigate to the N. V M. Get Hub repository. If you scroll down, you'll find a terminal command that installs NPM. Copy it. Build up a new terminal session and pasted in. I already have it installed in my machine. As it says Close and reopen your terminal to start using in B M. Once you've done that, you can run N V M list to see installed versions of note. As you can see, I have a few in this course will be using a recent version 6.2 point one installed this with the command envy M and stole 6.2 point one When that's done to make sure this is the default version of node Fear, Mac, run the command in VM Alias Default 6.2 point one. Now, if you're on the command, which node terminal will show the path to the current note? Execute herbal, which, as you can see, is actually stored in a hidden file in your home directory. You should be able to run the command node to start a node show in the note show. We can execute any JavaScript commands that we would in an application used dot exit to exit the show note. Also come to the tool called noted Package Manager or NPM for short. It's executed all lives right next to the note. Execute Herbal. The reason terminal knows where to find these executed ALS when we run commands like Node and NPM is because of our terminal sessions. Execute Herbal Search Path. The search path is stored in an environment variable called path, which you can print out using the command echo. As you can see envy, M has added a path to the Node Binaries directory, corresponding to the version of note by using currently, that's it for this video. In the next one, I'll show you how to write and execute JavaScript applications with note. Job Script is a super easy language, especially if you already writing Swift. I'll see you then 3. Introduction To Node: in this video in the next, I'll teach you the basics of writing JavaScript outside of the browser. First, build up in your terminal session CD onto your desktop, making you directory interest to note CD into this directory and open it in the text editor . I'll be using Adam, which are highly recommend above all. Other text editors. Create a new file called index dot Js, but will write our first signs of job script in JavaScript. We declare variables with the Vaki would, for example, for a equals five. We also end lines with semi colons. Your code will almost always run fine if you leave out the semi colons, but it's a best practice to do it. The printout Variables in JavaScript. Use console dot log Ah, log A plus A and, as expected, 10 is printed out. Now we'll show you how to define functions. There are a few different ways to define functions. A job script one way is by using the function key word, followed by a function name. A list of arguments in brackets on the block to be executed in curly brackets. Here I've written a function called Print that takes one argument and prince down. I'll call this function Brana scripts in terminal and as expected, we see five printed out. Another way to define a function is by treating it like a variable and using the function K would before the list of arguments. This works exactly the same with the S six, a newest intact standard. We can also define what it called arrow functions. I wrote functions, drop the function k would and instead and ever goes between the arguments and the curly brackets. Now for JavaScript objects objects in JavaScript denoted by curly braces and consistent K value pez access or assigned the value of a property. We use dot notation. I'll set a to an empty object and said a property cold property to a string value a log a on a log property running a script in terminal we see the expected values Job script also has a race which is denoted by square brackets and a zero indexed all the fun and you're right called numbers with the values. 123 I log numbers and I logged the first value in terminal running node index dot Js. We see our numbers array and the first value printed out JavaScript actually makes working with the Rays quite enjoyable was in NATO ray methods. An example of one of these methods is map. I'll create a new variable called numbers Doubled, which are defined by calling map on our numbers array. Map takes a function is an argument for which I'll use an average function. The function is called once per item in the array. Taking the item is an argument, and it returns a new array item, which will replace the old one. For example, here I'm multiplying by two the value of each item in the array. Ah, low numbers doubled and, as expected, we see an array with each value doubled, and we don't have to pass in the function directly here. I'll cut this entire a function, and I'll set it to a new variable called Double. Now I can simply passing the name double and the script still works. Now. What if I wanted to move this function into another file in JavaScript? That's easy. Create a new file called double dot Js, and you simply need to set the value of modules exports to whatever it is you wish to export. I'll set this to a new function, which again simply multiplies values by two. Back in index dot Js to import file. We used the require function to find a new variable called Double and assign it to the value of a cold to require passing in the relative path to the module that we wish to import. Now, if we run index dot Js again, everything still works. That's about all the jobs Skip you need to know. For the time being, it's a pretty simple language. In the next video, I'll show you how to install third party node modules to use in our applications using node package manager. See you then. 4. Introduction To NPM: in this video, I'll show you how to use node package Manager to install third party node packages to use in our applications. Put up a new terminal session and CD into your desktop credit new directory called Interest to NPM and CD into it now on the command and PM in it. This begins the process of creating a new note package which you'll do for any application . NPR will ask for a package name, which must be lower case. So enter intruder NPM with dashes instead of using camera case using the command ls dash L . A. We can see that NPM is created and you file for us called Packaged off Jason, Let's open it up and Adam and have a look at it. Pakistan Jason contains metadata about our application. Any command Pecker Stop. Jason contains metadata about application, any commands that we want short cuts for and it's also gonna contain a list of dependencies . We're gonna install the package called you you. I date, which stands for universally unique. Identifying all this package does is generate unique strings which we can practically expect to be unique in terminal used the command npm install you you I d NPM will download the package and place it in a directory called node modules. Now, if we create a new file called index dot Js, we can require in you I d passing in the module name instead of a path. How long you you I don't faith For which generates a random, unique identify in terminal running node index dot Js We see our random string printed out Now open up package not Jason. And what's what happens when we run the next command in terminal and to NPM install dash, dash, Save you I d and you'll see a list of dependencies added to Pakistan. Dyson This gives us an easy way to keep track of an in store the dependencies of our application. And it also allows us to keep the Snowed modules directory out of our version control. For example, if I delete node modules with RM dash R f note modules, I could easily reinstall them with the command in PM in store. And you you i d reappears. I was script still runs now. Some modules come with execute herbal binaries and could be installed globally. I'm gonna globally install the package called Node one, which automatically reruns are code. Whenever we make changes, I use the command NPM install dash G node one. When that's done, you can confirm that no one is installed and execute herbal with the command. Which node? One. You'll see a symbolic link to the execute. Herbal has been placed in the same directory as a node, and NPM executed ALS on our search path. Now we can run the command node one index dot Js and see a script is executed. If I go back into Adam and change index dot Js to log five instead of a new U i D. Once I save it automatically re executed in the terminal. Use control, see to stop the process. That's all for this video. In the next one, I'll introduce you to a note package called Express Expresses a light white server framework, which makes developing Web applications. And Mac Ines. Good fund. I'll see you then 5. Introduction To Express: in this video, I'll introduce you to the Express Micro Framework expresses a highly extensible node module , which is powerful and easy to use. We'll start with a new terminal session as usual, CD onto the desktop and create a new folder called Express Test. Never run in PM in it and give the package of lower case name and accept the default metadata. Now open up Adam and create a new file called index dot Js. In this new file require a new module. Cold Express will install this package in terminal with the command in PM and Soul dash Dash Safe Express next in an X O. J s credit new variable called app and set it to the return value of a cool To express the third and final command we need to get our app running. Is it cool to app dot Listen, passing a port for us over to listen on which all set to 3000. Ah, host, which will make our local host and a callback to execute when the servers listening in this callback function Otis long that I service listening now one node one index R. J s and a server is done. If you never get to local host 3000 in your browser, you'll see a message from Express which says cannot get This is because we haven't set up any actions to handle Get requests at the CRL. To achieve this, we need to use a router credit new variable called router set to a call to express dot router to register this rather with the app called Abdullah Use passing in the new round Object? No, at an action to Iran after the line where we initialize it called route Adult round passing in the path we're handling which will be the root you are Oh, then trying to call to don't get pausing in a function cold Send Hello. All right, send Hello now set sent Hello to a new function which takes two arguments a request object and a response Object. This action will simply send back the wood. Hello. By calling response, don't send passing in the string. Hello. Back in our browser If I refresh the page we see hello from this over I'm not sure you how to add additional middleware functions to routes which executed one after another before response is finally sent back to the client. Hopefully the contents of sent hello in the fine and additional new function called prepare . Hello. Prepare Hello. Will take request and response objects is arguments. But it will also taken extra argument called next, which indicates when it's time to move on to the next function. Prepare. Hello. I'm gonna modify the request object and those modifications will be passed on to send Hello . I'm gonna set request. Don't. Hello. Equal to the string. Hello. After that cold next now in sent. Hello. I'm gonna call breast. Don't send passing in request. Don't. Hello in a route. Posson, prepare Hello is an argument before Sandalow. These functions will be executed in order. Now I never getting to local host 3000 in the browser will say the word. Hello? Now we'll show you how to deal with some data sent to the server with post requests. Really? The arguments to wrap Don't get and renamed. Get to post now the late send hello and prepare Hello and I'll install a new module. This model is called Body Pasa and its purpose is to convert data sent to our server into Jarvis. Rafter is easy for us to work with. Run NPM, install dash, dash, save body pasta and require it in our index dot Js file now called app dot Use passing in a call to body parts adult Jason, because I'm gonna be posting Jason encoded data to the server. Now we'll write a new function called Print Bonnie past this name to round up post and start writing the function. It'll take the usual arguments, request and response. And all I'm gonna do is log request up body and send back the word. Done this request stop body property has put here by body parts and middleware reregistered online. Seven. Body posture is middleware, just like we were writing ourselves before except registering it before an outside of our router. To test out this new route, I'm going to use an application called Postman. It's quite handy for crafting requests in cases like this here, you can see I've got a Jason encoded body which is simply one k cold property set to the string. Hello. I'm also sending a header indicating that the content type is Jason. Body posture will say this and decode the body into an actual javascript object and store it in request up body, which I'm just gonna print. I'm setting this request to the root Yaro of local host 3000 now and we get the expected response. Looking at our terminal, we can see our body here decoded into a workable job. Script object. I can even log request up body that property said that request again and we say the word. Hello. That's all the express will need. No, for this course, because we'll be using Jason encoding for all of our request in the next video, we'll set up in Amazon s three bucket and get ready to receive images. I'll see you then. 6. Setting Up An S3 Bucket: in this video will prepare our Amazon s three bucket for accepting and serving images. For this, you're gonna need to sign up for Amazon Web services account. Amazon will take your credit card details, and you'll also receive an automated phone call to confirm a phone number. Once that's done, navigates your dashboard. Click the services drop down and select S three on the S three dashboard hit Create bucket . You'll need to come up with a bucket. Name all this coal mine test image, Upload 123 and make sure he said the region toe Oregon because we have to specify the situation. Later on, when you buckets created from its properties menu, click the permissions Drop down and select Add Bucket policy Bucket policies specified the permissions granted to uses and other entities in a Jason format. I have a policy taught up over here and Adam and I'll include it in election description for this video. This policy is simply allowing anybody to view any of the contents of this bucket. You can see this bucket is specified as the racehorse would give it an idea of allow public raid, and the effect is to allow any AWS principle to perform. S three. Get object a copy and paste this policy and hit, save hit save over again to the right. The next step to setting off that bucket is creating a set of credentials to lower up to write to the bucket. We do this by creating a new I am user. Click your name in the top right and select security credentials. Now select uses over to the left and then create new uses. I'm creating one new user called test image upload 123 s three. The name doesn't matter. Make sure create an access key for each user is selected and hit. Create. Now click this show using credentials dropped down here and you're gonna need to store these values. So my secure I'm just gonna copy and paste these in the Adam and refer back here when we need them back in. Chrome hit closed twice. Finally, we just need to give this user the ability to write tow Rs three bucket, click on the user and select attach policy under permissions. Search for Amazon is three full access selected and hit attached policy. Now it done will be able to use the credentials. We created toe upload images to a bucket. In the next video, we'll create our IOS app and I'll show you have install some dependencies That is gonna need I'll see you then. 7. Installing Alamofire And SwiftyJSON: In this video, we'll be setting up a new X Code project and installing a couple of libraries brewed up X code and create a new single view application. All coal mine image. Upload and place it on the desktop now in stores and third party libraries brewed up terminal and CD into the root directory off the new X Code project. Open up your browser and navigate to the Alamo. Fire. Get Have repository. Eleanor Fire makes networking and swift enjoyable, and it's super easy to use. If you scroll down far enough, you'll find a section on installing the library with cocoa pods. Run the Commander gem. Install cocoa pods in your terminal if you don't have cocoa pods installed already. Once that's done, I'm gonna use the text editor Nano to create a new file called Put File. This fire will contain a list of all about third party libraries Back in the browser. Copy Atlanta fires Example Profile and then run Nano pod file in the terminal and hit command V to Paste. You'll need to change your target name to the name of your ex code project. In my case, image upload Prosecutor Min still one other library called Swifty Jason. Swifty Jason makes it easy to work with Jason Encoded data in Swift. Find the Swifty Jason, get Harbor Depository and scroll down to their example. Port file. Just copy and paste this one line that raids put Swifty Jason now hit control. Oh, then control X to save this file and exit Nano Finally, to perform the insulation of these, I breeze run the command part in store. When that's done, close your ex code project. If you run the ls stash L. A you'll see Coco puts has created and you file for us an ex code would space. This is what we need to use from now one where we work in our project as it contains a Swifty Jason an alarm, a fire pots open this new file with the open command and it'll launch with X code. You can see in the file navigator on the left that there's a new X code project called pods , which contains the lamb refire and Swifty Jason libraries. If we open up to you, control it at Swift and our original project, we're now able to import these libraries. For example, I can type import a lamb, a file which initially gives an era. But once the project is built, it works perfectly fine. In the next video, we're gonna sell open extremely minimal image pic of you controller, which will use to select images for uploading. I'll see you then. 8. Setting Up An Image Picker: in this video will start work on our app. Well, basically, just show you how to present an image pic of you controller and handle image selections with it. Open up. Your ex could work space and navigate into our view Control a class we don't need. This court did receive memory warning and we can delete this allowed if I import bills will create a new class for actual a lamb refire calls. The first thing we need is an image pick of property forever. You control it. Kloss. Create a new image picker with let image picker equals you image. Pick a controller. I will also add a new property called image, which is an optional you image. This is where we'll store the image that we select to be uploaded. Now in view, Did load you need to set the image Biggest delegate property to self and set allows editing the false Finally said image pick adult source Type two photo library For this view Controller clause to be the delegate for our image pickup and you I image picker control a delegate and new on navigation control to the causes from which view controller inherits from it's actually present. This image pic of you controller who override the view did appear method and this method called superdawg viewed. It appeared true and co present view controller, pausing in image picker animated True and completion new. Finally, we just need to implement the U my image picker control a delegate method image. Picket did finish Picking Media with info doesn't be executed when an image is selected and it's past the image. Data as info are conditionally unwrapped that you image picket controller, original image, property off the info object and cola picked image, and I'll optionally cost it as you image. If this succeeds, said this, don't image to picked image, and I'll just add a comment indicating that will be uploading the image here. I've actually made a mistake up the topia we need to inherit from you in navigation control a delegate instead of your navigation controller. Now our image picker is done to confirm it's working our log. You've selected an image in our image. Pick it control. It did finish method over on the simulator, and as you can see, the image picker appears. As I select images, you can see the success message being logged, and that's over this video in the next one, more right around back into that it sends assigned your old to our app, which will allow it to upload images. I'll see you then. 9. Writing The Backend: in this video, we're gonna right the back end for our app. It's just a simple express half with one route, which are Apple Query for Assigned. You Are Ill, which will be able to post a image to first boot up Terminal City into the desktop and create a new directory called Back End CD into this directory and run NPM in it. Give the model a lower case name and accepted metadata defaults. I used the command touch index dot Js to create an index dot Js file and I'll use adam dot toe open Adam in. Adam open up index dot Js on. We need to require five different node modules. The first is expressed which you've seen the second His body parcel, which you've also seen next will require a piece of express middleware called Morgan, which creates a nice looking log for our app. Never quiet. You you i d which were used for unique file names and finally require aws sdk calling it eight of us. AWS sdk contains a function which can generate s three bucket Muriel's signed without private K which could be used for a single image upload switching to terminal and run NPM install dash, dash save express body pasa you i d Morgan aws sdk. Now, when that's done, the first thing we're gonna do is configure aws sdk create a new variable called s three sent to a new instance of across and of the West or s three. Now make a call to s three dot convict update passing in an object. This object is gonna contain our AWS credentials, which we saved earlier When we created our first I am user, we'll store i ws credentials in a separate file called config dot Js create this file and said Modeled on exports to an object with the case access key I d Secret access Kate and region because we put a bucket in the Oregon region into us west to as the region. This is important. Copy and paste your key i d. And the secret key into the conflict file and hit Save will require in this file and call it config. Now I call that s rate of conflict update will take the same case as we have in a conflict file Access key I d Secret access key and region. Now we'll creditor express app, as we normally do with far ab equals Express and var. Browder equals express don't rather well at one routes far Browder, which will be a slash get signed euro because it'll be a get around and we'll pass it in action called Get Signed. You are ill. Who told right in a minute. For now, tell her up To use the Morgan middleware pass, Abdullah used the return value of a call to Morgan Posse in the string combined. Next, register body positive Jason and finally register. I route up but passing in a string before the function, we can register in action or middleware at a specific girl extension. What I'm doing here is registering Arata at slash v one. So we'll need to pre penned all of our you URLs with such v one. This is a good idea because if you ever change her back and works, you don't want to break all divisions of your app. Now before calling Abdullah, listen, I'm going to create a new variable called Port, which will be set to an environment variable called port if it exists or 3000. Otherwise, I'll also create the variable host a look that our APP is listening on the given host and port and call Abdel Listen, passing in port and host. Finally, it's time to write out. Get signed your l function. It takes three arguments, requests, response and next. And the first thing that will do is to find a variable called programs. This is an object with a few properties which will configure our sign s three year RL's. The first Property is Bucket, which is to be sent to the name of your history bucket. Next set, Key toe. A new version for you I date, which will be the file name, also said of property called expires, which is how long the URL lasts before an image can no longer be uploaded. I'll set this to 100 seconds, finally said Content type two image slash j big. This is important and it makes our post request we made this value is the content type head out when we send our image. Now call as three Don't get signed, you Earl passing in the string put object, which is the action. This side or L will enable us to perform next passing programs and then a callback, which is executed when the side your L has been generated. This call back takes it. Error is the first argument on the sign Euro as the second. If there's an error, are logged the era and posit to next returning. The reason we passed the irritant next is because most absolute haven't era handling action registered with the express off to the router. We won't bother in this case if there isn't a never will send back of Jason objects containing a property called Post Ural, which will be equal to the sign your role and another called Get Ural, which will be the sign your old but with any query parameters stripped off the post. Uriel is where our image we posted to and they get Ural, is where our image will be located after it's uploaded the way a strip off the query parameters from the sign Uriel is by splitting it at question marks and taking the first item. Now back in the terminal are on node one index, such as Yes, we'll go to the browser Navigato local House 3000. We actually get an error from express. This is because I made a typo on my call to s three. Don't get signed, girl. Your ill should not be capitalized. I'll fix this and I'll go back into the browser. And we could see we've successfully retrieved a post, Ural and again girl. The next video, we'll set up our after actually query up back in four these worlds. I'll see you then. 10. Retrieving Signed URL's: in this video, we'll set up our app to make a P. I calls to our back end will use selam a fire to make it get requests for back end which will reply with signed. You are Well, the first thing we need to do is allow are apt to make insecure ap I calls we need to add an entry toe are in photo P list file. Right. Click it and select open as source code. I have an entry to add typed out here, which are just copy and paste. I'll include this in election description. This allows are apt to make http requests as opposed to only being allowed to use http s now we're gonna create a new class called image Upload. Right click on this group. Select new file in creating a new swift file. Instead of importing foundation, I'll import glamour fire and Swifty Jason now create a new class. I had a new static property called get token neural which is said toe http local host 3000 slash v one such get signed girl We also need at a new method called upload image will take an image and a completion handler. As arguments, the completion handler takes two arguments. Success, which will indicate whether the upload was successful and get your old, which will be the You Earl, where images can be found not to make a first Elam. If I request, create a new variable called requests said to accord to Alabama fire dot request parson. Don't get because this is a get request. Parson Image Post. Don't get image or ls the URL? Then specify that the encouraging will be Jason Now call Request stopped Validate, which will make sure Elam, if I checks the request for non success ever codes now to actually perform the request. Cool requests don't response. Jason, which takes the closure, is an argument. This block is executed when the request complaints it takes. One argument, called response, will perform a switch on response to result in handle the two cases. Success and failure. The family, a case will call response don't result ERA back in the success case are conditionally grab response stopped. Result up value calling it value. And I'll pass this to a function given to us by Swifty Jason called Jason, which returns a Swifty Jason object. Now grab the Post Ural and get Ural Properties from this object. The way this is a change to the Swifty Jason is by trading the Jason object like a dictionary. But then calling dot string. This returns an optional string, which are conditionally unwrap. Do this for both values. For now, I'll just print the post the URL and add a comment reminding us that will upper the image here. Am atone back in the failure case. I'll just print the response in error. Also called the completion. Handle it with success, said the false and get your L set to nil. I'll make this same court in the success case after our condition. ALS. This won't be executed if we successfully get to the post Ural and return back in view. Controller Don't Swift are called image upload dot upload image passing in the image and a closer I'll just print to get your girl also force unwrapped this image optional here. Actually, I'll only print to get your Elif Success is true. Otherwise I will just print that the upload failed. Now I run the simulator and test things out. We should see a post Uriel printed about me pick and image. Now it's booted or selected image. And actually, we get an error. I forgot to run a server. I'll start up a terminal session CD into the back End directory and run node one index dot Js. Now selecting an image, we see the post your old printed great. The next video. We'll use the lamb a fire again toe upload our image to us on your URL. After that will deploy a back into Hiroko and 1/2 will be done and it'll work on physical devices. I'll see you then. 11. Performing The Image Upload: in this video, we'll be using a lamb if I'd upload an image to Amazon s three, which would be accessible. That I get. You are ill. We'll begin by opening up our X code workspace in image Postal Swift. I'm gonna replace this print post Ural line with the court for a new method. Perform, Upload, which takes four arguments. Image post. Ural, get your old and completing handler. All right, this above upload image. It's a private static function, which takes those four arguments from before none of them are optional. The first thing this method does is converts the image from a U Y image to N s data using the U Y image J peg representation function retakes you image cold image on a float, which specifies the quality of the image compression. I'm going to use 0.1 because the default simulated images, but uploading a pretty massive conditionally unwrapped the returned estate are optional, calling it image data. If that succeeds are logged that we're performing an upload now, we'll create a new variable called request equal to a call to a lamb refire dot upload. The first argument is dot put because this is the age to keep a put request. The second is post euro and thirdly, we need to specify head up, which is content type, said Teoh. Image slash j pig. The final argument is the data which we called image data cool, request or validate like before and now. Cool requested response. Passing any closure. The closure will take four arguments. Request response. Jason and ERA. If the era isn't equal to new aloe Vera and call the completion handler with success at the false and get your URL said to get you Earl, otherwise I'll call the completion. Had little success it to true. And get your old set to get you Earl. Now this is complete Back in view control. Don't swift. I'll update a completion handler to be a little more clear if the image successfully uploads little log. See image here with the get you Earl. Now on the simulator selecting image and we get in there. Oh, I forgot to run the back and again I'll open up terminal CD into the back end directory and run node index dot Js If I pick an image, I see uploading looked as expected and After a few seconds, we see the get your girl a copy and paste this into my browser and we see the image we just uploaded. Very nice. In the next video, we'll deploy a back into a raucous that we can run our app on physical devices outside of the local host. I'll see you then. 12. Deploying To Heroku: in this video, we'll deploy a back end to Hiroko. Need to sign up for her broker if you haven't already. If you've ever used to Rocca before, it's probably the easiest way to deploy your own Web applications. But there are a few things we need to do to get this back in running on it. If you don't have the heroic ooh, command line tools installed on your machine already navigates a tool belt doctorow co dot com and download and install them with that done open up Terminal City into a back and directory and open it without him. Hiroko uses get the deployment, which means we're gonna need to set up our application as a git repository. During this. We need to keep our AWS secret que out of our version control because otherwise we risk it being leaked and somebody could break havoc on an AWS account. I'm gonna create a new file called Don't get Ignore. This file will specify the directories and files we wish to keep out of SL Central. Our node modules and conflict O J s in production are apple. Get secret case from environment variables instead of our source code, which is much more secure. We need to set this up in index dot Js. I'll write a new if statement, which checks if an environment variable called Node N V is equal to the string production, which it will be by default tip of running our upon her Broca. If it is, we'll set our access in secret keys to environment variables with same names they had in a conflict file. Otherwise, we're just used the conflict file that will still have on our local machine. I'm of the import into the else block as well. Now back in terminal with the heroic A command line tools installed around the command Hiroko log in to log in. You only need to do this once entering your Haruko email and password. Now still in our back in directory run her Rocca Create, which will create a new virtual machine for us. Next, we need to make some changes in package of Jason. We need to add a new script Cold Start, which is the command over a Coupal Runner application with said it to node index dot Js Back in terminal will now make this project to get repository with the command. Get in it. Once that's done, will add a broken machine as a remote repository. Copy and paste the link to the git repository. Hiroko was created for us, which ends in dot Get deposit to a cold to get remote. Add Hirooka. This creates a new reference to the remote repository cold Arocha in Pakistan. Jason again, we need to add one more thing, which is a node version number at a new property court engines which is set one object with one property cold note set to 6.2 point one. The version of note we've been using with this complaint we can push kowtow Broca, run the command Get add Desh a tow at all of our files diversion control. Then run, Get commit Dutch I am and a message for which I'll just use initial commit This saves any changes to have files only need to execute it for new files. Now run! Get pushed Arocha Master to deploy a code to this over. This will take a minute. When that's done, we can check to see if I servers running. Probably. I use the command line Tool curl to perform a simple get request on the route. You, Earl of us ever. If it were running properly, I'd get it Cannot get era from express. Instead, the request just hangs. One reason this might be happening is that I haven't set the Hiroko environment variables for AWS sdk configuration yet use the command Hiraoka con Fix it to Set Access Key I. D and Secret Access Key include the quotation marks for the secret access key because it can contain special characters which confused this command. Now, instead of using Curl, I'll just try navigating to our up in a browser. It's located at the name of your app dot heroic uap dot com, and the request hangs again to debug this switch over to terminal and run the command her Roku logs to see the logs. I could see that I have successfully logging the listening on 1 to 7.0 point 0.1 message, but Hiroko was telling us that the Web process failed to bind to the correct port. We're definitely binding to the poor environment variable. So I suspect that the reason that this isn't working is that we're trying to bind to the wrong private i p address to fix this. What I'm gonna do is just not specify a host in my call to abduct. Listen in index dot Js flick back to terminal and to update the code running on her Rocca, run the command git commit dash am with a message and then get pushed her broken Master. Now, if I run had broken logs. Everything looks good. If I go back to the browser and refresh the page, we see the cannot get from express. Awesome. Now I'm gonna boot up her ex code book space and an image upload changed the URL from our local host to a her broke a domain name over on the simulator. Now wait for the finally boat. And when it does, I'll select an image. We see the uploading message and I log is expected and we get back to get You are Oh, this is the moment of truth. Them I'll copy this year. Real pasted into my browser and we see the image. We did it. We're uploading images from a swift up, using a no Js back and running in a real production environment. Good work. Have you made it so far. If you've enjoyed this course and it's been relevant to your interests, please check out my other causes of new to meet that perfect for you. And also check out my website alexander Paterson dot com. Thanks for watching.