Re: [問題] 台灣有什麼能用的APP支援Wallet票卡?

看板iOS作者 (那個誰)時間7年前 (2017/03/31 11:28), 7年前編輯推噓49(49019)
留言68則, 38人參與, 最新討論串2/3 (看更多)
昨天在這串的原文推文貼了我自製的Wallet, 今天睡醒發現大家好像對客製化Wallet滿有興趣的, 因為可能不太有時間寫教學文,簡單講一下我是怎麼做的。 - 其實有很多客製化Wallet的第三方服務, 基本上這些服務都是直接調用Apple Wallet的API 並且提供一個UI來讓使用者自訂票卡的各種屬性, 再通過網站生成的QR CODE來佈署到手機裡。 我是使用網頁版Passdock製作,他們提供的客製化選項很多, 而且可以增加地理資訊跟iBeacon資訊到票卡裡, 例如我把住家附近的全聯都加進地理資訊,當我GPS定位到這些地點的時候, 手機就會自動推送相對應的票卡給你使用。 網路上Passdock的教學文很多,大家可以去Google一下, 在設定條碼的部分只要參照實體卡片背面條碼底下的那一串數字來設定就好, (那串數字就是條碼裡面包含的資訊 通常都只是卡號) 格式記得選實體卡條碼相應的格式,例如最常見的麵條形條碼就是CODE 128。 - 票卡設計的部分, Passdock在製作票卡時都會提供上傳圖檔的地方,也都有尺寸標示, 我是搭配illustrator來製作我想要的圖檔。 票卡顏色就用滴管工具去吸各品牌的標準色來搭配XD 資料欄位就隨個人喜好打上去就好了(卡號 姓名什麼的) - 最後講一個小技巧,Apple Wallet裡面的每張卡都有一個Certificate。 可以把Certificate想成是商家的簽署,來自同一個Certificate的卡片, 會全部堆疊在一起(因為系統看起來就是來自同一個商家), 就像Stocard做出來的那樣,你要先點進去那個卡堆中, 裡面的卡片才會橫向展開讓你左右滑動選取,而不是一張一張有秩序的站好。 所以說,如果我有五張卡片想讓他排排站好一目瞭然, 那我就需要五個Certificate,那Certificate要怎麼取得呢? 就是花100美金去買蘋果開發者帳號使用SDK去生成... 為了這幾張無關痛癢的卡片花100美金我想一般人都無法接受吧XD 重點來了,Passdock提供多達十組的Public Certificate, 這也是我會使用Passdock來製作的原因。 在用Passdock製作票卡的時候,按下網頁右上方的Advance 切換到進階模式,會有一欄是讓你設定Certificate,共有十組可以用。 所以最後出來的成果就會是每張卡片都有隔開不會堆疊。 大概就是這樣囉... 啊...不知不覺就寫了這麼多XD P.S.不是每個商家都認數位形式的卡片,有些也是要帶實體卡, 有板友提到全聯只認實體卡,因為我最近都沒去消費,所以也沒拿給店員刷看看。 不過以往我去全聯買東西都只報電話而已...哈 補個圖 http://imgur.com/a/BYktW http://imgur.com/a/ibmeK -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.21.157.223 ※ 文章網址: https://www.ptt.cc/bbs/iPhone/M.1490930934.A.3B4.html

03/31 11:32, , 1F
03/31 11:32, 1F

03/31 11:34, , 2F
03/31 11:34, 2F

03/31 11:34, , 3F
03/31 11:34, 3F

03/31 11:38, , 4F
推Certificate說明
03/31 11:38, 4F

03/31 11:50, , 5F
03/31 11:50, 5F

03/31 11:53, , 6F
03/31 11:53, 6F

03/31 11:56, , 7F
太強大了!!!
03/31 11:56, 7F

03/31 12:09, , 8F
03/31 12:09, 8F

03/31 12:14, , 9F
全聯會員卡是用感應式的所以只認實體卡
03/31 12:14, 9F

03/31 12:21, , 10F
長姿勢 謝謝
03/31 12:21, 10F

03/31 12:22, , 11F
全聯不是都報電話嗎?
03/31 12:22, 11F

03/31 12:27, , 12F
可是有的卡是Code 32,Code 128不能用吧?
03/31 12:27, 12F

03/31 12:31, , 13F
我記得passdock只能選擇code 128,不知道能不能用圖檔?
03/31 12:31, 13F
Code32 Code39 Code128 編碼方式都是一樣的,條碼機一般也支援多種格式掃描, 但我沒有實測過,不確定自行轉換格式後店家是否可以掃。 如果無法的話,把實體卡的條碼截下來, 放在票卡的Strips圖檔欄位也是一種辦法。

03/31 12:41, , 14F
推認證說明
03/31 12:41, 14F

03/31 12:54, , 15F
推 但還是好難製作
03/31 12:54, 15F

03/31 12:57, , 16F
推!太用心了~
03/31 12:57, 16F

03/31 13:13, , 17F
我想問的是為什麼票卡左上角有些圖可以顯示很大有的很小??
03/31 13:13, 17F

03/31 13:28, , 18F
可以用圖檔,就是另外做Code39的圖當主圖去放就可以
03/31 13:28, 18F

03/31 13:33, , 19F
全聯有些優惠跟扣現金要用實體卡
03/31 13:33, 19F

03/31 13:34, , 20F
所以最多只有十張卡能立排,再多就只能用橫排囉?
03/31 13:34, 20F
在使用Passdock公用Certificate的前提之下,是的。 你若有蘋果開發者帳號,可以生成更多Certificate。

