Wの亂入開發之道: 2015

2015年12月28日星期一

搞死人的express json問題

res.json()//在異步裡會 Error: Can't set headers after they are sent.
改用res.end(JSON.stringify(doc));

router.get('/find_db', function(req, res, next) {
var no = req.query.no;
M.connect(url, function(err, db) {
assert.equal(null, err);
var cursor = db.collection('question').find();

cursor.each(function(err, doc) {
if (err) { callback(err); return; }

assert.equal(err, null);
if (doc != null) {
console.dir(doc);
res.end(JSON.stringify(doc));

} else {

}
});

});
});

//上述方法browser 讀取會錯誤，因為header 已經被route給寫了
//給browser用還是得寫在

app.use('/a' ,function(req,res){
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify({ a: 1 }, null, 3));
})

install mongodb on aws ec2

他那個mongodb的install ec2官方文件是舊版的，有些是錯的

參考這個

https://docs.mongodb.org/v3.0/tutorial/install-mongodb-on-amazon/

sudo yum -y update

echo "[MongoDB]

name=MongoDB Repository

baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64

gpgcheck=0

enabled=1" | sudo tee -a /etc/yum.repos.d/mongodb.repo

sudo yum install -y mongodb-org-server mongodb-org-shell mongodb-org-tools

sudo service mongod start

2015年12月10日星期四

ec2 install redis

http://codingsteps.com/install-redis-2-6-on-amazon-ec2-linux-ami-or-centos/

2015年12月9日星期三

ssh 連instance

ssh -i ~/.ssh/aws-eb ec2-user@XX...

eb create 時會問你要不要產生key

指定好key 的名字之後，記住它

再來ssh instance

搞定aws codecommmit git只要一個月一元，github要喝西北風了。

廢言

因為上次參加aws線上會議，知道aws一個月一個使用者只收1美元，一個git repo就0.001美元。

跟github最低收費一個月7美元，才5個git repo真的差太多，立碼就決定換。

不過第一個就遇到ssh連線的問題，完全不想碰，因為當年這個東西很新。

所以就擺這這個問題一陣子。

不過後面coding發現aws連線完全改ssh了，所以沒有辦法只好開始學ssh。

廢言止。

＝＝＝＝＝＝＝＝＝分隔線＝＝＝＝＝＝＝＝＝＝＝＝＝

aws codecommit 價目表https://aws.amazon.com/tw/codecommit/pricing/

從這裡開始 http://docs.aws.amazon.com/codecommit/latest/userguide/setting-up.html

超多權限要設定....

2015年11月3日星期二

AWS node.js bug 502 Bad Gateway nginx/

每次看到這個 502 Bad Gateway
真的很另人氣結
因為nginx把所有錯誤所攬了，
真是另人吐血
https://forums.aws.amazon.com/thread.jspa?messageID=639797

I've encountered this problem repeatedly a couple of times so here is a checklist I find useful:

1. Is your app run by 'node' or 'nodemon'? If it's nodemon, modify the package.json and use node instead.
2. Is your main app file named 'app.js'? If yes, change it to a different name [1]
3. Have updated your package.json file with modules that you recently locally installed (npm install )?

Feel free to push more items to it.

最近抓502心得
package.json裡
"dependencies": 這個是一定要安裝，通常是Serve r端一定要用到的例如 express ... <-- aws="" ec2="" font="">

"devDependencies":這個通常是開發用的元件，例如 webpack...

有時候沒注意到，把放dependencies的丟到devDependencies裡，結果就很長發生本機可以，但丟到aws上就不行了。

2015年10月24日星期六

Step by Step develop Parse React Mobile Web 5 react server side

https://github.com/mhart/react-server-example
需要從　server side 倒值的處理方式。

2015年10月17日星期六

aws nodejs S3 begin

照這個範例

https://aws.amazon.com/tw/sdk-for-node-js/

執行


var AWS = require('aws-sdk'); AWS.config.update({
    accessKeyId: "xxx
    secretAccessKey: "xxx"
  });
//要先設定key pair
var s3 = new AWS.S3(); 


 s3.createBucket({Bucket: 'myBucket'}, function() {//這個bucket要在後台先開好，不能用create的
  var params = {Bucket: 'myBucket', Key: 'myKey', Body: 'Hello!'};

  s3.putObject(params, function(err, data) {

      if (err)       

          console.log(err)     

      else console.log("Successfully uploaded data to myBucket/myKey");   

   });

});
//因為無法createBucket跟本不能用

