發表文章

Featured Post

Pinkoi 的設計館嵌入粉絲頁出現 "This page does not have permission to install the custom tab"

圖片
有些剛加入Pinkoi的新朋友~
經營FB粉專沒多久 就因為作品很讚 通過Pinkoi 審核了

阿傑老師先在這恭喜妳喔~

開開心心上架 然後在使用
設計館嵌入粉絲頁
發生問題怎辦 如何解決~?(見下圖)





為蝦米哩!? WHY !?

網路上有很多解決辦法
但應該試過了都無效!?

為啥?

來 答案在這邊~


Facebook for Developers
圖形 API | 行銷API
第2.11版

90天期限重大變更
https://developers.facebook.com/docs/graph-api/changelog/version2.11/#gapi-90-pages



要使用page/tabs必須符合以下兩點其中一點:

1.只有擁有超過 2000 名粉絲的粉絲專頁
2.列入允許清單的應用程式所管理的粉絲專頁

要在Pinkoi 正常使用此功能最完美的方法 就是 粉專人數達到2000

那人數未達到2000怎辦~?

方法是有的, 但做出來效果會很差, 而且挺麻煩的~

如果真的要學 那阿傑老師可以告訴妳~

來 廢話不多說了~

1.進入https://developers.facebook.com/ 
2.創建一個應用如下圖

顯示名稱: 中英文都可以 建議可以輸入英文
聯絡信箱: 不解釋

3.左邊設定點下去



4.基本資料點下去後點選新增平台

5.選擇粉絲專頁頁籤


6.選擇後會出現以下區塊

請填寫:
1.安全粉絲專頁頁籤網址:
意思就是在粉專新增的這個標籤點下去要把哪個網址崁進來~
是崁進來 不是連出去喔~ 切記

2.粉絲專頁頁籤名稱:
這不解釋~

3.如果想上傳粉絲專頁頁籤圖像也可以:
你可以上傳 JPG、GIF 或 PNG 檔案。圖像大小須為 111 x 74 像素。檔案大小上限 1 MB。

7.超級無敵快 又到了說掰掰的時候~
來 我們開啟瀏覽器 輸入一下:
https://www.facebook.com/dialog/pagetab?app_id=這邊輸入妳的應用&redirect_uri=這邊輸入妳剛輸入的安全粉絲專頁頁籤網址
app_id 就是 應用程式編號~
在設定 > 基本設定 > 應用程式編號(第一行 非常明顯~)

8.輸入完妳會看到下圖
選擇要崁入新標籤的粉專 再按新增粉絲專頁~
9.水喔~成功了 來去粉專看看 左邊出現新增標籤~ 右邊內容崁入網址了~



WordPress 系列(一)如何快速安裝?

圖片
有鑑於很多設計師朋友, 開始想要接一些網站的Case
但又不會 HTML, CSS, PHP , MYSQL (阿不會發包給我喔~)

這些設計師朋友也不知道哪裡聽來 WordPress 很簡單好用 (簡單幹嘛還要我教@@?)
卻又不知從何而起~(阿不是很簡單?)

好啦 為了響應 賴院長 的做功德~
阿傑老師就來教一教大家瞜

老師大概規劃一系列教學
從如何安裝到教你怎樣自己寫版型

不保證讓你一飛衝天~(如果還是嫌麻煩就直接外包給阿傑老師做喔~乖)

好啦 廢話不要講太多 我們就來開始進入主題瞜~

以下工具請先準備好:

1.一台電腦 (桌機, 筆電都可以, 本篇教學先用 Windows)
2.準備安裝環境, 老師這邊推薦 XAMPP
不要選錯喔 本教學請下載 Wimdows版
點選下一步 完成安裝


3.下載WordPress
老師是選擇最新版~

4.下載一個很帥的開發工具~Visual Studio Code
進去首頁後 點選下載即可


以上準備完成先喘一下~呼

喘完後繼續~
同學安裝完 XAMPP後 會出現一個XAMPP Control Panel工具
給他點下去~

Apache 以及 MySQL Start給他按下去~完成啟動

