Basic Web Application

--- tags: yunnet course title: Basic Web Application slideOptions: theme: solarized transition: 'slide' --- ### Let's connect our project to ![](https://i.imgur.com/K2a0cQn.png) *Benson* --- ## Who am I? ---- ### Something about me... * 曾炳章 🧑 * Benson * Frontend developer & web designer 💻 * Learing backend & database 👨‍💻 * The director of pop dance club 🕺 ---- ### Something I want 2 tell... * Great oaks from little acorns grow 🌳 * Don't lose your curiosity & always exploring 🔎 * Working harder and harder and harder.... 🔥 ---- ⭐Always remeber: ==GOOD THING TAKE TIME :)== --- ## what is API? ---- ### <font color="#5151A2">A</font>pplication <font color="#5151A2">P</font>rogramming <font color="#5151A2">I</font>nterfaces(APIs) They abstract more complex code away from you, providing some easier syntax to use in its place. NOTE: * 應用程式介面應用程式介面是指電腦作業系統或程式函式庫提供給應用程式呼叫使用的程式碼，其主要目的是讓應用程式開發人員得以呼叫一組常式功能，而無須考慮其底層的原始碼為何、或理解其內部工作機制的細節。API本身是抽象的，它僅定義了一個介面，而不涉及應用程式在實作過程中的具體操作。 * 舉例(前後端分離, 不需要去動資料庫 ---- ## still can't understand? ##### let's watch some introduction video ---- {%youtube zvKadd9Cflc%} --- ## How to Use an API? ---- ### the ways can make request on server - HTTP - text formate(XML, JSON) ---- ### 4 common HTTP methods - GET - POST - PUT - DELETE ---- #### today we'll only use the GET method. --- ## JSON ### <font color="#5151A2">J</font>ava<font color="#5151A2">S</font>cript <font color="#5151A2">O</font>bject <font color="#5151A2">N</font>otation The most common formats found in modern APIs NOTE:JSON是一種由道格拉斯·克羅克福特構想和設計、輕量級的資料交換語言，該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。儘管JSON是JavaScript的一個子集，但JSON是獨立於語言的文字格式，並且採用了類似於C語言家族的一些習慣。 JSON 資料格式與語言無關。即便它源自JavaScript，但目前很多程式語言都支援 JSON 格式資料的生成和解析。JSON 的官方 MIME 類型是 application/json，副檔名是 .json。 ---- ### JSON advantages * Less Verbose * Readable * High compatibility ---- ![](https://i.imgur.com/PYanvLb.png) ---- ### JSON formate ![](https://i.imgur.com/ehvIa9h.png) ---- ### JSON example ``` { "crust": "original", "toppings": ["cheese", "pepperoni", "garlic"], "status": "cooking", "customer": { "name": "Brian", "phone": "573-111-1111" } } ``` ---- ### JSON formatter the tool u must need when reading JSON https://jsoneditoronline.org/ ---- ### input some JSON & tap "copy>" ![](https://i.imgur.com/2OAlXV2.png) --- #### trust you guys must understand somehow, #### so let's jump right into todays implementation #### :stuck_out_tongue_winking_eye::stuck_out_tongue_winking_eye: --- ### following is the API we will use today :D https://pokeapi.co/api/v2/pokemon/ ---- ## STEP 1 choose a pokemon u like the most & search its english name from google. (I use eevee as example) ![](https://i.imgur.com/yeIIBf7.jpg =300x300) ---- ## STEP 2 put your pokemon name at the bottom of the API link ---- #### here comes the info of the pokemon! ![](https://i.imgur.com/UgdabWO.png) ##### Get dizzy with the messy & massive data? ---- ## STEP 3 use JSON formatter to fomate it. ---- ![](https://i.imgur.com/jyMd1XQ.png) ---- ## Challenge time! ---- ### the keys we will use today - ID - type - weight - height - hp - attack - defense ---- #### find the relative key & value in JSON text! --- ## How to use JSON in JS? ![](https://i.imgur.com/jJ7P6MY.png =200x200) ---- ## there's two ways * Dot notation * Bracket notation ---- ![](https://i.imgur.com/OCwY62Y.png) ---- :heavy_check_mark: Dot Notation 🏆 * It’s a lot easier to read * It’s way faster to type. ---- :x: Dot Notation limitation: 1. Issue working with Identifiers 2. Issue working with Variables ---- ### Working with Identifiers ``` const obj = { 123: 'digit', 123name: 'start with digit', name123: 'does not start with digit', $name: '$ sign', name-123: 'hyphen', NAME: 'upper case', name: 'lower case' }; ``` ---- ### In Dot Notation ``` obj.123; // ❌ SyntaxError obj.123name; // ❌ SyntaxError obj.name123; // ✅ 'does not start with digit' obj.$name; // ✅ '$ sign' obj.name-123; // ❌ SyntaxError obj.'name-123';// ❌ SyntaxError obj.NAME; // ✅ 'upper case' obj.name; // ✅ 'lower case' ``` ---- ### In Bracket Notation ``` obj['123']; // ✅ 'digit' obj['123name']; // ✅ 'start with digit' obj['name123']; // ✅ 'does not start with digit' obj['$name']; // ✅ '$ sign' obj['name-123']; // ✅ 'does not start with digit' obj['NAME']; // ✅ 'upper case' obj['name']; // ✅ 'lower case' ``` ---- ### Accessing Property with Variables ``` const variable = 'name'; const obj = { name: 'value' }; // Bracket Notation obj[variable]; // ✅ 'value' // Dot Notation obj.variable; // undefined ``` ---- ### Quiz Time! ``` const variable = 'name'; const obj = { name: 'value', variable: '👻' }; ``` #### what is the value of following syntax ? ``` obj[variable] = ? ``` ``` obj.variable = ? ``` ---- ## ANS ``` const variable = 'name'; const obj = { name: 'value', variable: '👻' }; // Bracket Notation obj[variable]; // ✅ 'value' // Dot Notation obj.variable; // '👻' ``` ---- #### In next chapter, we'll move back to Vue instruction --- ### the tool we'll need to use in Vue.js * Vue.js methods & Event Handling * axios * async/await ---- #### Vue.js methods & Event Handling * in template ``` <div id="example"> <button v-on:click="greet">Greet</button> </div> ``` * in script ``` methods: { greet(event) { // `this` inside methods point to the Vue instance alert('Hello ' + this.name + '!') // `event` is the native DOM event alert(event.target.tagName) } } ``` ---- ### axios Promise based HTTP client for the browser and node.js ---- ## async / await NOTE:同步模式下，每個任務必須按照順序執行，後面的任務必須等待前面的任務執行完成，非同步模式則相反，後面的任務不用等前面的，各自執行各自的任務,await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步，當 async function 的內容全都結束後，會返回一個 promise，這表示後方可以使用.then語法來做連接 ---- ``` function yayOrNay() { return new Promise((resolve, reject) => { const val = Math.round(Math.random() * 1); // 0 or 1 val ? resolve('Lucky!!') : reject('Nope 😠'); }); } async function msg() { try { const msg = await yayOrNay(); console.log(msg); } catch(err) { console.log(err); } } ``` ---- #### End of the basic instruction! #### you're ready to finish the project :D --- ### first, open your nuxt project ---- ## STEP 1 type in the "methods" in script ``` methods:{ } ``` ---- ## STEP 2 create your function ``` methods:{ async search(){ } } ``` ---- ## STEP 3 type in the following code ``` methods:{ async search() { const poke = this.pokemon.toLowerCase() this.res = await this.$axios.$get( `https://pokeapi.co/api/v2/pokemon/${poke}` ) this.pic = `https://pokeres.bastionbot.org/images/pokemon/${this.res.id}.png` this.test = true } } ``` NOTE:description the code. ---- ## STEP 4 run the code ``` $ yarn dev ``` ---- ## finish! ![](https://i.imgur.com/uqHOUUv.png =600x500) --- ## THX for listenling! hope u guys still sober .. btw... ---- ![](https://i.imgur.com/Q0btpzI.jpg)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.