這設定這邊
https://console.aws.amazon.com/s3/home?region=us-west-2&bucket=demodemodemowolke&prefix=
1.開bucket
2. Add more permissions

Add bucket policy

Edit CORS Configuration

選edit CORS..
3.設下面這個，就可以在Local端玩S3了

http://localhost
PUT
POST
DELETE
POST
3000
*

//code改這樣

var s3 = new AWS.S3();
var params = {
Bucket: 'demodemodemowolke' /* required */
, Key: 'key.TTF', Body: file
};

s3.putObject(params, function(err, data) {

if (err)

console.log(err)

else console.log("Successfully uploaded data to myBucket/myKey");

});

2015年10月11日星期日

Step by Step develop Parse React Mobile Web 4 一個很簡單可以開始寫react的框架

server.js:
var http = require('http');
var fs = require('fs');

var html = fs.readFileSync(__dirname + '/index.html', 'utf8');
var css = fs.readFileSync(__dirname + '/css/style.css', 'utf8');
var js = fs.readFileSync(__dirname + '/js/bundle.js', 'utf8');

var server = http.createServer(function (req, res) {
if (req.url === '/') {
res.writeHead(200, { 'content-type': 'text/html' });
res.end(html);
} else if (req.url === '/css/style.css') {
res.writeHead(200, { 'content-type': 'text/css' });
res.end(css);
} else if (req.url === '/js/bundle.js') {
res.writeHead(200, { 'content-type': 'application/javascript' });
res.end(js);
}
});

server.listen(80, function () {
console.log('Listening on http://localhost:' + server.address().port);
});

這樣就可以開始寫　REACT了。
後記：本來想要兩天搞定這個開發框(node server on AWS)，不過卡了四天，主要原因是我~~跑去看絕地救援誤，~~node 的觀念，和以前LAMP差太多，如果有先入為主的觀念，一直想說Web Server不給個資料夾就好，不然要幹嘛，就大錯特錯不要來了。
node 是個開發什台，不只是可以用來架web server用。
因為我一開始的需求是寫parsereact，然後parse react都用node，所以就誤以為node是web server，因為一開始邏緝搞錯了，所以就陷入迷團之中。
總結：
node 有一個 npm，上
beginner guide
http://blog.reskill.me/node-js-tutorial/?utm_source=soical&utm_medium=gp&utm_campaign=udemy_node

2015年10月9日星期五

Step by Step develop Parse React Mobile Web 3 node express 發佈到aws

http://docs.aws.amazon.com/zh_cn/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html

一直做到 sudo eb config

這裡要改動　就沒有問題了

 aws:elasticbeanstalk:container:nodejs:
    GzipCompression: 'false'
    NodeCommand: 'npm start'

eb open

終於可以開始寫 parse react

2015年10月6日星期二

Step by Step develop Parse React Mobile Web 2 棄apache開始用 express jade 快速上手

前篇

Step by Step develop Parse React Mobile Web 1

用 apache 來run web server，
因為小弟停留在LAMP的時代，
所以...Web 就是用Apache啊！
不然要用什麼？

不用現在已經是node.js + express 的時代了。
從此篇開始導入node.js

懶人做法
＝＝＝＝＝＝
到工作目錄

$ express myapp

$ cd myapp 
$ npm install

copy ParseReact demo/todo的內容到 public目錄下
package.json

{
    "name": "foo",
    "version": "0.0.0",
    "private": true,
    "scripts": {
      "start": "node ./bin/www watchify -o js/bundle.js -v -d js/app.js"
    },
    "dependencies": {
      "body-parser": "~1.13.2",
      "cookie-parser": "~1.3.5",
      "debug": "~2.2.0",
      "express": "~4.13.1",
      "jade": "~1.11.0",
      "morgan": "~1.6.1",
      "serve-favicon": "~2.3.0"
    }
  }

/app.js


// app.use('/', routes);
app.get('/', function (req, res) {
  res.sendfile(__dirname + '/public/index.html');
});

這樣就可以run parsereact的範例在local端了。

