search

Lu-yeom / mentor-program-5th-self-learning

0 stars 0 forks source link

week4(2021/5/3~2021/5/9) #4

Open Lu-yeom opened 3 years ago

Lu-yeom commented 3 years ago

日期：110年5月3日(星期一)20:00~22:30 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）

課程筆記： 一、溝通是怎麼一回事 　(一)網路就是溝通。要有寄信者From，和收信者To，但是還是會發生對方沒有接收到的情形，所以在傳送訊息前，需要先建立規則(因為傳送者和接收者都不知道功能是否運作正常)。 (二)傳紙條守則： 1、寫明來源 2、寫明目的地 3、經過三次的前置作業，確認雙方都能收發 4、標準化內容格式 5、分為header和body 6、用狀態碼標準化結果 7、用動詞標準化動作 8、新增服務代號，一人負責一個服務 9、不同服務可以有不同格式 10、有些服務不一定要經過三次確認 11、跨校傳紙條寫校名不寫地址也行 二、為什麼需要協定(protocol) (一)協定（protocol）是一組決定事物該如何運行或完成的規則，而我們日常生活其實充滿了各種協定。例如要到銀行辦理交易的顧客，必須按照規則排隊等候； 此外，我們也有語言的協定，也就是文法。同樣的，電腦和網路也需要協定才能共同運作，而且不同性質的需求，需要不同類型的協定。如同傳紙條守則建立的各種標準。 三、HTTP：超文本傳輸協定，全球資訊網的通訊基礎 四、HTTP request流程 　(一)瀏覽器 >> 製造request >> 傳給server (二)server >> 處理 >> 傳response回來

今日心得：本週的課程較偏理論，但是Huli老師還是舉了生動的例子，例如告白、訂便當，讓人更容易了解網路上的”溝通”是怎麼進行的。

Lu-yeom commented 3 years ago

日期：110年5月4日(星期二)20:00~22:30 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）

課程筆記： 一、DNS Server(Domain Name System) 　 在本地端設定一些規則，讓電腦送出，電腦會優先配對設定的規則，再到DNS去查詢。也就是把domain name翻譯成IP。 二、永遠不要忘記瀏覽器只是另一個程式 瀏覽器發出request，目標收到後回傳response，再渲染成頁面。瀏覽器會依據頁面的資訊，下載各種資源。就算沒有瀏覽器，也是可以接收response(利用request - simplified HTTP client)。 範例： 　　npm install request >> subl index.js 貼上 const request = require('request'); request('http://www.google.com', function (error, response, body) { //紅字可改為目標網址 console.error('error:', error); console.log('statusCode:', response && response.statusCode); console.log('body:', body); //可先不印出body }); 存檔後離開，執行node index.js 回傳 error: null statusCode: 200 可再輸入指令node index.js > github.html 把github.html打開 open github.html 就可得到跟用瀏覽器開啟同樣的頁面 三、Header 與 Body 　　request和response都有headers和body，headers存放額外資訊，body存放主要內容 依據上方的程式，也可以改成↓印出headers 　　const request = require('request'); request('http://www.google.com', function (error, response, body) {
console.log(response.headers); }); 四、GET 與 POST GET：單純的跟 server 要一個連結或圖片，通常網頁都是 Get 的 request 比較多（獲取、查詢 或 檢索 (retrieval)） POST：需要執行一些動作時（遞交、新增 或 發佈），會傳送 Post 的 request 五、其他的 HTTP Method 　　PUT：修改掉整個 request 　　PATCH：修改掉部分 request （較推薦） 　　DELETE：刪除資源 　　HEAD：獲取 response 的 header 不要 body 　　OPTION：了解 server 提供哪些溝通方式 六、常見的 HTTP Status code(HTTP狀態碼) 2開頭：如200，是成功的意思　200 OK 3開頭：重新導向 ．301：「 永久 」移到其他位置，在下次發出 request 時，瀏覽器會直接到新位置 ．302：「 暫時 」移到其他位置 　　4開頭：用戶端錯誤 　　．404 Not Found：找不到資源 　　5開頭：伺服器錯誤 　　．500：伺服器出錯，搶票時常見 七、簡易 HTTP Server 　　 var http = require('http')

