[MUSIC]

We'd like you to create an app that converts one unit into another unit.

For example, you can convert a distance unit, like inches, yards,

or miles into some other distance unit, yards, miles, kilometers.

You could take a fluid measurement like ounces and

convert it into a different fluid measurement like millimeters.

You could take a weight, if you'd like.

The only requirements for this is that we would like you to create interface for it.

And we would like you to use some kind of a conversion

that doesn't require any real time information.

So, for example, something that we don't want you to do in this application

is to do a conversion from one currency to another currency.

Because at any given moment in time currencies fluctuate and

that would require going off of the device in order to get that information.

So for the time being, we just want you to convert two static units to one another.

And we'll let you pick what you want to do.

But what I want to do is walk you through the generic steps that

you need to take in order to build this app.

And we'll kind of hold your hand, but we're gonna leverage some of the things

that we've learned in terms of variables, and functions, and scoping, and

some of the ways we use Xcode in order to execute our program.

All right, so let's start.

The first thing that we wanna do is we wanna open Xcode.

Let's find Xcode.

There we go.

And we're open Xcode and we're gonna create a new project.

This project is gonna be a single view application and we're not gonna need any

CocoaPods so we're not gonna do anything on the command line.

So we'll go into new and we'll select project.

We are going to ahead and

pick a single view application and I am going to call it a unit converter.

Don Patterson, just take what it gives me.

And I am going to create a universal application.

Actually, for this we haven't learned out to do unit test or UI test yet so

we'll just leave those blank.

I'm going to put it into my workspace that I've been using all along although you

can put it wherever you like.

And we're going to put it up here into the corner, so

that we can reduce the amount of screen size that we use.

All right, so here we are.

We've started with our basic project.

We've done that.

And Xcode has finished building the files.

The next thing to do is that we want to build our interface.

To build our interface we're going to open the main storyboard.

This is the place where we earlier,

when we built our first application, built the components of our interface.

And we're gonna do the same thing.

So the first thing that we're gonna do, it's not what we always do but what we're

gonna do this time, is we're gonna build all the different interface elements.

And then we're gonna add functionality to it.

So let's start by making sure that we are designing with with size classes.

So, come up here.

And, sorry, without size classes.

Click up here onto the file inspector, after we select our view.

Go down here and turn off size classes.

Go ahead and disable them.

And so now, we're gonna be using constraint based layout.

The first that we're gonna do is we're gonna enter a place for

the user to put in the number that they want to convert.

And so we're gonna do that down here by searching for a text field element.

We're gonna drop it onto the screen roughly where we want it in the middle.

We'll leave it there for a second.

The next thing that we're going to do is add a label.

The label will help guide our

user into understanding our they use our application.

We'll put that underneath.

What I'm going to do,

actually maybe I will put it over here, it's a little bit more clear.

I'm going to type, In unit one.

Alright and so the idea there is that when the user comes to this application,

they're going to type the value there and

its going to be in whatever unit you're starting from.

So you'll replace unit one.

The next thing we are going to do is we're going to add a segment controller.

A segment controller allows us to switch between different views.

It's kind of like a tab view.

We're not going to use it as a tab view, but we'll go ahead and add one there.

And, we're going to change the text here.

And we're going to instead make it E unit 2.

And we'll make this one be unit three.

I'll center that up, and then we actually want to add another component to that.

So we're gonna come up here, we're gonna select that element.

We're gonna go up here and we're going to increase the number of segments that we're

using from two to three.

Then we're gonna come down here, and we're gonna add our last unit.

Call it unit four.

In our assignment, we're asking you to do at least three different conversions.

So, from one unit to a fourth unit.

I'm gonna go ahead and stretch out that element to fill the whole page.

Actually, I think I'll stretch this out to give the users a lot of space

in order to type in their number.

I'm also going to change the properties of this text field, so that it aligns

to the right side, so it looks natural with the units that we just specified.

Okay? So when you type it will come

from the right side.

