DAY03 - 前端与後端的沟通起点 - API

前端除了要切版与设计师的沟通之外，在资料串接的部分，就是与後端工程师沟通的时候了! 後端要怎麽把资料给前端呢？在开始串接前通常又会做哪些事呢？

01.API规格文件 - 前後端沟通的规则纪录

後端开发完API後，会有一份API规格告知前端，通常会整理成文件有可能是word、也有可能是线上产的swagger API Document...

• swagger API文件范例 （取自 https://editor.swagger.io/ ）
  

• word API文件范例
  

但不论怎麽给，这份文API文件基本上会包含几个部分：

1. URL(路径): 要从API存取资料，当然最重要的就是要知道位置，不然要去哪里拿资料呢

2. Method(方法):用什麽方法来使用这只API，常见的如：GET 拿取资料、POST 新增修改资料、DELETE 删除资料，还有其他像 PUT、UPDATE...

3. Parameters(参数):

   • header
   • path
   • Query

4. Request body:透过request body要把前端资料透过传给API，通常用在POST的方法

5. Response body: API预期回覆给你的资料，最常见的格式为json格式

6. Error Description: 当有错误时，API会回传给前端的错误代码或讯息

02. 确认API是否有缺漏

拿到API文件後要怎麽确认API没有问题呢? 通常再开始真正撰写前会将页面图稿、UI Flow和规格一起对一遍，可以从几个方向确认规格是否缺漏:

A. 页面上的资料

这是最直观可以检查的，所有页面上的变动资料，都应该要可以从API中取得。若没有的话，就可以准备Hello後端我有问题要问你XD

B. 隐藏的资料

虽然画面上不能直接看到，但是隐藏的资料。
有听起来超问号吗XD 来举个例子吧，比如一个最新消息的详细页面，底下有上一则和下一则的按钮。我们要怎麽知道点了下一则要去哪里呢?这就是要由API告诉我们下一则的不管是ID或是路径连结，前端在把上一则或下一则的URL放进超连结中，让使用者可以顺利到达对应的页面。

C. 隐藏的逻辑

看不到的除了资料，还有逻辑。比如：当使用者点了五次下载後，前端要显示问卷画面。使用者点击下载的次数是由後端纪录。那当五次到了，需要由後端告知前端，让前端再将问卷画面显示出来。单纯看画面可能会无法直观地发现，但当想过一遍流程的时候就会注意到了。

画面上的资料看图很直观也是最简单可以发现，
隐藏的资料和逻辑，除了看图之外，更重要是要从流程去整个想过一遍比较容易确认喔

确认API是否有缺漏这件事，目的除了如果发现API有缺漏可以赶快跟後端工程师说之外，
也是让自己在开发前，先看这规格好好的想过一遍再做串接的时候大致上会怎麽做的阶段。

03. 确认API是否有真的可以打通

文件、图稿与FLOW的对应缺漏都对过後，接下来我们要真的来试试看这一堆记录在文件上的文字能不能用了。这里就要介绍一个web API测试必备工具Postman（对！就是下图这个火箭人～～）

• 官方下载点 : 下载连结
• Chrome 扩充版 : 下载连结

(以下图片取自postman官网)

透过Postman可以实际上测试文件中的API是否都有办法取得资料。确认API的权限方式、填入URL、Methods、参数等等对应的规格，按下send就可以确认这只API是不是成功拿到response。或者拿到的response是不是跟文件上写的一致。

若後端给的API文件是线上整合的类型，如上述的swagger api文件网站，也可以直接用他预设的功能执行API是否能成功取得response，就不用额外再用postman另外设定罗！
这个阶段的重点是确认API能顺利打通，工具的话也是依照专案中获得的东西来决定工具，没有一定只能用postman

从取得API文件、快速确认规格想过一遍流程检查缺漏、到实际确认每只API的是不是真实可以执行顺利取得response。在开工前的准备大致上就是这样~
明天我们就要来准备开工串串API~~~