在開始動手做之前，我們先來看看這次施工綱要：

事前準備

Dart:

• Dart Document：Dart官方文件，學習使用dart語言的好地方
• Dartpad: dart playground，任何對於dart語法不確定的地方都可以在這裡嘗試

Flutter:

• Flutter Documentation:可以在這邊找到Flutter框架的一切知識
• pub.dev:這邊是flutter官方統一管理的第三方套件庫，可以在這邊找到他人寫好的package並引進專案中（別忘了遵循各package的使用規範喔！）

Debug

• 想要在開發過程中有效率地除錯，要先來了解我們有哪些工具可以使用。

• 上一篇在VSCode點啟動專案的debug模式之後，可以看到介面上出現一排按鈕
  

• 淺藍色系列按鈕分別是：

  • Pause：暫停目前行為
  • Step over: 跳過即將要執行的method，直接停在接下來要執行的那行
  • Step in: 進入即將要執行的method並停在第一行
  • Step out: 退出當前要執行的method的作用域，停在接下來要讀取的地方
  • 舉個例子說明，比如說我在專案之中設定一個break point(在行數的前面點出紅色圓點)，程式執行到這行就會自動停止，等待我下指示。那此時step over, step in, step out的行為如下：
    
    運用這些功能可以讓我們更仔細地觀察程式的運作，便於抓出過程中造成異常的細節。

• 其他按鈕分別是：

  • Hot Reload： 立即運行將剛修改的程式碼，將改動顯示在畫面上。這就是我們前面提到的，Dart在debug模式以JIT方式運行，可以馬上編譯我們改動的細微部份並立即執行，不用重啟app。
  • Restart: 重啟app，app會遺失所有暫存的資料，回到剛啟動的狀態。
  • Stop: 關閉app
  • Open Devtools Widget Instpector: 在IDE開啟Devtools Widge Inspector視窗，用於UI結構debug

• 此外，在運行debug mode的app時，也可以點選下方的DevTools，選取Open DevTools in Web Browser，就可以在瀏覽器開啟一個功能齊全的Flutter debug工具介面：
  

  
  在這裡可以進行許多進階的操作:

  • flutter UI 結構debug
  • 運作效能監控
  • CPU運作狀況分析
  • 記憶體監控
  • debug功能
  • app運行過程的紀錄
  • app檔案大小分析

  關於DevTools在文件中有更詳盡的說明，它是全方位監測我們app、協助我們找到問題並優化的強力助手。

APOD 專案

• 這次我們要來做的App源自於NASA的APOD(Astronomy Picture of the Day)每日一天文圖，我們將之改成App版，並且加入一些常見的功能和UI規劃。
• 為什麼選用這個專案呢？因為APOD是我最初開始碰app開發時，做的第一個練習。當初只有實踐call NASA APOD api抓回圖片和描述並呈現在頁面上的部分，這次我想要順便整合一般的app大致會用到的面向進這個專案中。

結構層面

• 分為 主頁、月曆頁、收藏頁

主頁

• 主要顯示天文圖片和描述文字的地方，另外下方有文字輸入框可以加入自己的註解。圖片的右上角放上「加入收藏的按鈕」，被加入收藏的頁面會被儲存起來，可以在收藏頁被搜尋到。如圖示：

  

月曆頁

• 顯示月曆元件，紀錄每一天的天文圖是否查看，點選日期即可跳到當天的天文圖。月曆上，每日的格子會有不同顏色的點，用以標註是否已看過該天的天文圖片。如圖示：

  

收藏頁

• 顯示搜尋框和收藏列表，可以藉由搜尋框輸入標題來找到自己的收藏。點選列表中的項目，可以跳到該收藏的圖片和描述頁面。如圖示：

  

功能層面

1. 可以取得當日的天文圖片和描述
   • 所需知識：網路資料交換、圖片元件、文字元件
2. 可以對該天文圖加入自己的註記
   • 所需知識：按鈕元件、文字輸入元件、元件狀態管理
3. 可以將每日圖片加入我的最愛以利日後回顧
   • 所需知識：app狀態管理、頁面切換、Icon元件、列表元件
4. 增加日曆元件，點選日期可以看見當日的天文圖
   • 所需知識：使用package，客製化元件
5. 收藏的圖片、標題和說明以及點選過的日期都會被保存起來，下次開啟app仍然要顯示正確的資料
   • 所需知識：手機資料存儲

看完app的施工計畫，各位是否已經躍躍欲試了呢？
什麼？圖畫太醜看不懂我在供啥米碗糕？

好的，那我們就直接開始吧！