03/31 13:53, , 21F
c大應該是在說這個,因為我的左上角的圖也是很小
03/31 13:53, 21F

03/31 13:56, , 22F
推!
03/31 13:56, 22F

03/31 13:56, , 23F
補充一下,票卡有很多種類,我是使用Store Card格式去製作, Store Card這個種類的票卡左上方只有Logo這一種圖片欄位可以放圖, 最寬支援到570px,所以有大有小我猜應該就只是圖片尺寸的關係了~

03/31 14:31, , 24F
感謝F大的啓發,終於做好我的
03/31 14:31, 24F

03/31 14:32, , 25F
了! 雖然costco那張是做開心的XD(應該不能用
03/31 14:32, 25F
不錯不錯,很漂亮XD

03/31 14:36, , 26F
推一個,昨天也是發現passdock的advance可以自定好多玩意
03/31 14:36, 26F

03/31 14:36, , 27F
除了條碼以外的資訊可以自己惡搞很好玩XDDD
03/31 14:36, 27F

03/31 14:38, , 28F
我看了一下卡片的條碼基本上是用CODE128,不要亂改比較好
03/31 14:38, 28F
※ 編輯: FANG0100 (211.21.157.223), 03/31/2017 14:39:55

03/31 14:40, , 29F
另外我發現GPS雖然有十個可以用,但修改後在進去編輯
03/31 14:40, 29F

03/31 14:41, , 30F
第六個以後的GPS資訊回不見,不知道是不是網站的問題
03/31 14:41, 30F

03/31 14:42, , 31F
david大做的也很漂亮!
03/31 14:42, 31F

03/31 15:34, , 32F
看來D大要分享教學文了...
03/31 15:34, 32F

03/31 15:37, , 33F
推分享~但字卡顏色好難調@@
03/31 15:37, 33F

03/31 15:57, , 34F
感謝分享心得,原先卡關在
03/31 15:57, 34F

03/31 15:57, , 35F
把卡片分開,原來要改憑證
03/31 15:57, 35F

03/31 16:28, , 36F
提供教學與配色 https://goo.gl/0NIGFc
03/31 16:28, 36F

03/31 16:32, , 37F
passdock的比較好,條碼在相對比較上方
03/31 16:32, 37F

03/31 16:34, , 38F
但也比較難設計,英文苦手QQ
03/31 16:34, 38F

03/31 16:47, , 39F
做好是做好了,但要怎麼把卡片分開放呀 憑證要怎麼改
03/31 16:47, 39F

03/31 16:47, , 40F
?@@
03/31 16:47, 40F

03/31 16:48, , 41F

03/31 16:55, , 42F
成功把卡放進去
03/31 16:55, 42F

03/31 16:55, , 43F

03/31 17:47, , 44F
我自己打卡號上去的都不成功耶@@
03/31 17:47, 44F

03/31 18:19, , 45F
跟大家分享一下 我用ColorHelper 這個app 幫忙看色碼 不過
03/31 18:19, 45F

03/31 18:19, , 46F
這個app介面還蠻簡陋的就是了
03/31 18:19, 46F

03/31 18:29, , 47F
我也成功了!感謝教學與幫助!
03/31 18:29, 47F

03/31 18:30, , 48F

03/31 19:02, , 49F
不知道F大方不方便分享素材 有些自己找的感覺沒F大的好
03/31 19:02, 49F

03/31 23:35, , 50F
大潤發會員號碼太長...超過了...XDD
03/31 23:35, 50F

04/01 05:04, , 51F
改憑證一直出現錯誤,卡關QQ
04/01 05:04, 51F

04/01 09:48, , 52F
想請問logo放上去的狀況 已經調過與logo背景相同顏色 可
04/01 09:48, 52F

04/01 09:48, , 53F
是最上面會有漸層效果 不知道是否可以避免><
04/01 09:48, 53F

04/01 10:38, , 54F
原po的設計跟推文中的卡片都用得很漂亮耶,還以為是店家
04/01 10:38, 54F

04/01 10:38, , 55F
推出的公版
04/01 10:38, 55F

04/01 21:19, , 56F
終於也做好自己的了http://imgur.com/XwiqFUv
04/01 21:19, 56F

04/01 23:38, , 57F
大家好厲害!請問屈臣式的logo 怎麼找,因為找到都有
04/01 23:38, 57F

04/01 23:38, , 58F
白底!
04/01 23:38, 58F

04/03 17:49, , 59F
找png檔 或是自己用修圖軟體把白底透明化
04/03 17:49, 59F

04/04 01:32, , 60F
謝謝原po 我學會了 http://i.imgur.com/9ivuHA3.jpg
04/04 01:32, 60F

04/06 20:43, , 61F
請問做好後,掃QRcode一直出現"沒有此條碼可用之票卡"
04/06 20:43, 61F

04/06 20:44, , 62F
這要怎麼處理呢??手機是5S、iOS10.3.1
04/06 20:44, 62F

04/07 14:15, , 63F

04/07 14:15, , 64F
謝謝教學看這篇才知道有進階模式
04/07 14:15, 64F

04/07 23:11, , 65F
想詢問一下,我是使用passdock製作,怎麼把會員條碼放
04/07 23:11, 65F

04/07 23:11, , 66F
到下方?還是只能把會員卡條碼製作成圖檔放在strip?
04/07 23:11, 66F

04/08 18:46, , 67F
有一個選項是條碼格式 如果是code-128可以填數字 passdo
04/08 18:46, 67F

04/08 18:46, , 68F
ck會生出條碼
04/08 18:46, 68F
文章代碼(AID): #1OtSpsEq (iOS)
文章代碼(AID): #1OtSpsEq (iOS)