本篇文章同步发表在 HKT 线上教室 部落格，线上影音教学课程已上架至 Udemy 和 Youtube 频道。另外，想追踪更多相关技术资讯，欢迎到 脸书粉丝专页 按赞追踪喔～

前言

哈罗～大家好，我是 KT，这次报名参加第13届【2021 iThome铁人赛】Mobile Development 行动开发组，这次参赛主题，选择曾经贴近你我身边的实际例子：「口罩地图」。

2020年初，爆发新型冠状病毒肺炎(COVID-19)疫情，当时口罩抢破头，面对一罩难求的情况下，政府管制口罩禁止出口，国内采实名制，民众可持健保卡至药局购买。在政府公开口罩库存资料，透明呈现每间药局即时库存，大家不用再辛苦挨家挨户的跑遍每间药局询问有无口罩，方便民众购买到口罩，因此在当时诞生出了「口罩地图」等相关服务应用程序。

此图片取自：IT邦帮忙

口罩地图，已经过时了？

这个答案是肯定的，随着口罩大量生产充足，人人皆有医疗口罩情况下，的确再也用不上手机里面的口罩地图，或许也不知多早以前就已经默默地从手机应用程序当中删除。曾经多麽迫切的需要，但伴随着时间，整个环境的变化。口罩地图，已经过时了！

那爲什麽这次【2021 iThome铁人赛】选题，要挑这个过时的主题呢？

或许我们再也用不上口罩地图、但实际上这系列为大家准备的三十天的文章，我们学到的不会只是口罩地图的开发，而是一套紮实 Android 开发应用程序的方法。透过手拉手，一步一步实际动手做这个「口罩地图」，从入门开始，学习如何使用 Kotlin 程序语言，并且透过实际的应用，来串接真实的口罩即时库存公开资料，从实作中来学习如何开发一款 Android APP 应用程序。文章内容包含了; 如何使用主流 OkHttp 第三方 Library 与 GSON 处理网路连线串接实际 API 应用、如何使用 TextView、Button、RecyclerView、Spinner、Toast、AlertDialog 等常用的 UI 元件，且进一步的在实战中介绍进阶 Kotlin 的 Collection 语法，如何灵活去运用，最後学习如何获取使用者位置权限、判断是否开启 GPS、学习如何使用 Google Map 结合口罩资料，在地图上，使用图钉 Maker 与自定义客制化资讯视窗，显示每间药局名称与口罩数量。

有了这套开发经验，其实我们只要将资料来源转换成是天气，它就会是一款气象APP；同理换成 YouBike 微笑单车，它就是可以随时查询当下每站租借单车状态的 APP；如果是公车进站资讯，就可以变成等公车 APP，以此类推。

不问国家能为我们做什麽，只问我们自己能给大家带来什麽，所以我希望可以留下这套开发经验，继续传承分享下去，下次国家再需要我们的时候，我们已经准备好了，口罩国家队。

大纲

目前预计 30 天准备挑战的，根据内容分成了六个部分，整体规划大纲，如下：

Part 1. Go 准备开始

Day 1：过时的 Android 口罩地图 APP 应用程序 ?!
Day 2：Kotlin 程序设计基础入门 (1)
Day 3：Kotlin 程序设计基础入门 (2)
Day 4：Kotlin 程序设计基础入门 (3)
Day 5：口罩即时库存开放资料
Day 6：建立口罩地图APP专案
Day 7：git 版本控制

Part 2. 网路资料处理

Day 8：OkHttp 获取网路资料方式
Day 9：JSON 资料解析
Day 10：Gson 资料解析
Day 11：ProgressBar 忙碌圈圈
Day 12：封装 OkHttp

Part 3. UI 使用者介面元件 - RecyclerView 滚动式列表显示口罩资料

Day 13：RecyclerView 基本资料列表显示
Day 14：RecyclerView 进阶项目布局
Day 15：RecyclerView 卡片式项目布局
Day 16：RecyclerView 跳页&资料传递(1)
Day 17：RecyclerView 跳页&资料传递(2)

Part 4. Kotlin 过滤＆分组语法介绍与应用

Day 18：Kotlin 过滤(filter)集合资料用法
Day 19：Kotlin 分组(groupBy)集合资料用法
Day 20：县市乡镇小工具包(util)

Part 5. UI 使用者介面元件 - Spinner 下拉选单实战应用

Day 21：Spinner 下拉选单基本用法
Day 22：Spinner 下拉选单结合县市乡镇小工具

Part 6. Google Map 地图实战应用

Day 23：获取位置权限
Day 24：检查GPS状态
Day 25：获取位置经纬度
Day 26：Google Map 范本学习(1)
Day 27：Google Map 范本学习(2)
Day 28：Google Map 显示目前位置
Day 29：Google Map 自订资讯视窗
Day 30：Google Map 结合口罩资料 ＆ 铁人赛最後一天

主要 UI 画面规划 Wireframe

这 30 天的铁人赛挑战，将要实际自己动手来刻出以下这几个画面：

Wireframe 指的是 UI 线框草稿图，在还没有实际定案的画面出来且还在讨论规划整体流程与画面阶段时，可以先用简单的线框拉出大概的版型，不用让人满脑问号去意会、凭空口说去想像画面。目前业界主流常用的工具有：Figma、Sketch 和 Axure RP。

药局名称列表页 Wireframe

第一个主要 UI 画面上，我们将从 APP 最常用的资讯列表清单开始，在清单中列出所有药局名称的可滚动式列表。将会介绍如何使用 Recyclerview 和 Adapter 且同时搭配政府公开资料呈现出全台湾所有药局名称。

县市、乡镇下拉选单与药局详细资讯页的 Wireframe

有了基础的滚动式列表建立经验後，我们将进一步，在画面新增两个下拉选单，分别用来选择县市与乡镇区域，透过 Kotlin 的 Collection 语法，从全台数千家药局，滤出用户选择区域的药局资料，并且点击列表中的项目，可以跳转到该间药局相关资讯详细页。

口罩地图 Wireframe

透过手机定位座标位置，在 Google Map 上透过图钉的图示显示附近区域的药局，点击图钉图示会以卡片方式呈现该间药局名称、大人与小孩口罩数量。点击卡片会跳转到该间药局相关资讯详细页。

着作声明

「Android 口罩地图入门实战 30 天 (使用 Kotlin 程序语言)」中提供所有的图文、程序码与影片教学，以下简称「本资料」。「本资料」，允许使用者重制、散布、传输以及修改着作，但不得为商业目的之使用。使用时必须注明来源出处: HKT 线上教室，HKT(侯光灿)。

商标内容声明

「本资料」，其中所引用之各商标及产品名称分属其合法公司所有，「本资料」，部分采用开放源始码、图文与影音等多媒体，引用自於网路，皆属於其原作者之所有，「本资料」引用纯属介绍之用，并无任何侵权之意，特此声明，其中内容若有不妥，或是侵犯了您的合法权益，请麻烦通知我们，我们将会迅速协助将侵权的部分移除，谢谢!

参考资料

HKT 线上教室
https://tw-hkt.blogspot.com/

Freepik
https://www.freepik.com/

那今天【iThome 铁人赛】就介绍到这边罗～

顺带一提，KT 线上教室，脸书粉丝团，会不定期发布相关资讯，不想错过最新资讯，不要忘记来按赞，追踪喔！也欢迎大家将这篇文章分享给更多人喔。

我们明天再见罗！！！掰掰～