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

作者: FANG0100 (那個誰)   2017-03-31 11:28:52
昨天在這串的原文推文貼了我自製的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
作者: wenyic (wenyicchen)   2017-03-31 11:32:00
作者: EROS4   2017-03-31 11:34:00
作者: weizhu (一球)   2017-03-31 11:34:00
作者: jesi   2017-03-31 11:38:00
推Certificate說明
作者: itsdelovely (It's De-Lovely)   2017-03-31 11:50:00
作者: Abiou (Abiou)   2017-03-31 11:53:00
作者: hopeless3802 (Sunday)   2017-03-31 11:56:00
太強大了!!!
作者: halay02222 (放。空)   2017-03-31 12:09:00
作者: panjiongkai (想念放在心裡)   2017-03-31 12:14:00
全聯會員卡是用感應式的所以只認實體卡
作者: awpex127 (Brian)   2017-03-31 12:21:00
長姿勢 謝謝
作者: BBryson (布萊森)   2017-03-31 12:22:00
全聯不是都報電話嗎?
作者: ShuwnYu (語)   2017-03-31 12:27:00
可是有的卡是Code 32,Code 128不能用吧?我記得passdock只能選擇code 128,不知道能不能用圖檔?
作者: shan86206 (史蒂芬Sun)   2017-03-31 12:41:00
推認證說明
作者: yang0918 (Yang氣位置也剛好在最左z)   2017-03-31 12:54:00
推 但還是好難製作
作者: zixiangsun (zixiang)   2017-03-31 12:57:00
推!太用心了~
作者: chart (まどか NO.1 \(^O^))   2017-03-31 13:13:00
我想問的是為什麼票卡左上角有些圖可以顯示很大有的很小??
作者: Hollowcorpse (愛羅武臺灣)   2017-03-31 13:28:00
可以用圖檔,就是另外做Code39的圖當主圖去放就可以
作者: bluecat5566 (少冰半堂本剛)   2017-03-31 13:33:00
全聯有些優惠跟扣現金要用實體卡
作者: Aquari (  ̄Д ̄)=o|▅▅▆▇▇◤)   2017-03-31 13:34:00
所以最多只有十張卡能立排,再多就只能用橫排囉?
作者: c918 (━━(゚∀゚)━━)   2017-03-31 13:53:00
c大應該是在說這個,因為我的左上角的圖也是很小
作者: dctmax   2017-03-31 13:56:00
推!
作者: c918 (━━(゚∀゚)━━)   2017-03-31 13:56:00
作者: davidywc (暱稱我還沒想到)   2017-03-31 14:31:00
http://imgur.com/eYLoroD 感謝F大的啓發,終於做好我的了! 雖然costco那張是做開心的XD(應該不能用
作者: wicors (御悪果実)   2017-03-31 14:36:00
推一個,昨天也是發現passdock的advance可以自定好多玩意除了條碼以外的資訊可以自己惡搞很好玩XDDD我看了一下卡片的條碼基本上是用CODE128,不要亂改比較好另外我發現GPS雖然有十個可以用,但修改後在進去編輯第六個以後的GPS資訊回不見,不知道是不是網站的問題
作者: dctmax   2017-03-31 14:42:00
david大做的也很漂亮!
作者: guessssss (簡單生活)   2017-03-31 15:34:00
看來D大要分享教學文了...
作者: ccyou (囧爺)   2017-03-31 15:37:00
推分享~但字卡顏色好難調@@
作者: Mowd (mowd.tw)   2017-03-31 15:57:00
http://i.imgur.com/bTLawC7.jpg 感謝分享心得,原先卡關在把卡片分開,原來要改憑證
作者: Mrmad (瘋先生)   2017-03-31 16:28:00
提供教學與配色 https://goo.gl/0NIGFc
作者: hopeless3802 (Sunday)   2017-03-31 16:32:00
passdock的比較好,條碼在相對比較上方但也比較難設計,英文苦手QQ
作者: cwl717033 (正常人都會看指標搭捷運)   2017-03-31 16:47:00
做好是做好了,但要怎麼把卡片分開放呀 憑證要怎麼改?@@http://i.imgur.com/SrUqwnf.jpg
作者: Abiou (Abiou)   2017-03-31 16:55:00
成功把卡放進去http://i.imgur.com/ffsGbaO.jpg
作者: phoebe147 (PHEEEEEEEEEEE)   2017-03-31 17:47:00
我自己打卡號上去的都不成功耶@@
作者: dctmax   2017-03-31 18:19:00
跟大家分享一下 我用ColorHelper 這個app 幫忙看色碼 不過這個app介面還蠻簡陋的就是了
作者: cwl717033 (正常人都會看指標搭捷運)   2017-03-31 18:29:00
我也成功了!感謝教學與幫助!http://i.imgur.com/Qu55JCB.jpg
作者: dctmax   2017-03-31 19:02:00
不知道F大方不方便分享素材 有些自己找的感覺沒F大的好
作者: cathysakura (NINAxHIME)   2017-03-31 23:35:00
大潤發會員號碼太長...超過了...XDD
作者: moto615 (MoTo)   2017-04-01 05:04:00
改憑證一直出現錯誤,卡關QQ
作者: wei82519 (Wei)   2017-04-01 09:48:00
想請問logo放上去的狀況 已經調過與logo背景相同顏色 可是最上面會有漸層效果 不知道是否可以避免><
作者: Feases (<( ̄︶ ̄)>)   2017-04-01 10:38:00
原po的設計跟推文中的卡片都用得很漂亮耶,還以為是店家推出的公版
作者: wayne2099xu (Wayne2099xu)   2017-04-01 21:19:00
終於也做好自己的了http://imgur.com/XwiqFUv
作者: asusfrank (frank)   2017-04-01 23:38:00
大家好厲害!請問屈臣式的logo 怎麼找,因為找到都有白底!
作者: awpex127 (Brian)   2017-04-03 17:49:00
找png檔 或是自己用修圖軟體把白底透明化
作者: Ibugi (人生是條偉大航路)   2017-04-04 01:32:00
謝謝原po 我學會了 http://i.imgur.com/9ivuHA3.jpg

Links booklink

Contact Us: admin [ a t ] ucptt.com