Let's study web-development

Intro

Transcript

1. 1. Intro CEOS Web-Development Study Jungwon Seo CEOS WEB-STUDY 2017-1
2. CEOS WEB-STUDY 2017-1 Coder and Proud! 1. The Reasons You Should Learn To Code. 2. Web Development? 3. Why Should We Start Programming With Web Development? 4. House vs. Web-site 5. How it works! 6. Why AWS? Why Python? Why? Why? 7. Summary
3. CEOS WEB-STUDY 2017-1 I Have Freedom to Make My Own Schedule I Earn More, But Work Fewer Hours I Can Say “No” to Job Offers People Come to ME Asking if I Can Work for THEM I Never Have to Deal with the Tedious Online Job Application Process I Have Extra Time to Pursue Interests I Can (and Do) Work Remotely It’s Easy for Me to Make Side Project Dreams into Reality I Am Part of a Top Secret Club (a.k.a., the Tech Community) I Have a Sense of Self-Reliance and Empowerment 1. The Reasons We Should Learn To Code
4. CEOS WEB-STUDY 2017-1 2. Web Development? Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network) - Wikipedia - Web-Site Homepage Server Database Internet Browser Internet Explore!! Amazon HTML How many words have you ever heard?
5. CEOS WEB-STUDY 2017-1 3. Why Should We Start Programming With Web Development? 1. It’s visible, so we can see immediately the result that we are making.
 (Otherwise, most of you people will get bored super easily….) 2. Web-development is still one of the biggest industries in the IT world.
 (Even A “zoo” has their own web-site.) 3. Server-side programming is kind of a mandatory for all the IT products.
 (Except some applications that you can use without a network connection) 4. Honestly, this is the only thing that I can teach you with the least hesitation.
 (So sad..)
6. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) Let’s say, that we are building a house.(a real house!!!) To build a house, we need land, some bricks, steel, glass, cement, etc. With these “resources” we can make this house! (next page)
7. CEOS WEB-STUDY 2017-1
8. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) If we make a web-site this way, using just with a server, html and minimum style, 
 it will turn out like this! (next page)
9. CEOS WEB-STUDY 2017-1
10. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) But, this isn’t reeeeally what we want to build. We need some cables for electricity to light up the bulbs, some gas pipes to shower with hot water. (Oh, and don’t forget the water pipe!) In the web-development world, these kind of resources are 
 Server-side language(PHP, Node.js, Python,Ruby…) : to produce data 
 Database(MySQL, MongoDB..) : to save data
 Web Server(Apache, Nginx..) : to receive and send data
11. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) These are what we built so far with the previous resources.(Okay, fair enough.)
12. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) But we are not living in the real world; We want to live in a super fancy house like Tony Stark’s. Great design, smart house system. So , we need to use “Javascript” to make a dynamic web-site(in the visualizing way) and “CSS3” to put some great design on your website. 12
13. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) So these are what we made. 13 <Slack>
14. CEOS WEB-STUDY 2017-1 4. House vs. Web-site (cont.) In the real world, we are not able to own “Burj Khalifa”.
 (I’m sorry to be blunt.)
 
 But we can own the web-site like Facebook.
 (not the users, sorry again.)
 
 This is the beauty of the IT world. 14
15. CEOS WEB-STUDY 2017-1 “Come on! stop treating us like kids, 
 We want to know what is happening technically in the computer!”
16. CEOS WEB-STUDY 2017-1 5. How It Works! (Big picture) Alright, no big deal. Let’s check out the below picture. 16 Server Computer(OS : Ubuntu) Nginx MySQL Flask(Python) uWSGI HTML,CSS Client Computer(OS : Windows) Browser(Chrome) Loaded HTML,CSS Server Side Client Side
17. CEOS WEB-STUDY 2017-1  
18. CEOS WEB-STUDY 2017-1 5. How It Works! (Server-side vs Client- side) Let’s just clear up something important there. First of all, There is the first big branch in the web development area. We call them Client-Side and Server-Side.(Forget about the client that you are familiar with!) In web-development, “client” means, you and your browser.
 (In the mobile application, your android app and your iOS app)
 
 Server-Side is the server computer and server program (that you installed or wrote.) 18
