Hello there, everybody. How are we doing tonight? Well, if you're watching live, it's
Friday night. If you're watching a recording later, I don't know what night of the week
it is. It could be morning. It could be overnight. Anyway, this is the Invalid Stream. And first
segment here, as always, is that we are continuing to work through a little bit of learning how
to program for iOS with the book iOS 10 SDK Development. And in the first six episodes
of this that are online, the first three chapters of the book, we've been going through the
Swift programming language. And that means that we've been learning the ins and outs of
the language, what it's good at, the simple things like the various types or object-oriented
program with classes, but then also some more functional concepts like being able to do
things with structs and iterations. We've used a playground for this. And the playground
is a playground's an interactive window that you can use in the Xcode application where
we build our apps. And the playground lets you, you know, type in stuff and see what
happens. And that's all, you know, really well and good and all. But you're not building
apps at that point. You are learning the language and you're trying out ideas. The playgrounds
are great for messing around with stuff. But we need to take that next step here and actually
move on to building applications. That's what we're going to do starting tonight and going
through the rest of the series. It's also, you know, as I said, this is from the Pragmatic
Programmers book. What we do in this book is we've decided to build one app through the
course of the entire book. We tried to come up with a project that does the kinds of things
you will do in a real world app. But we're not like, you know, showing you, here's a
trivial little app for one feature. Here's a trivial app for another feature. In earlier
versions of this book, we had done that. We found there was a whole lot of boilerplates
setting up a project and, you know, wiring stuff up. It gets to be a hassle. So do that
once and then just add to it over and over again. That becomes more like a real application.
You start to build on the complexity of having more and more code. We have something that
we can test. We have something we can debug. At the end of the day, we'll have something
that we can actually upload to the app store, which is what happens at the end of the book.
Now what we do for the, the test application or the sample application in this book is
we are writing a podcast client. We figured that was a reasonably fun thing to do that's
reasonably realistic too. So it's something where, you know, that is an app that's going
to go out to the internet. It's going to get some data. You'll be able to type in one or
more podcast feeds. It'll pull down the data. It'll parse through it. It'll find the names
of all the episodes and their URLs. It'll put them in a nice list and you'll be able
to pick one and it'll go to another screen and that's where the player is. So, you know,
this is a realistic app. This is the kind of thing you'll actually do when you write
a real app and it hits on a lot of things that are very common because lots and lots
of apps go out to the network and they pull down data and they do something with that
data and they present it to the user and they navigate between screens. These are very
common things for all kinds of apps. So that is our goal here and let me get our next shot
lined up and we can start getting to work on that. So, get us over here. As you can
see, I've got the Welcome to Xcode screen up. A couple of things I've opened recently.
In previous episodes, we would have clicked this first button here. Get started with
a playground. But instead, we are going to do create a new Xcode project. As you can
see there, it says create an app for iPhone, iPad, Mac, Apple Watch or Apple TV. So that's
what we're going to do. Keep an eye over here on Slack to see if anybody wants my attention.
And let's get this window lined up with the screen capture area. There we go. All right.
So when you create a project, and a project is going to be a compilation of everything
you need to build this app. So it's all the code you've written, the screens you've designed,
resources like images or sounds, metadata like your version number and what devices
you run on and whether you need to ask for special permission for things. All that stuff
is put into a project. Now, when you first open this screen, this little wizard comes
out. I should say assistant. I think wizard is the Windows term. And this asks you what
kind of template you want to use. And the template will help set up some of the common
things you need in an application. So as you can see, there's this first set of little
tabs at the top. It says iOS, WatchOS, TVOS, MacOS cross platform. So we're going to start
on iOS. And it gives you a couple of different options. For single view application, game,
master detail, page based tabs, sticker pack, iMessage, a lot of these things, if you just
start with one style, it's not difficult to add the others later. But you know, if you
know what you want up front, go ahead and say, you know, I know I'm going to do a page
based application, I know I'm going to have something with the tabs at the bottom screen.
It'll help you to start there. But we're going to start with the single view application
here. And just to set some expectations for tonight, tonight, we're just going to work
on building the user interface and learning our way around the tool. It'll be a little
while before we actually start getting some functionality out of this. It takes a while.
It's got a couple hundred pages to get through here. All right. So I'm going to choose make
sure it's iOS, not any of the other platforms, single view application hit next. Now this
part of the assistant comes in and asks for a project name. Since this is a book for the
pragmatic programmers, we've called ours pragmatic podcasts, your team may or may not be present.
It'll probably say none. If you have not yet signed up with the Apple developer program,
we will walk through that later on in the book. If you if you already have, then this
will actually be populated with one or more team names. We can talk about that later.
So I've got set to Chris Adamson, which is my name. If yours says none, that's totally
fine. Don't worry about it. Next is an organization name. This is a legal organization. It'll
show up in the boilerplate copyright statement at the top of every source file. So you know,
if you have a company name, put that in there. If you have a sort of an organization, you
can leave it blank if you need to. Next is the organization identifier. And what this
is, is this needs to be globally unique. So that you know, if somebody else writes an
app called pragmatic podcasts, we have a way of telling the difference between mine and
theirs. And what you should do is you should take an internet domain and write it backwards.
So you can see that says organization identifier com dot. And when we did in this, as we said,
Prague dot. And then you know, like your handle. So if you have some specific name,
now, you know, we don't have like, you know, user accounts on Prague Prague.com. So that's
a little fanciful, but you just want to pick something here. If you have a domain under
your control, or just something that's going to be unique here, written in this reverse
DNS style. So if you think of like, you know, host dot company dot com, then just turn that
around com dot company dot host. Okay. So that's all you're looking for here is we're looking
for uniqueness. So you can see that it takes the product name and the organization identifier.
And it combines those into this thing called bundle identifier. That's the thing that's
going to be universal. So that's going to be unique universally. So as I said, if someone
else creates an app called pragmatic podcasts, it's fine. Let's think about it. Lots of people
have probably created apps called calculator. How do you tell the difference between the
worlds com dot something dot calculator com dot something else dot calculator. That's
how you tell the difference. All right. Next thing here, we have language. That should
be swift for everybody here because that's what we of course spent the first couple chapters
working on the other language you can use as objective C that was the mainstay of iOS
development up until iOS eight. It's still widely used so much of Apple stuff is still
written in it. It's a good language. It's fine. Swift is probably the future. You can
also intermingle languages in your source file, you're not going to need to do that
as beginner, but you can have objective C C plus plus procedural C and swift all in the
same project. It's totally fine. Next line here is universal. And that's easy. You can
see it says devices. So this is like, if you want to create an iPhone only app or an iPad
only app, Apple really pushes hard for everybody to make universal apps that run on both. That's
what we're going to do here. If you did iPhone, you know, if that runs on an iPad, you've
probably seen how it blows up and it looks really ugly. They sort of like stretch the
iPhone to fill as much the iPad screens they can. If you can possibly avoid doing that,
please do. And I don't know that very many people at all build iPad only devices. So
but universal, if you can possibly swing it, please do. Then finally, you have a couple
check boxes here. Use core data. You'll not have to worry about for this book. Core data
is a it's a way of storing data. So it's very easy to look it up. So it's sort of like
basically a very nice interface to a database behind it. We're not going to use that there
is a separate book from this publisher on core data. So once you're finished with this
book, that's a nice thing to move on to include unit tests, say yes to that, because we will
be doing testing later on in the book, same thing for UI tests. And testing is a way that
we can just basically always know that our app is going to work correctly. So go ahead.
And once we filled in all those fields like that, we'll hit next, get in like off. And
we're spinning. All right, now just wants to find a place to save it to. I am going
to use my desktop. You can see here at the bottom, it says source control, create a
Git repository. So if you want to like have a history of all your changes, just save locally
on your own hard drive, that would be a reasonably decent idea to do. Excuse me. More often,
what we do is we will, you know, put this into some other Git repository such as GitHub,
which is a popular internet site. And that way that we can, we can share our work with
other people. So you can leave that blank for now. You don't need to do that if you
want to, it doesn't hurt you, it'll just keep basically keep a history of all your changes.
And then you could then export that to get later on. But we won't do that. Let's just
go ahead and create. Now we're not capturing this part of the screen, but over on my desktop,
I have created a folder called pragmatic podcasts. You can see that we've now created this project.
And we walk us around the parts of the UI first. Let's see if I zoom in here. It doesn't
look like it's going to work. Okay. So I mean, it does look like it's going to work,
but I can't see on my preview monitor what I'm seeing on the other screens. I have no
idea if I'm showing you guys the right thing. So let me walk through this little slowly
and I'll just use my arrow here. I think you can see the big arrow from. Well, we got it
with El Capitan, but what is this now? Cira? Is that what 1012 is? I forgot my Mac Merchant
numbers. Okay. So let's start up here on the toolbar. So you have, you know, obviously
closed minimize, maximize. This button is the run button. So that's going to allow you
to run the current application. And then this is the stop button to stop you from running
it. This two part thing here is called the scheme selector. So if one project can create
multiple apps or other things that a project could create, or maybe like frameworks, which
are code that are reused between different apps, your tests might show up here. That
first thing is the thing you're going to run. And the second thing is the thing you're going
to run it on. That's a little cut off right there. Why don't I extend that down some.
And you can see here, maybe you'll pull down this window a little bit, get up like this.
So what this shows you, and we'll get a little further down so we can capture this whole
area in the screen, it's just not going to work for me, is it? Okay. So the main part
of this list is a bunch of simulators. So these are the names of devices, but they will
be run like in a Mac application on your desktop. And probably can't see getting cut off the
top is build only device generic iOS device. That means you would build it, not for running
on the computer, but for actually running on a device. And then if you're an Apple's
developer program at the top of the list will be any iOS devices, physical iOS devices phones
or iPads, they're currently plugged into the computer that you can run, we will look into
how we do that a couple chapters later. So for the time being, you know, you'll just
pick one of these models, like let's say I pick iPhone SE. Okay, that's the small one.
And honestly, you know, just for kicks and giggles, let's just hit run. Okay, so hit run,
you see a little bit of activity here in this, this status thing at the top of the toolbar,
says build succeeded. And over here, it launches a separate application. This is the simulator.
We'll need a second to start up here. So we wait for it to get its act together. I got
some work done. And like I said, this is a separate application from Xcode. And now that
that white screen is actually our application, which of course doesn't look like much. But
if I go over to the, the simulators window, again, this is a cut off because I only get
capturing part of my screen. But if I do can see that this is the home button, if I hit
the home button, see, we actually go out to the main, the launchpad for all of our apps.
See this, you know, this looks and behaves more or less just like a real iOS device.
If I go back here, we go back into my app. Now my app doesn't do anything now. So it's
a plain white screen. But as you can see, if I use a key to go back out, relaunch, you
know, that is our app right there. If I do double home key, you can see there's pragmatic
podcasts and there's the, there's launchpad. And I can, you know, just I can force quit
my app like this, you know, and then if I go back to Xcode, Xcode's not really happy
that I forced quit it, but that's okay. Nobody gets hurt. So let's see. So that's on the
toolbar. As I said, we've got run, stop, scheme selector to pick what to run and what simulator
run it on. Got a status window here. Now over here, we have, we're called the three kinds
of editors. Those will be a little bit useful, more useful to us later. But I'll just tell
you right now, they include the standard editor, the assistant editor, which shows related
files side by side, and then the version editor that lets you look through history if you're
using source control. This other thing's a little bit more useful here over on the right
is these, these three buttons that like hide and show various pains of the screen. You
can see I'm clicking the one on the left. And that is hiding and showing this leftmost
pain. All right, I'm going to talk about these pains in a second. I can hit this middle
one, that's sliding in this guy at the bottom. I hit the right one. There's that right pain
coming and going. So if all three of these are in that we have is we've got to show the
areas of the screen. This pain over here on the left is called our navigators. This pain
at the bottom is called the debug navigator or the debug pain. And over here on the right,
these are inspectors. Okay, now the center is called the content area. And that changes
what it, what it displays based on which file is selected over here. Okay, so this first
thing is showing us the, the project as a whole. Okay, so this is the various settings
like what version I'm on and, you know, what, what I'm deploying to what, as you can see
here device orientation, you know, which orientations do I allow this app to run in, etc. But if
I were to pick say a source code file, there is a whole bunch of source code. Okay. And
then you can see here over on the right side, the inspector changes based on what kind of
file I've chosen, which I'm going to show you a little bit more of in a second. I guess
there's nothing else I really need to show you right now about this debug area that's
not going to really help us until something is running. So what I want to do is get us
over to the main dot storyboard file. I'll let that load up here. And so what is interesting
about the main dot storyboard is that the storyboard is where we build the user interface
for an application. And this is maybe a little different if you've built like mobile or desktop
apps for other platforms. A lot of them you'll like you'll write code to put every button
on the screen, every list, every table, you know, you'll say it should be this size at
this location and this font and the font is at this, you know, this is italicized and
12 point and you'll just type all that stuff in. And that's how you'll create your UI.
Now on the Mac and iOS, we do it visually. We drag the parts of our GUI to build the
GUI visually and then we run the app. And it will do later is we will connect code to
the GUI. So the things that are different, I think about the Apple styles of programming
are twofold. The two things that are important about it are first that we're building things
visually at all, rather than code, you can build them in code. There are sometimes good
reasons to. There are also times when people think they know better than Apple and build
their goodies and code and they're not always right that that's the right thing to do. But
you can and sometimes that's the right thing to do. But the other thing I think is different
for a lot of people is the idea that you build the GUI first, okay? That is somewhat surprising
to a lot of people. A lot of people think I'm going to build out my functionality. I
will worry about the interface later. That tends to lead to crappy interfaces. Okay.
So let's see. So we're going to do here is as you can see, I think if I show, I'm going
to hide that debug page. It's not going to do us any good right now. You can see the
bottom here. It says view as iPhone seven. So this is saying my GUI right now is an
iPhone seven. If I click that thing, it says view as you can see there's like these little
tiny versions of various iPhone screens. So I can then say I click this one to the next
bit. Now the shape changes because now it says this is an iPhone SE or this is an iPhone
four. You don't need to worry about the iPhone four anymore. If you if you're targeting iOS
10 and up, those don't run on iPhone fours. Those are those those really I think I have
one up here. Hold on. Yeah. So like here is an iPhone four. And by comparison, here is
my five s. You can see that the five s is slightly taller. And of course, the five s is the same
as the SE. So that's now the smallest iPhone. And then beyond that, you have the classic
size. So let me look at that little box there. I can actually zoom in a little bit here.
I'll be a little more useful. So there is the the four size, which you no longer have
to worry about. This is the five size. I'm going to need to shrink a little bit. This
is the seven. Now the seven is also the same as the six, the six s and the seven. Next
up from that is the seven plus that is the same as the six plus the six s plus and seven
plus. And we can see there are two sizes of iPads here. So there is says the iPad Pro,
but you really just need to worry about the dimensions that the 9.7 inch or the 12.9
inch, which is the the huge monster iPads is really just two sizes iPad. The smaller
one is both the normal iPad size for all used to like mine right here. But also iPad minis
would have the same shape. So they have the same pixel coordinates and dimensions. It's
just the pixels are a lot smaller on a mini. Okay. And the other thing I'll show you here
as we click around here, I'm going to go back down to like an SE is that there's this thing
called orientation. So it's like, okay, here's what it looks like if the phone is being held
sideways. Okay, so we're going to be able to preview all of our UI. Well, I said, okay,
we're going to build a UI. How are we going to build a UI? Well, if you look over here
in the inspector pane, and again, if it's not showing use this upper right toolbar,
you can see me clicking down at the bottom of it is all of our GUI piece. Now, if you
have just launched the app for the first time, it might be showing as these like just bear
icons and click this box to show them as a list. There are four groups here. So this first one
is giving us code code. It's this middle one right here. So you can see the little pop ups
there show the file template library, the code snippet library, the media library, but we want
the object library. And I forget if that it'd be nice if that was the default, but you know,
it's it should be what you would get when you start working with a storyboard. So
let us start building this this guy. So as you can see, I can also put this as a list. So I can
either like work with these icons, or I can work with them as a list. And you know, the nice thing
about a list is it'll give you descriptions of each object. You can also just use the filter
there. So if I'm just looking for B U T T O N, there are the different kinds of buttons versus
there's only the one label. I don't know what can one be another one that we have multiple
versions of just generically say view, there are many, many, many different kinds of views.
So that's this nice little filter that helps us out quite a bit. So what we're going to do here
in this chapter is we will build a very simple bare bones user interface. And in the next chapter,
we're going to wire that up to code. So what I had us do in the book is first, we're going to
take a button, it doesn't really look like a button. I mean, that's one of the things with
the new iOS is that labels and buttons kind of look alike. But oh, well, anyway, take that button
down and you drag it up into this thing that says view controller, and just put it somewhere in the
upper left. Okay, where you put it doesn't really matter for now. It will matter later. I'm going
to zoom in a little bit. You can double click it to edit it. Now I should also mention, and this
is why we call these inspectors, if I select an object here, and I also need to show here,
this may not be your default. And it may not be visible to you. So I'm going to slide this
window over for just a second. If you can see, look my arrow there. See this little thing right
above the, the view as right next to view as. And if I click that, it hides and shows this,
this separate list. And I think let's look at the pop up there as the document outline,
I sometimes called the scene list. But the document outline gives us this little, this
second column here that shows the hierarchy of view controller, these things called guides,
the main view, and you see I select that turns the whole thing blue, that means the whole screen
is the view. And then within that is this B for button, the button is called play, and it has
some of these other little objects to you don't need to worry about those right now. So there's
this button called play, which I can either select here in the document outline, or I can select it
in the canvas itself. Now over on the inspector pane, we've got a little mini toolbar here that
lets us inspect. Well, this first one is going to show us the file inspector, it shows us where
the file is, it's the storyboard. If I do this question mark, that gives us some quick help.
So it tells us what a button is like and gives us the documentation for it.
This is the identity inspector, we'll look at that later, it's not going to help us right now.
Really what's really useful to us is this fourth one called the attributes inspector,
because this lets us do things like change its font. As you can see right here, I've got font,
and I'm just going to kick that up a bit, maybe make this about 30 point, you can see it's kind
of crunched over there, but I'll just stretch that out to get the word play back. So just park
that up here somewhere in the upper left, and that'll be fine. If you want, you can play with
the fonts, and you can use some other different font, you can change the text color, do all sorts
of fun things to customize it, knock yourself out. You could also change the text here,
but I'm going to put it back to play. Next thing I'm going to do is I'm going to pull out a label,
and this label will be, you know, we'll have a play button, and then we'll have another label
that'll tell us where our time in the song is. So you can see I've got that selected,
so the attributes inspector over here, so I'm going to just change that, I'll edit it here to
say zero colon zero zero, and again, maybe I'll crank the font size up to about 30, and stretch
that out, and see if we can get that somewhat lined up. Another thing I should do here,
and notice that, you know, if I leave the attribute inspector selected here, as I switch between a
button and a label, the kinds of things you can edit are different, you know, there are things
about the button's state, which don't apply to a label, you know, so it's like, is it enabled or
disabled on a button? It's like, am I currently clicking and I'm not clicking? That doesn't
apply to a label, so we have a different set of selections here, but also, I don't think I have
alignment for a button, I do have it for a label, so I'm going to make the, I'm going to click this
to make him right aligned, I think I'm going to leave that about there, that's fine, and then
our very simple player will have a play button, it will have a time readout, and let's just put in
one more label here, we'll line up about here, and this can be, I'll edit it here actually,
I'll call this track title, okay, and it automatically reflows, and I think, okay, well,
this is looking kind of good, you know, this is bare bones, baby steps, but okay, so far so good,
we have built the beginnings of a GUI, let's run this, right, we have no code,
but we do have a user interface, I'm going to click that run button, it's going to build,
and we'll wait for it to come up, and look at that, there's our GUI running inside the simulated
iPhone SE, and I can click the play button, it doesn't do anything, because we haven't connected
it to any kind of code, but okay, we've started writing this app, I will go back to Xcode and
stop it, say okay, we think we are in great shape, right, we've started building our GUI,
but actually, let me show you that we have some work to do, that's going to come up for us in
the next episode, let me run it again, and when I run it, it comes up, now as you can see, this
is portrait orientation, so again, to think of a phone, here we are, I got my phone, this is a
portrait, so it's taller than it is wide, now of course, if you use any device like this today,
you expect to be able to turn it sideways, and the whole user interface will reorient itself,
you can do that in the simulator, you're not going to like turn the screen, instead,
up in the hardware window, again, this is cut off for you guys, but if I go under,
there's a menu called hardware, and you can see that, rotate left, rotate right,
we go rotate left, now you might not realize this, but this is now bad, because we kind of,
if you look back at the storyboard behind us, we kind of intended for the time label to stay over
on the right side of the screen, that's why we put it there, but instead, it has kept this fixed
distance from the play button, and if I do rotate right, you know, it goes back to normal,
it's wrong in landscape, and it's really wrong there, okay, so what is the problem here? Well,
you know, we just plopped down those, those, the buttons and the labels,
but we never gave it any idea of what it's supposed to do, when we rotate it, and it's
actually worse than that, if I go here to the storyboard, I'm gonna, I stopped it here, I'll
put away the debugging pane, but you remember these guys, the bottom of the screen, and our device
sizes, now we size this up for an iPhone SE, what if I go and put this on an iPhone 7?
Well, now, again, because it's things we want this constant distance from the button over to
label, I now have a whole bunch of useless space over to my right, let's make it worse, let's look
at it on a, on a 7 plus, now it's even more space, I don't even need to tell you that it's going to
be a complete train wreck on an iPad, okay, so, you know, we need to have a way of expressing
where stuff is really supposed to go, we don't want to say by coordinates, don't put it 50 dots
right, whatever left, no, no, no, we need to say, I want this to hold, to hug the right side of the
screen, I want this to be a certain distance down from the top, how do we do that? Well, that's
actually what we're going to study next time, we are going to look into auto layout, which is the
way that we can solve this problem for not just rotation, but also for the varying device sizes,
but that is where we're going to get for tonight, is we have started creating our app,
we've learned the parts of the Xcode window, and we've learned how to start in the Storyboard
file, dragging out these UI components and building our GUI, so, that's where we are for
tonight, this is halfway through chapter four of the book, and we will hop in next time,
and continue building GUIs, but for now, I'm going to take a break, so I will talk to you all in a
little bit.
