 Hello, everyone. Thank you for joining us today. So first, everyone get Wi-Fi. Everyone get internet access. That's great. Let's get started. So in the section or office section, if you guys have any questions, just drop me an email to this address. So we're going to have a break around 3.30. So during that time, I will try to answer your questions. And if you have questions during the section, you also can. Just raise your hand. Ask me. Okay, let's start. Okay, today we're going to cover basic introductions. Really basic. There is nothing to worry about. And I go by a lot of names and call me Kiza. You can call me Chu-Hee or whatever you want. Yeah. Okay, next. About me, I'm a staff software engineer at BFIX IBM Security Division. I'm the technical lead for Linux patching, Mac patching, and big fix protection. You guys see my job scope, it has a lot to do with security. That's what I do for my day-to-day job. I do coding for living since 2012. So this is a year I graduated from NTO Computer Science. But I actually do coding for love since 2005. Yes, so 10 years programmer. Okay, let's go to the next. That's just a quote from my well-favorite historical character JFK. Not because they are easy, but because they are hard. I just try to hear. The reason I'm having here is not because programming is hard. It has its up and down. How to say that? For example, if you get a cook, you know sometimes you just can't get the recipe right. It's similar with programming. The second part is very easy. But as you go there and for myself 10 years in the role, I still think of myself as a learner. There's so much new stuff coming out every day. So as you guys, there's no worries. We serve as an easy part. Then yourself will go to the hard part. Trust me, you will be there. And you will go in there with your own passion. So no one's going to force you to do that. Next, our agenda. For simple. First, what's a web application in short web app? And the second, what's this model view controller thing? We call it MVC. You're going to hear about this thing a lot. Like every session in this course. And if you're ever going to become a software developer or product manager or project manager in IT field, you're going to hear this a lot. And next, what's a Ruby and what's a Rails? No worry about here. It's just the question about what the hell is Ruby and what the hell is Rails. Okay. Am I going too fast? I'm not going too fast. So this is web application by definition of Wikipedia. So based on this definition, I'm not going to read it. You guys are going to read it. My question is, can you guys give me an example about web application? Come on. I need someone to answer my question. Oh, I'm going to start with the organizer. Okay, good. Sorry, I don't know what's the difference between web application and native application. And what? Oh, native application. I'm going to come to there. You go to question. Actually, I have the same question later for you guys. Do you mind? Okay, let's do this. William guys answered my question. Introduce yourself first. So we're going to know each other. I'm going to address myself, right? Because I think for this session, it's more than the Ruby application. Yes, yes. For the web application. Yes. But as I know, some people, they just use Xcode or equips to do the native application. Okay, it's a bit out of the scope of today's session. The quick answer is Eclipse and the Xcode is just a tool. For two years to get there. Well, however, Xcode is very specific to the Apple technology. And Rails is more general, more generic. And for Ruby, it's even more generic, more general. So I might answer your question or confuse more. Okay, you forgot introduce yourself. Okay, great. Just add one more thing when you guys introduce yourself. Have you guys do any coding before? Just say yes or no. Because I want to get a feel with the experience you have. So, lady over there in the code. Have you do coding before? So this is brand new to you. Okay, let's continue. My question here, still no one answers. If no one answers, I'm going to punish the organizer. Anyone? Okay. Amber, give me an example of web application. No, say something everyone knows. Everyone knows? Yes. No, come on. Okay, good. So anyone else want to give an example? What has happened? Facebook? Yes, that's great. You introduce yourself. Lisette, I'm American. And I just finished Winston's class yesterday. Hi, Lisette. It's great. Okay, it's great. It's more expensive than this class, but Winston is a great teacher. So your background? I'm working on a website for a startup of my own. Oh, that's great. Website or web app? Well, we'll come to that later. Okay, so anyone want to contribute also? If not, I will continue. Let's continue. Okay. Amber over there mentioned Gmail. That's correct. And we also have a whole mail. So it's too typical, like, really popular web app that we have out there. And the question come to here, what if I connect my email account to an auto loop or to my iPhone mail app? What does that make the web application? Because if you go back to the Wikipedia definition, by definition of the application, you have to assess your content through a browser, like Safari, Firefox, Chrome. But I'm not doing that. So what does that make our mail application here? I'm going to come to this part later. And next, we have social media. Again, Facebook and Twitter. You open your browser, you go there. You check your friends' fee. That's great. But what if I use iOS app or the Android app? What does that make our... Hello there. I just finished it. Web application. Are they just sitting in the front? Just set it in. I will continue. Okay, so. There is no cloud just other people's computers. The Internet, I don't know who said that. That doesn't get it from the Internet. So, have you guys heard this term cloud? What does it mean to you? I see someone not looking there yet. So, that's great. For this cloud, it feels like a database online. You save your files online rather than in your hard computer. Hard computer, your own computer. Okay, so give me an example of cloud. The iCloud. Okay, that's a bit too simple, right? Another example. It has a cloud in the name. It doesn't come. Sorry. Yes, I have cloud. The Apple iCloud. It has a cloud in the name. It literally tells you it's a cloud. Dropbox. Yes, that's another great example. So, this cloud idea actually came out around 2008, around 2017, 2008. Actually, we have been a wrong cloud for a long time. Like Hotmail, like Gmail. You never have physical access to the data you have on your mailbox. It's somewhere you have no idea. It can be in the US, it can be in Singapore. So, what does cloud mean? It actually means you don't need to care about the storage, the hardware, the infrastructure. And my group is mostly in there. If yes, just raise your hand and I'll be to stop and I'm going to elaborate myself. Okay, so that's a cloud. And the most important part for a cloud is basically it's application based. Then it's involved into something more native as they were there just now. What makes the app? So, basically, app is just a front end to consume the data from a cloud. And we have a name for that. We call it a web services. This term software engineers just choke around to impress everyone. But actually it's just a cloud and actually it's just a web application without the browser part. Okay, so no more mystery there for our cloud, right? By the way, so we are building a web application throughout the course. At the end of the day, you will have a web application but if you just remove the browser part and replace it with, for example, LSS and Android, then you actually have a cloud solution. Is that amazing? Okay. That's the basics on the definition part of web application. Anyone have any questions about that? Anyone lost? Still with me, right? There's now the output, for example. My name is Xu Lu. I'm working at the cloud US. So I have a question. You just mentioned the output application in your laptop. So it's not released through the browser but it's not really a whole lot of web applications? By definition, it's not. But we can call it web services. So, when you sign up for something, for example, Facebook, you actually sign up with the web services Facebook provides and it just happens it has a nice browser UI for you. So there is a lot of applications that actually don't provide that browser view anymore. Give me an example. We'll have an example that's a famous app which uses a cloud but doesn't have a browser using the interface. Come on, everyone. It's technically not true. So I have to have a web browser. But it's true. WeChat. Yes, that's great. WeChat. You don't have to really open your browser to access your WeChat right now. You can, but you can't. What? Okay, there's something you have to do. There's a WeChat web, like WhatsApp web. Okay. Is this something? Oh, dear. It's different. So, see, let's make the website great. If you want, you can just show UI there. Then you have web application. Your question? I think for WeChat, it's different. WeChat only has the web browser for the conversation but to access your friend's circle, it could not be access to the web. That part. So, okay. Then you are talking about the feature you'll support in each device. You can support full feature and you can support some feature. Okay, let's... We had enough discussion on web application. No more questions. If you have the question too shy to ask me here, can just drop me an email. Okay. Okay. Next part, the MVC. This part. Okay. I'm from a commercial science background. We have the one whole year course on software engineering and this guide took us about half a year to understand. So, you don't need to understand the definition. It's kind of pointless. That's why I called from Wikipedia. But I will just go through that a bit so you can have an understanding. Then I'm going to have a more concrete example so we can have a better understanding. Yeah. Okay, that's good. So, model. This is the definition. The key word here is business logic data. So, basically, this one, for example, the lady over there has a startup. Basically, you have some business logic you need to capture in the software. So, this business logic should go to this part of MVC, which is called model. And any data, like user account information, transaction information, my profile photo, customer, is going to the model. The reason being is it's need to go to the database. So, that's why it's called model. I know you guys must have a question about this part. I will come back with this later. Let's go through the definition first. Will. This is the easy part. The reason being is anything you can see is go to this part. So, for example, if you open a PowerPoint document, then you have this PowerPoint application open up. That thing is the will part. Anything you can feel it can touch. Oh, that's the will. That's the easy part. Okay? The next part is controllers. This is the hard part. It's called the coordination layer. What does it do is you have will, you have model. You shouldn't, like, this two components talk to each other. You should, like, this two components talk to each other to controllers. Why do we do that? It's a long story. I will give you an example. MBC wears Prada. Okay. So, one day, you're walking into a Prada shop. You have the bags, purse, everything on the shelf, right? So, what's that in the MBC part of the world? Yes, correct. That's will. Then, something you don't really care. They maybe have a warehouse on the will. They have an eMotory management. They have a point of sales. They have a transaction. They have how to make this design work. They have designers. Some say most of us don't really care. What does that make in the MBC world? It's the model. For the user, we don't really need to interact with that. So, where's the controllers? You go there. You can't just grab something and just leave it right. You need to talk to the sales assistant or sales manager wherever they're helping you do the purchase. His job or her job is to help you interact with the shelf, which is the will. You're going to tell him or her which bag you want, which purse you want. And you're going to try it all. And if you don't like it, you give it back and ask the sales person to put it back to the shelf. And if you want it, you ask the sales person to continue with the purchase process, which means he's going to ask for your credit card or your money. Then he will complete the transaction for you and you can have a new bag or purse. So, this is his job as a controller. Now, do you guys understand what's the MVC now? So, it's similar in the web page. For now, as a user, most of the time we only interact with the will card. We don't really care about model or controllers. But actually, when we interact with our will, actually there is a mini component there. It's the controller to help you complete every single action you do. And at the back end, then the controller will base on your action and also update the model part. For example, you create a new account on Gmail, then there will be a controller to add an entry to the database with your login information there. If you create a post on Facebook, again, there is a controller to do that for you. And again, at the end of the day, somewhere in the world, in the world of cloud, there is a model that is updated with your information. So, understand this part now? No more questions for this one? If you have, you can ask now. Oh, front design. Okay. View is the output of your front design. So, we're going to cover UI design, user experience, I think, in two sessions. I can't remember the details, but we're going to cover that. The next one is about UI analytics. Yeah. So, anyone here is a designer. Designer, designer, you do graphic design. And, okay. So, from their point of view, MVC doesn't matter. Actually, from a lot of point of view, MVC doesn't matter. This only matters to the programmers, the engineers. From design, it has two components. One is the graphics. Another is the interaction. Graphics basically is the pixels, the colors, the shape of the pictures you want to put there. And another part is the interaction. How are we going to anticipate the user's input? So, there's an interplay, well, response to our pop-up, something like that. This is the interaction part. And that's the work of a designer. Actually, it's the work of a graphic designer, plus a UX designer, which, user experience designer. And nowadays, normally, these two jobs merge together. Because you need to have a great eye to identify, first, what is beautiful, second is what makes sense to any user. And here is also where product manager come in, which product manager who is the owner of the product, he should tell how are we going to do that. And that is his priority. So that's the front-end design part. And once the designers have their design, it's pretty much useless until it's going to the development part. People actually convert that into your code. Whatever iOS app, then it's a swift object to see, or front-end HTML, CSS, JavaScript. It's the engineering part. Normally, when we come to the engineering part, we care about that, you see. There's also a question. I think it's a great question, actually. And I saw some of that. So there is a huge difference between this view and our graphic design. Questions? Can we call that only for Ruby's life? It's not all, right? No, no, no, no, no. Excuse me, can you repeat the question because sometimes you can't hear the question? Oh, okay. Yeah, sure. So just now the question got it? No. Okay, so the question is, is that only for Ruby on Rails, or is it for everything? Okay, MVC is, how to say that? So in software engineering, there is something called design pattern. I don't want to cover that. It's boring. The short answer is MVC is generic. It's applied in the software industry for a long time. It's even before Ruby. Ruby has come out around in the 90s. And we have MVC long, long time ago. It's just a part of our hardware design. For example, your laptop, you have this graphic part there. It doesn't matter if it's Windows or it's Mac. It's the graphics. It's just the graphics. You don't really care about the hardware, how it's layered. Then you have this keyboard and mouse, which is the input, sort of like our controller. Actually, it literally is the controller. You use that to control your hardware. So MVC concept has a long history. It's before Ruby on Rails. And another thing, actually, we have a question like this here. I want to bring up this. Other than MVC, we have MVVC, MVPC, a lot of work, like you have MVC and something else to throw in there. It's just a different company trying to come out of their own solution to the problem. But actually, everything is just based on this concept. So even at the end of this whole course, you don't want to use Ruby on Rails. You want to use something new, like Node.js. Or you want to use something old, like C-sharp, PHP, Java. Whatever, this concept will start there. You're going to see it all the time. So you won't just see it in today's course, in the next few courses. You're going to see it in the industry a lot. So far, this MVC pattern, we call it pattern because it's a certain way we do things and we can repeat this thing. So that's why it's called pattern. And MVC pattern, so far, is the best way to capture our human interaction with a computer. So it's really not necessary for Ruby on Rails. Questions? I love questions, so I can give some information. Actually, I know, but I never thought of putting it in the slide. I think it's useful for everyone. So if you have questions, don't be shy. Ask here or call me an email. If it's an interesting question, I'm going to share with the whole class later. Okay, let's continue. Okay, Ruby. Finally, we have the main course here today. Ruby. What is a Ruby? Anyone? I think the organizer sent out an email. Ask everyone to complete a book, right? And how many of you actually opened that book? And how many of you actually completed that book? So where do you guys stop? We're in the book. For those who opened the book, where do you guys actually stop? Oh, they only have three chapters. Oh, that. We asked them to read three chapters first. Sorry, my fault. Oh, you only asked. We like at least three chapters. You can do more. I can't remember what the first chapter was about. Never mind. You guys should be fine. The first chapter is about... They also think that Ruby is one of the easiest programming language he thinks. Yeah, I know. It depends. So if you guys ask anyone to have a hard core background in C, C++, and Java, they're going to tell you Ruby is weird. It's a little weird language. That's true, actually. So if you guys want to think about switch to other language, here's the warning. If you're different, we'll write Ruby. But about Ruby is the easiest language for beginners. It's true. It's pretty much more human readable. If you even don't understand everything, you just understand some basics, then you can understand most of the Ruby code. And my personality... I'm from a hard core background. I do C, C++, and Java, C++, stuff like that. And my first touch on Ruby is... I can't remember, 2000, something. I can't remember. It's weird to me. But besides it's weird, it's still okay. I can understand the code. So it shouldn't be a huge block for you guys. And for those who haven't started on the book, start on the book. It will help you a lot in this course. In today's session, we won't touch on the code that much, so you guys are fine. Okay, also Ruby. Yeah, yet another proper language. We have programming language come out like every year, if it's not every day of every week, I don't know. So it's a language, it's programming language. It's a language you talk to your computers. You don't tell your computers what to do instead of just click on the mouse and keep it. You actually ask your computer to do new things, like you can do something simple, like mathematics. You can do path-multiply division, this stuff. And then you can do something more advanced, like encryption, decryption. And something bad, like hacking, blackhead hacking, stuff like that. It's a programming language. It lets you communicate with your computers. And that's why I put the yes there, because it's a general-purpose language. So you can do whatever you want with this language. And for people who heard of, anyone who heard of SQL, okay, that's, we don't call it a general-purpose language because it's not a general-purpose language. It's for you to communicate with your database. That's it. You can't, actually technically you can use it to do some more fun stuff, but people don't do that. It's just tedious and this won't help a lot. Actually, okay, this is the destination for all the programming languages we have in the world. And Ruby does well with it. Questions about Ruby? Okay, CSS is not a general-purpose language. HTML is not a general-purpose language. I think we're going to cover it in the next course, right? Yeah. What is CSS and what is HTML? We're going to cover it in the next course. It's all of this. Anyone have other questions? Or any language have you heard of other than the one I mentioned just now? Why, like, what's the difference or what's the difference of Ruby as well? So why they are used together? I'm going to come to that later. Did anyone have a question? Oh, Python and Ruby. Python is also yet another programming language. It's a general-purpose programming language. The difference is, let's put it that way, what's the difference between English and Mandarin Chinese? It's the same. You're asking about the similar questions. So, okay, let's put it that way. So, do I need to use this? Yes. Okay, it's all weird. Sexy. Yeah. Don't say that. It's all wrong. So, what's the difference between Python and Ruby? It's like, in the world, we have so many different human languages. We have Chinese, English. We have Japanese. We have Korean. We have Russian. Recently, I have colleagues from Finland. They have their own language. So it's not a surprise. Everyone from different countries, different worlds, we speak different languages. Even in China, there are a lot of different languages. It's the same in the computer world. Another day, I was talking to Amber, the organizer over here. I said, technically, Ruby is a Japanese. Yes. Anyone know why I said that? Because the creator of Ruby is a Japanese guy. Yes, yeah. So, it's just a different language. So there's not really much of surprise there. But each language, they have its own strengths. Ruby, because of Ruby on Rails, a lot of programmers come to Ruby because of web applications. But for people doing data scientists, doing data science, doing big data, doing data analytics, they choose Python. Because there is a new Python library. So there are two from Python. It makes the work easier. That's why people are choosing different languages. For example, I use Mac a lot. So I probably won't use C sharp. The reason being is C sharp is from Microsoft, which is running on Windows only for quite a long time. And recently, they put it into Mac. Different story, anyway. I tend to do different stories. Another question? Your question, I'm going to answer you later. So the question is, what's the relationship between Ruby and Rails? The relationship is Ruby is the actual language. Rails is a framework. When I say framework, it's more like a tool. It's just happened to retain this language. So let me think of something that can make the thing easier for you guys to understand. Yes, sir. So in programming languages, there are many ways of doing things. Sometimes, some smart people will talk about a very ingenious way of solving some problems. And the way that we take out soft problems is run on a bunch of code and then make it available for other to use. So a programming framework is a collection of programs that a smart people has put together that solves certain problems. And sometimes, they call it a library. So a bunch of code that solves some problems are grouped together. They call them libraries that we can use. And a bunch of these libraries are put together like say this one does the things, this bunch of libraries solves some problems. So all these grouped together to form a framework, which is a collection of a bunch of smaller software that solves certain problems, but they all grouped together to help you solve a bigger problem. In this case, Ruby or Rails help you build a website. So the website needs to be able to serve pages. It needs to connect to a database. It needs to get data. It needs to be able to render your style sheets and all that stuff. These are small little problems, right? These are small little problems that need to be solved. And they are small little pieces of Ruby code that fixes all this. And all these are grouped together into a framework which lets you use it. And then for you to use it, you have to write in a certain way, which is the Rails way of doing things which will be showing you guys later. Does that answer the question? Do you understand? Yeah, that's more lost. Are you more lost? Not yet. So you still don't get it? Okay, okay, let's think of this way. Let's think of this way. Yeah, that's the hard part. Actually, this is the hard part in introducing Tenor into beginners. Because we used to understand framework, collaborate, language, this concept. For example, you want to write an article on French movies in French. So first, you need no French language, right? Second, you need to research on French movies. What do you do? You go to libraries, you go to video store, you go to rent these great French movies and watch it and use your French language to write this paper. So which part is Ruby? So the French is the Ruby, it's the language. And the library, the resources you borrow from, it can be the real. Thank you. So I think I'm going to have a slide on Jen. Never mind. So reels can be one of the... So back to college random research, normally I will pick a field paper which I feel is most important. I'm going to address these papers in my paper as a reference. Real is something like that. It's served as a baseline to your application. You guys seem confused. Yes, yes. So from what I understood this concept between what reels is and what it means, at a very basic level you can think of this, right? Let's say that you want to, like, with your child and you want to build a house. Assume that you're just having many... you have like a box with many lines inside. So if you want to build a house with the lines, you'll be like adding the lines and turning the lines into a chimney or something. You just have lines. Now someone comes in and says, okay, these lines are very basic. I already make these lines into some little shape, like circles and squares and stuff. And I'll give you another box with these shapes so that you have... it's easier for you. You don't need to make those lines into those basic shapes. So the basic line is Ruby. Reels is someone actually taking Ruby into some used, most used concept and converting it into a library so that you guys can just use that instead of doing the same conversion again. That's basically the difference. Ruby is a very basic core of nothing. You can just do anything with it. Reels is some abstraction over it, some shapes built over it. That is for you to use. That is to make your life easier. You don't need reels to use. You can just choose to use the lines and do whatever you want. What do you want to do in class? Audience. Okay, cool. You guys are probably going to learn stuff like libraries, Ruby Jam a lot. You're going to get used to it. Let's put that away. Okay, let's continue. Okay, so, yeah, just a bit more. So let's talk to your computer in Ruby. First, you need to teach your computer Ruby. Amber, did you send out the instruction on how to set up Ruby on the laptop? Okay, yes, yeah. No, I just checked it. I think we're still going to send out. So that's part we're going to cover. Teach your computer Ruby. Basically, you're going to install Ruby on your computer. For those with Mac, you're actually already having it. But it's normally the older version. For those with Windows, unfortunately, there is no easy way to... Actually, it's pretty easy to do that. We just send out the information to you guys, yeah. And the second part is you need to teach yourself Ruby. That's the hard part. And the last practice and a lot. Okay? I won't talk too much about Ruby. Actually, I'll talk a lot. Okay, next one. This is a book I mentioned, a laptop program. And by this guy, this is not the Star Trek guy. Okay, that's the only side. See, guys, he's laughing. Anyway, if you Google this guy, it probably come up wrong. Anyway, there's a URL for the book. For those Star Trek, it's great. For those haven't, please go to Reddit if you have time. It's a really interesting book. There's a bit more about this book. It's quite old. You can cover Ruby 1.8, but you get the concept. And second, in the book, this also tries to remove all the confusing parts of a new language like data type variables, data structure. Do you guys even understand how I'm talking about? This book is really great. It covers from really, how to say, beginning part of the book. It won't mention a lot of the concept, but it will mention it at the end of each chapter, which means you can get a start, then you can go back and visit and understand what's going on. Okay, it's a great book. Some key part of the book you need to pay attention to. Since most of you haven't read this book, I think this looks pretty alien to you, right? Okay, so actually, for this part of it, I said Ruby 1.1, right? If you change this Ruby to anything else, it's still true. You can just change it. We're going to send the pp to you, I'm sure, so put it into your photo. So if you change the Ruby to PHP to some language we just mentioned, Java, C sharp, it's still true. It will get you start with any language, just follow this structure. And this is how that book, the book I mentioned just now, this guy, it's written. So it's a great book. Yeah, just pay attention to these keywords. Then you'll be okay. Okay, we're actually going to do coding today. Maybe I'll take a short break now. So in the break, I have a great question. Someone is asking, who use Rails in the real production world? So here are some examples. First is Twitter. So Twitter probably is one of the most famous ones. And let's go into the base camp. Who heard about this guy's base camp? You, you, anyone else? Yeah, of course you. Okay, Rails, Ruby on Rails, actually came from this guy's. Ruby on Rails is the fundamental part of the base camp and those guys, they decide, it's such a great tool. We should make it free for everyone. So that's why today we can have Ruby on Rails for free for everyone to do whatever we want. So base camp. And next guys, Yellow Pages. Yeah, I'm not really interested. Hulu. Hulu. The guys doing videos, and okay, this guy not really, ah, Yihao. Have you guys attend our early section on Yihao? Some of them. Yeah, some of them. I thought you guys lost. Okay, anyway, Yihao. Actually it's just their front end. The user measurement part is using Rails. Let's move to Shopify. I think they provide a free version of Rails. Ah, Hulu. Hulu also uses them. Airbnb. The whole side needs to be on Rails. The whole side needs to be on Rails. So, when we say someone using Ruby on Rails, normally we're only referring to some components. Those slides you see here, they are massive. It's impossible for them to do the whole thing with a single tool. If you score up a lot, a lot, a lot, a lot. Let me do the top line. This guy. Twitter, actually it's mentioned in the early days. The reason being is, ah, a few years ago, if you remember, Twitter has a serious downtime. It's because of some performance issues in Ruby on Rails. So, actually Twitter is still using some components from Ruby on Rails, but not the whole thing. And another example is not here. It's LinkedIn. LinkedIn, the whole thing is built on Ruby on Rails for a few years. And it was running on 21 plus servers. I can't remember the exact numbers. And a few years back, there was something new come up. It's called Node.js. And LinkedIn feel is a great technology, and they want to try it. The end result is amazing. What they did is, you know, in LinkedIn, you have push notification, you have real-time communication, and your new speed is just keep updating, right? There's a number there. It's real-time communication technology. And they decided to replace that part with Node.js. And the end result is 20 plus server down to, I can't remember, and half of the server is redundant, which means they are back up. Just in case the main server is down, you can have a secondary server to switch over. But LinkedIn still, major of their business logic is written in Ruby, and it's running on Ruby on Rails. So there's no single answer to all the questions. But when we start Rails, obviously it's a great start point for all applications. It don't really matter until you go into, like, have millions of users online all the time. Then you have problem with some layer of the Ruby on Rails. Then you move it out. Questions? Okay, if not, let's continue with our some coding. Okay, Cloud9. Have you guys opened accounts with this guy? So login please. Everyone login. I think I will just skip the program since I'm going to do the exact same thing you guys are doing. So this is your dashboard. Ah, it's a bit messy. Do you guys create more space yet? If not, okay, let's go through how to create more space. Huh, why have this guy here? Okay, so let's... Sorry, my audio is off. Let's do this. So, I should cover this earlier. So what's next with Ruby? This is true for all the programming languages. So there's structure, algorithm, OOP design, and Ruby gems. I will come to the Ruby gems later. The first two. You don't need to know what the hell is that yet. If you are interested, you can just do a quick Google search and get the definition somewhere and look through some examples that you know. But it's really important for you to have a deeper understanding about this technology. We... One thing, in a long run, we don't just want you guys to know what we call the user tool. We also want you guys to understand how this tool works. So someday, yourself might come up a new tool or modify this existing tool. Okay, so what's Ruby gem? If you guys remember, in the first half of the session, we mentioned something like libraries. We mentioned a lot of types of libraries. And in Ruby, we gave this library a name. In terms of library, we call them gem. So what does a gem mean? It means you have something you want to do. For example, okay, you want to make a dish and you get some vegetables and meat. Next thing, you need to cut them into pieces. So what do you need? You need a knife, a kitchen knife. So where do you get the kitchen knife? You go to the shops, you buy one. You won't take out some iron and make one knife, right? Similar idea here. We don't really need to make all those tools. We want to use. It's available all of them. And Ruby on Reels actually is a collection of these tools. So Ruby on Reels itself is a gem. Actually, yeah, it's a gem and actually it's also a collection of them. So basically it's a bunch of tools bundled together for you to use. And what's Ruby gem for? When you do something, you want to keep track what you are using. For example, you have a recipe for a dish and you use some pepper, you use some salt, you use some meat, you use some vegetables and a spice, seasoning. And you want to keep track what you are using and it's called recipe. It's similar here. You want to list down the list of gem you are using for your application. So that's why we have this gem part here. The reason being for this gem part is for example, I'm working on that and some day later I decide I should probably go entire and hire a new guy to do that. He doesn't need to figure out what the tools I'm using by himself. I have this file. It's more like a recipe. He just can take over and use it. Questions? I'm not sure why I've been here. Ah, okay. So the Ruby gem file is part of the Ruby gem. Okay, this gem file I'm referring to is at application level and programming level. Technically, each Ruby gem they have a list of files this gem is using. It's called dependency. It's sort of like a gem for itself. It's a very good question. Do you guys have an idea? The question is does Ruby gem itself has a Ruby gem file in it? Technically, yes. But here we are not going to cover that. Okay. Let me check with Michael. Do you make gem for yourself? Gem library? Yes, I have. How often do you do that? Once in... I've been doing Ruby for two years and I've done it once. Yeah. And as a new programmer to Ruby do you do that? No, I don't think so. You'll guess the other one. But the Ruby gem file on the project base we're going to use that a lot. Questions? No questions? Okay, I will continue. Real two concepts here. Web application framework. We can change this framework into a library more like a cooking book instead of a single recipe. It provides everything you need to prepare a wonderful dinner. So this wonderful dinner is your web application. And the next one, convention. Okay. Anyone knows what's the configuration? Is it like a function? Is it like a structure? Let's change that now. Anyone know what a setting is? Like an iPhone? So configuration is more like a setting setup. You provide some settings in your application and let the application decide to do certain things in a certain way. It's more like... I'm using the cooking again. So when you do some grill steak you need to have some control over the temperature. And this is called configuration. But for example, when you go into a restaurant you're going to order a steak. You probably will say, I want my steak to be well done, medium well, right? But you won't say, I want my steak to be cooked with this particular temperature with this particular length of time, right? So that's a convention. Well done is a convention. Time, temperature, those technical details is configuration. Now you guys get it, right? So convention over configuration in reels we follow convention. It provides ways to do configurations but we just tend to not do it. When you say something in reels you intend to do something. It's fixed. It's like order a steak in a steakhouse. Questions? Okay, great. Oh, I got the order wrong. Sorry. Okay, so let's back to your base. Okay, so first create a new space or work space. It's just a term. It's more like a project. So you need to give a nameplate I will just call it anything. And the next part is this private and public it don't really matter here. And since you guys only have a free account so which means you only have one private current project as many as the public project you want. So choose a template. Okay, I'm going to just do some introduction here. If you choose this guy Ruby and you can see a reels logo here it will set up the whole Ruby on real project for you. But in this course for this course we're going to let you guys set up a project yourself. So please choose this one. Reels tutorial. And you want to do that? Okay, let's create it. Great. If you're wrong you can just create new works basically. Yes, yes. Let's follow along. Reels tutorial is real stress. Anyone got to hear? Anyone have difficulty to get here? Reels tutorial. Yeah, it's the end. If you have questions do raise up your hand and sit down. Thank you. Okay, anyone have any difficulty to get to this part? You can just raise your hand. Yes, yes. You have six tutors here so they will just come to you. Just raise your hand. Okay, let's continue. Let's... Okay, so... Okay, so... Next, we're going to make a new Reels project. Okay, so if you guys ever going to set up a Ruby on Reels environment on your own laptop there will be an additional step before this one. Because in our Cognite environment the whole thing is pre-configured for you to use Ruby on Reels. And for if you guys want to set up a Ruby on Reels environment yourself on your own laptop talk to Amber she has the instruction. Yes. I will raise your hand just in case no one will see you. Say hi. Okay, that's enough. You guys know who Amber is, right? And some... So, for Ruby on Reels one thing, another thing is very important is command line. You just need to get used to do stuff with command line. On Mac, it's called terminal. It's here. If you go to spotlight and you type terminal, there it is. Here it is. And on Windows it's called some CFD, I think. I don't know. Yeah, so it's similar. The command we're going to use for Reels project is almost the same. So you guys should be fine. Okay, let's continue with create a new project. So, this is the command we're going to type in here. This part. This is your terminal. So, just don't do anything yet. If you go to this type and right click well, sorry. Okay, here. This is past side. And you can see your terminal. So, this is an actual terminal. And for those... Sorry, I didn't get it. Okay, before I do that. So, one question. Anyone use Linux before? Linux? Okay, sorry. Okay, this thing we call the shell, terminal is another way for you to interact with your computer instead of keyboard and mouse. Anyway, still use the mouse, but you keep the command here and it will do stuff. For example, I can do LS. What does it mean? Actually, it's shell for least. Okay? So, as I said, this is the actual shell. Cool. Okay, you guys choose exactly what I'm seeing here. So, how many things? Command plus... Yes. Do I need a shell? No. Let me change the resolution. I think the dot is hidden for all folder. So, this guy is supposed to be hidden. I think I changed some configuration long time ago. You guys can analyze for now. We're going to delete later. Okay? So, can you say this? Okay, so everyone, you guys can do a PWD first. Just KE, PWD, and key enter. We're going to have a lot of conversation about PWD. So, basically, it's going to give you the current directory or folder you are working on from this terminal. So, let me see what we have here. PWD. Okay, yeah. So, you can see it's a Ubuntu workspace. That tells a lot. The back end of this application is running on Ubuntu. If you are not sure what's that, it's okay. So, let's create a real program. So, here is the command. Real space new space program name. You cannot use any space your program name. The reason being is it confuses the computer. So, in my case, I do a real new app. You can do anything you want, I suggest everyone stay the same. You are going to see this. They are doing a lot of stuff for you. Just in case real new my project. Anyone not following? I saw everyone busy doing something. Someone busy doing something. Got it? Got it? The guy on the phone got it? Okay, good. Oh, actually, we're still going to wait. So, see, it's doing something for us. Yeah, so, let's continue with this part of work. For people who have this line, bundle install, ask on me. Questions? Okay, ask on me. So, look at this part. You're going to see your new project folder here. Right? Just open up. Take a quick look. It's a long list of files and sets to real. You don't need to do anything and you got there already. So, you can see it's creating a lot of stuff, right? And then it's doing bundle install. And do you guys still remember the file I mentioned? Ruby. Look at here. Okay, the one I highlighted. Open. Double click. So, you will see it pop up here, which is the editor. Yeah, that's common. So, you're going to edit your file here. This is the part you can change your code, write your code. Okay? So, let's see something interesting. First line is the source. It's where your Ruby going to get the jam its needs. And what's the jam for its needs? It's here. It's at least here. So, you have jam, rails. Follow its version number. Another jam file. No version number. So, which means it's not really important. And some other weird stuff. Yeah, going out here. I won't come here today. It's not really necessary for us today. But just say, for example, just one. You're going to take a guess. Anything. So, it's Acrify. Yeah. I'm going to cover that. I'm not going to cover that. So Acrify. So, anything is new then 1.3.0. It's okay. And this is an acrifier. So, it means the manual doesn't count. So, like, yeah, that's going down. Coffee script. You seriously want me to go there today? Okay, anyone heard of JavaScript? I think everyone yeah. So, another name for it is called an EC script. Is that correct? I can't remember. Yeah. Yeah, yeah. Repeat that now. Yes. So, that is the official name for JavaScript. So, and the coffee script. Okay. Anyone heard of Java? Okay, so proud. Okay. Java has nothing to do with the JavaScript. So, don't confuse it to even the shared same similar name. Coffee script is something someone to write to. Okay. You use coffee script to output a JavaScript. I thought that JavaScript was really hard to program in. Yes. So, someone thought, okay, let me just make a small improvement of program one. Which? This is just way of writing JavaScript. Instead of saying A, B, A equal to B, someone thought A equal to B is really ugly. So, let me just say A is B in English, for example. That is coffee script. Coffee script is an improvement of JavaScript. Basically, it just converts whatever you write in coffee script into JavaScript. Because only JavaScript can be understood by the computer. So, JavaScript is a language. It's a base language that your browser doesn't know or your internet explorer. That is, if you want to write something for your browser, you write in JavaScript. But JavaScript as a language is a little ugly according to some people to write. It's very hard to understand and all that. So, someone made it neater. So, basically that language is coffee script and it converts to JavaScript. That's it. There is no importance to it. Don't worry about it. Yeah. So, coffee script is the way that you can write in JavaScript. It's one way of use, not wanting to write JavaScript, but you have to write JavaScript. If you're really stuck in that position to write JavaScript, but you don't like it. You just have less confidence here. Yeah. Actually, my personal view on this, if you really hate JavaScript, just try type script. Go away. You're the person. Go away. No, I support. I stay strong with JavaScript. Anyway. That's for me. So, since someone mentioned about coffee script and we have this guy here too. Yeah. So, basically it's another way to write CSS. So, just something make everything more confused. So, I'm not going to come there. Okay. This is the gem file. And you can see we have a different group. This I really shouldn't cover this. Okay. So, basically it tells the way to do deployment. Okay. Yeah. So, basically, test deployment and development. You can use different set of gems for different scenarios. So, this basically was this for. Anyway, it's our cursor back for everyone. Check your screen, please. Yeah. Okay. So, it has some information that it's installing something. And just make sure the one has errors. It should be fine for Cloud9 user if you're going to use your own setup. You might see error here. Yeah. So, that's we need to deal separately. But for now, we are okay. I think for everyone, right? No errors, right? Okay. Believe or not, we already have a running application. I'm going to show you. Okay. So, let's move to the next batch command. It's just a fancy name for this stuff. CD stands for change directory. Which means change folder in your terminal. Remember, we just created a new application with a new name and a new folder, right? So, let's do this. Okay. First, let's do the app. Oh, yeah. Yes. Why we create this project? We have so many folders on the left. I will come to that later. Okay, sure. So, just you're curious, this part, sorry, but this guy app, if you open it, you will see controller model will, our MVC is back. So, we're going to talk about this a lot, right? Okay. Let's do our app first, please. Terminal. Terminal. You're going to see your application name here, right? Okay. Let's do change the directory into your application, which means CD and my app. Yes. And after this, just hit enter. Then you can see anyone got it? Questions? Okay, then I will continue. Let's do everyone got the CD part, right? In feedback. This part. Okay, I assume everyone is done here. So, if you do at least, then you can see the content here is the same as your content here under your folder. Okay. So, why this CD is important? From this point of hours, everything we do we do from this folder directory, your project directory. So, if for example, next week you come back, some comment doesn't work, first thing you need to check, am I in the right directory? One way to check is PWD. I think instead of present working directory, something like that, yeah, so PWD, then it will give you the full parts to your current folder, your cursor is at, which in my case is also my application folder. So, make sure you are in this folder all the time. Ever got it? Let's move on the fun part. We already have application. We can actually run it. So, how do we run this our application? First, make sure you are in your application folder. Second, don't do anything yet. I want to introduce the commenters. Rails, as this as sample server actually you can use server instead of as, but we don't use a shellhand and you can use some options. If you're doing development on your own laptop, this first part is sufficient enough. But this is why in Cloud9 we need to do some Cloud9 needs to do some crazy stuff for us so we can see it in our browser. So, this is the comment you need to type in your shell terminal. So, do this Rails space as dash p stand for part number. Then you provide this dollar sign part space dash b this dollar sign. Just do this first. I'm going to explain what's the dollar sign for. I can't remember who remember what's dash b sign for. Oh, Biden. Thank you. Just don't hit enter here. Just stop there. If you hit it, it's okay. Okay. Yeah, it's okay. It's okay. It won't delete anything. It won't mess up your project. I'm going to explain a bit of this dollar sign. It's a batch variable. So, if you don't answer that, it's okay. It's something it's trial we need to do for Cloud9. If you're doing it on your own laptop, you don't need the last part. You don't need the first part. So, let's go to hit enter. Yes, so this part. So, everyone have used your own link as a gift. Yes. I should do just present this. Everyone can see your own page, right? Don't use my URL. Use your own. Okay. Let's do this. This will kill your application and what we run. You need a space. Okay. Something I notice. Okay. Okay. So, for example, I want to move my cursor around. You see, this guy it should be blinking. Why it's not blinking? Okay. So, this white guy I want to move it somewhere else. Don't use your mouse to click on it. What word? Preview. What preview? You can think preview. Okay. Ah, you also can do that. It looks different. Why yours is so different? Oh, mine is not running. Oops. Anyway, so I just kill it. So, let's go back to the first part. So, don't use your mouse to move it around. It won't work. You need to use your arrow key. So, for example, I want to have extra space. I need to use arrow key here. And if I need to remove the thing, just use arrow key. For example, I want to repeat some command I entered earlier. There's a quick way to do that. Use arrow key up and down. It will have a list of the command you have used earlier. Okay. So, everyone got their application running. Let's look up. So, I can continue. Someone have some questions here? Do you have questions? Okay. This part, let's go back to our terminal. This is the log come from your real application. For example, you can see here something for this guy. This is the IP address your server is running on. And they have timestamp here. And this little guy here is actually referring to your root directory. Which means is basically your URL without anything attached behind. For example, I have the coding girl webpage here. If if this thing go into real log, it probably will see is get slash groups slash this number over there. So, from the log you can see what the application is doing. And that's pretty much. And you have the 204K which literally means okay. Means no error, no bug, no whatsoever. And you actually have a control over this value. We're going to come to that in the future sessions. So, next thing we're going to kill this application. Yes. Yeah, we're going to do that. Sorry. So, if sit here. Control C to shutdown server. Now, it doesn't matter you are using Mac or Windows. Just do control C at the same time. Why do it? I press control for so then press C. Everyone do that. Okay. Then go to your web page and do a refresh. It's gone. We're going to get it back. Okay. I try to have this one. Okay, we go through this. I need to go through that. Let's go through that. Let's go through that. So, for today I'm only going to focus on this guy. The app folder. It's it's organized your application components. It's got some some directories. It's it's pretty boring. It's just a folder. But it has the key ideas for application. So, I think I'm going through the wheel and the controller and the model separately. So, first model. Do you remember in the early half I mentioned MVC? This model is exactly the same as the model I mentioned earlier. It's top to your database. It's supposedly to have your business logic. Why do I say supposedly? So, the reason I say supposedly is we put the logic. It's up to the programming itself. It's not necessary that everything should be here and something must be there. It's not that. As a programmer, we have this power to decide where our logic goes. But for the best, we should put our business logic here. Next, wheel component. Again, it's exactly the same as I mentioned earlier in MVC. But you can see actually, wheel in the real world is doing more than presenting. It do a lot of stuff. It's filling data for the application in a template. It converts this thing into HTML and you see it in the browser. Of course, it needs to send the data to the browser. So in the earlier session, we see wheel is only the presentation part. It's kind of an end-of-statement. It's doing a lot of stuff. And wheel actually, you can write in Ruby code. Which means you actually can get stuff from model to wheel. So, as I said again, do not do that. For the best, just keep the wheel where it belongs to. But sometimes the logic can be firstly, it's hard to tell which part is going to wheel. It's okay. You're going to figure out you have a long time. After you're doing 1 or 12 application on your own, then you have a good feel which logic should go in wheel. Okay? Controller. It's the middleman. So, yeah. There's nothing much to talk about for controller. Next session, we're going to have a more detailed discussion on what controller does and you're going to have a new concept like ROS and stuff like that. I won't talk about that today. So, just remember all the link you click in your application is needed to go to controller. It's because controller is the middleman. And the link actually is the middleman. It's the way the middleman gets the information. Okay? So, any questions about our C? But now it's really specific to our rails. No questions? Okay, that's great. Ah, I said, this guy? If you open it, you can see image JavaScript style shape. Sorry. So, someone want to mic? You want to explain what the SM means here in this concept. We have a question about what's the SM difference? So, you understand what a view controller model means, right? So, you agree with that. Okay. So, what an asset means is basically it's something like when you look at, when you open the server now you see rails welcomes you and all that stuff, right? You see many images and a lot of eggs and all that. So, this layout is rendered by something called as HTML. So, that is how you save the image should be here. So, this is the assets. The assets this is basically something that your server is telling the browser a list of stuff that you need to show that helps. It can be images, it can be styles, it can be text or whatever it can be. It can be HTML. So, all of these in a very simple form is an asset. They have a separate folder for it because one, it's easy to manage. Like for example, we have some icons that we want you can just put it in the folder and then in the app you can be like oh, just go to the assets folder and look for this icon. Then you can show it there. So, it's easier to manage. And one more thing is that it's easier to compress it. So, it's in one folder when you're actually calling for a web page to the server you need to call the server, get all of the images information to your computer then it shows to you, right? That's how the entire process works. So, this takes a very long time. So, if it's all in one folder then you can compress all of these into one small file so that it's very fast to come back and you can separate it and show it. That's the assets folder in a very simple way. So, what are the key to the views? So, assets... So, the real convention is that views only handles HTML stuff. Assets are more like images and stuff that's behind the HTML this is a convention meaning different languages for different conventions for these. Because it makes it Rails clubs cleanness in the code. If you put images, JavaScripts and everything into your views it clutters it and it confuses people but instead it is just the HTML of the view is much leader. Yes, you could say that. The HTML will be located in views. You can see that JavaScripts, images, file sheets are all located in a sense. This is just a convention in the Rails convention, that's it. So, when you're coding in some other language or even in Rails, you perceive you don't need to follow this convention but it is better to follow it so that anyone else who's reading your code knows where to look for it. Yeah, that's great. Let's work on the extra slides. Yeah, let's do that. Assets, I think we have chapters and is it something to do with SF pipeline? So, as he mentioned just now it's going to compile stuff into one. And the reason behind that actually is come from HTTP limitation. So, yeah, don't talk about it. Okay, so next we're going to create a static page public folder. Let's give it that. Okay, anyway, let's do this. Public folder is public which means anything under this folder can be assessed directly like some error page. You can say here if you open your public folder you have 404 which means page not found 700 which means eternal error and something else. So, now I'm going to do is create a high page. I'm not going to create a hardware just everyone doing hardware. I'm not going to do that. So, let's do this. Right, click on your public folder. Where's my new file? Okay, change the name to high HTML. So, today technically, I'm not going to write HTML file. I will just write a text file but let's give the name HTML. Open it. Let's do high Rails and remember to save your file. Everyone get it? So, again, first, make sure you are under your application folder. It's just for the beginning. Later you will get to use it. You know where you are. So, let's try something interesting. I will do this. Okay, I will double dot means going to the parent folder. I will run my application there. You guys don't do that. I will give you an error. So, you say it's going to a bunch of errors. The reason being is I'm writing this comment outside of my application folder. So, the reason every time I ask you guys to check where are you is because I don't want you guys to see the error but I think you guys should see it. Then you know why we need to see in our application folder. So, let's run your application. If you finish with your high HTML documents remember to save it. Okay, you should at this page now. So, you need to create a high HTML file in your parent folder. Then save it. I mean, write something then save it. So, in my case I set high rails and you can see anything you want. Then write your application and open your application. Everyone should at this page. Questions? So, next will be the interesting part. So, go to your URL and slash and high.xml over there and then you can see the content you put in your HTML file. Anyone? Okay, yeah. You can use the app. Yeah, you can use the app. Error. So, the code is yeah, the code is here. Rails. I have a question. If I'm learning running my application and now I change it. I don't think so. Let me think. Okay, if your application is still running, you don't need to restart your server to see this page. But, okay. No, don't need. For this particular case, you don't need. But for some times we do need to restart the server. For example, like a Russian table. I mean, we have a lot. If you update that page, you need to restart it all. We will cover that later. It's too much information for now. So, everyone. Okay, let's get back here. Everyone gets to this page already. So, go to your URL and at the end of it, type slash high HTML and key enter. Then, the stuff you just put in your extra high.xml file is come back. This is a static page. What does it mean? It means it doesn't consume any data from the back end. It's always the same regardless of what you have in the back end. And this actually is the part you don't actually need the rails. But we just have it because just in case you need the ender, it's really simple start. Okay, everyone got it? Question? You seriously? Okay, who knows what's the back end and what's the front end? Who knows? Okay, you guys don't know. So, who doesn't know what's the back end and what's the front end? No one knows. Okay. So, everything the user can see. Let's put it, it's not technical right. I don't think it's technical right, but let's put it that way. Everything a normal user can see the front end. Everything else is the back end. And let's be more specific. For example in this case it's an HTML page and if I do real source it has some where's my source? Oh, no, this is the source. If I do in stack and it should have a bunch result where's my resource? So, if I go here you see there's a bunch of stuff. You have cookies, sandwiches, whatever and the where's my JavaScript? Never mind, you put JavaScript anyway. So, you probably will see this as a bunch of stuff here that they consider as front end or back end. It's something that normal user can't see. But we still call it front end. The reason being is those guys are responsible for the display of data and the interaction between the user. So this is the front end. And back end is something the user won't see at all. So, for example these guys, you still can see it in your browser. But back end code it's just completely shielded from the front end user. Ah, back end definition. Front end is the code running in the users and users computer. Back end is the code running on the server. Okay, is that clear everything? Why do we mention this? Okay, anyway, so you have this static page here and I think one of the tasks for you guys is to create some static page, right? What? You want to show it here? Okay. Yeah, so, for this part what I did is just, actually, it's pinned text and if you try to like give a new line there it won't work, actually. You guys can give a try, it shouldn't work. For example, first line you say hi reals and second you say hi your name then the whole server will need to be in the single row. It's because it's not HTML. For HTML to break the row you need to do something else and it will be covered in next session. Okay. Let's have more fun. Yeah, so now normally what I do is I will create additional terminal here. So I don't need to keep killing my application. But for now, if you guys can follow this one, so why do real programming, I will normally have multiple terminal open so I don't need to switch backwards. And you can see for this one, when the server is running there's nothing you can do here. It's blocked by the server. But anyway, I'm going to kill this guy. Okay. So we cover all this. Okay. I'm going to cover a bit on reals command and I'm going to talk about scaffolding. What does it do? It provides a basic structure to your model real controller. So this is the command structure. So you do real space generate space scaffold and space model name and you give a piece of actually I'm going to come back. So after you write this command, actually reals will help you to generate the data model you need, the controller you need and the wheel you need. For beginners normally this is a great starting point. So you don't need to really understand the relationship between each part of model wheel controller and how does it link together. You can just start from there. So today I'm going to do a name card model. So what this we're going to have after this is you're going to have a way to create name card delete name card update name card and remove name card and these things name card and all this is just from a single command. Okay? Any questions to this part? No. Okay, if not I'll continue. So first before we do anything we always need to identify the attribute we need for our particular model. So what's an attribute? An attribute is just a a hypothesis that we don't talk about OOP. Yes, then how to talk about that we don't talk about OOP. Okay, so anyway a model can have a value key value pair, if you say. So for example we don't talk about name cards you don't really have a what do you put on your name card giving name, surname, company name, address, number, cell phone number, right? Something like that. And each value you put on the name card actually is an attribute. So does it make everyone more confused or is it just some term we're going to use? For example another example is a menu. You're going to a restaurant and you see a menu. So what's the attribute on the menu? The name of the dish, the price of the dish, right? And if they want they can put a picture so the picture itself also can be an attribute to this menu. So it's similar here. So I put something else behind it. It's called data time. The reason we have this one is because we need less real snow what type of data we want to put there. For example for humans numbers are strange when we talk about name cards it's implied. So on a name card you see a string there I mean if you see a string after cell number you know it's a cell number and the format it just come to you. You understand what that means but for programming language we need to tell it what is it. For example if you want to do a birthday management application then you probably ask people to put in their birthdays. Then you need to tell reals it's a data time actually we have multiple data not just your data okay so since here the reason I put everything using string is just simplify everything so for cell numbers you can put whatever you want actually in this case and how to validate your data is a validate data is an action so some point later we will talk about how do you make sure the address is in the format how do you make sure the cell number is in the format but today we are not going to touch on all this we just touch on the basics so if you go back to this part you see here reals characters model name and attribute type type is a part of our command so here it is and for type we also have others like integers reference and we right now touch on this today so for now we are going to use what if I want to put this space in my phone number what if I want to put a dash in my phone number what if I have international number and start with the plus one and you know for those people travel to China and have a China number they know in China if you want to call like other states or other country you have zero zero in front of it if you put integer all this information will be lost right so this is a part of identify model attributes you need to think through what is this data type you need for your attributes okay questions? let's convert the whole thing into a command something you need to pay attention to is see the attribute name what's that called? camera case or something so for attribute names I use I use an underscore to connect the screens so for example this one company name it's a space right so I use an underscore but go back to the model name it's called camera case because it's like a camera I camera case for each word can add this name without a space just pay attention to the little details here and you should be fine so taping do you need type this pss which one? pss pssd yes you need type 2 still there's something number I just look what is the pss given the model name this will be helpful I try to find something like space oh it's too small I want them to tap exactly let's remove the let's do this only I shorten the list of our attributes now we only have 3 we don't need the rest we don't have the exactly word there so 2 things why is the space it not really matters but I don't want everyone to think about it but the enter it really matters the new line character so this whole thing should be in a single line we have see the photo on the controller c-o-n-c-d-r so double T okay I assume everyone have done this so my mind is so slow okay so one thing you can see it's generating a bunch of code for you so let's see about the code list so the highlight part is the code generated by the command t okay so one thing here is you notice your key in the model name is camel case model name card and it's being converted to a snake case here but actually if you double click open it in the file you actually can see your camel case again it's just some convention so it's convention so we don't really do something about that so the command d is just created stuff and another way for your guys to do the same is actually you can create all those files individually one by one by hand then just follow this naming convention like snake case and the snake case with the model name end with the controller and we will be a folder with each card in this file it just follows the convention then the whole thing just works but since it will be a lot of tedious repeated work we just use the command okay next migration actually if you go in that sidebar if you go into there and then the database you can see this folder and we actually have a new file created it's called the migration file the reason we have this one is because the underlayer for Ruby on Reels is using sql database and just for your information for sql database every time you want to add to it you need to change the database schema schema is just a structure of the data organized in this database so that's why you have this migration file it will help you to change the schema of the database okay so some of the things that you took away that you didn't want us to put in we could later put those in run a migration oh yes so but it's not straightforward actually you need to write another command to do that oh so first I would write the command and then we would add that yes so I can't remember the details but you need to generate a migration file so it's a real generate migration and with a file name like at the attribute so you give us actually doing this so then I would be surveying yeah we won't come out today we'll come in later and again since you won't change the model actually some of these files need to be changed too yes would I have to go in and change those by hand yes so that's why it's great to get a start with a new command but for more of the last task you still need to understand the relationship between these files okay so any questions about my migration file later my migration file next I'm going to actually change the database with this migration file no more questions, right? okay update to the database I use db comma to the latest migration write this command rack space db comma migrate just key in this command in your terminal and key what? it shouldn't yes then you will have a schema file then you continue to have a schema file I should show you what's in the migration file later okay everyone just key in this and hit enter so everyone is done so now if you're going to db folder and the schema you actually can have this you're going to see this pattern here it's almost the same as you input in your document so just a few things if you guys know SQL is great if not just for information this model name is also your database table name and there is your attributes giving name, fact, sales number and you can see the data type in front this last tool is added by Rails itself so you actually have a timestamp information you can see your own it's the same, everyone has the same okay so here is what we are going to do next right application everyone after migration, right application I want you to add two more attributes to the same paper so I just do the same schema just now no, it will be different you can do that don't do that so for migration one thing you need to be careful is now we are doing development so it's okay but imagine if you have production so you need to be careful how do you migrate your data for example for some days this particular field is not required and some day later you decide okay I need this field to be compulsory for everyone so what happens to the old data that is filled so it's a part of data migration planning you need to really think through the functionalities between version to version and do the migration but this is only for production we are still doing development so we can do a lot of crazy stuff like we can just delete the whole thing and restart, right okay what do we write the page for we just delete okay so everyone guess you are beginning to write it right so everyone should have this page okay go to your url okay I will use the problem go to your url and add slash name underscore and hit enter and tell me what do you see you can see this page then you can start play along with it you can click on the new name card then you can have a form fill it up and click on create oh I just created an empty one oh in the url what what sorry first day it says first day of course that's my url, this url is generated by you should use your own url so everyone go to your name card just key in your stuff if you notice that I create an empty entry here the reason is we don't have validation so you can pretty much do empty one okay I delete that I got this one working I have questions can we delete the event we don't use the next okay then it can be a homework exactly the same process oh yeah so how do you create I want to ask why do you create a new page so the question is why there are so many pages created just after a single comment the answer is it's this comment yes so it simplifies the development process another reason why Ruby on Rails is a good starting point so you don't need to have a lot of information or a lot of knowledge you can start with what you want immediately that's for for for example here I can create a name card without any value or without name it's currently wrong for a product which means we need to add data validation in this process we will come in in the future and again you might feel this is ugly there is nothing amazing going on there and it's not user friendly so there is a part of future discussion again questions this is all I have for today questions can you show us how to add one more just one it's not really difficult you can just type there let me oh okay where's my first to add a new attribute normally I will do Rails generate migration then I will change the migration bar I'm interested I'm always interested in adding a new attribute raise your hand come here come here yeah you can go there Rails the recording is now in the camera Rails generate application yeah so then you give the migration name for example address okay I will just type add add address to new add address to game cards okay so then you go to your migration file then you can see it's here I can't remember the comment let me see what's the comment see yeah actually some people said terminology is not important for starters actually I disagree I think terminology is extremely important for example as just now we said we want to add a new attribute to this table and we don't really remember what's the exact comment there so you actually need the terminology to get there the terminology is real migration add column column is a different business term attribute pretty much what works but just try to remember the terminology and try to use it in we'll do the exercise yeah okay I think we need to know how to read documents how are you finding okay then you can show us how to do it okay let's do it I don't know if I'm right or not I can correct you I think I brought the this guy so introduce yourself okay I'm going to show you how to add a new column to this table firstly go to google migrate a new column and then you come to this first record page keep searching what it adds and you find something related to add just now I found it on my okay I would do my own okay alright so if you don't know how to do it just search and then you find something really okay I think this is the part so what does this mean that if you want to create a new column in your existing schema so you do generate migration and you add a name to this migration you can name it in any way you want and then the example if you want to add a new column and the type of the column so we just copy this part to this one so we just copy it here change it to add a company name and then the name of the attribute is called company company name and the type is so what will we do enter rails rails you actually don't need a fee so it's rails general so and then what's next so you have a migration file so the next you should run the migration command so the migration command is rk so it will take some time it will be much faster on your own machine so okay say the migration log and now you're going to your schema schema you can the why it's not there this is for you this is for this is for this is for this is for I need the migration file anyway another way to do that I think jerry migration is coming you didn't specify which table the command here doesn't specify the table it doesn't specify the table see if you look at the command it says f part 2 f part 2 products so what it's trying to do is look for the last last item here products is actually a table it's a table for products match your folder your database table name in your case it's called name cards company name to name cards and if you give space it will do weird stuff so this itself is a parameter it's on and that has to be a camel all of that I think it should be name cards or new cards yeah okay when you're doing that you have to create a lot of the migration files if you don't want we'll do one at a time okay then you look at the last part do you want to refresh this one try this one oh it still can't figure out so real quick where okay in this case you created a couple of different files if you have not run migration yet you have not run migrate is fine then just delete the old stuff just delete accept the last one as you want keep the first one as well we've got to delete the first one so when you create a preview here they are sorted chronologically as in the last one you create so you just delete the one that you created just delete the first one so for let me have a simple add a company name to name cards the card tool doesn't matter you should it should matter it's probably more camel case for the folder name cards they are both in a small letter we also kind of convert that whatever you have in camel case into underscore so we can convert it into underscore then I just run the library then it should work hopefully then I should go to hopefully then I should go to 3 files so when is the add company then the add company so we have to do separate files so take a view of each take a view of each migration file as like a I'm remembering what I changed each of these files when you run when you create a migration I'm going to make a change to the database in some way I'm going to add a new column a new attribute there so for example every step of the way as you make changes to database each migration file remembers what was changed no those are those migration files they kind of remember what you changed so that you can oh I did something wrong I would do you can do that look I don't want the last change you can just roll back the process of undoing your last things in database is called rolling back something so each time you do a migration it creates a new file and the final structure how your database will eventually look like you can look under the schema file remember you look under slash db slash schema.rb you open that file you should see the final form of your database yeah you look under I think should be under config db db folder in the db folder there's a schema.rb do you see it if you have run any migration everyone migration here yeah you should see a schema.rb there oh you are going to be modified I didn't okay I think Michael will continue we want to see the field on the page now it's on the schema everyone try to run create a new column in your database yeah everyone try to run a migration like rake db folder yes okay once you added the database table right so what happens when you run scaffold a lot of rails magic happens right when you see a lot of files are created so when you run rails scaffold it generates a whole bunch of files for you which basically has the html layout for your for listing the list of name cards adding name cards if you guys try to add name cards and stuff can you try that you just go to your preview page slash name cards there's a link in the bottom let's keep that if you ever see you can add new name cards okay you want to try that the rails magic that happens when you run a rails generate scaffold it generates all this information for you but the problem is when you add new columns like what we just did that magic doesn't kick in right so there's some magic that rails do and some magic that you have to actually do yourself which is why we people in program are like us right okay so right so there are a few things you can do plus you can probably add the field to your data to your first you add the field that you just added to the html yeah so one way to do this is to look under your views folder under slash apps slash app slash view right slash folder you should be able to see a file called underscore form dot html do you see that so you open that file okay so over here this is html right but it's a different kind of html called erv which I should not go into right now so what's the name of the field that we added do you remember address company name okay so let's take one of this oh okay so you copy it here so right now let's change this to company name you know that as well right so you just copy one of your views maybe your cell phone view just so basically the view lines right four lines of code copy it down yeah copy it down to the next next section and then you can rename it to company underscore name is that what you guys added you guys added the company name right okay cool so just do this first alright do your thing do your thing you know what you're doing alright so so next we have okay so once you have the form you can actually see how it looks like right but you're just going to go back to the web page your app and maybe you click on right so you click on you go back to the web page you click on new name card you see the new company name company name form field there right then you're not done yet you're just adding the field but you're not being committed to the database yet right so that's the second step the second step you do now is to go back to the go back to the editor right and then try to know where the view is here okay so let's try and add it into the database right so when you do model let me just check the database I can actually add this to the database okay should work so yeah let me figure this out a little bit okay right so next thing you do is go to your controller okay this thing you do is go to your controller name card controller okay right so go to your name card controller now I need you this one takes a bit of scrolling right let's go all the way to the bottom right so the last part let's say subscriber and set name okay last piece of information here name card okay so I need you to do next thing you do put a comma followed by a company name right okay you see that scroll down on your name card controller scroll all the way to the bottom you'll see something there name card name card correct okay so now add the word name so the semicolon in front is very important just remember to put your semicolons there okay if ruby speak that's called a symbol yeah yeah you're creating a symbol what is that okay so what does this do okay so in the first place when you create we edited your form it appears in your new form right so you will try to submit you will try to submit to it it doesn't actually add the database why it's because in Lumia Rails the controller file basically protects you from it protects you from things that shouldn't be going into your database so the way that we do that is to update this permission look I allow the form to give me certain piece of data and the piece of data I want is the name the complete name okay so we can now try to add that in let's go back so remember save your file go to my name cards let's add something right and then company name color world actually want to display it does it still display does display it right sorry I mistake that there's one more step so you can still see it by clicking on edit you click on edit you should see the form view there right the view record is added so there are few things to do add it to the form allow it to go through in your controller and the last part is when I go back to the home page I want to see it here right so let's show it here first let's change the name card so to edit that we need to go back to the editor and look for file call index I think it's under your views there is an index html.erb open that right and okay there's a few places you need to change so let's look at line number 10 you look at line number 10 or rather okay so index.html.erb under views name cards index.html.erb alright so let's add this thing here copy the last line above it so the last line before the word call span 3 don't do that copy that file copy that line rather select it command c or control c and command v to the next line and change that to company name okay and this one more line you change you scroll down you scroll down a little bit further you will see that there is something here with name card dot cell phone or name card dot whatever right copy that line as well the entire line from pd all the way to td right copy that line as well put it down to the next line okay the place you need to change I will be very specific here so what do you think this means name card dot cell phone name card dot fax name card dot give a name what does this dot what does this mean okay so name card dot I am going to show you the cell phone number name card dot fax I am going to show you the fax number so what is the next combination here that we need to show company name correct so we change company name so name card dot company name this is very specific it should be small letters everything is small letters okay right so once you have done that save the file and go back to the my app your page again refresh can you see it right so let's recap what did we do so we basically went to the index Scottish name on ERB right we added one more line there to say company name and just below it where we are showing off all the different numbers and what not what company name okay not showing coaches we just have a problem yeah is there any if there was yeah is there anyone not showing up having problem showing this company name in your index view anyone else have problem okay sweet alright so there is one more place to show up so right now we have seen we added it to the phone we added it to the phone but one place is still missing you pick on show we still not there so Rails do so much magic for you more work okay yeah this is normal alright so one more place to change so you just okay you look at it so what are the files we have changed so far we have changed we have changed the form dot html we have changed index dot html so what is because now we are doing a show what do you think is the file that we have changed show dot html alright let's go back there can you find show dot html alright you see it show dot html don't pick on it so right now you will scroll up you see it all it's showing me given name it's showing me fax number oh hey it's still missing it's missing complete name just add that in as well you copy the four lines like say the cell phone number so just copy these four lines with the last place last line let's give it a right correct label this will be complete name complete name and just below it is the same it's the same card same text name card dot something so what should it be now complete name right let's try that okay so I did this last line there just above the update name alright so it's done remember to save it and then refresh the page can you see it so let's show you again show dot html the last four lines as add in and you show me able to see the complete name great so we click on that right you should see that all the way the first few things is missing your complete name you didn't get added you had time to pause click edit you ever reached this point where you can actually see the new field in your application anyone else think wrong yes all good yeah so the real scaffold real scaffold actually does a lot of magic for you so but the magic only ends at a certain point at a certain point where you change, where you make additional changes that rails doesn't know how to help you with that's where magic ends and you have to do your own magic so that's where you need to learn the right code it's deliberately difficult it's deliberately complicated as in there's many cases where you change because rails gives you the flexibility to design with color and whatnot to the different pages so we just wired that we also have a question what if some of the page appeared under views and some of the page appeared under public I mean some of the html page or html in views some are in public for the what's the the way the way that Ruby rails work is that it looks okay it looks like the controller and say what is the controller name okay the controller name is name cards and name cards because when I want to show name cards I want to load something first when you go to slash name cards what does it look for it looks for the first page to load the first page to load when you go to name underscore cards in your browser so if I come here name cards what does it do it's looking for something to show you right the first thing I try to show you is to try to show you what we call index page an index page in the world web they see the first page that loads in some web servers it's home page not html or something but in our case it's looking for index so what it does in what rails kind of do is look for the index method to look under here and then you also look for the index html file inside your name cards folder and that's where it loads the view right so there's the magic the kind of rails kind of do if you look for controller I need to show something I will look for the view file inside the view folder okay so it looks for a file that is according to the name that you use so if you look for if I want to see something else say I want to go to the show so I link it goes to why which part determine the index html is the first page to show if I type the name rails does that rails is the one that determines so as long as you maybe have index something you are showing well is it more complicated than that there's another file that kind of tells you how it does that but I think we can go into what we call routing this is the topic we call routing we will deal with next yeah alright so we actually come up with more than I planned today so actually the name card should be the last one and the idx trivial card is just a bonus card so I think we don't have to revisit this next time and yeah and the last so deal with passion, call with love