19. CEOS WEB-STUDY 2017-1 5. How It Works! (Server-side vs Client- side) “Then, what is the server-side language, programming, programmer and client things as well?” Here is one of the most important concepts in web-development. To distinguish these two parts, you need to understand, where your code works! Some people make mistakes, when they differentiate these two sides things. 19
20. CEOS WEB-STUDY 2017-1 5. How It Works! (Server-side vs Client- side) Mistake 1 : I wrote my HTML code in the server and it’s in the server, so it’s server-side programming! No, focus on the location that your code is being ‘executed’. In the server, HTML is just kind of a text file. It doesn’t really do anything. It will be activated in your browser. 
 (When you visit some web-site, your browser will load their HTML and CSS code, then interpret them to a graphical interface.) 20
21. CEOS WEB-STUDY 2017-1 5. How It Works! (Server-side vs Client- side) Mistake 2 : Java is a server-side language because it’s working in the server(JSP) How about Android? Like I said before, an android app is in the client- side. So, it can be a client-side language too. Programming languages are not born to be with their side originally. It is changeable based on where they work. 21
22. CEOS WEB-STUDY 2017-1 5. How It Works! (HTTP) Let’s take a look. When you type some site address in Chrome browser their server will return the final HTML code to your browser. (There is a gray area that you don’t need to know right now, Let’s assume that there are some unclear parts related with this area.) 22 Server Nginx,uWSGI (Gray Area) Flask DB HTML 8PSL
    
    8PSL
    4IBLF
    JU
    4IBLF
    JU XXXFYBNQMFDPN Final Code
23. CEOS WEB-STUDY 2017-1 5. How It Works! (HTTP) HTTP(HyperText Transfer Protocol) is the protocol that we are using in the world wide web(between “Client” and “Server”). There are two actions, “request” and “response”. Literally, it’s a request and a response.
 (If you type some address in your browser, “request” will be requested to some server, and that server will respond with their “response”) 23
24. CEOS WEB-STUDY 2017-1
25. CEOS WEB-STUDY 2017-1 5. How It Works! (HTTP) Normally, ‘request’ looks like this.
 - http://www.example.com/post/3231
 (http://www.example.com/user/jungwon-seo, http://www.example.com/book/coder-and-proud)
 
 If we split this address(URI) with “/“, it will make more sense.
 
 - http : protocol that we are using.(Sometimes we can see ‘https’)
 - www.example.com : their domain, address.
 - post : first parameter(it can be user, photo or book whatever. it depends on the developer.)
 - 3231 : second parameter, the post number 3231 among all the other posts.
 25
26. CEOS WEB-STUDY 2017-1 5. How It Works! (HTTP) How about ‘response’? It can be some code, numbers or just some text. Therefore, now it depends on “Client”. In the web-browser, if the response is the interpretable HTML code, then the browser will show GUI(otherwise it will just show the text result.). (To communicate with mobile applications, which are not using HTML to render the GUI, developers normally code the server to return ‘JSON formatted data’) 26
27. CEOS WEB-STUDY 2017-1 6. Why AWS? Why Python? Why? Why? Then how can a server decide what to return? That’s what server-side programming is, and that’s what we are going to learn! Before we get started, there is one attitude that we really have to have. ‘Logical decision’ There are tons of options we can choose from when we start to build a web-site. You really have to be able to justify your every single choice.
 (It doesn’t need to be the best option) 27
28. CEOS WEB-STUDY 2017-1 6. Why AWS? Why Python? Why? Why? Hosting : AWS(Amazon Web Service) Why? - AWS is the most famous cloud service in the world. - AWS has many convenient functions that can help us to build websites easier. - We can use a limited version for free for one year.(it’s enough) 28
29. CEOS WEB-STUDY 2017-1 6. Why AWS? Why Python? Why? Why? Sever-side language : Python Why? - Python is super easy to learn.(compared to other languages) - Python is being used in many programming areas(Ex: data-mining) 29
30. CEOS WEB-STUDY 2017-1 6. Why AWS? Why Python? Why? Why? Sever-side Framework : Flask Why? - There are two options that we can choose from (Django, Flask), however, Django is too structured to learn other things.
 (Ex: ORM is super cool, but we have to learn mysql query too!!) 30
31. CEOS WEB-STUDY 2017-1 6. Why AWS? Why Python? Why? Why? Database : MySQL Why? - Mysql is kind of an essential Database
 (NoSQL things are not substitutes, they are supplements. - We just have to learn!!(most companies are using it!!) 31
32. CEOS WEB-STUDY 2017-1 7. Summary - Now we know ‘briefly’ how it works. - Server-side, Client-side - HTTP - Logical decision Next Lecture: - Building web-server. 32