0:00
[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.
0:34
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.
2:41
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.
3:33
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.
4:51
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.
6:17
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.
8:14
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.
9:08
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.
9:58
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.
10:39
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.
11:48
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.
12:54
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.
15:01
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.
15:51
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,
17:14
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.
18:20
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.
21:13
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.
22:35
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]