 Terima kasih, Melvin. Hey, everyone, can you see me or can you hear me? So today I was like erode or was told to share something about learning how I learned to build iOS app without Storyboard. Probi, just a little bit about me. My name is Fina Rianti and I'm a Swiss developer. Before, I just want to say thank you to... Oi, where's the pictures? Say thanks to my friends. They are here today and that's why I'm very nervous. Sorry. And my colleague. Sorry. Ok, so the reason why I started to learn to make an app without Storyboard is that for every new beginning, newbie in the Swift, usually they start with the Storyboard. And then you deal with those kind of weird behaviors in the Storyboard and you feel like you're starting to curious why is this Storyboard like that? For example, this is my very first app that I make. Then it just has a three-view controller. And then the next time I open, it actually becomes like that. So I was like, oh, I have to rearrange everything again. So after some experience with that, I can personally conclude that the Storyboard is really cool and really good because they are so visual based. They let you drag and drop so many elements. They are fast. They are also very magical and they are easy to do your auto layout. But there are also some disadvantages for that. For example, you don't really understand how X-Word generate the code for you. And when you do in a team, that code actually gets conflict easily. I can show you later what it means. And then because X-Code is too magical, and then you also wouldn't know what exactly has been done to your elements for what I mean is that something like this. Okay, for example, I have a Storyboard here and let's say I drag and drop a new view controller and then I find out a label and then I put in new label, and then I will set, let's say, some colors to the font and to be red. And then I close the project and then you open it. And then you cannot really guess what did I do with this particular label. And I mean, this is just a label and it has a lot of properties like, for example, the accessibility identifier. And then another way to understand why the generated code is a bit tricky is when you actually do the storyboarding, if you look your code changes through any visual gate client like Source 3, you know that the main storyboard actually do the changes for you. This kind of code is not really readable by, I mean, it's still readable if you look closely. But as a newbie, I was quite confused what actually this storyboard doing. For that reason, on one good day, I actually saw there is this guy in the internet, his name is Brian Fong, and he was teaching people how do you clone the App Store interface. I watched his first video and I was instantly captivated. Wow, this guy is so cool. And then, who doesn't want to clone the App Store interface, it's so cool. And I realized that that was the first time I encountered this thing called Collection View. And then, after following his video for some time, I get the opportunity to create the ISCOM application with a storyboard. And this was how it looks like some of the screenshots. So tonight, we're going to try to build a simple to-do app without storyboard. And just to tell you that I have so much fear also. Okay, when you do a simple storyboard, when you do the app without storyboard, actually what you need to do is to remove the storyboard. You need to make the main interface as a blank. I should do the live coding by now, right? Okay. I close this one. And let's create a new... I mean, you cannot see the code. I'm really sorry you can move to the front. New project. And then, any single view. And let's say we're going to do just a to-do for iPhone. To show you what does it do on the background, I will quickly go to my project folder and this folder that was created and show you that when you create a new project, the only thing that Xcode do is create the initial get commit for you and then it will change somehow this XC scheme. Actually, we can ignore this but... and start coding right away. As I said before, delete the main interface, right? The moment I delete the interface, see, this one is already changing. It has already some changes. And what I do next is go to the app delegate and basically initialize my window, right? Window is UI window of frame is UI screen dot main dot bounce I think I better mirror it very, very mirror, mirror What this line says is basically create a window where the window has a frame is my UI screen bounce frame and then we have a empty view controller here and I'm going to initialize our root view controller controller as that controller, right? Oh, yeah, sorry. And then you have to make key and visible and then window dot root view controller equals to the view controller we have. Actually that's it. That's the only thing that you need to do for that and in order to prove you that it works I will change the background color view dot background color as UI color dot yellow for example, sorry, orange is better. Dude, I don't want 7 plus What is it? It doesn't happen to me. Wait, wait, wait, wait. I did already commentary coming far. Okay. By the way, if you have any question feel free to ask me but please don't be some two expert question. But nevertheless there are some experts here that can help me answer for me. Basically what we want to do here is a simple to do list without a storyboard just to remind you. We pass this one Is it restarting? And the code will be available at the GitHub so don't worry. And then basically when you create a view controller and we want to do list we will make it a subclass of UI table view controller later on quickly start. It's 16 db and it's very slow. Okay. So I will try to run it again we'll succeed. Yellow. So actually our view controller is really initialize and usually what you want to do is you add a navigation controller and when you do from storyboard usually you click the editor and then embed in right we have that option now. So all we need to do is basically instance setting sorry. Root view controller is the view controller and then after that from the view controller I can access the navigation item.title as I say my to do list that's all you need to do to begin without storyboard and it appears here right. So now we move on to the next step what we need to do is that we're going to subclass the UI table view controller only after that we get to access some of the protocol function of the table view like number of rows and cell for row in order to do that I simply change this view controller to table view controller and basically it will give me some error because I never implement anything you know error ya. Okay basically after this you can access you can type like number of rows in section and for now we just call we want to return 3 the second one is cell for row at index part and then we actually need a cell for that so we can just like create a cell but we don't know what is did now right and then we later need to return the cell so I'm gonna skip that for now what we need to do for the next step is to create the cell class that we're going to reuse for that how do we do that is actually very very easy we create new class call it say my task cell and we're going to subclass it from UI table view cell and basically here what you need to do is just do the init init super dot init style reuse identifier it will give me some error because I have to override it and the second error is this one sorry okay once we have the cell we don't have anything yet in the cell we have to register the cell in our view controller the way to do it is that we can instantiate the cell ID cell ID and then the next is register table view dot register class the class name is the one that we just created and for the cell ID and so here we can call table view dot dq release this one cell ID for the index path and we have to downcast it as task cell okay got any error no error so far but we don't know whether it was or not so basically I'm just launching it again ooh ya so this one is actually our prototype cell here which has nothing okay I'm gonna change I'm gonna put okay so the next step after we create the cell we have to create the elements of the cell ID for example in this case I just want the element to have one line one line called my task so here is where the layout storyboarding is very useful and quick for example in the cell I want one label so I just create label equals to UILabel sorry it's a type of UILabel and create the label right away then let label equals to UILabel label then label dot text equal to my task in order for your layout thing to be functioning is you have to set the translate authorization mask into constraint as false and then return the label and then here we can have another function for example I will have something like setup view to place my label and then I will define the function setup views and how I add the label is by saying add sub view the label and I want the label to be vertically in the middle but it's horizontally left horizontally left so I have the code here so to save time I just copy paste okay okay so basically what this says is good I can rename it taste task label when horizontally I want the label to be so from the left and then take whatever take whatever remaining space for this element okay and then vertically I want this element to be vertically center like this okay now we shall see if this works any questions so far okay now you can see that I have 3 rows because here I say number of rows is 3 and every cell I want to use this task cell and inside the task cell I will have my task 3 pieces okay like that so far perhaps if let's say I want the my task to be right center right what I need to do is that I delete the 8 and this is the left one and I want I'm gonna say like 12 from the right so I just change this part something like that nah like that well 12 and 8 doesn't really matter let's change to 52 to prove that that works yep so now it's like right center okay now if we move on to how to make the cell task dynamic in the sense that how do you pass dynamic data from the view controller to the task cell right we have to create um we have to create an array of string and then we create that string and then basically we pass it through the cell when we say we want to reuse that cell so let me make that task is an array of string is an empty array and then in the view did lot I will say cell.task dot append my string for example pay phone bill and then gonna watch Star Wars and then cell.task we will have I don't know sleep and then we have 4 set to hacker space hacker space that's my tool list right white error oh yeah um so I have the task array here and basically now I should change the 3 rows that I have to become how many task count do I have and then in the cell I can set something like my cell.tasklabel equals to the task array add index.pun dot item by setting this white error oh yeah oh so happy to see to have happy yes so now we know that this are our tool list according to what the array that we already set so the next step is that of course our tool list is not complete without this thing called that thing is already done and delete so the iOS table has a very handy stuff called swipe to delete and wow the text is not too weak and the way we do it is actually we will add 3 more here function let me cheat it's called can edit row at okay the user can edit so you have to return true and then the next function is for the editing style editing style for row at this one 2 and then i'm gonna copy and paste the code again basically it says that if the user, if the editing style is delete, then we will remove that array at that location and then delete that rows on the table view with the animation of left so we see if that swipe to the left then it has a delete button, right? if i delete, then it will go out okay another handy function that you want to know is the label for what? the label for the delete it's called the title for delete confirmation button you want to change this delete text to be something like return done and delete so when we set this one oh i need to take it off for right should be done and delete like this one you can notice that when you restart the simulator sometimes it becomes the same again because what we do is actually the memory array base so if i rerun again it will be there again okay it's all good so far am i good? time, time, time okay just a little bit more we also need a way to add the new task okay and to save time, again i'm gonna copy paste basically what we want to do is that we want to add a bar button on the right and when that is click, then it will pop up the thing so okay to add that actually in the view controller when it's loading i can instantiate my add button this class called ui bar button and then i'm gonna say okay when this button is tap then find this function called handle add so we have to make that function called handle add somewhere in here okay i'm gonna copy paste from here okay this handle had basically calling an alert controller with a save action and the cancel action if the save action actually add a task named text field and when you key in something inside it it will append it to our task array and then reload the data of the table view if it is cancel, then just do nothing basically it's that i don't know again oh, did i copy it twice oh, somewhere okay done right so let's see if it works okay now the bar button here and when you click add it will actually like okay what's the name of the task kick the ball when you kick then the kick will be added there right ya, so actually back if we look at our source tree again actually it can tell you exactly what i did with this view controller basically it's very clear that when you look at the code only you know that what is this person is doing is adding a label doing the constrain and stuff like that so you don't need to go back to the storyboard and guess what is this person actually doing besides that i think we can then for me personally when i knew how to do this actually i was really glad that it's possible to develop an isf without storyboard and i know exactly what i'm doing with each element there's no such a big code config that i have and last but not least i i feel like really unspeakable joy by learning code ya so i guess that's the end of this sharing if you got any question ya no question, very good ya okay so if you want to learn more i really encourage you to go to this guy called Brian Fung he has a website in videos.letsbuildthatapp.com and i can even tell you where is that school this is like one of one of the thing that he will teach you and i'm also doing right now, it's actually cloning the youtube cloning the youtube app where you have something like this right this is actually an api call to his server and he teaches you how you do a simple image caching without any other library he also tells you how to do this kind of thing, animations and stuff like that it's really cool and i highly encourage everybody here whether you are new or not to learn from him ya that's it and second speaker no question, right? if you want to do animation wouldn't you animate the object itself or the constraint if you want to do animation usually they do it like uifu or animation it's not from the constraint ya but the object let's say you want to move the object by a few pixels or then it's from the what does it call the cabasic animation that one you use that class right? if it is to animate something like this he's basically using the uifu with that kind of this thing called spring damp so it's to soften the animation and there's also this thing called ease in is out animation kind of thing i can't show you spring ya, this kind of thing so to show that thing you call this uifu with how many duration using spring with damping 1 and then there's the velocity that you want using curve ease out and black view and stuff like that ya one question i think if you have questions if you watch one of his video to ask him via the youtube comment he will definitely ask you even for me 4x i got reply 4x ya and i can guarantee you that you can really level up your skill when you follow his video for one video of his 20 minutes tutorial i took 2 hours for the first time looking at the two screen and my friend think that every day this guy is always on your monitor ya ya ya the way he teaches is that the way he teaches is that very so if you look at this screen everyday people will think that what are you doing actually so ya he will teach you step by step how to code your screen so you don't need to worry you just need to pause follow whatever he code ya ya that's it for the fun