Placeholder Image

字幕表 動画を再生する

  • welcome back.

  • Tackle it here now, too.

  • They were actually going to be doing some coding.

  • It is a technical topics, so I know this isn't necessarily Attack Channel, but I thought I would give you a rundown about how I would put together and Iowa's 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 coat or they saw my Twitter them and assume that the only thing I know how to do is Web for stack engineering, making some JavaScript and back and 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, whether we jump into the computer quick pause, this video is brought to you by skill share.

  • Scotia is the online learning community with thousands of classes, entrepreneurial and creative skills.

  • Explore everything from Web development and marketing toe entrepreneurship, productivity, M or and because sculpture sponsored this video, I'm getting the 1st 500 people to join every two months trials to check miles, then get 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 profane.

  • Okay, so the first thing you're gonna want to do is download an open up ex coat, which is Apple's Def Leppard program for making iPhone Applications were gonna click on, create X Code project single view application and give it a name to do list.

  • And I'm going to be using objective.

  • See, You can use Swift if you like.

  • But over at Facebook and Google, we all tend to use objective see, primarily because Swift offers no riel benefits.

  • It's just some sugar syntax, but it's not cross platform or anything.

  • And there's a bunch of Tulley and Infrastructure coat or Deon Objective C.

  • And so that's one thing that big time sick and tired of seeing Apple doing is they only come up with a new innovations for their platform on Lee.

  • But nothing is cross platform that you take a look as 50 way.

  • It's on the apple ecosystem, which all the inquest 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 issued.

  • Just build an application and run that 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 Swifty wide, but we tend to avoid all of this over at fame companies, primarily.

  • Because any time you use graphical stuff, it wrecks your version.

  • History, at least for storyboards, which is important.

  • And as for Swifty, why?

  • Which is a declared of way for credit anyway?

  • Well, we're to have component it.

  • Little texture, rack, native and all of these tend to offer more benefits than, say, Swifty.

  • Why, either in terms of cross platform or performance.

  • All right, 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 view Controller Tau, your navigation controller, go into the initialization here, override the constructor, and then we'll create a new child of you controller for the actress to do list application and contain it.

  • And actually, we're going to create a new sub class for this called to do view controller for New Crane you file.

  • Then we're going to distribute Controller and give it a title like self doubt Navigation.

  • I.

  • Then the title equals two DUIs.

  • Now, if I were to run the application, I should see the titles start showing up yet they're ago.

  • We're going to also give a background color.

  • Make it wait, all right, looking good.

  • And for the rest of this detour, 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 born to wash me code all the time.

  • So I'll just be speeding through this and I'll have to complete source code in the description below if you want to prove it in further detail.

  • But at this point, what we burn them want to do is put in a scroll view.

  • Now.

  • This groovy would be pretty dynamic for items being added and removed, and at least for Web developers.

  • If you didn't know Scofield's work very differently in mobile development than and wet because immobile due to performance concerns, they like to reuse views.

  • So the elements for views they're being recycled as they're coming on and off screen traditionally.

  • And I was you use collection views an 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 frameworks on top of thes collection views.

  • We're gonna be using something that Instagram has created called Aggie Lisk it.

  • And if you take a look idealistic, it is actually used over in the YouTube as well is used over an instagram.

  • So it's used by some top tech companies as well, say the company, A little texture.

  • But the idea is that you have a set off objects, is just data, and then the framework is going to be able to render this into a list of scalable items.

  • And if the data ever changes, then the family will take care of all of the updates to get this list of items rendered they use is some dipping algorithm for that to minimize the number of updates they have to make.

  • And so what we're gonna want to do is use cocoa pods.

  • To get this installed, you simply go into your directory, you apart file and then you run pod and stall.

  • You're gonna have to get cocoa puffs and salt for this as well.

  • But once you install it in, solves that framework into your project than you exit, the APP reloaded 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, there were import idealist kit and that will override both of you here.

  • All right, so I've created the collection view and then signed that overto Aggie list Get to manage.

  • And now we're going to just have to fill in the stub Mathis for RG Lisk it.

  • So we're going to have this conformed to a G list at that birthday, the source and then just fell in the methods for this and for this, we're gonna have to create a section controller which will manage each of the sections.

  • So create a new class here section controller which comes from I G list section controller, and they want in the objects for the list adapter, which is the data.

  • So for now, we're just going to return a section known as two DUIs and within the section they're going to be individual items for each to do list.

  • Come into the section controller.

  • We can start filling this out.

  • So, like a number of items, let's just return like four.

  • For now, we'll put in like a minimum line.

  • Spacing Cell for either Matt Index will return they'll, for now and size for either Matt Index and will return sieges, size, make container size up with and, ah, height of, say, for the It's no running this.

  • We get crash, and it's because we're returning the Neil 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 love boilerplate code just to get something like this set up.

  • I think once you get this set up is 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 rack native, too, if you like.

  • But I mean, you know, speaking of wreck Native, 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 three d game using H tomorrow and CSS.

  • Yes, you probably could do it, but you're missing out on so much of the other functionality.

  • And once you understand more deeply what native is capable of all the optimization is and things you can do, you realise, 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 grand control over like, say, the network loading image optimization sze that you normally probably would be able to get if you were truly 100% native.

  • Anyway, we're going to create a so here override layout, so views, which is the primary method for drawing, and then we'll also overwrite the initial lays there.

  • And so for here, this function cell for either Met Index.

  • This is where we start getting recycled cells and probably want the more interesting parts about mobile development.

  • You have to de que a cell that can be reusable.

  • So let me import to sell and I'll say to do so self, that collection context de que reusable self class to do cell type for section control herself and index index.

  • So that gets us a reasonable cell and then we'll return to sell.

  • So there we 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 Texan there, create a your label, give us some text, have it to the view, and then I have to lay this out now.

  • In addition, we may want but them for the leading items as well as 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 you element, and that's kind of the pain of existence for a lot of mobile developers.

  • And there are various ways around this, like you can use all the layout stack views, but they don't quite provide as much flexibility as what Web developers get using Flex box.

  • Some all swept developers are familiar with the CSS Flex box specifications, which is a label system.

  • And so what they actually have these days is something called yoga layout, which is a framework that was invented by Facebook and essentially implements the flex box layout.

  • Specifications cross platform in like sea, and then they've ported over to a bunch of different languages.

  • So we're gonna try to import that for our usage.

  • And if you're to check, you will see that yoga Leo is actually used by a lot of companies.

  • You can see it's used by a little component kit rack native.

  • And if you check the YouTube app if you see they're open source terms of service is you'll see that YouTube was also actually using yoga.

  • So a lot of the top mobile app they're using their power by yoga layout, which is flex box underneath the hood.

  • And this is just a morgue, universal specifications that even designers know how to use.

  • Designers don't really know how to give you a speck using, say, auto layoff or stack of use, for instance.

  • So we're going to try to pull yoga layout into the application here again, we're going to go into our part file And are you God?

  • That was put in the one liner to bring it in Run, pardon star 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 configured Lee out with Block and they all thought flex grow equals one.

  • And I did the same thing for the delete button.

  • It was, say, self thought content view the configure layout and will say the flex direction is watch you flex direction wrote apply layout.

  • It should do the actual layout for me.

  • And so, yeah, now you can see that the layout was done very nicely using flex box.

  • My maybe 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, Not the next thing we're gonna want to do is actually get this day that failed in.

  • To do that, we're gonna have to create an ad the button.

  • So I'm going to go into the navigation bar here back here and add a button for adding new items.

  • So I created you and Navigation bar by them.

  • Ad, which is a Europe are button eyes then and you can have that wired up to call it a method, which I will call ad.

  • So now I would just create a private method ad, and I just put in the log to show when this is tact.

  • So if I run this again, I just see there's a plus, Adam.

  • If I tap it, then I'm seeing.

  • This is showing up in the deep bunker.

  • And by the way, if you didn't know, you can also use this Di Barker tool.

  • You can pause the APP.

  • You can check out the views, inspect it right, click on things, printed description and using P O.

  • You can print out various items from doc commands.

  • Check out all the sub views.

  • So that's a very useful tool if you didn't know about that one.

  • All right.

  • Now, what happens when you click on this ad?

  • I them Well, we're gonna want to present, like a tax field for the user to be able to put in a to do either, 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 compliments 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 your companies that confirmed to the material designs back.

  • You can check out other things they have, and they happen to also have dialogues.

  • They're all set up with Coco pas.

  • They've got Safeco objective C coat.

  • And so if I want dialogue and this one looks pretty nice, then I have to do is come over here, put in the pot for this, install it and then I'll be able to start using that dialogue right away.

  • Someone come in here, put in the material design, dialogue, part run, pollen star.

  • 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 going to actually has make that delete button a little bit nicer.

  • Important.

  • The material buttons change this into a N.

  • D.

  • C.

  • Button type, and that should pretty much do it even.

  • Yeah, There you go.

  • So you can see this.

  • The leap unsorted looking pretty cool.

  • You brought that nice ink effect here.

  • So for that they're like you can see that they already have an alert controller.

  • All said that for us.

  • We can just copy this code pretty much and pasted into create an alert that will allow the user to input some text.

  • And there's a property here known as the excess review, 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 said there are data and the to do feel controller, I just create a array of strings two news on the initial Isar when this lies that to the empty array and we add another.

  • We were at this into the race and the way I j Let's get works, actually is everything has to be immutable.

  • So what we're gonna do is actually create a new copy of the day that and send it into a jealous kid, so that understands that it needs to update their to do list items.

  • So what?

  • Just add text, field that text to the two DUIs and create a new ray.

  • And then we will call update on Self for the update you simply call adapter, perform update, and that should pretty much do it.

  • So then we're gonna want pop these two DUIs into the section controller.

  • When you add that to the initial Isar here, creating new initialize er in it with two news.

  • Now I've wired herself.

  • But if I have to break point here, you'll see that anytime I add the new item.

  • I'm not actually getting this method caught.

  • And that's because i g Lisk it does not even know that this section is being updated.

  • It's still identified as the same section because the identifiers know ness 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 is going just returned some new unique item, and that would trigger the framework to update the section.

  • So if our to like just as a madam, then I'm getting this triggered here.

  • And so then it would populate the new to do items under the section controller.

  • Fragile A skip.

  • And so now I've pipe the data for the duelist ended the section controller.

  • I just need to ascend that into the cell.

  • So I say so.

  • That tax equals two DUIs at the current index, I need Thio expose property for the cell.

  • They both that taxi calls text.

  • 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 wanna 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 known atomic.

  • Make it read only.

  • So now that the Lee Parton is exposed.

  • So now I need the wire up the delete button so I could say south out the leap button at Target, and I need to give it a target and 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 controllers.

  • I'm going to actually create a cell controller to handle the delete.

  • So our credit new class caught to do sell controller on and this object and I will create an array of these.

  • And so then and the initial Isar I also in Stan.

  • She ate a cell controller for each other to do items.

  • All right.

  • Looking good.

  • So now I will obtain the cell comptroller.

  • Comptroller equals self controllers, given the index, and then I will assign the target.

  • 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 that 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 self control our noses, the lead ID 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 upstream into the section controller, which will wire that back upstream into the to do view controller, which your trigger an update.

  • Okay, so, uh, those are fun.

  • I'm going to create, like, maybe like a callback block for triggering updates that is going to be.

  • Instead, she ate 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's your pre might wrap this up.

  • Just do that real quick here.

  • Okay, that should pretty much do it.

  • So there you go.

  • According to Touro, for you, in Mobile Iowa's development, we covered a lot of ground and you're using idealist kit for this grove.

  • Use yoga kit for the flag spots, layouts and material designed 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 the 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 if your best life explore classes in freelance and entrepreneurship, Web development graphic design you a creative reading and productivity.

  • And that with particularly, recommend the Java script to get training by senior Microsoft developer Christian Hellman, in which he would teach you how to become a JavaScript expert with an in depth guide.

  • So check them upscale share like the description below, so I hope they enjoy this episode that do for me Give the video a like and subscribe.

  • And that was you next time.

  • Thanks.

  • Bye.

welcome back.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

モダンなiPhoneアプリ開発。To-doリストアプリ(FANGでやっていたコーディングチュートリアル (Modern iPhone App Development: To-do list app (coding tutorial as done at FANG))

  • 2 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語