Alright, and then I'm going to add a button below this and

the button is going to be how we signal that it's time to convert

the units and we're gonna call it Update.

And then the last thing we'll do is create a label and

the label is where we're gonna put the answer.

All right, I'm gonna go ahead and stretch out that label.

And I'm gonna center the answer.

And I will put the default text in as click update for the answer.

So that users know how to cause the text to appear.

All right, now that's a pretty good layout.

I'm okay with it, but now let's add the constraints so

that it works on any different size device.

So first thing we're going to do is click on our label and we're going to say,

what I want to do here is I want to constrain that label vertically and

horizontally in the interface and then I'll base everything else off of that.

Like that.

And then I'm gonna bring update down a little closer.

And I'm going to CTRL click, and drag it to this label.

And then I'm gonna say, I wanna keep the vertical spacing the same.

And then I'm gonna click on this element, and

I'm gonna say, I want that to be horizontally centered in the container.

The next component was lower down to here that's pretty good.

We'll do the same thing we'll control click down to update and

we'll keep the vertical spacing the same.

Then we'll clear the click and we'll click on the element and

we will also make that horizontally constrained.

And then the last thing we'll do is we will

take this element and CTRL click down, and we will leave it there.

We will just keep the vertical spacing the same.

And we will CTRL click this element, down to here, and

we will keep the vertical spacing the same.

And we will CTRL click this element, to this element, and

we will keep horizontal spacing the same.

Okay, that's pretty good.

I'm pretty happy with that as a user interface.

So, we're good to go there.

The next thing to do is to declare UI variables,

UI fields as variables that we might want to interact with.

Okay, the two that we want to interact with are the label or text field so

that we can get the user input and label so that we can output Put it.

Okay, so in order to declare the UI fields as variables,

we're gonna open the intelligent editor here, and

we're going to give ourselves a little bit more room by clearing that out.

Gonna bring our interface over here.

So, we want to declare variables.

And we saw how, in our lectures,

how we can declare variables in code just by typing.

Well, X code will help us to do this automatically.

And so what we're gonna do is we're gonna declare some variables by dragging and

dropping them over to the right side.

And what we want to do is we want to Ctrl drag and

drop the elements in between the interface ViewController and the end label.

So let's first take the text field and we'll drag and drop it over here.

And we will call it the inputField.

Great.

Give it some space.

The next thing we're gonna do is,

actually we're gonna need to know what the segmented controller is doing, so

we're gonna Ctrl click that over here.

And we will add it there.

And we'll call it segmentController.

Great.

And then the last thing that we'll do is we'll click and drag our label over, and

we will call that oh, outputField.

All right.

That's great. So

now what we've done is we've declared three variables,

inputField, segmentController, and outputField.

And what you can see,

is that they have types of UITextField, star, a pointer to UITextField.

We haven't talked pointers yet.

It has a type of UISegmentControl with a star.

And then this one, has a type of UILabel with a star and

some other fields that we haven't had a chance to talk about yet.

But what I'd like you to know, is that at this point, you can access inputField,

segmentController and outputField from the code that you generate below it,

because of the scoping issues that are in this file.

Okay, the next thing that we want to do is is we want to make our button responsive.

To make our button responsive, what we need to do is we need to Ctrl click

the button into the ViewController area,

where we do the implementation of the different signals.

So let's do that by Ctrl clicking our button, our update button.

And we want to put it below where it says, @implementation ViewController,

and that's a Ctrl click, so Ctrl click here and drop it there.

And we'll go ahead and call this, let's call it updateButton.

We'll call it updateButton.

All right.

When the button is updated, let's just check to make sure everything's working

okay, so this is to bring us back to our first application that we did.

So let's put in some code here that we haven't had a chance to go over yet, but

what this is gonna do is create a place where we can store a new string

that we want to put into our label.

It's an NSMutableString, pointer to that, called buffer, and

we will say we want that mutable string, we want a new one.

And put square brackets around it.

