welcome back tackle a tear now today
we're actually going to be doing some
coding it is a technical topic so I know
this isn't necessarily a tech channel
but I thought I would give you a rundown
about how I would put together an iOS
application as a former iOS technical
lead over at YouTube primarily though I
did a lot of hate from people who think
that I can't even code or they saw my
Twitter demo and assume that the only
thing I know how to do is web full-stack
engineering making some JavaScript and
back-end stuff but I also happen to know
mobile development that's actually the
core of what I have been doing so in
order to get started why don't we jump
into the computer damn quick pause this
video is brought to you by Skillshare
Skillshare is the online learning
community with thousands of classes on
entrepreneurial and creative skills
explore everything from web development
and marketing to entrepreneurship
productivity and more and because
co-sponsoring this video I'm getting the
first 500 people to join every two month
trials to check my link at the
description below so why don't we get
started because I know you guys just
want to see me open up a bunch of black
terminals in protein okay so the first
thing you're gonna want to do is
download and open up Xcode which is
Apple's developer program for making
iPhone applications we're gonna click on
create Xcode project single view
application and give it a name to do
list and I'm going to be using
objective-c
you can use Swift if you like but over
at Facebook and Google we all tend to
use objective-c primarily because Swift
offers no real benefits it's just some
sugar syntax but it's not cross-platform
or anything and there's a bunch of
tooling and infrastructure code or D on
the Objective C and so that's one thing
that I picked I'm sick and tired of
seeing Apple doing is they only come up
with new innovations for their platform
only but nothing is cross-platform let
you take a look at Swift ey it's all on
the Apple ecosystem which all equates to
is really just syntactical sugar that's
not what this industry needs we need
better cross-platform tools all right so
now let's take a look at what we got
here I can click build and run and it
should just build an application and run
it rather wait it will be an empty
screen and by the way so Apple they
really confuse you there's all these
graphical ways of creating an
application you got storyboards you can
use nibs
you've got Swift ey but we tend to avoid
all of this over at fan companies
primarily because anytime you use
graphical stuff it wrecks your version
has
at least four storyboards which is
important and as for Swift ey which is a
declarative way for creating UI well we
already have component kit little
texture react native and all of these
tend to offer more benefits than say
Swift do I either in terms of
cross-platform or performance alright so
now that we have our app up and running
we're gonna want to give it a navigation
bar and the title so we're gonna change
the UI view controller to our UI
navigation controller go into the
initialization here override the
constructor and then we'll create a new
child view controller for the actor to
do list application and contain it and
actually we're going to create a new
subclass for this called to do view
controller for new brand new file then
we're going to this travel view
controller and give it a title like self
dot navigation item the title equals to
Deus now if I were to run the
application I should see the title start
showing up yeah there you go we're going
to also give it a background color make
it white all right looking good and for
the rest of this tutorial you can check
out my course where I'll teach you how
to finish the rest of this no I'm just
joking
but what I will be doing is jumping
around this a bit because it's going to
be boring to watch me code all the time
so I'll just be speeding through this
and I'll have the complete source code
in the description below if you want to
proves it in further detail but at this
point what we're going to want to do is
put in a scroll view
now the scroll view would be pretty
dynamic for items being added and
removed and at least for web developers
if you didn't know scroll views work
very differently in mobile development
than in the web because in mobile due to
performance concerns they like to reuse
views so the UI elements for views
they're being recycled as they're coming
on and off screen traditionally and
iowa's you use collection views in
android they're called like recycler
views but the framework for this is
pretty bulky and clumsy actually for the
OS and so what developers tend to do is
they build their own abstractions and
and frameworks on top of these
collection views we're gonna be using
something that Instagram has created
called IG list kit and if you take a
look a gene list kit is actually used
over in the YouTube app as well is used
over at Instagram so it's used by some
top tech companies as well as say a
component kit little texture but the
idea is that you have a set of objects
it's just data and then the framework is
going to be able to render this into a
list
scrollable items and if the data ever
changes then the framework will take
care of all of the updates to get this
list of items rendered they uses some
dipping algorithm for that to minimize
the number of updates they have to make
and so what we're going to want to do is
use cocoapods to get this installed you
simply go into your directory you edit a
path file and then you run pod install
you're gonna have to get cocoa pods and
salt for this as well but once you
install it it installs that framework
into your project and your exit the app
reload it and it will be there ready for
you to use so excuse me while I lay down
some code now to bring this into the
project so we'll import IG list kit and
that will override load view here all
right so I've created the collection
view and then assign that over to IG
let's get to manage and now we're going
to just have to fill in the stub methods
for IG list kit so we're going to have
this conform to IG list adapter
datasource and then just fill in three
methods for this and for this we're
going to have to create a section
controller which will manage each of the
sections so create a new class here
section controller which comes from IG
list section controller and they want an
objects for the list adapter which is
the data so for now we're just going to
return a section known as to dues and
within this section they're going to be
individual items for each to do list
coming into the section controller we
can start filling this out so like
number of items let's just return like
for for now I'll put in like a minimum
line spacing cell for either my index
will return nail for now and size for
item at index and we'll return the CG
size make container size that width and
a height of say 48 so now running this
we get a crash and it's because we're
returning an ill cell so we have to
create a cell class now and so this is
the thing about mobile development you
have a lot of classes you have to create
a lot of boilerplate code just to get
something like this set up I think once
you get this set up it's a little bit
quicker but overall it is probably a
little bit more time consuming than same
web development where you have so many
pieces already built for you
you know there's react native to if you
like but I mean you know speaking of
react
I think that we tried to apply our web
framework ideas over to mobile and I'm
just not sure if that really translates
it's almost like trying to create a 3d
game using HTML and CSS yes you probably
could do it but you're missing out on so
much of the other functionality and you
know once you understand more deeply
what native is capable of all the
optimizations and things you can do you
realize applying standard web
technologies it can only take you so far
but then you don't get a bunch of other
really cool functionality animations and
that finer grained control over like
seyth and network loading image
optimizations that you normally probably
would be able to get if it were truly a
hundred percent native anyway because
we're going to create a cell here or
override layout subviews which is the
primary method for drawing and then
we'll also override the initializer and
so for here this function itself are
either matte index this is where we
start getting recycled cells and
probably want the more interesting parts
about mobile development you have to DQ
a cell that can be reusable so let me
import the cell and I'll say to do so
because self dot collection contacts DQ
reusable self class still cell type for
section controller self and index index
so that gets us a reusable cell and then
we'll return the cell so there you go
now we already have four cells available
that are showing up that's going to be
our to do this item and now we're going
to fill in the cells we're gonna put
some text in there I'll create a UI
label give it some text add it to the
view and then I have to lay this out now
in addition we may want a button for
deleting items as well so our create
delete button and we'll give it a frame
now you can see I've had to do a lot of
manual layout code here I had to compute
the positions the width and height of
each UI element and that's kind of the
bane of existence for a lot of mobile
developers and there are various around
this like you can use auto layout stack
views but they don't quite provide as
much flexibility as what web developers
get using flexbox so most with the
are familiar with the CSS flexbox
specification which is a layout system
and so what they actually have these
days is something called yoga layout
which is a framework that was invented
by Facebook and it essentially
implements the flexbox layout
specification cross-platform in like C
and then they've put it over to a bunch
of different languages so we're gonna
try to import that for our usage and if
you were to check you will see that yoga
layout is actually used by a lot of
companies you can see is used by a
little component kit rack native and if
you check the YouTube app if you see
their open-source terms of services
you'll see that YouTube was also
actually using yoga so a lot of the top
mobile apps are using they're powered by
yoga layout which is flexbox underneath
the hood and this is just a more
Universal specification that even
designers know how to use the designers
don't really know how to give you a spec
using say auto layout or stack views for
instance so we're going to try to pull
yoga layout into the application here
again we're gonna go into our pot file
and all you gotta do is put in a
one-liner to bring it in
run pod install and then the fire to
exit this application I will have yoga
installed for me I'm going to delete all
of this manual layout code now configure
layout with block and they all thought
flex Gro equals one and I'll do the same
thing for the delete button and then
we'll say self dot content view the
configure layout and we'll say the Flex
Direction is why G flex Direction row
apply layout it should do the actual
layout for me and so yeah now you can
see that the layout is done very nicely
using flexbox well maybe I even give
this a little bit of margin like eight
points of margin or so and normally this
type of thing would be very difficult to
do you have to do a bunch of manual math
to figure that out but it's just a
one-liner here in yoga so it's kind of
nice to use now the next thing we're
gonna want to do is actually get this
data filled in to do that we're gonna
have to create an ADD button so I'm
gonna go into the navigation bar here
back here and add a button for adding
new items so create a UI navigation bar
item add which is a UI bar button item
and you can have it wired up to call a
method which I will call add so now I
will just create a
method ad and I just put in a log to
show when this is tapped so if I run
this again I just see there's a plus
item if I tap it then I'm seeing this is
showing up in the debugger and by the
way if you didn't know you can also use
this debugger tool you can pause the app
you can check out the views inspect it
right click on things printed
description and using pio you can print
out various items print out commands
check out all the sub views so that's a
very useful tool if you didn't know
about that one
alright now what happens when you click
on this add item well we're gonna want
to present like a text field for the
user to be able to put in a to-do item
you know we're gonna want some sort of
dialogue and in order to do this I'm
going to bring in another framework for
those of you who don't know there's
something known as material design from
Google and they have all sorts of
components pre-made for you ready to go
they've actually got buttons already
which I should probably be using they've
got action sheets we use this over at
Google all the time it's a set of UI
components that conform to the material
design spec you can check out other
things that I have and they happen to
also have dialogues they're all set up
with cocoa pods
they've got v code objective-c code and
so if I want dialogue and this one looks
pretty nice then I have to do is come
over here put in the pod for this
install it and then I'll be able to
start using that dialogue right away so
I'm gonna come in here put in the
material design dialogue pod run pod
install and you know what I'm also going
to bring in the button as well just to
make that delete button look a little
bit nicer and now that we've got this in
I'm going to start using it first thing
I'm gonna do actually is make that
delete button a little bit nicer
important the material buttons change
this into a MVC button type and that
should pretty much do it even yeah there
you go so you can see this the leap on
surging looking pretty cool you've got
that nice ink effect here so for the
dialog you can see that they already
have an alert controller all set up for
us we can just copy this code pretty
much and paste it in to create an alert
that will allow the user to input some
text and there's a property here known
as the accessory view which we can use
to assign a text input field
so let me create that get that set up
for you so you can see that I can start
typing in items in the text field now
and now what we have to do is start
setting up our data in the 2d view
controller I'll just create a array of
strings to do this and the initializer
will initialize that to the empty array
and we add an atom we will add this into
the arrays and the way IG lists get
works actually is everything has to be
immutable so what we're going to do is
actually create a new copy of the data
and send it into a G list kit so that it
understands that it needs to update the
to do list items so we'll just add text
field text to the - duze and create a
new array and then we will call update
on self for the update you simply call
it adapter or perform update and that
should pretty much do it so then we're
gonna want papdis to do this into the
section controller with an add that to
the initializer here where a new
initializer init with two dudes
now I've wired this up but if I were to
break point here you'll see that anytime
I add a new item I'm not actually
getting this method caught and that's
because IG list kit does not even know
that this section is being updated it's
still identified as the same section
because the identifier is known as to
deuce and so what I'm actually gonna do
here is I'm going to always be returning
just the date such that any time it's
asking for the objects it's going to
just return some new unique item and
that will trigger the framework to
update the section so if I were to like
just add some item then I'm getting this
triggered here and so then it would
populate the new to-do items under the
section controller for agile is good and
so now I've packed the data for the
to-do list into the section controller I
just need to assign that into the cell
so I'll say cell dot x equals to do is
add the current index I need to expose a
property for the cell table dot text
equals text so yeah now you can see I'm
able to actually start inputting items
into this to-do list so you can see this
is working pretty nicely now I can add
items I can scroll back and forth now
the last thing we want to do is actually
fill out this delete button I'll just
come into the to-do list item here and I
need to wire this up such that when you
press delete it actually gets a call
back all the way up into the section
controller in the cell I'm going to
expose this delete button as a property
actually non-atomic make it read-only so
now that the leap button is exposed so
now I need to wire up the delete button
so I could say South out the leap button
at Target and I need to give it a target
an action and it's going to be on when
the user presses on the button you know
in terms of abstraction for example
we're at the section controller level I
would say that each cell needs its own
controller so I'm going to actually
create a cell controller to handle the
delete so I'll create a new class called
the to do cell controller on this object
and I will create an array of these and
so then and then the
you laser I also instantiate a cell
controller for each of the to-do items
all right looking good so now I will
obtain the cell controller controller
equals self controllers given the index
and then I will assign the target to the
controller the action would be did
delete on the controller and I know that
this sounds like maybe it's a lot of
wiring and it sounds a little over
engineered but once you get this set up
it makes the rest of this fairly easier
to do so once the cell controller knows
is deleted I'm going to output what was
deleted all right so now I'm able to get
which index was actually deleted and
then I need to use delegates to actually
wire this back up stream into the
section controller which will wire that
back up stream into the to do view
controller which your trigger and update
okay so those are fun I'm going to
create like maybe like a callback block
for triggering updates that it's going
to be instantiated in the top-level view
controller and then pass that down to
the section controller which will be
passed into the cell controller and that
should pretty much wrap this up just do
that real quick here
okay that should pretty much do it so
there you go a coding tutorial for you
in mobile iOS development we covered a
lot of ground in here using idealist kit
for the scrollviews yoga kit for the
flexbox layouts and material design for
the components and there's a lot more
things we could have gone in through
here using like say dependency injection
promises networking images and a whole
bunch of other areas and this is really
only scratching the surface there are so
many other dependencies so ready to
level up your skills at an affordable
membership at less than $10 a month
scotia gives you unlimited access to
experts working in their fields to help
you learn new skills and live your best
life
explore classes in freelance and
entrepreneurship a web development
graphic design UI creative writing and
productivity and that would particularly
recommend the javascript toolkit
training by senior Microsoft developer
Christian Hellman in which he will teach
you how to become a JavaScript expert
with an in-depth guide so check them out
Co share link in the description below
so I hope you enjoyed this episode I'll
do for me give the video a like and
subscribe and I'll see you next time
thanks bye