7/09/2018

健康小幫手

主題:健康小幫手

引言:
沒了健康就沒了一切。
因為在這如此匆忙的時代裡,我們往往容易忽略要過個健康的生活
想過個健康的生活,卻無法實踐或養成習慣
於是想開發一個APP來時時提醒自己要過得健康。

另外,曾經去過醫院裡打工,發現許多民眾總是無法接收到機關單位的免費檢查消息,便想藉此開拓更多消息來源,好讓民眾們可以知道。


開發內容

1.預防相關的資訊:直接連進衛生局的網頁

2.可查詢診所或醫院。

3.喝水提醒。

4.換算BMI值及理想體重。

5.計步器(未完


首頁
計算BMI
 查詢診所
 預防相關資訊
 提醒喝水


參考資料:
1. https://itisjoe.gitbooks.io/swiftgo/
2.書籍 Swift自學力 魏巍


6/21/2018

彈幕遊戲

啟發:
    一直以來都有在玩彈幕遊戲,於是想自己製作一個跟彈幕有關的手機遊戲

本遊戲所使用的遊戲引擎是SPRITEKIT,是SWIFT於ios7時所推出的
該引擎提供各式各樣的涵式使用,如:碰撞判定、音樂播放
彈中文資料極少且過時,相關資料多要找尋英文及官方資料

遊戲一開始會進入選單場景(MenuScene),點選START按鈕便會轉換到遊戲場景(GameScene)
遊戲的左上角有記分板,每擊落一個迎面而來的敵人即得一分
撞到敵人(小怪)並不會死亡,透過左方的虛擬搖桿來控制畫面中央主角的動作,左方的虛擬搖桿並非是此遊戲引擎所提供的

當射擊到敵人(小怪)時,會令敵人爆炸

經過一段時間後,BOSS便會出來,並散射子彈(即為彈幕)
被子彈打到就會死亡導致GameOver並轉換到遊戲結束場景(GameOverScene)

遊戲結束場景(GameOverScene)可以看到剛剛的得分以及點即NEW GAME開始新的遊戲

未完成:
小怪碰撞死亡
自動截圖
Line分享

心得:這次的作業學到很多關於SpriteKit的東西,比如:如何轉換場景、播放音樂、碰撞判定等等...,可惜對於SpriteKit不夠了解,所以很多功能無法實現,像是原本預想小怪撞到玩家,玩家應該要進入GAMEOVER,或BOSS的彈幕應該要更華麗之類的,也學到不少關於SpriteKit的錯誤該如何處理,如:轉換場景時,找不到所設置的場景會呈現灰色畫面等等...,學到SpriteKit中要如何設置背景,也學到一些例外的東西,像是原本教學的是使用陀螺儀來移動角色,後來我改成虛擬搖桿來移動,比較可惜的是原本要加入自動截圖即Line分享,但一直弄不出來只好放棄。

虛擬搖桿
SpriteKit教學


https://www.youtube.com/watch?v=cJy61bOqQpg&t=13s

6/14/2018

Morse Code

電影中,進行秘密通訊時有時會使用的所謂的Morse code,
他將字母與數字編碼來進行信息傳遞,
我們常聽到的SOS也常被用Morse code 來表示 (... --- ...)
Morse code 是ㄧ款能夠將文字與Morse code相互轉換的app,
還能進行閃光與聲音的輸出,是款居家旅行必備良藥。
進入畫面。
分別顯示 MCU CSIE 與作者
主畫面

上方箭頭可進行切換,
只需在上方輸入文字或Morse code並按下Translate即可轉換。
轉換成Morse code
翻譯Morse code成明文


這時按畫面下方Light進行畫面切換,
可以讓剛剛所翻譯或輸入的Morse code轉移到此畫面。
Light 畫面

按下Light and sound便可閃爍及發出電報聲,
Clear可清除目前文字,而SOS則可以快速輸入... --- ...,
下方可以快速輸入Morse code。

目前只能單純文字轉換,
未來希望可以進行閃爍與聲音的轉換,
即辨識閃光或聲音來進行Morse code翻譯。



5/17/2018

回合制對戰小遊戲

遊戲目標:
  -選擇不同特性的角色,在固定大小的戰場上對戰,運用策略擊敗對手!

遊戲基本規則:
  -角色固定HP(血量)100與SP(技能點數)100、先將對手的HP歸零即取得勝利。
  -每回合只能選取一個行動(四方向移動、每個角色不同的三招技能、原地不動回復SP)
  -技能皆有攻擊範圍(判定時間為移動後,故命中需要預判對方移動位置)
遊戲畫面:




技能表:



實作對3D模型進行嵌入的app


專題構思

我打算做出專研app的初始版本,也就是實作出用隱寫術進行3D模型嵌入的app,功能包含了:顯示3D模型(obj檔)、對3D模型進行訊息的嵌入與萃取。
嵌入指的是將要隱藏的訊息藏進掩護媒體中的動作,此處的掩護媒體即為obj檔,而萃取是將訊息從嵌入完的媒體中取出的動作。
其中嵌入與萃取的部分使用以前寫的C++程式,透過Objective-C與Swift進行連結。

專題原型設計

原本預想為可以從多個預設模型中選擇想要嵌入的模型並傳送出去,接收的人可以從收到的多個模型中選擇並進行萃取,由於原型不是使用Xcode製作所以介面看起來會差蠻多的,不過整個流程大致為以下情形:

首先有多個模型可以選擇,預計還要有新增自己下載的模型功能。


選擇好模型後在此輸入要隱藏的訊息與密碼並按下開始嵌入。


接著把嵌入完成的模型傳送給其他人,其他人打開此app選擇萃取可以看到剛剛收到的模型。


選擇好模型後輸入密碼即可得到訊息(密碼由使用者私下由安全管道傳遞,如見面傳遞等等)


就可以得到剛剛嵌入進模型的訊息了。


最終成果

對3D模型(obj檔)的訊息嵌入、萃取已經完成,但是由於這個加密的演算法需要兩個參數,我還不確定如何將使用者所輸入的密碼轉換為這兩個參數,目前暫定將一個參數固定,另一個參數由使用者自訂的密碼(全數字)取餘數得出。

由於時間不足等因素,此專案與當初設想的完成度有落差,實際差別在:
1.無法顯示obj檔
2.無法從多個模型中自己選擇要嵌入哪個模型
3.無法將嵌入完成之模型傳送出去
4.無法接收別人的模型進行萃取
5.UI十分簡陋,完全沒有美化只有功能
綜上所述,本專案可以解釋為製作出單機版本。

而在開發過程中學習到的技巧則有這些:
1.將C++源碼藉由Objective-C的.mm檔編譯與執行,並在swift中可以進行呼叫。
2.在iOS的app中進行檔案的輸出入,了解到app的路徑呼叫與檔案該存放的位置.
3.使用Tab Bar Controller進行場景的轉換

接下來就是整個app的流程介紹了。

首先為加密功能,介面如下:



在方框中輸入要隱藏的訊息後,輸入自己定義的密碼,並按下開始加密。

加密完成後,就會出現訊息通知。
此時會將Stego.obj檔輸出到app底下的/Documents中,如果之前已經有嵌入過則會覆蓋掉檔案。

而切換到解密畫面後,畫面如下:

輸入剛才的Key就能由Stego.obj得到剛才隱藏的訊息。

如果密碼錯誤則會顯示無法萃取。
功能就這些。

心得

當初設想要做這個以為很簡單,只要學會將C++放到swift中執行就好,實際去做發現當初C++的源碼很難直接套用,因為嵌入與萃取兩個cpp檔有許多重複的變數、函數等,導致我幾乎把整個程式重新修改了一遍,其中還要加一些Objective-C的函數來使swift可以使用,甚至還在原本的程式中發現了BUG,可以說是歷經苦難,到最後來不及只做出了單機版本。

接下來要研究出如何讓app底下的檔案傳送出去,我預想是使用"分享到..."這個功能,來選擇各種通訊軟體作為傳送管道,如Line、messenger、Skype......等等,而傳送完就不保留嵌入後的模型。接收模型的人可以打開app並選擇"瀏覽"來查看手機內的模型並萃取出訊息,我不確定iOS能否做到,所以這部分是之後主要研究的目標。

接下來還希望可以加入圖片嵌入的功能,比起模型來說,iOS上傳送、接收、選擇圖片都較為簡單,但是由於jpg圖片的訊息嵌入、萃取演算法我還不會,所以暫時做不出來。

最後我認為在這學期做過這個專題之後我對Xcode的介面與操作熟悉許多,在之後的專題研究中一定能發揮很大的功用。

美食地圖(Gourmap)


緣起

本App的構想源自於專題研究所製作的行動夜市App,當時將整個系統規劃為伺服器端、小吃和消費者,將以上三個角色連結在一起,為小吃和消費者建立一個互動的平台。
但礙於時間與能力,整個系統並沒有全部完成。

行動夜市-消費者功能-主畫面

本App承襲行動夜市App的互動式地圖介面,使用者可和地圖上的物件互動,來獲取餐廳的相關資訊。
本次使用蘋果的MapKit 製作美食地圖的互動式地圖介面。



功能規劃


  1. 在地圖顯示餐廳所在位置,餐廳以圖標的形式呈現
  2. 點擊圖標可閱覽餐廳的資訊(菜單、營業時間⋯⋯)
  3. 在地圖上搜尋餐廳
  4. 可收藏喜歡、感興趣的餐廳

實機畫面

主畫面

主畫面

從手機桌面啟動本App之後,呈現給使用者的第一個畫面,會顯示使用者目前的位置。

地圖可滑動、旋轉,當使用者想要將地圖中心回到自己位置,可點選地圖右上角的藍色箭頭來執行此動作。

本App的其餘功能皆設置在手機畫面右上角的白色橫紋圖示(功能選單)



功能選單

選單

點選主畫面右上角的白色圖示便會進入本App的功能選單,包含:

  1. 搜尋餐廳
  2. 我的收藏




搜尋餐廳


點選功能選單的搜尋餐廳功能(Search)便會進入上方左圖的畫面。

點選搜尋條並輸入關鍵字(餐廳名稱、部分地址),畫面便會成為上方右圖的模樣,這裡是搜尋位於花蓮縣的餐廳。



顯示餐廳所在位置

餐廳所在位置

點選前一功能中的任一個餐廳,便能在地圖上看見該餐廳的所在位置,這裡選擇了幸福日光做示範。

點選註標(畫面中大頭釘的訊息框)便能移動到餐廳資訊的頁面。



顯示餐廳資訊

餐廳資訊

經由上一個功能來到了如上圖的畫面,顯示幸福日光的店面照片、店名、地址,並且提供了星形的按鈕讓使用者收藏此餐廳。
由於幸福日光已經被收藏,按鈕呈現黃色,若餐廳未被收藏按鈕則會呈現灰色。



我的收藏

我的收藏

點選功能選單,我的收藏功能(My Favorites)便會進入上圖的畫面。

這裡和搜尋餐廳一樣,能夠對收藏的所有餐廳做特定條件搜尋(餐廳名稱、地址),同樣能顯示餐廳所在位置、顯示餐廳資訊,並在顯示餐廳資訊的畫面中取消收藏此餐廳。



心得感想

Swift是在修習本課程時才開始學習的語言,由於之前學的是Objective-C,在使用Swift時多少會被一些學Objective-C留下來的習慣給影響到,這是剛開始比較苦手的地方。

而在開發本App時,最困擾的是當我按下返回鍵時,我在返回前的頁面所做資料上的更動並不能回傳給前一個頁面。
像是我透過我的收藏進入某餐廳的頁面,當我取消收藏此餐廳再返回我的收藏頁面,畫面中的那間餐廳仍然在列表之中。
由於餐廳的資料都是存在手機上,直接重新取得資料應該可行。

最後,若是能完善此App,我希望能豐富餐廳的資訊,如增加營業時間和菜單。取消收藏的功能也能夠直接在我的收藏頁面直接進行。
以及主畫面之中能做到周邊餐廳搜尋的功能



參考資料

iOS 10 App程式設計實力超進化實戰攻略
地圖與定位

彈幕遊戲

想法:根據教學先製作出簡單的打飛機遊戲(見圖1),再修改成彈幕遊戲(見圖2
),並且提供透過LINE或Messenger將得到的分數分享自動截圖給朋友

圖1:打飛機遊戲示意圖

IOS App 2018/6/17


IOS App – Enjoy In Life

啟發:
        平常想知道附近有什麼餐廳或者商店都會使用Google Map,但是地圖上的點散散的,讓我覺得不是很容易找同一類型的店,而且若想知道這家店有沒有開也需要點進去看,讓我覺得有點麻煩。
    因此想為自己開發一個可蒐集附近店家並統整類型,且可快速知道是否有營業的App

原始製作想法:
    透過一些方法去取得Google MapApple Map的地圖資訊,並利用抓取回來的資料類型將資料分群,每筆資料用顏色區分是否營業,點擊後可觀看資料的詳細內容,如:位置、電話、營業時間或評論等,並且提供導航功能。

預期功能:
1.     抓取附近地圖資訊
2.     顯示是否營業
3.     顯示每個資訊的詳細資料,如:位置、營業時間或評論等
4.     透過目前位置與選擇的店家位置啟動導航功能

實際製作結果:
    透過一些方法去取得Google MapApple Map的地圖資料,並利用抓取回來的資料類型將資料分群,每筆資料用顏色區分是否營業,點擊後可觀看資料的詳細內容,但詳細內容中營業時間雖有取得但是七天的營業時間,如:星期一16:00~18:00,因為還要判斷當天是星期幾所以不顯示正確時間,只已開始抓取位置後的時間判斷該店是否有營業;而評論部分由於Google Map每人每天最多要5個評論,資料量太少也就省略。
        導航部分原本是想做成一般導航的樣子,但由於不知如何透過程式啟用就改成用地圖顯示當地位置與目的地位置,且繪製一條路線在地圖中。

目前功能:
1.     抓取附近地圖資訊
2.     顯示是否營業
3.     顯示每個資訊的詳細資料,如:位置、電話、website、評價等
4.     透過目前位置與選擇的店家位置繪製路線於地圖中

尚未完成:
1.     一些bug導致閃退
2.     導航功能

App操作展示:
 
App的過場頁面

上圖過後接著會顯示所有附近店家的店名
淡黃色代表該店正在營業中

點擊店名的cell會進入對應的頁面
頁面中呈現的是該店的詳細資料
如:地址、電話、官網、評價、價格等

點擊前一張圖的一鍵導航後會進入此頁面
圖中標記為目前所在位置與你選選取店家的位置
並提供一條路線讓你可以通往該店

右上方可切換不同交通工具所走的路線
只有走路與開車兩種路線可選擇


結論:
    雖然整體做起來不算太困難,但是動態抓取資料並顯示其實不好弄,而且有些想法因找不到可參考的方法而不知如何使用;製作過程中使用很多框架(framework),每個框架有各自的用法,要一個一個的研究,花費我許多時間,幸好有學長強力支援,才能讓我實現許多心中所想的功能。

遇到的挫折總整理:
    由於在實作上碰到各式各樣的問題,有些問題很詭異也有些值得讓學弟妹知道,因此在這裡整理我所碰到的問題及解決方法當學弟妹碰上同樣問題時可以參考,記得若碰上問題最優先需知道哪裡錯誤以及為何錯誤,可以的話把訊息印出來,讓Google幫忙。

Q1:
    使用cocopods創建了workspaces檔,開啟後直接執行發生連結錯誤?
A1:
    遇到這個問題是很詭異的,試試重開專案有沒有辦法解決,若無法只好重建
Q2:
    為何使用Google Map而不使用Apple Map,明明Apple已經有內建Mapkit可以使用了?
A2:
    一開始我也是執行嘗試Apple Map,但是Apple Map必須要自己設定naturalLanguageQuery,簡單來講就是搜索類型,例如今天要搜尋這個區域的所有咖啡店,就要設定naturalLanguageQuery=”coffee”,這跟我原本的想法相違背,又找不到能解決的方法因此不使用Apple Map實作。
    而使用Google Place API後它會依照目前位置自動抓取附近位置的資料,雖然我也不確定抓取範圍多廣,這點跟我的想法比較相近,所以就採用這個方法了。
    想知道如何使用可參考此網址:https://developers.google.com/places/ios-api/start?hl=zh-tw
Q3:
    按照官方流程使用Google Place API後還是抓不到資料?
A3:
    這有幾種可能,官方的流程中沒特別明講CLLocationManager,這個是CoreLocation框架中的一個方法,它的目的是跟使用者要使用地圖的權限以及當收到地圖資訊時把操作資料的權限交給對應的class,若沒有使用此方法是無法拿到資料的。
    也有另一種可能是你使用虛擬機打開後,虛擬機本身沒有地圖資訊,因此你必須要啟動後回到Xcode自行設定假地圖位置才能夠得到目前所在的附近資訊。
Q3:
    使用Google Place API後營業時間都一樣感覺不大對?
A3:
    那是Google Place API自己的問題,當初我也很困惑,後來是透過http的方式用每個店特有的place IDGoogle Map Server要才拿到正確資料,雖然繞了很大一圈但畢竟這是我的功能中重要一環,也只好做了,想知道如何使用可參考網址: https://developers.google.com/places/web-service/details#PlaceDetailsResults
Q4:
    拿到資料後要如何將資料顯示?
A4:
    大部分動態資料的顯示都是自行改寫tableView,這部分可動態生成tableView或者先拉好tableView後將tableViewdelegate設為class自己,然後自行改寫tableView的函式已達到動態效果,詳細用法可參考網址: https://itisjoe.gitbooks.io/swiftgo/content/uikit/uitableview.html
Q5:
    要如何繪製路線?
A5:
    繪製路線的方式我是直接參考網路上的資料,網址為: https://swift.gg/2017/05/02/draw-route-mapkit-tutorial/
Q6:
    想顯示不同路線卻不知如何消去已繪製的路線?
A6:
    我一開始的想法是用白色的線將原本的路線塗掉再用別的顏色畫想要的路線,但是多按幾次路線切換後會發生重疊問題,一直都修不好,後來學長教我在繪製新路線時先使用mapView.removeOverlays(MapView.overlays)將原本路線消除即可,若還是不清楚可以問學長。
Q7:
    在使用tableView顯示資料時如果內容超過cell的長度後面會變成,是否有辦法全部顯示出來?
A7:
    這是因為cell中儲存資料的label預設寬度為無限大,這表示你不管多長的內容皆會被擠在同一列中,而內容超過cell的大小則會顯示成,這並不是cell不支援自動調整高度的問題。若要顯示所有內容,只要在你創造cell時把cell.textLabel.numberOfLines設為0,那麼當內容超過cell大小時label會自動換行,而tableView又提供根據內容高度自動調整,此時你的cell會變高,內容也會全部顯示出來。
Q8:
    若想要在不同View中傳資料或想切換頁面該怎麼做?
A8:
    這方法有很多種,而我是採用設定ViewstoryboardID,預設是沒有的,可以點選View在右邊的Identity inspector中設定,並把Use StoryboardID勾起來,在程式中撰寫以下程式碼:
1.     let vc = storyboard?.instantiateViewController(withIdentifier: ”StoryboardID”) as! 要轉移的頁面所對應的class名稱
2.     在要接收資料的class中設定一個變數,然後直接在要送資料的class中撰寫vc.變數名稱,即可把要傳送的資料存到該變數中
3.     使用present(vc, animated:true, completion:nil)進行頁面切換
4.     若要返回上個頁面則使用dismiss(animated:true, completion:nil)即可
Q9:
    要怎麼使用陣列或字典?
A9:
    在處理動態資料時總是需要陣列或字典來幫忙預存資料,而swift又是新語法,很多初學者常常面對明明很簡單卻不知怎寫的問題
陣列: var array:[型態] = []
字典:var dic:Dictionary<型態,型態> = [:]
    上面的[][:]只是代表空陣列與空字典,並不是初始化,swift若不預設為空會產生很多error,要特別注意。
Q10:
    在處理某些資料時它回傳的型態為NSString,導致顯示時會變成optionals(“…”),但我只想要字串的值該怎麼辦?
A10:
    我曾經被這點搞得很難過,swiftNSStringString幾乎可以互轉,但怎麼轉顯示出來都怪怪的,我也曾經異想天開用迴圈跳過optionals直接吃成另一個字串,但碰到各種問題,因為NSString不允許取得字串的某個字元,而且強制轉型後String也不能跟char互接,最後發現根本不需要這麼麻煩,你直接在NSString的變數後面加!就可以幫你處理掉討厭的optionals了,不要再去走一次我走過的路了
Q11:
    使用CLLocationManagerstartUpdatingLocation()每隔一小段時間就會在抓取一次資料,若不想一直抓取該怎麼辦?
A11:
    當初被這個問題搞到,害我不斷顯示重複的資料,我的方法是執行完一次startUpdatingLocation()後就直接執行stopUpdatingLocation(),這樣一來它就只會抓取一次資料,而若還需要重抓資料則建一個button讓使用者自行刷新即可。
Q12:
    當動態產生某個物件時希望它大小是全螢幕該怎麼辦?
A12:
    Swift有方法可以抓取手機螢幕大小,範例如下:
var fullScreenSize = UIScreen.main.bounds.size
全螢幕的寬度 : fullScreenSize.width
全螢幕的長度 : fullScreenSize.height
Q13:
    想要依照某些條件把特定幾個cell的背景顏色換掉,卻發生不符合條件的cell顏色也改了,該怎麼辦?
A13:
    這是因為你使用了tableView.dequeueReusableCell,它是tableView的一個函式,是當tableView中有空閒的cell(猜測是沒有被顯示在螢幕上但已被產生),它會拿空閒的cell來用,若沒有則產生新的cell,這方式能提高效能,但對於要改特定cell的工作來會有點麻煩,因此不能只判斷符合條件後更改背景顏色,還要另外多判斷若沒有符合條件要改成原本的顏色才可以正確執行出你想要的結果。
Q14:
    在滾動tableView發現有殘影的現象該怎麼辦?
A14:
    這部份在我試著要改tableViewbackgroundColor時有發生過,主要原因就是因為我是動態產生tableView,而我產生tableView的函式是當我每次抓取地圖資料時就會執行,而抓取地圖資料部份又因為CLLocationManager會一小段時間就執行一次,而以上這些巧合導致了我動態產生好幾個tableView,原本看不出來是因為預設tableView的背景顏色是不透明的,因此會把後面的tableView擋住讓你看不到,但是實際上已經產生了好幾個重複的tableView,現在你嘗試更改背景顏色並為了好看而調整透明度,導致原本被擋住的tableView中的內容顯示出來,造成了殘影現象。
    瞭解事情的原委後試著測試看看你是否真的動態產生多個tableView,若真如此應該改成只產生一次tableView,而以後想依照更新後的資料更改其內容應使用tableView.reloadData()
Q15:
    要怎麼用程式碼更改textLabel的字體大小?
A15:
    其中一個方法:textLabel.font = UIFont.systemFont(ofSize: 20)
Q16:
    要怎麼用程式碼更改tableViewsection的背景顏色?
A16:
    這個有一點麻煩,我使用的方法如下:
1.     let header = view as! UITableViewHeaderFooterView
2.     header.contentView.backgroundColor = UIColor(red: 237/255, green: 177/255, blue: 124/255, alpha: 0.8)
記得在使用UIColor的顏色,原本RGB的值都要除255alpha是控制顏色的不透明度,1代表完全不透明,0代表完全透明。
Q17:
    若想改變App在手機上顯示的小圖示怎辦?
A17:
    我的方法是利用以下網站轉出所有icon,再將對應的圖片放入AssetsApp icon




    以上是我在製作此App時所碰到的各種問題,在這裡留下經驗讓以後學弟妹們有個參考方向。

期末心得:
    雖說會有人覺得用我的App不如直接用Google Map好,反正也有提供類似的功能,而且介面更好更棒,但這是我想要的App,我製作時樂在其中,不僅稍微學會swift語法,更學會framework的使用方法,也知道cocoapods如何使用,這對我自己來說已經足夠了,我很感謝老師給我機會讓我做自己想做的東西,我只有一句話:這個App我不後悔。

參考網址如下:
6.     陳奕穎學長的facebook