再來我們到安裝路徑下來新建一個WP專案(本範例是安裝在C槽)
路徑為:
C:\xampp\htdocs
新增一個專案資料夾(AJframes)結構如下圖:
再來把剛剛下載的WP壓縮檔 解壓縮
複製底下的所有資料夾 然後 複製到 AJframes裡面,
最後結構如下圖:


接下來步驟不要眨眼喔~
1.開啟瀏覽器
2.輸入 http://localhost/phpmyadmin/
成功的話你會看到下圖

3.新增一個資料庫(名稱請自取~) 編碼選擇 utf8_unicode_ci

4.新增使用者(設定登入後台的管理員帳號)

5.依序填寫帳號 / 密碼 / 全域權限全打勾 後再右下角點選 執行 
( 任意主機請改成 localhost )

6.再來點選資料庫, 選取新增的資料庫再按執行

7.把權限都打勾 再按執行



8.瀏覽器新增一個分頁 然後輸入http://localhost/AJframes(這邊是你資料夾自己取的名稱喔~)
成功的話會看到如下圖

點選衝吧~

9.依序填入 資料庫名稱 / 使用者名稱 / 密碼(請填入你設定的資料)

接下來 應該會出現錯誤畫面

別擔心~
我們開啟 V…

IOS如何快速通過審核?

圖片
相信很多開發者 在開開心心開發完 IOS APP 後
想要發佈第一版到商店~

就開始掉入 無盡審核退件地獄中~@@

阿傑老師這篇 只做一些經驗分享
希望能幫助到 那些卡在審核中 苦苦等待的朋友們

退件理由?

通常被退件的理由 網路上已經有大概整理出來
如果你被退件的理由是 這些SOP下的原因

恭喜你~ 只要照著測試員說明
通常都可以過件

需要注意哪些?

有些部分是開發者疏忽造成

例如:

阿傑老師專案一開始有安裝了 Apple PAY來調用
但最後提交版本時 老師是使用了 IAP
完全忘記 原來我安裝了 apple pay 卻沒有呼叫他 @@

像這類開發者疏忽 可以再送審前 仔細檢查一下喔~

被惡意玩弄怎辦?

怎樣算是被測試玩弄?
阿傑老師分享一下自己的例子~

在某個月夜風高的晚上 老師開心的debug完 把專案上傳送審了
送審前 很清楚的(英中)備註說明了登入測試流程

但 工作忙碌的 測試員 還是持續出包(同樣的問題 又給我退件問一次.....)

這時 老師的小宇宙也爆發了~

老師有練過 小朋友不要學吼~ 乖...

就算再不爽 同學也不要點右下的 檢舉此審查 (真的不要檢舉!!!!) ~

檢舉後就是無限鬼打牆模式

阿傑老師那時就是給他檢舉下去 (還檢舉兩次)...

之後我就被惡意玩耍了~><

檢舉過後沒多久
當然跟我想的一樣 一定會被退件 (真奇怪 已經很期待看到每次被退件的理由~)

但檢舉後更猛了 竟然 貼給我上百則 log......

你用TestFlight 或是正常商店下載 最好他X的有log (喵的)........

測試員擺明用 Xcode 來開你的專案~

怎辦 被玩了 無解嗎?

不要擔心 老師來說一下怎處理~

1.換審核測試員(靠x - 還能指定喔?)

當然不能指定!!!
只是 據老師觀察下 老師強烈的懷疑
Apple 在第一次送審時(也就是還沒第一次過件時).
送審案件 是以亂數 來分配 測試員的~

這些亂數 可能會根據 測試員當班時間有所改變

換句話說 你每次都在早上10點提交
很有可能 會把案件分發給同一位 測試員~

老師測試過很多次 還真的有用!!!!

怎樣換?
當你覺得 你的送審進度 已經是被無理要求時
除了檢舉外

你可以選擇自己取消這次審查
取消後 提交會變成紅色的 由開發者拒絕

對 這樣是對的

請在下一個時間區段再重新提交一次看看

React Native 系列教學(一)

圖片
在開始前 同學可以看看 這篇  Expo 是天堂還是地獄?
以選擇適合自己的模式

老師以最後要上架到 Apple / Android 商店為教學主軸
所以就先以 react-native init 的方式來創建專案