2015年9月28日星期一

2015年對於React的期待。

2015年初，

開始流行起react.js，

這個由 facebook主推的一個library，

目前instragram...均開始採用這個作為網站架構。

主要是解決之前web前端JQuery邏緝所制作的網站難以維護的問題的一個解決方案。

2010年當年JQUERY之所以可以快速發展，

一。簡易ajax的觀念與Server端溝通。

二。拆解出HTML裡的DOM元件，

並且用簡單的語法包裝javascript，

使程式設計師便於撰寫操作DOM元件的部份。

但也因為JQuery太靈活了，

所以導致其有維護上的困難。

經過了這幾年，

fb 提出react + flux，

主要的觀念就是虛擬DOM包裝你所需要的元件，

並且以flux定出一個邏緝流程，

Jquery過於靈活的問題。（就算jquery code是我寫的，但因為Jquery太靈活，到後面也會有維護上的困難。）

2015年中，

fb推擴react-native主要是react的觀念撰寫android ios原生APP，

是原生的喔！！！

但目前仍處於發展中的階段，故很多元件還不能共用，

web也還不能共用。

https://github.com/necolas/react-native-web

https://github.com/mjohnston/react-native-webpack-server

這兩個是react-native目前web解，不過等 react 0.14時，再來將react-native開發web，會比較明朗。

目前科技界start-up幾乎是完全轉向物聯網創業，

但我私心覺的物聯網是個假議題，

差不多是在２０１４年底，

全世界開始有志一向的將創業題目轉向物聯網，

但物聯網並不符合n倍成長的機會。

１。物聯網做的是硬體，大部份是小眾。例如３D印表機，四軸飛機。

２。如果創投期待物聯網創造出像ibm eason這樣子的硬體公司，那這間startup要有殺手產品，是大家都需要，不是想要的硬體，例如eason的印表機，ibm的商用主機。（大家現在物聯網幾乎大部份提的都是beacon，所以還是搭手機的應用，那為什麼不直接挑戰mobile web呢？）

３。所以，個人私心覺得物聯網，很有可能將只會是２０１５年的一個股市題材。

因為現在大家不下載APP了，

感覺像是wii停產前二年，

就算出新的遊戲，

也引不起興趣。

但是，

大家還拿著手機，

還在用fb 跟 line，

所以創業的出發點，

必需改為mobile-web first，

籍由分享或其他的方式，

吸引到第一批使用者後，

再搭APP將服務進駐至使用者手機。

感覺這個時間點是當年 web2.0時代的開端，

只是載具從個人電腦換成了mobile。

被逃汰的則是由努力不卸的製作Content的APP開發者，

將Content的制作者轉為有所需專業的使用者。

雖然web-MVP的作法百百種，

不過考量到之後不小心做起來的擴充性(將web做成app及其他的，並以最少成本開發及維護)，

REACT得確是非選不可。

2015年9月14日星期一

Step by Step develop Parse React Mobile Web 1

前言

因為太久沒摸web，

而且也沒有在mac上開發 WEB 的經驗，

然後直接要挑戰 react 套 parse，

所以記錄一下。

需要：

run local端的 apache server：才能符合真正web的情境。

mac 本身有內建apache server: 開 terminal 輸入 sudo apachectl restart
browser 輸入 http://127.0.0.1/
It works

因為很多開發包解壓後會有一個目錄含index.html，所以改工作環境作測試之用。

/private/etc/apache2 編緝 httpd.conf
改 DocumentRoot "/Users/username/Sites/testsite/"

2015年9月2日星期三

android studio 新增 app module

app和lib的module
apply plugin: 'com.android.application'
apply plugin: 'com.android.library'

2015年8月19日星期三

facebok android 4.0.0 loginbutton loginmaster callback stranger bug

no matter use login master or login button to register login callback;
only loginButton.registerCallback can be work

 loginButton.registerCallback(callbackManager, new FacebookCallback() {
            @Override            public void onSuccess(LoginResult loginResult) {
            }

            @Override            public void onCancel() {

            }

            @Override            public void onError(FacebookException e) {

            }
        });

facebook graph api use new request to avoid strange problem