var server = http.createServer(function(req,res) { if (req.url === '/') { res.write('welcome!') res.end() return } if (req.url --- '/hello') { res.write('hello') res.end() return }

if (req.url === '/redirect') { res.writeHead(200, { 'Location':'http://google.com' }) res.end() } res.writeHead(404) res.end() })

server.listen(5000)

存檔後離開輸入node index.js執行後不會跑出東西，但會一直執行，可輸入ctrl+c取消

今日心得：今天的課程介紹了透過瀏覽器是如何傳送request和response，以及HTTP的相關功能，以前只是懵懵懂懂地記得，404代表錯誤，原來這些都是一系列的狀態。

Lu-yeom commented 3 years ago

日期：110年5月5日(星期三)20:30~22:30 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）

課程筆記： 一、TCP/IP 網路有分很多層級，常用的模型是「TCP/IP 四層」，HTTP 到 IP 以前，還有一個傳送層的手續「TCP」

二、IP 地址 全名 Internet Protocol address，目前有分成 IPv4 和 IPv6 的 IP協定，因為 IPv4 的位址枯竭，才新增 IPv6。 三、虛擬 IP、浮動 IP 與固定 IP 理想情況一個電腦會有一個IP位置，每一台電腦都可以直接連線，為固定IP。 另一種為一台電腦每次連線時IP位置都不同，為浮動IP，比較不會被駭客攻擊。 虛擬 IP：不會被偵測到的本地 IP，通常是在內網裡面會有虛擬 IP，以家裡的數據機為例，家裡的數據機供應給不同電腦網路，供應的這個網域就是內網，內網裡面每台電腦的虛擬 IP 都不同，但是我們的內網的 IP 可以和其它內網的一樣，因為彼此不相干。 內網裡的電腦的網路請求都是經由數據機發送出去的，數據機本身會有一個固定 IP 或是浮動 IP，外網的人只會看到數據機的 IP 位址。然後 response 回來的資訊，也是經由數據機下去分配給原先發出 request 的內網電腦。

Lu-yeom commented 3 years ago

日期：110年5月6日(星期四)23:00~00:00 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）

課程筆記： 一、Port(連接埠)的作用 通訊的端點，每個通訊埠都會與主機的IP位址及通訊協定關聯。 常用的Port有：HTTP 80、HTTPS 443、FTP 21

二、TCP 與 UDP 傳輸層的兩個協議，TCP是一種可靠的連接，輸出去保證會送達，大部分的應用層協定(HTTP、FTP等)都建立在TCP上；UDP特點是快速，不在乎是否有送達，在現實生活中常應用在視訊

三、淺談三次握手 TCP協議為何可靠是因為有三次握手這個流程。

四、重點總結 HTTP/FTP(應用層)>>傳紙條的內容 TCP/UDP(傳輸層)>>傳紙條時的三次確認 不確認，一直傳紙條 IP >>寫紙條，收信者和寄件人 實體層 >>郵差幫忙送信

今日心得：這幾天課程看下來，深深覺得huli老師用傳紙條的概念來說明真的太貼切了，聽課的同時在腦海中模擬傳紙條的模式，更能快速的理解。

Lu-yeom commented 3 years ago

日期：110年5月7日(星期五)20:00~22:30 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）

課程筆記： 一、淺談API(Application Programing Interface應用程式介面) 當要取得資源的時候，需透過介面、API來存取資料。例如提供資源的一方可透過API來定義存取者的一些限制，透過API，可以讓雙方交換資料。

二、API 與 Web API Web API>>HTTP API，透過HTTP協定的API

三、串接 HTTP API 實戰 const request = require('request');

request( 'https://reqres.in/api/users', function (error,response,body) { console.log(body); } );

如果想要指定呼叫編號x的user： const request = require('request'); const process = require('process')

console.log(process.argv) request( 'https://reqres.in/api/users', function (error,response,body) { console.log(body); } ); 或者可改成： const request = require('request'); const process = require('process') request( 'https://reqres.in/api/users' + process.argv[2], function (error,response,body) { console.log(body); } ); 使用POST法： const request = require('request'); const process = require('process')

request.post( { url:'https://reqres.in/api/users', form:{ name:'huli', job:'none' } }, function (error,response,body) { console.log(body); } );

四、純文字與自定義格式 純文字好處：可以定義任何想要的格式；壞處：要另外寫處理格式的function