同學若還沒購買電腦 往後想要開發 IOS / Android 的話
強烈建議 可以購買 Mac

因為Mac 目前可以開發雙系統 APP
Windows 除非使用 Expo 不然短期內 還是只能開發 Android


React Native Getting Started

1.安裝依賴
Installing dependencies You will need Node, Watchman, the React Native command line interface, and Xcode.

這是開發 iOS 專案 需要的項目

1:Node
2:Wahchman (非必需, 但又沒道理不裝@@)
3:React Native command line interface(CLI)
4:Xcode

來說明一下:

1.Node - 基本上 Mac 已經內建了 node
如果您已經在系統上安裝了Node,請確保它是版本6或更新的版本。

同學可以輸入:

node -v 來查看版本喔~
v6.11.4 --阿傑老師用的版本

2:Wahchman
Watchman是Facebook觀看文件系統變化的工具。 強烈建議您安裝它以獲得更好的性能。

brew install watchman
3:React Native CLI

npm install -g react-native-cli
4.Xcode 基本上 Xcode也是Mac內建 不需要特別再安裝..除非手x把它移除了~

Mac 開發環境其實很優化了
以上步驟真的是非常容易操作~

接下來 我們來創建專案

react-native init yourProjectName (駐1)
駐1: 此部分是您的專案名稱 請輸入自己的專案名稱, 不要使用中文喔

創建中會把相關依賴給安裝進去 大概起來扭一扭腰就完成了~

再來執行專案

cd yourProjectNamereact-native run-ios (駐2)
駐2: 使用指令來執行專案類別 要啟動Android 專案時(需安裝Android相關依賴)
請輸入 react-native ru…

Expo 是天堂還是地獄?

在正式進入開發前

老師想先跳到這邊來談談 應該怎樣選擇專案建立方式?

若跟著 React Native 官方安裝步驟走
相信很多初接觸 React Native的同學們

一定會選擇使用 快速開始(Quick start) 來創建APP專案程序

恭喜你 照著官方走 地獄拉拉手(喂~)

老師今天就來點亮一盞明燈 ~ 少讓同學誤入歧途吼!!

來 廢話不多說 ~

React Native 之照著官方走之 Quick start 他的優缺點是沙米哩?

優點:

1.在手機上測試 夭壽方便 (金甲有夠快 ~! 嚇死寶寶了, 開發Android 和 iOS就知道 環境建構非常麻煩....尤其是Android的環境, Expo完全打破以往開發者的體驗.. npm start 給他按下去後 會出現一個 QR..也就是你要測試的手機安裝完Expo 後 掃描完QR 你的App 就可以在手機測試了...金架有夠夭壽~ 以往Android開發者初次建構環境 還在給他下載SDK溜~)



2.常用的元件 幾乎都有給他不錯的整合進去~ (使用起來很方便)

3.發佈到 Expo 平台很方便.除了 Android / iOS store 外Expo 提供了更快速的app發佈機制.
一樣的道理 當你的APP發佈到Expo平台後 user 只要掃瞄app的 QR 就能安裝到手機上瞜~

通常知道以上這幾個優點的同學們 一定 very 送的就給他 Quick start下去
看完優點我們來看看缺點~

缺點:

1.創建專案後 習慣看到的React Native結構會大大不同, 例如 ios/android資料夾沒了~
通通整在一起~(阿這樣不是更水 更乾淨!? 對的 水
開發到後面你會發現 很多教學都跟你不對盤~你就知道頭痛要開始 )

2.bug 頗多~ 除非你要開發的APP 非常單純 不然多做一些功能串接後
一樣會發現 一些內存的問題 慢慢浮出檯面~

3.發佈到iOS 與 Android 有點麻煩 ~ 除非App 不考慮發佈到 Apple / Android 不然這會是很大的問題

阿傑老師大概就只提這3個 開發者在後續開發中 常碰到的問題
同學們 不妨兩種方式都玩看看 應該就能有更深切的體會喔~

說完 告退 掰掰~








React Native, 開發 APP的神器

同學坐好來
老師今天要說一下  一款屌到那邊去的 APP 開發神器

React Native