Bundle parameters = new Bundle();parameters.putString("fields", "id,name");GraphRequest request = new GraphRequest(AccessToken.getCurrentAccessToken(), "me/accounts", parameters, null, new GraphRequest.Callback() {
    @Override    public void onCompleted(GraphResponse graphResponse) {

    }
});

2015年7月27日星期一

android viewpage 除了前後fragmet 外，有時可能會將以外的fragment 回收

solution
自訂 FragmentPagerAdapter

HashMap,

Fragment> cachedFragmentHashMap;

@Overridepublic Fragment getItem(int position) {
    Fragment f = cachedFragmentHashMap.get(position);    if (f != null) {
        return f;    }else{
            f = OtherFragment.newInstance();            break;    }
    cachedFragmentHashMap.put(position, f);    return f;}
 @Override    public void destroyItem(ViewGroup container, int position, Object object) {
//        super.destroyItem(container, position, object);       
    }

android parse query pinAll 如果有含query 而且 relation getQuery出來的他的 query 會是 0 ，要用 pin(pinName)將結果存起來，就沒問題了。

solution:

ParseQuery query = ParseQuery.getQuery(Detail.class);if (formPin) {
    query.fromPin(FriendList);} else {
    ParseQuery q = ParseUser.getCurrentUser().getRelation(Consts.friends).getQuery();    query.whereMatchesQuery(Consts.Owner, q);}
return query;

2015年7月20日星期一

android chrome 網頁綁架

這個還滿高竿的，
這支app下載後只在背景跑，
也不會秀在launcher，
只能從，
設定
應用程式管理
全部

一個紅色 android 小人的 phonebooster
點進去後，
按移除。

2015年7月19日星期日

實現line fb 的訊息通知

http://stackoverflow.com/questions/15975988/what-apis-in-android-is-facebook-using-to-create-chat-heads

android:name="android.permission.SYSTEM_ALERT_WINDOW" />

2015年7月10日星期五

Avoiding fragment duplicates

if (mainview != null) {
    ViewGroup parent = (ViewGroup) mainview.getParent();    if (parent != null)
        parent.removeView(mainview);}
try {
    mainview = inflater.inflate(R.layout.fragment_user_group, container, false);} catch (InflateException e) {
/* map is already there, just return view as it is */}


http://stackoverflow.com/questions/11520761/avoiding-fragment-duplicates-app-crushes-due-to-the-id-property-of-the-fragment

2015年6月22日星期一

make require.js currently

require(['./components/post/postbox'], function() {
var PostBox = require('./components/post/postbox');
alert(PostBox.name);
});

http://blog.csdn.net/aitangyong/article/details/40708025

2015年6月21日星期日

right way to set default apache server of mac

http://apple.stackexchange.com/questions/131297/how-to-fix-permission-denied-for-home-folder-with-apache-in-mavericks

2015年6月18日星期四

Parse + React 前言

try to use Parse to solve data share problem

for startup today. 2015 summer

今日要進入mobile為主的機會點，
應當是在東協六國，
著眼於智慧型手機人口其在未來五年之內的成長。
目前六億人口僅有不斷一億人拿智慧型手機。

但盲目的以在地語系開發新app來進入市場，
無疑以卵擊石，
必竟眾多分群的app，
早已在為其五年的競爭裡，各項功能都已進入了成熟期，

也就是你在該分類市場裡，
開發一支不成熟的APP對決的是早已開發良善的APP，
結果自然是...

但隨著 android進入八核時代且只賣200美金。

以mobile web為進入點，
讓使用者能快速進入你所給的情境，
並試機使其下載app常駐使用者手機，
或許會是這個時MD一個較為可行的策略。

總之就是，先養社群，再圖常駐手機。

2015年6月15日星期一

新創app已死。

我跟女朋友打睹十萬，
我能在離開之前團隊後，
兩個月內，

再做出個新idea的成功app題目（kpi定義:　adu至少要到 1000人次。）

因為一兩年沒做主要領導者，
還在用一兩年前的經驗來看App。

結果這兩個月的研究，
只得到一個結論：

2015年做新idea的app機會已死，
人們不再盲目下載新app，
來成為你的測試團隊。

目前app會被下載，
主要以社群推廣為主，
人們盡力的刪除非必要性的app，
並在同質性app裡擇一，
已經很少人會主動探索新app，。