五、歷久不衰 XML(Extensible Markup Language) 例：<?xml version="1.0" encoding="UTF-8?">

Tove Jani Reminder Don't forget me this weekend!

格式與HTML相似，利用標籤來標明屬性 <?xml version="1.0" encoding="UTF-8?">

2 Janet Weaver https://reqres.in/img/faces/7-image.jpg

六、JSON(Javascript Object Notation) const request = require('request'); const process = require('process')

request( 'https://reqres.in/api/users/2', function (error,response,body) { const json = JSON.parse(body) //()內是JSON格式的字串 console.log(json); } ); 印出後會是JSON格式的字串↓ { data: { id: 2, email: 'janet.weaver@reqres.in', first_name: 'Janet', last_name: 'Weaver', avatar: 'https://reqres.in/img/faces/2-image.jpg' }, support: { url: 'https://reqres.in/#support-heading', text: 'To keep ReqRes free, contributions towards server costs are appreciat ed!' } } 或是可以反其道而行，把物件轉為字串印出 const request = require('request'); const process = require('process')

request( 'https://reqres.in/api/users/2', function (error,response,body) { const json = JSON.parse(body) //()內是JSON格式的字串 } );

const obj = { name = ‘huli’, job = ‘none’ } console.log(JSON.stringify(obj))

七、透過網路交換資料的第一種方式：SOAP(SImple Object Access Protocol) SOAP透過XML傳遞資料，但資料格式較為複雜

八、RESTful 到底是什麼？ 不是協定，是一種「風格」。 ．新增使用者>>POST>>/new_user>>/users ．刪除使用者>>DELETE>>/delete_user>>/users/:id ．查詢使用者>>GET>>/users/data/:id>>/users/:id ．使用者列表>>GET>>/users_list>>/users ．更改使用者>>PATCH>>/update_user>>/users/:id

九、API 串接實戰 按照格式丟出request，依據回來的response做下一步動作 const request = require('request');

request.patch( { url:'https://reqres.in/api/users/2', form: { name:’hello’ } }, function (error,response,body) { console.log(response.statusCode) console.log(body) } );

今日心得：今天的部分有點難。

Lu-yeom commented 3 years ago

日期：110年5月8日(星期六)20:00~23:20 今日進度：[NET101] 網路基礎概論（搭配 JS 實作練習）+ 寫作業

課程筆記： 一、必學指令：curl curl + 網址>>會發GET一個request到網址，再傳回response curl -I >>只要傳回header，不要body

二、ping, telnet 與 nslookup nslookup>>可以解析出網域的IP ping>>測試是否連線成功 telnet>>去ping指定的port 最為人熟知的是telnet ptt.cc

三、hw1 const request = require('request');

request.get( 'https://lidemy-book-store.herokuapp.com/books?_limit=10', function (error,response,body) { let data; try { data = JSON.parse(body); } catch (err) { console.log('抓取錯誤',error); return; } for (let i = 0; i < data.length; i++) { console.log(data[i].id + ' ' + data[i].name) } }, );

四、hw2 const request = require('request');

const action = process.argv[2] const parameter = process.argv[3]

switch (action) { case 'list': listbooks(); break; case 'read': readbooks(parameter); break; case 'delete': deletebooks(parameter); break; case 'create': createbooks(parameter); break; case 'update': updatebooks(parameter); break; default: console.log('可用參數:list, read, delete, create, update'); } i function listbooks() { request.get( 'https://lidemy-book-store.herokuapp.com/books?_limit=20', function (error,response,body) { let data; try { data = JSON.parse(body); } catch (err) { console.log('抓取錯誤',err); return; } for (let i = 0; i < data.length; i++) { console.log(data[i].id + ' ' + data[i].name) } }, ); }

function readbooks(id) { request.get('https://lidemy-book-store.herokuapp.com/books/:id', function (error,response,body) { let data; try { data = JSON.parse(body); } catch (err) { console.log('抓取錯誤',err); return } console.log(data.id + '' + data.name) }); }

function deletebooks(id) { request.delete('https://lidemy-book-store.herokuapp.com/books/:id', function (error) { if (err) return console.log('刪除失敗'); return console.og('刪除成功') }); }

function createbooks(name) { request.post( {url:'https://lidemy-book-store.herokuapp.com/books', form:{name}}, function (error) { if (err) return console.log('新增失敗',err); return console.og('新增成功') }); }

function updatebooks(id, name) { request.patch( {url:'https://lidemy-book-store.herokuapp.com/books/:id', form:{newname,}}, function (error) { if (err) return console.log('更新失敗',err); return console.og('更新成功') }); }

今日心得：果然又是看題目無法應用的情形，硬是用上課筆記把程式碼拼起來明天繼續寫作業。

Lu-yeom commented 3 years ago

日期：110年5月9日(星期日)13:30~15:30 今日進度：寫作業

課程筆記： 一、hw3 const request = require('request'); const args = process.argv;

const country = args[2];

if (!country) { return console.log('Please enter country name'); }

request( 'https://restcountries.eu/rest/v2/name/{name}', function (error,response,body) { if (error) { return console.log('存取錯誤', error); } const data = JSON.parse(body); if (data.status === 404) { return console.log('cannot find country') }

for (let i = 0; i < data.length; i++) { console.log('============') console.log('國家:' + data[i].name); console.log('首都:' + data[i].capital); console.log('貨幣:' + data[i].currencies[0].code); console.log('國碼:' + data[i].callingCodes[0]); } })

二、hw4 const request = require('request');

const apiurl = 'https://api.twitch.tv/kraken/games/top'; const clientID = Luyeom;

request({ method: 'GET', url: apiurl, headers: { 'Client-ID': clientID, 'Accept': 'application/vnd.twitchtv.v5+json', } }, function (error,response,body) { console.log(body) })

三、hw5

請以自己的話解釋 API 是什麼

API(Application Programing Interface應用程式介面) 當要取得資源的時候，需透過介面、API來存取資料。例如提供資源的一方可透過API來定義存取者的一些限制，透過API，可以讓雙方交換資料。 假設今天天氣很熱你很想喝冰涼的手搖飲，但是外面太熱你不想出門去買，這時你想到自己常常光顧的飲料店有推出線上點餐功能，而且只要買一杯就可以免費外送，於是你透過線上點單點了一杯飲料，在家吹冷氣等飲料送來，這個線上點單的服務就是API。

飲料店→有實體店面和透過LINE或APP點單 線上點單服務→API 顧客→使用者 接單的店員→資料庫 飲料→交換的資源

請找出三個課程沒教的 HTTP status code 並簡單介紹

502 Bad Gateway→伺服器嘗試執行請求時，從上游伺服器接收到無效的回應。 202 Accepted→伺服器已接受請求，但尚未處理。 400 Bad Request→客戶端出錯，伺服器不能或不會處理該請求。

假設你現在是個餐廳平台，需要提供 API 給別人串接並提供基本的 CRUD 功能，包括：回傳所有餐廳資料、回傳單一餐廳資料、刪除餐廳、新增餐廳、更改餐廳，你的 API 會長什麼樣子？請提供一份 API 文件。

Base URL:https://v61265.com 說明 Method path 參數 範例 回傳所有餐廳資料 GET /restaurants _limit:限制回傳資料數量 /restaurants?_limit=10 回傳單一餐廳資料 GET /restaurants/:id 無 /restaurants/10 新增餐廳 POST /restaurants name: 餐廳名稱 無 刪除餐廳 DELETE /restaurants/:id 無 無 更改餐廳 PATCH /restaurants/:id name: 餐廳名稱 無

回傳所有餐廳資料 const request = require('request'); request.get( 'https://v61265.com/restaurants', function (error,response,body) { //請輸入你所需的內容 });

回傳單一餐廳資料 const request = require('request'); request.get( 'https://v61265.com/restaurants/:id', function (error,response,body) { //請輸入你所需的內容 });

刪除餐廳 const request = require('request'); request.delete( 'https://v61265.com/restaurants/:id', function (error,response,body) { //請輸入你所需的內容 });

新增餐廳 const request = require('request'); request.post({ 'https://v61265.com/restaurants/', form: { name //餐廳名稱 }, function (error,response,body) { //請輸入你所需的內容 });

更改餐廳 const request = require('request'); request.patch({ 'https://v61265.com/restaurants/:id', form: { name //餐廳名稱 }, function (error,response,body) { //請輸入你所需的內容 });

今日心得：四週的課程結束了，下週為複習週，我打算先做leetcode的題目，盡量多習慣Javascript的操作。