I'm gonna go ahead and make that shrink, so

we can see it a little bit more clearly.

Don't forget about my semicolon.

And then when this clicks, I'm getting an error, because I have a capital U.

When we click on that button, what we would like to do is we would

like to change the outputField just to make everything as working.

So we use a variable name, self.outputField.text and

we're going to assign that the value of our string.

Well, our string doesn't have anything in it, so just before hand,

we're gonna add some code here that will put something into that string.

We will say, give it the value, clicked.

All right, what we're doing here is we're just making sure that we've

added functionality to our button so that it works okay.

All right, so let's go ahead and run this, and see what happens.

There it is, simulator is loading.

There we go, finally, our unit converter program is launched.

Waiting for the UI to render.

Try right-click, click.

There we go.

We restart it by double clicking it and now we can see that we have our UI built

and when I click on Update, the labeled text changes to clicked.

Okay, that's terrific.

Let's go ahead and go back to our code.

Stop the running.

Okay, the next thing that we wanna do is we need to write our conversion functions.

To write our conversion functions what we're gonna to is we're going to get

the value that's in our text field, we're gonna pass it to a function that

we write and we're gonna take the response that we get back.

So the first thing that you need to know is,

you need to know that in order to understand what the user has selected,

you need to have an if statement, a conditional.

And we're going to check the segmentController.

And we're going to look at its selectedSegmentIndex.

And if it equals zero, that means the user has selected unit two in my example.

So what we're going to do is,

we're going to make the buffer appendString say, unit two.

The next stage of the conditional will say else, else if.

I'm just gonna copy this up here.

Say, if the index equals one,

that means that unit three has been selected.

Then finally, in the last condition, We know that unit four has been selected.

When we're done with the conditional, we'll go ahead and

set it to whatever value we've chosen.

So let's run that and make sure that everything is still working okay.

Hopefully, this will be a little bit faster because we've already prepped some

of the build tools in the process.

Hopefully, the simulator won't have to reboot entirely.

Get the indication from X code that it's running on the simulator and wait for

the UI to show up.

There we go.

So now, what we can do is we can click on the different segments that

interactivity comes for free.

And when you click on Update,

we'll see the value of whichever segment is connected.

Great.

All right, so we know that something is working well.

So let's go back to X code.

So what we've done there is we've made the button responsive.

And we're writing our conversion functions.

And so now the next thing that we have to do is,

we have to actually get the value that the user has typed in.

So for example, the way we're gonna do that is we're going to go ahead and,

up here before our conditional, we're gonna say, if it's a double,

floating point number, we'll say, call it userInput,

we'll declare a variable and we'll set it equal to the value of the inputField.

And because the inputField is a string,

we're gonna use a little bit of magic here in order to convert it into a double.

Great, so what that's gonna do is it's gonna take whatever text the user has

typed in and convert it into a variable that we called userInput.

Now we're getting a warning because we're not using user input.

Then the last thing that we have to do down here is we have to say,

okay, let's return the value of our conversion.

We'll say, we'll write a function that's gonna be called convertUnitOneToUnitTwo

and we're gonna pass it to whatever the user input was.

We'll set it equal to a variable,

we'll just call it UnitTwoValue.

And then rather than appending to our string this fixed value,

what we're gonna do is we are going to take the response back,

Which is coming back as a double, oops.

Work with me, here we go.

And we are going to convert it into a stringValue.

But we got to get all this syntax right next code despite in here.

All right, good.

So what this is gonna do is call a function that we haven't written yet.

Called convertUnitOneToUnitTwo.

And then we are going to take the response that our function gives back,

which comes back as a double.

And we're gonna convert that double into a stringValue.

And then we're gonna put that stringValue into our response.

And then finally, we're going to set the buffer equal to whatever responses.

So when we write our function, we can come up here buffer interface,

so we can go ahead and write our function here using the syntax that we've got

on our class where we say, what's the type of the turn value?

It's gonna be double.

What's the name of our function?