也就是假設區塊市場裡做出類似產品，
產品必需有不同且吸引人特點，
並且依靠社群推篤及病毒行銷。

例如：
修圖app市場，
目前大約就是幾支app頂立，
但武媚娘妝靠特色獲得病毒下載。

再講個笑話，
有個朋友最近做到台灣android付費app前十名，
當我向他恭喜時，
結果原來他只賣了30組。

結論：
2015年用App來做新創，
幾乎沒什麼機會了，
APP已進入大者橫大時期。

二〇一五年新創團隊的新機會：
目前看起來，
１。做物聯網(需軟硬體整合人才，硬體開發有固定成本，所以新創團隊一開始就需要資金，如果有真正的風投(台灣沒有，台灣只有很多人會嘴巴放屁，可惜無法開發成產品)或群募環境成熟)，比較有機會從０走到１。

２。以遊戲價值為主要訴求的APP，例如武媚娘妝，２０４６。

３。不然走回mobile web（開發端的預設手機browser，走世界市場是fb內建browser，在大陸是wechat內建browser)。

３。１。為什麼我覺的mobile web，
可以有機會成為今年新創機會點的原因是，

現在的智慧手機的broswer端的上網體驗，
已經不像前幾年，
開網頁會讓人抓狂，
因為慢，
或是不支援手機營幕來做設計。

而主要的網站，
也幾乎都以mobile web體驗來做設計。
已經不需要一個好用的browser app來做放大縮小來看字看圖了。

而原本原生app常用的功能，
本來就幾乎可以被html5取代，
但前幾年手機硬體端效能太差，
所以還是原生體驗會好很多。

但今年八核一出後，
幾乎我完全感覺不出，
開網頁有任何lag的狀況了。

３。２。目前存活的大網站，
幾乎沒有人是從mobile web開始做的，
所以他們的mobile web ，只是支援，
前兩年也不太可能有人從mobile web出發，
因為實在太lag。

所以我又打算睹接下來的兩個月，
從mobile web來做mvp產品，
目標還是一樣的kpi: adu 1000人次。

但我很久沒寫web啦，
我還停留在gae + jquery，
目前主流是 react + flux 正熟悉工具中。

關於我的觀點有誤，
歡迎先進炮我，
我也怕我走錯路。

另外，
如果不麻煩也請link一些關於mobile web的台灣撰寫者的社團給我，
感謝。

來源https://www.facebook.com/love.Rimmy/photos/t.1450338242/651164718361756/?type=1&theater

2015年6月14日星期日

當成為大學必修學分的時候，
應該就是該產業死的開始。
(不知道林山人這次準不準啊...)

2015年4月29日星期三

google fonts api

Making the Web Beautiful!

This is a font effect!

2015年4月1日星期三

重新成為自由人的興奮，
壓過我對於未來收入不確定的恐慌，
這就是創業人啊。

2015年3月28日星期六

fb messenger android sdk 太新啦

這個沒寫到

記得要加

@Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     FacebookSdk.sdkInitialize(getApplicationContext());
}

2015年3月24日星期二

AS 的開發之路 fix bug

Caused by: java.lang.IllegalArgumentException: cannot setReadAccess for a user with null id
at com.parse.ParseACL.setReadAccess
解法
刪除手機上的app 重新debug。

2015年1月21日星期三

fb

訂閱：文章 (Atom)

Cooperation

標籤

訂閱

網誌存檔

Facebook

analytic

總網頁瀏覽量

熱門文章

訂閱

2015年12月28日 星期一

2015年12月10日 星期四

2015年12月9日 星期三

2015年11月3日 星期二

2015年10月24日 星期六

2015年10月17日 星期六

2015年10月11日 星期日

2015年10月9日 星期五

2015年10月6日 星期二

2015年9月28日 星期一

2015年9月14日 星期一

2015年9月2日 星期三

2015年8月19日 星期三

2015年7月27日 星期一

2015年7月20日 星期一

2015年7月19日 星期日

2015年7月10日 星期五

2015年6月22日 星期一

2015年6月21日 星期日

2015年6月18日 星期四

2015年6月15日 星期一

2015年6月14日 星期日

2015年4月29日 星期三

2015年4月1日 星期三

2015年3月28日 星期六

2015年3月24日 星期二

2015年1月21日 星期三