編寫[ 串接API及篩選資料 ]: API , 處理市場反饋 .改善問題. 關鍵字搜尋

這單元會重點在當做好一個功能小專案後, 接受到市場反饋表示某個功能不好用, 收集缺點, 將其缺點城裡小專案, 按照一樣的編寫流程提出分析問題並且改善.

API 串接 , 它是整個全部網頁面功能方面的專案的一部分, 也是小專案

舉例：

電影網頁在專案規劃的時候,, 為節省工程師設計時間, 透過API 串接 , 取到第三方的資料數據 , 並直接製作成電影清單

透過之前的小專案搜尋功能, 讓使用者能透過點擊SeachBar 與API 資料配對.

通常應用程式，這個程式如果包含需要ＡＰＩ功能

需查看特定的詳細資料（也可能很複雜）, 整個串接過程其實也是個專案.

Step1. 分析問題

打造一個電影清單, 透過嵌入ＡＰＩ方式完成 ,

後續能透過搜尋功能, 讓使用者在清單中快速找到要看的電影,

Step2 . 拆解問題：

1. Search Bar 元件 (已完成）
2. 從Search 綁定事件點擊, 觸發搜尋功能 （已完成）
3. 串接ＡＰＩ並且確認資料是否正確
4. 在SeachBar 輸入內容與清單配對的標題相符合
5. 結果回傳到網頁上, 尋找答案和陣列

Step3. 尋找答案 及方法：

• 元件ＵＩ＿使用bootstrap 4 ( 完成）
• 事件點擊件＿ 透過在按鈕上設置監聽功能去綁定事件( 完成）
• 表單的預設行為取消 < //////非常重要> <非常著要> 有附圖( 完成）
• 串接API 暸解檔案內容, 並且測試.
• 取得 search bar 的 input 值
• 查看 data 變數裡存放的電影清單，比對 input 值和 title 屬性
• 篩選出「title 含有 input 值」的電影，產生一組搜尋結果
• 運用已經寫好的 displayDataList 函式，將篩選後的輸出至畫面

STEP4.製作出自己的編寫流程

前置框架 ：

• 繪製區塊＆html 標籤
• FIGMA做群組, 及HTML架構.
• 編寫main.js , 將區塊做註解及定義

編寫 ： HTML ＆ JS

（一）, 串接ＡＰＩ並暸解內容及測試：

先閱讀官方文件後：

ALPHACamp/movie-list-api

這裡不談如何看檔案, 之前有撰寫過ＡＰＩ串接

確認檔案路徑：

path ：https://movie-list.alphacamp.io/api/v1/movies/

.get ( ` path…. `)

.then ( 透過respone 函數 , 取得伺服器回應的檔案…）

DevTool 查看所有console.log 各取得什麼樣的「 陣列資料

console.log ( response ) 取得檔案

console.log(response.data) , 取得檔案

console.log(response.data.results) 取得檔案

  axios
    .get(`https://movie-list.alphacamp.io/api/v1/movies/`)
    .then((response) => {
      console.log(response)
      console.log(response.data)
      console.log(response.data.results)
    })
    .catch((err) => console.log(err))

測試ＯＫ後 , 可以整體規劃定義的變數及內容 ：

可以參考之前的文章.ＡＰＩ 編寫ＪＳ檔的流程

定義變數：（重新整理更簡潔）

const BASE_URL = 'https://movie-list.alphacamp.io'
  const INDEX_URL = BASE_URL + '/api/v1/movies/'
  const POSTER_URL = BASE_URL + '/posters/'
  const data = []

  axios.get(INDEX_URL).then((response) => {
    data.push(...response.data.results)
    console.log(data)
  }).catch((err) => console.log(err))

定義容器：

Const data = []

透過 . push 將ＡＰＩ資料加入容器內

data.push(…response.data.results)

此方法是因為 間接資料進來都是用const 無法更改的變數

避免串接時發生, 變數名稱相同的衝突.

把資料放進網頁：

function displayDataList (data) { 
let htmlContent = ‘’ 
data.forEach(function (item, index) {
 htmlContent += ` 
<div class=”col-sm-3">
  <div class=”card mb-2"><img class=”card-img-top “ src=”${POSTER_URL}${item.image}” alt=”Card image cap”> 
<div class=”card-body movie-item-body”> <h6 class=”card-title”>${item.title}</h5>
 </div>
 </div> 
</div> ` }) 

dataPanel.innerHTML = htmlContent

（二）.取得seachBar 內輸入的input 值

let input = searchInput.value  
      //searchInput 是 ＤＯＭ ＝>Html input..
console.log( input )        
     
     ///要做一個確認

放入searchForm.addEventListener(‘submit’, event => { ……insert Here ….}

（三）. 查看變數data 內存放值，並比對 input 值和 title 屬性

1. 查看變數data ：

確認要比對資料的屬性 .

資料結構： (擷取部分） (可以用console.log) 或（官方文件會公佈）

let data = [
  { 'id': 1, 'title': 'Ant-Man', 'release_date': '2015-07-14' },
  { 'id': 2, 'title': 'Black Panther', 'release_date': '2018-02-13' },
  { 'id': 3, 'title': 'Ready Player One', 'release_date': '2018-03-28' },
  { 'id': 4, 'title': 'Ant-Man and the Wasp', 'release_date': '2018-07-04' }
]
........
....有上百個data.id 

鎖定要比對的屬性： . title

2. 比對input 和 data 內屬性 [ .title ]：

使用方法 filter 過濾data 內的資料 , 比對

（ data.title ＝＝＝ input )

filter 用法：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

// 取得SearchBar input .value //
let input = searchInput.value
 console.log(input)
let results = data.filter(
movie => movie.title === input    //如有符合的 title === input
)
displayDataList(results)
//則刷新並且輸入電影img 和 title
console.log(results)

3. 「title 含有 input 值」的電影，產生一組搜尋結果

搜尋功能過濾清單已經ＯＫ測試！！可是…..

缺點 : title 必須完全和input 的值(value) 一樣才會成功,

注意： 目前功能上只能用完全一樣的名稱才能搜尋

收集市場回饋 ：

市場上使用者客戶表示, 目前功能上只能用完全一樣的名稱才能搜尋,

非常不方便

分析問題 :

希望在搜尋時, 可以透過關鍵字, 快速找到所要的資料清單

很多市場客戶無法記得TITLE 完全的名稱

拆解問題：

缺點 : title 必須完全和input 的值(value) 一樣才會成功,

新增：用關鍵字篩選內容 , 透過比對字串的方式, 更易搜尋

尋找答案 及方法：

1. 關鍵字篩選內容 ,可以運用 includes 來比對input 的字串.

includes

String.prototype.includes()

example :

let input = 'pineapple'
input.includes('apple') // true
input.includes('banana') // false

2. 用 toLowerCase()，把 input 和 title 都改成小寫，再進行比對。

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase

製作出自己的編寫流程

searchForm.addEventListener('submit', event => {
    event.preventDefault()
    let input = searchInput.value.toLowerCase()
    let results = data.filter(
      movie => movie.title.toLowerCase().includes(input)
    )
    console.log(results)
    displayDataList(results)
  })

比對字串

經過整理加入 include :

searchForm.addEventListener('submit', event => {
    event.preventDefault()
    let input = searchInput.value
    let results = data.filter(
      movie => movie.title.includes(input)
    )
    console.log(results)
    displayDataList(results)
  })

ant 小寫 無法字串找到 ：

Ant-Man and the Wasp

所以必須將 input 和 title 都改成小寫，再進行比對。

字串比對＿： 將title 改成小寫

searchForm.addEventListener('submit', event => {
    event.preventDefault()
    let input = searchInput.value.toLowerCase()   //加入toLowerCase
    let results = data.filter(
      movie => movie.title.toLowerCase().includes(input)  
    )
    console.log(results)
    displayDataList(results)
  })

ant 小寫可以搜尋到 涵蓋大寫的Ant

END ….