發表文章

Featured Post

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 加油 趕快修復好啊~




閱讀完整內容

ChatBot 聊天機器人教學(第一集)

-
圖片
有鑑於 太多客官(也沒很多 10幾 20個而已~)和阿傑老師反應 fb的聊天機器人怎用?

阿不會自己看官方說明文件喔!!(挖鼻孔)
人家我也是以秒計費耶~(這裡沒有反白)
好啦~ 誰叫老師是 柔情似水鐵漢子 體雄勾稿威(不是一樣!?)的雙魚座呢
阿傑老師就來說明說明 應該怎樣串接這屌爆的fb 聊天機器人喔~
廢話不多說~來我們開始來玩 聊天機器人摟~(以下內容參考官方文件說明)
一 基礎配置
Step1: 非常重要!! 你要有 Node (啥毀!? 阿沒有Node 都去吃xxx喔!?)關我屁事 @@ 官方現在是這樣要求啦(這裡沒有反白)
工商時間 阿傑老師目前也正在開發聊天機器人喔~(APP與Web 都能輕鬆整合~)
Step2:設置 WebhookYour webhook is the core of your Messenger bot experience. This is where your code lives, and where you will receive, process, and send messages. In this guide, you will learn how to set up a basic webhook that supports the Messenger Platform's required webhook verification step, and is able to accept webhook events. 阿傑老師神翻譯: webhook是啥? 很重要跟著做就對了 別問!! (老外寫一堆 我一行就處理掉了~)
Webhook 照著做模式開啟:   開啟您的終端機(Mac) / 命令提示字元(Window)1.創建一個資料夾 AppledeMacBook:Apple$ mkdir ajchatbot
2. cd 到你要把專案建立在那的資料夾~(cd是啥? 可以吃嗎? ......同學  瀏覽器右上方 有個xx 點下去~)
AppledeMacBook:Apple$ cd ajchatbotAppledeMacBook:ajchatbot Apple$
3.創建一個空的index.js 文件

AppledeMacBook:ajchatbot Apple$ touch index.js
touch 是 …
閱讀完整內容

如何在粉絲團設定自動回覆功能

-
圖片
相信很多有開粉專的朋友~

一開始都會非常認真 留意 有沒有通知!!
一看到有通知就立馬回覆~@@

阿都不會累喔~
每天24小時 這樣給他有夠累耶~

來喔來喔~老定糾老咖 ~ 阿母糾阿爸
阿傑老師今天要說明一下 怎樣自己搞定 FB Messenger 設定

讓您的用戶可以有更好的體驗
自己也不要那麼累


設定好 Messenger 有多少好處呢!?

自己看FB廢話連篇

廢話不多說~

Step1: 您要先有個粉專(廢話)

Step2: 若要建立 Messenger 問候語，您必須使用桌上型電腦

Step3: 來 看圖說故事, 進入粉專 > 右邊有個設定給他點下去



Step4: 左邊有好多功能 來 先把 訊息 點下去

此時您會發現 有個回覆小幫手(雖然寫得很清楚了 但我還是講一下好了)



1.向傳送訊息給你紛絲專業的所有人傳送即時回覆 主要是針對 有user 在你的粉專留言時 系統立即把制式化的訊息 顯示出來 選擇變更 可以打上自己想要回覆的訊息喔
2.無法使用電腦或手機時也能提供回覆 老實說 這功能 有點多此一舉 如果修改的好 其實 1和2根本一樣 都是在你無法及時回覆時顯示...各位看官怎看?
3.顯示Messenger 問候語 這個是在 user 點了訊息時 會先顯示的官方制式化訊息, 使用的當的話 可以幫自己品牌打一下廣告 和加分喔~

整個操作起來其實超簡單~

有開 粉專的 粉長(長出來的長不是粉腸喔......)~
記得花個幾分鐘 把設定弄好喔~



閱讀完整內容

Android Iap Payments 付款設定

-
圖片
因為每家 你要付款的銀行
收取的 電匯費用都不一定

所以開發者 有設定Iap 時

千萬要來把這設定改掉喔!!!!

系統預設 1美金 就能幫你電匯
但 電匯的金額 有可能超過一美金 = =

那不就白玩了...

來 老師跟你說
首先 先進入

google Play Console 點選 Payments設定


再點選 管理設定

進入後看到 付款時間表 給他大力點下去就對啦





記得依據你的需求 變更喔

記得一定要變更~

沒有 IAP 就沒差啦~~ 賣亂



閱讀完整內容