5/17/2018

電量提醒

專案動機
    在之前使用sony手機的時候,過充導致電池膨脹,因此我養成了只將電池充到一定程度的習慣,另外iphone內建的電量過低提醒並不會發出持續的音效,不容易被人注意到,所以我決定做出會發出持續音效的電量提醒app。

專案功能
    主要功能分爲電量上限提醒,與電量門檻提醒,電量上限提醒即在手機電量超過使用者設定的電量時,會發出本地通知,此通知會附帶持續一段時間的音效,電量上限提醒的主要功能為避免過充,的確iphone在電量充滿時會斷電並放電來避免過充,但是在電量足夠時拔掉插頭這個動作,必然在對過充的防範上比一直插著插頭更為有效,電量門檻則是在電量低於使用者設定電量時,會發出本地通知與音效。

demo
初始狀態 label會標示為stop

利用pickerview挑選完電量之後,按下battery upper limit按鈕觸發計時器
當手機電量>設定電量,程式將發出本地通知


按下battery lower limit按鈕
當手機電量<設定電量,將發出一本地通知






專案實作
    在使用者使用Pickerview選擇好電量並按下電量提醒按鈕之後,程式會啟動計時器(Timer),計時器每分鐘會判斷一次手機電量(在電量40到80之間iphone充電大約每分鐘增加1%)是否高於或低於 使用者設定電量,若條件達成,計時器會發送一帶有音效的本地通知。
    iphone對後台程式時間限制是十分鐘,若要讓程式固定在後台執行,需要讓程式在背景播放音樂,因此為了讓程式在後台正常執行,該程式在開始運行時,會在背景播放無聲音樂。

專案特色
    1.較為有效的提醒
        apple內建的電量提醒只有一聲簡單音效,若在非使用手機的情況下,或是吵雜環境,像         是手機放在桌邊撰寫報告時、手機放在口袋周圍路人很多時,透過播放持續一段時間的           提醒  音樂,與時間間隔為一分鐘的本地通知,電量提醒更加容易讓人注意到。
    2.可選擇的電量門檻
        對於一些在意電池健康的使用者,可選擇的電量門檻能幫助這些使用者有效控管電量,
        有數據統計手機鋰電池將電量維持到40%到80%電池耗損比電池充滿的耗損還要低,                 iphone對電池充電的設計也是在40%到80%之間大約為1分鐘1%,若電量小於40%或大於           80%充電速度則會降低。
 

期末程式大綱

由於想不到期末專題要做些什麼,想了很久之後決定做一個調色盤。
去查了一下 Play 商店(沒有蘋果手機)後,發現貌似沒有很多人在做調色盤,而唯一一個高分的調色盤也沒有我想像中的效果,因此決定做一個調色盤出來。

我理想中的調色盤應有兩顏色對比,以及多顏色對比,在 Play 商店中的App只有兩顏色對比,以及色弱測驗(說實在我覺得很沒必要)。

我理想中的多顏色對比,大約16個方格,每個方格可以點進去調RGB色彩,並且在畫面上顯示顏色,至於兩色對比,則是一個頁面上有兩個大的畫布,而下面可以調RGB色彩。

垃圾車來了

本文章同步刊登於我的部落格,並且會不定期更新資訊。