It's gonna be convertUnitOneToUnitTwo.

What's the input?

It's gonna be a double called the UnitOneValue and

we are going to do some conversion and

we'll say double unitTwo,

we'll just declare it and we won't set it equal to anything.

Oops, let's go ahead and call it unitTwoValue for clarity.

And we'll say, I don't know,

whatever the conversion is,

unitTwoValue equals 10 times

the unitOneValue plus 2.

And let's see if we can get this running in time for

me not to run out of disk space.

Okay, and then finally we have to return unitTwoValue.

All right, so let's give that a shot, let's run it.

Okay, and now our simulator has come up running our program.

And what we can do now is we can click on our input field and

we can type in the value.

So we can say 16.0 in unit one.

And then we can click which value we wanna convert it to but now we've added

the code here, only here to call a value when the segment controllers are zero.

When we call that on a zero, that 16 value is gonna get taken from

the user input here, taken from the input field here.

And then that user input is gonna get passed to our function.

Our function will do something with it.

So it better multiply it times ten and add two.

And it'll return that value.

That value will be returned as a floating point.

And then we'll add it to our buffer after converting it to a string.

Then finally down here, we will set our text equal to the buffer.

So if we hit update, we do get ten times our value plus two.

All right.

So now what you're job is in this assignment is to take this basic template

that I shown here and describe and fill in what the units are.

What unit one is, what unit two is, what unit three is, and what unit four is.

And then to write three different functions that convert

from unit one to two, three, and four.

Add that code up here in your document and then wire it in so

that you have a line that's like this one here for each of the different units.

The last thing that you have to do is you have to turn this code in so

other people can peer review it.

In order to turn in this assignment, what we're gonna di is the same thing that we

did for the peer review assignment number one.

We're gonna take a screen capture of your application running and

showing your code using Quicktime.

So what I need you to do when you're ready to turn this in, once you have your

application running, is open XCode full screen, like we did before.

Make sure that there's nothing sensitive on your screen that you're gonna record

because remember, you're gonna be putting this up on a website for peer review.

And what I want you to do is go ahead and open Quicktime.

I'm not gonna do it on my computer because I'm running a different screen

capture program.

But open Quicktime.

Don't open a file right there.

Instead close that dialogue by hitting the Esc key.

And instead click on new screen recording.

And now it'd give the option to record the screen.

Once you're recording the screen, this is what I want you to show.

I want you to show you're project, I want you to show the code that you've written.

And if you want to, you can give a little tour of it.

Don't take more than two or three minutes to do this.

But what I want other people to be able to see in your code is,

I wanna see the function where you converted your units.

I want them to see where you defined your different fields here.

And I want them to be able to see the place where you connected

the button to the rest of the user interface.

Then once they've seen that code, maybe you've give a quick run through of it.

I want you to run your program to verify that it builds,

get the build succeeded indicator.

And then you'll have your simulator running.

When you test out your simulator, make sure that you enter in

a unit and click the Segment and then click Update.

You should see the unit convert and

then go ahead and hit something that, hit a different unit.

Do the second segment,

hit Update and make sure that the conversion is correct and then finally

click the third segment and hit Update and make sure that the conversion is correct.

Now in my example,

I didn't write conversions for all of the different segments.

That's your job.

And also, my units were sort of meaningless.

I want you to use the actual units that your peers can evaluate you on whether or

not you got the formula right as well.

Once you've shown that all three segments are working okay,

and the program hasn't crashed, you can go ahead and stop your recording,

save it to a file, and then go to Coursera and upload it on the upload page.

And again, the rubric is posted there.

The things that you will be evaluating each other on you can read before hand so

that you make sure that you cover all the things that you need to cover.

All right, good luck.

I want to see what units you guys end up picking.

I hope there's something interesting.

Remember, you've got to be able to convert one thing into three different versions.

So, good luck.

[MUSIC]

Peer Review 02 (Video)

Foundations of Objective-C App Development

Meet the Instructors