這款原生App開發框架
始作俑者就是 惡名昭彰(洩漏幾千萬筆個資還不惡嗎!!!)
霸氣又臭屁(改API都不用公告 弄死開發者 還不霸氣嗎~)的 Facebook 是也

相傳這套框架 原本只流傳在 FB 內底自己使用
沒想到越用越優豆 技術也越來給他越成熟

就這樣不小心與達摩心經流竄到世上了~

React - web 框架使用
React Native - APP 框架使用

聽說 Facebook 自家的產品也是使用這兩套來寫的啦
也不知道是誰說的~姑且相信一下摟~


這樣一個寫一套 Javascript / React 框架 就能同時實現 iOS / Android
的外掛神器

阿傑老師實在不懂

國外都已經用到那邊去了

台灣為何沒有跟上 ~ 台灣為何沒有跟上~ 台灣為何沒有跟上~ (很不爽 所以多講幾次)

使用上到底有啥優點 那麼跩!?

廢話不多說
1.學習曲線適中(和 objective-C / Java 比起來) 應該比較看得懂
2.使用 Javascript 開發, 習慣 Javascript 的開發者 學起來有夠快
3.號稱寫一套可以同時開發iOS / Android (這點不唬爛, 還真的給他很好用)
4.所有組件都可以元件化(一樣的元件寫一次後 就可以大量複製 搬來搬去 搬來搬去)
5.開發出來的是原生APP, 使用過非原生開發 APP 的就知道 寫完以後效能是無法比的~

更多優點請看看老師的LP(著陸頁啦 不要給我想歪~)


阿都沒有缺點喔(葉佩雯吼)!??

那麼厲害怎可能台灣用的人不多?
其實對於以前使用 objective-C / Swift / Java 來開發 iOS / Android 的開發者來說
使用後整體開發速度 和後續維護相關的成本 是可以很深刻體會到的~

網路上已經出現很多優缺點比較~
有興趣的人可以自己去找找~

但真的最可怕且致命的缺點
老師很真誠地告訴你
那就是~

如果這次FB官司失敗可能就沒有辦法維護這框架了(逃~)


好啦 廢話不多說~
以開發者經驗良心推薦

如果 帥哥美女們 沒碰過程式
又想學習怎樣標準化開發APP

真心推薦 React Native

之後會陸續推出一系列開發教學文章~
要期待嘿~ 掰













lookaside.facebook.com 404(photoURL顯示錯誤) 問題

圖片
關於這次 facebook 更新後產生的問題

有使用 fb 來串接登入的開發者
不管是APP 或是 web
幾乎都會發生此問題

觸發問題發生的操作如下:

user 第一次登入你的 web 或 APP 後 顯示會正常
當曾經登入過的user 再次登入你的 web 或 APP後
這問題就出現了,

也就是只要你有撈 photoURL的欄位 有機率掛掉.....(就是撈不出使用者圖片)


你可以在你的資料庫找出user 看看他的 photoURL
使用browser來測試 輸入photoURL後
會出現以下錯誤



目前這問題 主要原因是 fb 這邊引起
開發者怎麼debug 怎樣優化
都還是有發生的機會,

阿傑老師這邊有個應急的做法~
雖然很笨, 但是很應急啦 =  = (比顯示在那邊 空白還好吧)

笨方法就是:
從你的資料庫 去抓出現錯誤的 user
然後 去找出該user 的 fb
找到後 下載他的大頭照 photoURL
複製完這個網址後 更新到你的資料庫
你會看到

原本出現錯誤(一片空白的 user photoURL) 又活過來了~ 萬歲

but.....此user 若再次登入你的裝置...
問題可能又發生 >< (是要弄死誰啦~!)

不想被弄死的工程師, 阿傑老師再跟你說個絕招~!!!!!! 就是 不要讓老闆知道有這bug!!!!!! (阿阿阿 開發者的心聲阿~完美解決~)



目前此問題 FB 還在追蹤, 還是沒有完美解決
我大致上把問題 整理如下, 持續追蹤中~

https://developers.facebook.com/bugs/155632151793447/
https://developers.facebook.com/bugs/161465057898188/
https://developers.facebook.com/bugs/261587761048160/
https://developers.facebook.com/bugs/560392384345729/


FB 加油 趕快修復好啊~