前言:
這是一個自己想題目、自己練習實作的簡易App。
這學期由於修了資工系的iOS程式設計課程,老師要大家期末想一個專題並發表。
之前其實摸了Xcode一段時間,偶而看一看網路上的教學,並且跟著實作,做出來就覺得酷斃了!
不過隨著App建構的複雜性越來越高,遇到的問題就排山倒海的壓在我身上。
一個很有感的例子是ViewController與ViewController之間的傳值動作,以前都是在一個ViewController上弄簡單的功能,這幾個月開始照著參考書上的教學(iOS 10 App程式設計實力超進化實戰攻略那本,買很久了  前陣子終於全部看完了),讓我開始注意到這個功能的運作。其實說實在好像也不難,但沒做習慣好像隔一陣子要再做同樣的東西又會忘記(是我老了嗎??
現在則是要從頭刻一個App,希望接下來到期末之前能如期完成。

概念與構想:
原本是想說做一個仿Instagram的App,但是做了一半感覺好像也沒什麼特別的地方。
後來又想到做一個點餐App(類似海底撈那種),可是前幾天畫了原型圖,搞了很久,覺得對使用者介面的排列好像不符合邏輯,所以又放棄,可能以後有時間再做。
今天終於是讓我想到了一個比點餐系統簡單一點、又可以學到新的API,那就是倒垃圾App。
說白了就是看看現在垃圾車到哪裡了,藉以告知使用者大概要下樓倒垃圾了。
(你問我  阿不就聽垃圾車的聲音就好,做這個App幹嘛?   阿我就單純做一個技術試驗嘛...,現在做的功能可能比較陽春,但之後加上比較完整的功能,實用性也許會更高一點,不要這麼快就打擊我......



進度:
    0516 - 
  1. 專案初始化,並配置基礎介面,包含Auto Layout的設定。
  2. 主頁側邊欄佈局設定。

    0517 - 
  1. 完成主頁及詳細頁面的TableView實作和遞值。
  2. 專案依循MVC重整。
  3. MapKit實作(用於詳細頁面)。

    0527 - 
  1. 依據手機GPS及fetch的資料,計算使用者與垃圾車的距離,顯示於UITableViewCell上。
  2. bug修復:主頁面cell選取後不會一直呈現反灰的狀態、地址能完整呈現給使用者。

    0528 - 
  1. 將所有的ViewController側邊欄正確繫結並可以生成ViewController實例。

    0531 - 
  1. 用Static TableViewController完成設定介面排版。
  2. 配置設定介面聯繫項目的三個按鈕選項。
  3. 在三個ViewController(主頁面、政府公告、設定)加入dim效果,使使用者專注於側邊欄

    0606 -
  1. 按照使用者與垃圾車距離做近到遠的排序,並顯示在主頁面TableView。
  2. 政府公告資訊頁嵌入UIWebView,用於顯示政府公告。
  3. bug fixes (UIWebView階層排列於dimView下)

    0607 -
  1. bug fixes.
  2. 設定頁面的欄位高度調整至50pt(更高)。
  3. 主頁面新增重新整理按鈕。
  4. 配置背景圖片的ViewController。

    0610 -
  1. remove redundant codes.
  2. 新增更多背景圖片至BackgroundImageViewController
  3. 主頁面大標題會根據現在時間更改向使用者的招呼內容

    0614 -
  1. 新增通知中心提醒給使用者(為Demo方便,僅使用手動觸發方式)
  2. 新增Animation Chaining
    0619 -
  1. model結構修改。
  2. 完成UITableViewCell按距離遠近呈現資料。

原型設計:
對於原型設計有許多工具可以幫助建立UI、連結關係,但我自己還是比較習慣以紙本手繪的方式描繪出心裡想要的結果,後續修改只要用橡皮擦塗塗改改就好,就不用一定要坐在電腦桌前開軟體來改東西,方便也節省時間。
這裡展示一下原型的樣子:


主頁面與公告頁面手稿

設定頁面手稿

程式運作流程:
基於政府近幾年有在推動開放資料平台,這次實作嘗試使用政府提供的Open Data做介接。原理如下表:
簡單來說,就是在程式啟動後先去網路上把資料抓下來,並進行解碼。最後透過所取得的使用者位置資料,來計算所有的垃圾車與使用者的相對距離,並呈現在UITableViewCell中。

預期成效:
    已完成:
        1.Open Data資料串接
        2.在地圖呈現垃圾車位置
        3.遵守MVC架構
        4.計算使用者與垃圾車距離
        5.整合政府公告資訊
        6.通知中心配置
        7.根據使用者距離遠近排序
    未完成:
        1.資料接收頻率
        2.中/英文化
        3.客製化背景圖片設定

Demo:


參考資料:
1.垃圾車資料來源:http://data.ntpc.gov.tw/od/detail?oid=28AB4122-60E1-4065-98E5-ABCCB69AACA6#closeDataInfo
2.json解析(Swift 4新增的類別):https://codeburst.io/easy-json-with-swift-4-1-419323ca7638
3.位置距離換算:https://stackoverflow.com/questions/45627533/tableview-sort-by-distance-from-current-location-parsing-locations-from-json
4.Swift MultiThread :https://cdfq152313.github.io/post/2016-10-14/
5.json物件解析(JSONDecoder):Apple官方文件

即時日幣換算

由於個人時常注意日本匯率與有時會購買用日幣為單位的東西,所以想要製作一個即時匯率轉換的小小ios app,介面上主要以日幣即時匯率顯示為主,打算抓台灣銀行的即時資料。並且有可以輸入日幣商品價格和匯率即時顯示台幣價格。如果未來有時間會加入其他幣別。
進入主畫面前的讀取畫面


含稅換算
主畫面開啟狀態
不含稅換算
APP ICON

左方圖片為進入程式後初始畫面,上方會顯示即時台灣銀行買入賣出匯率,下方會顯示匯率抓取的時間,在每次開啟程式時都會抓取一次資料.而換算部分可以做到即時換算,換算適用當時台銀現金賣出匯率*日幣價錢算出來(如中間圖片).而在中間做了一個稅率switch
,如果switch為開就會再換算時在換算後的台幣再加上8%的消費稅的金額(如右方圖片)
實際成品就如上圖所示.
參考資料: https://medium.com/@kuanhuachen/用-swift-取得網頁資料-c022335e4b05

翻牌遊戲

我想要製作一個翻牌遊戲,翻到兩個一樣的圖案就消掉,然後有計算分數的功能,可以的話希望可以加入背景圖以及背景音樂。

APP原型:

根據教學先做出翻牌&加牌,在自己加入隨機洗牌以及Replay按鈕以及背景圖&音樂。按下左圖的Play按鈕之後,可以進到右圖的遊戲畫面。下面的Flips代表你現在總共翻了多少次牌,當你翻到兩個一樣的牌時,這兩張牌就會消失。當全部的牌都完成配對後,右下角會出現Replay的字樣,按下去後會回到左圖,即可開始新的遊戲。

APP成品:

遊戲的初始介面,按下Play即可開始遊玩


遊玩畫面,Flips代表所翻牌的次數,翻到一樣的圖案會消除(有背景音樂)


成功破關,出現Replay字樣,按下回到遊戲初始介面

程式介紹:首先我會從字串陣列random選出一個表情符號重複塞進button陣列2次,接著把這個表情符號從字串陣列中移除(避免重複選取),重複執行此動作直到button陣列被塞滿表情符號。接著把牌堆洗牌,然後當我按下某張牌時,變數flipsCount+=1,並且執行檢查的副程式,如果在這牌堆中的isFaceUp都是false而且不計算isMatch = true,把這張牌的isFaceUp變成ture。接著我按了第二張牌,又執行了一次副程式,這時會發現牌堆中有一張牌isFaceUp == true,就會把現在這張卡和那張卡做比較,如果兩張牌圖案一樣,isMatch設定為true並且把按鈕設定成透明顏色並鎖定;如果不同,兩張卡的isFaceUp = false並把卡蓋回去。最後當isMatch == 16時,把原本設定成透明的replay按鈕顯示出來。


未來展望:連線模式、隨機可愛背景、隨機表情符號、自訂大小、歌單、翻到兩張一樣牌的時候自動消除,不會等到下一動才消除...等等

參考資料:https://www.youtube.com/watch?v=71pyOB4TPRE&list=PLPA-ayBrweUzGFmkT_W65z64MoGnKRZMq


6/17/2017

紀錄喜愛的地點

紀錄喜愛的地點

APP原型:




功能介紹:


  1. 初始頁面:這裡負責顯示儲存的地點,也是APP一開始開啟後第一個顯示的畫面。
  2. 新增地點頁面:在這個畫面你可以做新增地點的動作,輸入這個地點的相關訊息和新增一張照片,完成後按下Save就會回到初始頁面,地圖上就會顯示剛剛新增的地點;如果突然不想新增也可以按下左上角的按鈕("<")回到初始頁面。
  3. 編輯頁面(1):這裡會顯示所有之前儲存過的地點,在這裡每一列左滑後會出現刪除、編輯的動作。按下刪除後,這列就會消失,初始畫面上這個地點也會不見;按下編輯會跳到編輯頁面(2)的畫面。
  4. 編輯頁面(2):在這個畫面可以更改這個地點的相關訊息,更改完畢後,按下左上角的完成就可以完成更改。



完成進度:


  1. (O)顯示地圖及自己得位置
  2. (O)新增地點
  3. (O)喜愛地點的刪除及編輯
  4. (X)Core Data
  5. (X)自訂圖標的樣式



未來展望:


  1. 新增的地點並不是使用資料庫儲存,而是要存在手機裡面,希望之後能把Core Data的部分增加進去,讓手機可以儲存這些資料
  2. 圖標點擊後顯示的資訊框,能自訂要顯示的內容,而不是只有標題跟描述(Ex.跳出一個小視窗,上面除了顯示標題跟描述外,還能顯示相片)
  3. 每一個地點,都能存多張相片,並且顯示在點擊圖標後顯示的資訊框裡面。
    相片分為:
    (1)主要的:圖標顯示的樣子。
    (2)次要的:圖標點擊後,顯示的資訊框裡的內容。




參考資料:


  1. Google Maps SDK for iOS:
    https://developers.google.com/maps/documentation/ios-sdk/start?hl=zh-tw
  2. Core Data:
    https://itisjoe.gitbooks.io/swiftgo/content/database/coredata.html
  3. Segue:
    (1)https://developer.apple.com/documentation/uikit/uiviewcontroller/1621490-prepareforsegue?language=objc
    (2)https://developer.apple.com/documentation/uikit/uiviewcontroller/1621413-performseguewithidentifier?language=objc

6/16/2017

MCU效率(MCU•EFF)

MCU效率(EFFMCU

靈感:
我生活上遇到兩個點,我學習時容易分心,為了避免分心提升工作效率,我學習使用番茄工作法。
我不喜歡坐137,因為137要等好久,車程也很久,車況也很不怎麼樣。
希望通過這個app,提升我們的效率,例如提升學習專注度,減少繁瑣的查公車班次的動作。

為廣大銘傳學子做點實用的app


功能一
實現番茄工作法

功能二
銘傳到桃火的學生專車班次顯示


原型設計
https://marvelapp.com/1hc7hi2/screen/27601075


番茄工作法


番茄工作法


銘傳學生專車車次顯示


設定及關於我們



實際成品

核心功能番茄工作法和專車時刻表  全部實現





     附:番茄工作法有五個基本步驟:
1.  決定待完成的任務
2.  設定番茄工作法定時器至 n 分鐘(通常為25分鐘)。
3.  持續工作直至定時器提示,記下一個x
4.  短暫休息3-5分鐘。
5.  每四個x,休息15-30分鐘。




未來展望
1.豐富番茄工作法,開始計時後手機自動靜音,結束後自動恢復
2.更多專車路線
3.車次列表能更新或自行修改


參考資料

tab bar controller
https://www.tibame.com/courseplayer/9/190
番茄工作法
https://zh.wikipedia.org/wiki/%E7%95%AA%E8%8C%84%E5%B7%A5%E4%BD%9C%E6%B3%95
銘傳學生專車時刻表
http://www1.mcu.edu.tw/Apps/SB/data/164/NEWS2017/SR240997.pdf

背單字

背單字的App,設定每個單字固定間隔數天後會提醒使用者複習它
Ex:新增Apple -> 使用者確認Apple已記住 -> 分別在2天,2星期和2個月後顯示Apple幫助使用者複習熟記

若在3次中任何一次未記住單字,單字會一直重複那次的間隔時間出現
Ex:第2次時忘記Apple -> 2星期後又會出現Apple -> 又忘記 -> 2星期後又出現Apple, 直到使用者熟記,Apple才會進入第3次的時間間隔


功能說明:
  • Today
  1. 顯示出資料庫中的單字,詞性和解釋
  2. 將已記憶的單字打勾,日後打勾的單字會出現在Review複習
  3. 新增單字到資料庫
  • Search
       查詢資料庫內的單字(資料庫內的單字皆為使用者輸入過的單字)
  • Review
  1. 將Today出現過的單字 ,每隔數天列出
  2. 單字只出現單字和詞性
  3. 點進單字確認單字的解釋是否和自己記憶中的一樣


我實際做的:

Today從資料庫列出單字,右上角 "+" 為新增按鈕
  

新增頁面,按左邊可返回Today,填完單字後按 "Save" 把資料存到資料庫(Firebase)

點選任一單字列確認是否記住單字

勾銷


往左滑動,可將單字刪除


Search,僅拉好介面

Review,僅拉好介面




改進:

  1. Search的搜尋功能
  2. 資料庫內的單字若新增重複,App能夠給予提醒
  3. Review的複習改為答題方式,更能測試出使用者的記憶狀況
  4. Review的功能改為推播通知,主動通知使用者複習,而不是被動地等使用者點入App才複習



6/02/2017

猜猜我是誰?

      以前小時候在看神奇寶貝的時候,總會有我是誰這個單元,讓你猜這個影子是哪隻神奇寶貝,動畫裡也有一集是拿猜影子來當做考試題目 ,所以我就想到可以做這樣一個小遊戲來回憶童年的時光,當然也會有小小的惡趣味在裡面,近請期待。

原型設計:
   
首頁可以選擇難度
簡單:可以看到整個影子且可以旋轉
普通:可以看到整個影子但不能旋轉
困難:可以看到影子的下半身但不能旋轉



遊戲畫面:
給你十秒看影子
然後輸入這隻寶可夢的英文名



功能:

1. 可以從首頁傳難度給遊戲畫面
2. 可以顯示3D模型
3. 可以控制場景內相機位置
4. 可以倒數計時

遇到的問題:

1. 每個模型的大小不一,在控制相機位置時很困難,容易破圖
2. 模型在場景的位置不一定是在 ( 0 , 0 , 0 )的位置

解決辦法:
    
    選擇位置在 ( 0 , 0 , 0 )且大小差不多的模型  (挑超久的)

參考資料:

IOS 10 App程式數字實力超進化實戰攻略

Apple Developer

Facebook for Developer


5/05/2017

我的日記app-記錄當下的美好


動機:
         現代人每天時間的步調緊迫,就這樣一天一天的過去了,從來不會想過今天自己做了甚麼有意義的事情還是發生了甚麼令人震驚的事情,何不放下緊湊的步調,找個合適閒暇的時間去記錄自己今天一天所發生的事情,在未來還可以慢慢回味當下的美好。

APP的介面設計:


開始畫面



日記撰寫畫面
按下SAVE後會跳至我的日記篇
並將日記儲存到資料庫中


選擇想觀看的日記所在的月份


觀看日記的介面
可返回撰寫日記

未完成部分:
                      1.資料庫還需要做調整,目前有不知名的錯誤,因次日記的資料無法儲存到資料庫中。
                      2.觀看日記介面的日期顯示和日記觀看
                      3.選擇想觀看的日記所在的月份

未來展望:
                  1.可加入儲存影像的功能
                  ----現在有許多的YOUTUBER把頻道當成自己的生活記錄經營,所以我想可以把錄下來的VLOG影像儲存起來
                  2.可將儲存的影像如相片集般的介面一一顯示
                  3.將選擇月份的功能升級成能選擇日期的功能





What's the weather today

What's the weather today?


《---------------關 於---------------》


還 在 煩 惱 今 天 要 如 何 穿 衣 服 嗎 ?
簡 約 唯 美 的 設 計 風 格 ,
提 供 當 日 氣 溫 、 降 雨 等 資 訊 ,
讓 您 及 時 掌 握 當 地 天 氣 ,
趕 快 下 載 " What's the weather today "!

《---------------動 機---------------》


每 天 起 床 都 不 知 道 自 己 該 穿 什 麼 衣 服 ,
出 門 後 又 發 現 感 受 跟 查 到 的 溫 度 不 符 ,
或 許 可 以 查 到 實 際 的 溫 度 ,
但 體 感 溫 度 會 被 外 在 因 素 影 響 而 與 實 際 不 符 ,
因 此 想 自 己 做 一 個 App ,
可 以 根 據 拿 到 的 天 氣 資 訊 來 推 薦 使 用 者 該 如 何 穿 搭 。

《---------------使 用 到 的  API 介 紹---------------》


《APIXU - Weather API》


Apixu 提供了一個完整的 Weather API 解決方案,其具有下列特性:

               1. 免費
               2. 快速
               3. 簡單使用
               4. 可擴展且管理完善
               5. 具有 XML 和 JSON 兩種格式

必 須 先 依 網 站 指 示 的 步 驟 完 成 註 冊 , 才 可 取 得 以 下 金 鑰 ,
要 注 意 的 是 , 若 您 使 用 的 是 free 版 本 ,
那 Apixu 會 限 制 您 存 取 天 氣 資 訊 的 次 數 , 故 必 須 謹 慎 使 用 !

﹝圖一﹞

圖 一 為 API 金 鑰 的 畫 面 ,
上 面 是 您 的 資 訊 , 下 面 分 成 Current 與 Forecast 兩 部 分 ,
前 者 為 當 前 天 氣 , 後 者 則 為 天 氣 預 測 。
連 到 網 址 即 可 看 到 天 氣 資 訊 的 各 項 資 料 ,
Forecast 顯 示 的 資 訊 會 比 Current 的 資 訊 更 多 ,
開 發 者 可 依 自 己 的 需 求 選 擇 及 調 整 。

《天 氣 資 訊》


以 本 App 使 用 到 的 Current 為 例 , 所 看 到 的 天 氣 資 訊 , 如 圖 二 。

﹝圖二﹞

《欄 位 介 紹》


圖 二 中 各 個 欄 位 所 代 表 的 意 思 ,
 Apixu 官 網 有 詳 細 的 介 紹 ( 英 文 版 ), 
大 致 上 分 成 Location 及 Current 兩 個 部 分 ,如 表 一 及 表 二 。

1. Location 欄 位


﹝表一﹞

2. Current 欄 位


﹝表二﹞



《---------------App 原 型 設 計---------------》



主 畫 面                                                                 關 於   

搜 尋 結 果

取 得 該 城 市 天 氣!                                        找 不 到 該 城 市!   

各 地 氣 象 ( 更 多 )

臺 北                                                                    高 雄

    巴 黎                                                                  華 盛 頓

 羅 倫 斯                                                                冰 島  

《---------------App 功 能 介 紹---------------》


1. 搜尋該城市的天氣資訊
    (1) 成功:顯示當地各項資訊及天氣概況之圖示。包含城市、天氣概況、溫度、體感溫度、風速、降雨量、濕度、氣壓等等。
    (2) 失敗:顯示〝The city is not found!〞。

2. 依照天迅資訊來推薦使用者如何穿搭 --> 未完成
    原因:每個人對溫度的感受不盡相同。例如本人是個極怕熱又怕冷的體質,即使沒有寒流,只要稍冷便能使我手腳冰冷;而有某同學則屬於只怕熱不怕冷的體質,即使在寒流來襲之時,都能不著超厚大外套而手腳依然溫暖到可以當暖暖包使用。因此,即使依照個數值可以推算出體感溫度,卻也只能提出僅供某種特定人適用的穿搭建議,而很難具體提出對每個人皆適用的穿搭策略。

《---------------未 來 展 望---------------》


  • 將模式分成幾大類供使用者選取,以利提出具體穿搭的建議。例如:易冷易熱、只怕熱、只畏冷、天不怕地不怕‧‧‧‧‧‧等等類型的人。
  • 提供選單讓使用者選擇想知道哪些更多資訊。例如:最高溫度、最低溫度、降雨機率‧‧‧‧‧‧等等個人需求。
  • 將使用者輸入過的城市儲存起來,以供使用者避免每次使用都要重新輸入一次的麻煩。

《---------------參考資料---------------》


Apixu 

Swift 3 Parsing JSON nesting issue