ios 11 Developer Course Tutorial - Game How Many Fingers Part 13 Video Lecture | iOS 11 and Swift 4 App Development: A Complete Tutorial

okay so this is now the first big
challenge of the course where I'm gonna
challenge you to create an app
completely on your own and I'm gonna
start by showing you the app and then
you're gonna have a go at creating it so
the app looks like this it's pretty
simple it says how many fingers at the
top so that's a label and then we've got
a question how many fingers and I'm
holding up and then when we press the
guest button the computer generates a
random number between 0 and 5 and it
checks to see if we got it right so for
example I might guess 3 and then tap
guess and it says wrong it was a 2 I
might keep going oh it was a 2 again
yeah this time it was a 4 4 again and
another 4 and another 4 what are the
chances 5 4 2 0 2 eventually it'll be a
3 and there we go we get there in the
end so you'll need to add all of these
elements the labels the text field a
button and another label and then you'll
need to add outlets and actions just as
we did in the cat ears app and finally
you'll need to write the code to
generate the random number and check to
see if the user's guess was the same as
the random number so the one thing I'm
going to show you before I set you the
challenge of doing that is how to
generate a random number because we
haven't done that yet so we'll do that
over in our playground and it's pretty
straightforward so say we want a random
number between 0 and 5 for example then
we'll create a variable to represent our
random number I'll call it dice roll
just to make it clear but you can call
it random number or whatever you like
and to generate our random number we use
a function called arc for random and
then underscore uniform and what this
does is essentially creates a random
number uniformly distributed
across a whole range of numbers and it's
going to be a random number between zero
and one less than the number that you
put in the brackets so if we want a
random number between 0 and 5 we're
going to put a 6 in there and this will
then generate a random number between 0
and 5 so it's essentially we've got a 6
there so there are 6 different options 0
1 2 3 4 5 for our random number so you
can see it's generating a 5 if I press
play generates a 3 so we can see it's
generating different numbers every time
there we go so that's the only new piece
of code that you need to write this app
so now it's time for you to go and
create that on your own of course I will
go through the process afterwards so if
you have any problems at all then just
fire up the video and I'll show you how
it's done otherwise though I'll give you
a moment to pause it and then go off and
create the how many fingers game best of
luck
ok I hope that went well I'm gonna start
as we almost always do with a new
project so file new project and then as
before we'll choose single View
application and I'm gonna put how many
fingers in the product name and then
just save it there on the desktop
noticed I missed off the question mark
on the end of the name I probably
recommend doing that it can cause
problems having it in the bundle
identifier but feel free to try it with
the question mark if you want to okay so
I'm going to start over on main
storyboard and this is where we'll
create the look for our app so it's
gonna be pretty simple we'll start off
with a label so remember go down to the
object library
if you can't see the circle and blue
square in blue then just tap on that and
you'll then be able to see all these
objects that you can drag in and we want
to start with a label so I'm gonna bring
in my label there we go
double-click on it to change the text
and this will just be the title of my
app I'll make it a little bit bigger
just by clicking the up arrow on the
font there and then stretch out the
label box drag it back into the middle
and center align the title in the box
there we go then I'm gonna add in
another label and this is going to be
just a little bit of instruction I'm
going to drag it to the edges of the
screen because you've got these nice
blue guides which means it'll be close
to the edge of the screen but not
exactly at the edge so what asked a
question how many fingers am i holding
up
question mark and we'll keep that
smaller but we'll Center that one too
okay
next we'll need a text field to store
the users answers in so I'll just drag
that in and leave it exactly like that
except I will change the keyboard type
to the number pad to make it easier for
the user to enter a number directly in
the box
okay nearly there
next I'm gonna have pay button which is
what the user will press when they want
to guess the number of fingers and
finally
I'll add another label at the bottom
which is where I'll put the success or
otherwise of the users guess so high e
where I'll tell them whether they're
right or wrong and I'll Center that text
as well okay so hopefully you managed to
get this far this is just really
remembering the names of the different
types of user interface elements and
then dragging them all into the right
place on your screen next we do the
slightly trickier step of creating the
outlets so if you remember the outlets
are what connect the elements in your
user interface to your code and it
enables you to interact with so the text
field the guest button and the label so
I'm gonna start with the text field and
remember we hold down control and drag
from one to the other and we want to
drag just under where it says class view
controller and then we want a name for
our text field so I'll call it fingers
text field and notice again the
capitalization there we start with a
small letter and then at the beginning
of the second and third and fourth and
fifth word we put a capital letter just
to make it nice and readable okay and I
didn't mention it earlier but I pressed
the double circles to bring up the
assistant editor so I can see both of
these in one next the guess so we want
to do something when the user makes a
guess so I'm going to control drag that
in as well but importantly here I'm
going to change the connection to an
action so that will mean that we'll get
some code which will run when the user
presses the guess button and I'll just
call that guess
and finally or control drag from the
label to create an outlet for the label
and I'll call that the result label
there we go that's all the outlets that
we need we don't need to do anything
with these first two labels so we're
going to leave those as they are one
slight change I'm gonna make is just to
delete the text from that label so it's
not visible until we actually put some
text in it using our code all right and
then we'll get rid of the assistant
editor by clicking the button to the
left of it there so we're just looking
at one file and the file that we're
going to be writing our code in is of
course view controller dot Swift so as
before before I write any of my code to
actually run the game I'm going to just
fill in the guess method which is the
chunk of code that will be run when the
guest button is pressed and I'm just
going to print guess pressed so that
will tell me that everything's connected
up right and give me a chance to just
check the user interface and make sure
that everything looks right so I prefer
running it on the iPhone success it's a
better size for my screen so I'm just
going to select that and then press play
and that will launch the simulator and
run the app right here on my machine and
here we go so the interface looks great
let's just go back to Xcode and remove
that left pane there so that we can only
see the console which is what we're
interested in and then tap the guest
button and there we go
guess pressed and we've got a little bit
of information as well that we've had a
touch on the screen but really what this
is telling us is that our code is
working as intended
great so now
let's write our code to run the game so
what we want to do is first generate our
random number and then test to see if
what the user entered is equal to our
random number or not so let's create as
before a variable called dice roll and
if you remember we use arc for random
uniform and that gives us a random
number between 0 and 1 less than the
number that we're going to enter so we
want a random number between 0 and 5
because that's the range of fingers that
we're going to imagine our computer has
same as us and that's how we'll get that
random number so next we need to check
to see if the dice roll is the same as
the number that the user entered so to
get the number that the user entered
we're going to use fingers text field
and to get the value of that we use
fingers text field dot text just as we
did in the cat ears app and what we want
to do is check to see if fingers text
field text is equal to and remember we
need the double equals there because
we're testing whether it's equal to
something not setting it equal to
something and we want to check to see
whether that's equal to dice roll or not
now before we go on and write what
happens if it is equal though we're
going to get an error here and that's
because fingers text field text is a
string it's just a collection of
characters and dice roll is an integer a
whole number so we need to make them the
same type so that we can compare them
and the simplest way to do that is to
convert the dice roll integer to a
string which we saw how to do a couple
of videos ago just like that so we use
the string command to convert it from
to a string so if it's correct then
we'll set the result label to have a
text of your right simple as that and if
it's not we'll set the result label to
have a text of wrong and then we'll tell
them what the correct answer was so it
was a and then because it's a string I
can just append that on the end so dice
roll and then we'll put a full-stop on
the end as well there we go so let's
test it out it should
every time someone taps the guest button
generate a random number between 0 and 5
convert that to a string and then test
to see if the number that the user
entered is equal to that random number
and if it is tell them that they're
right if it's not tell them that they're
wrong
and give them the correct answer so
let's try this out I'm gonna put in a 2
and then guess wrong it was a four oh
well let's just keep on going oh it was
a four again three one five and
eventually I get the correct answer
brilliant
so a very simple app but hopefully it
gave you an opportunity to practice
creating your elements dragging them
around creating the outlets and actions
to interact with them and then using
this if-else construction as well as
your variable creation to test if a
certain condition was met
alright so congratulations well done for
making this app I hope you enjoyed it
we're going to now go back to
playgrounds to learn about the other
fundamental programming construct so as
well as if statements and this is loops