Wの亂入開發之道

Wolke

答案就是用
webpack 去壓 tsc 後的 bundle.js是可以的...

Unknown

Wolke

vscode debug
選 node.js 下node --debug-brk app.js
選 node.js 6.3+ 下node --inspect --debug-brk app.js
才能正常debug，有沒有inspect差在那裡，可能要等神來解答！

Wolke

將會以到金錢導向的數據分析做為主軸，
四處抄龔(誤)摘要好文，
以及分析目前善用數據分析經營良好的網站或app，
佐以個人的一點淺見和大家分享。

因為是目地導向，所以ui不以美醜為依歸，而以ux能否代帶來價值(主要是營收)為優先。
例如：實體產品的電商網站或app，如何操作讓客人到付費完成，甚至買下他不需要的東西；要知道，在物質過剩的時代裡，所有你要買的任何一件實體產品，至少有一萬件不同系列還躺在家ｘ福倉庫裡，乏人問津。例如兒童塑膠便當盒，每年的都有新的當紅角色讓家長掏腰包買下，那還可以用的舊的，就只能被丟棄了。
跟據某大樓的清潔員不具名表示，每天該大樓所丟棄的垃圾裡，至少有十分之一是修繕後，還可以再做使用的良品；而每週也常見過期密封包裝的食品，如罐頭等，他都撿回去了，哈。

會先從我較為熟悉的網站下手，之從再從流量100強，來挑分析標地。

2016年初的流量100強。

電商類：

台灣：
量販百貨型 momo 網站 app
http://www.momoshop.com.tw/main/Main.jsp

參考文件：
透視數據下的商機
https://store.readmoo.com/book/210060013000101

Wolke

export var bot = new builder.UniversalBot(lineConnector,{
localizerSettings: {
botLocalePath: __dirname + "/locale",
defaultLocale: "en"
}
});

//node dist/app.js 他的工作目錄會是 ./ 而不是 dist，所以用 __dirname 才不會有這些問題。

Wolke

import https = require("https");
import express = require("express");
import bodyParser = require('body-parser');
import request = require("request");
let app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());

app.get("/", (req, res) => {
res.end("home")
})

app.post('/callback',function(request,response){
console.log(request.body.code) //you will get your data in this as object.
console.log(request.body.state) //you will get your data in this as object.

response.end("ok")
})
app.listen(3000);

//1.get code
//https://notify-bot.line.me/oauth/authorize?client_id=...&response_type=code&redirect_uri=https://030b4fae.ngrok.io/callback&scope=notify&state=good&response_mode=form_post
//

//2.get access tokken
// var formData = {
// grant_type : "authorization_code",
// code : "...",
// redirect_uri : "https://030b4fae.ngrok.io/callback",
// client_id : "....",
// client_secret : "..."
// }
// request.post({
// url:"https://notify-bot.line.me/oauth/token",
// formData : formData
// },

// (err, httpResponse, body)=>{
// // console.log(err);

// // console.log(httpResponse);

// console.log(body);

// });

3. send message

request.post({
url:"https://notify-api.line.me/api/notify",
headers : {
"Content-Type":"application/x-www-form-urlencoded",
"Authorization" : "Bearer ..."
},
formData: {
message :"Hello Bady"
}
},

(err, httpResponse, body)=>{

console.log(body);

}

https://notify-bot.line.me/my/services/

Wolke

export interface Context {
path: string;
}
export interface Params {
[key: string]: string;
}

export interface ActionContext extends Context {
params: Params;
}

export interface AA {
ctx: ActionContext & C
// actionContext 的 params 必需有傳入的C的資結結構
}

ex:
var c:ActionContext = {
path:"1",
params : {
a:"b"
}
};

var aa:AA<{path:string}> =
{
ctx:c
}

Wolke

"dev": "tsc -w & NODE_ENV=develop nodemon static/server/index.js",
原本為了實現ssr 所以在 /server/index.js有用webpack hot reload，不過發現 client 和 server 改值，不會連動，乾脆直接
"dev" : "tsc -w & webpack --watch & nodemon static/server/index.js",
將webpack hot reload直接拿掉
直接webpack --watch

Wolke

http://stackoverflow.com/questions/39240241/jquery-requires-a-window-with-a-document-in-webpack

Unknown

因為覺得 Docker 應該可以獨領風燒下個 5 至 10年,就學了

Docker file

FROM node:6.8.0-onbuild
#從onbuild那裡拿，丟aws eb 比較不會有問題

ENV NGINX_VERSION 1.11.5-1~jessie
#nginx的veriosn

RUN apt-key adv --keyserver hkp://pgp.mit.edu:80 --recv-keys 573BFD6B3D8FBC641079A6ABABF5BD827BD9BF62 \
&& echo "deb http://nginx.org/packages/mainline/debian/ jessie nginx" >> /etc/apt/sources.list \
&& apt-get update \
&& apt-get install --no-install-recommends --no-install-suggests -y \
ca-certificates \
nginx=${NGINX_VERSION} \
nginx-module-xslt \
nginx-module-geoip \
nginx-module-image-filter \
nginx-module-perl \
nginx-module-njs \
gettext-base \
&& rm -rf /var/lib/apt/lists/*
#下載 nginx

# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log \
&& ln -sf /dev/stderr /var/log/nginx/error.log
#做 link

# Remove the default Nginx configuration file
RUN rm -v /etc/nginx/nginx.conf
#移除nginx原本的conf設定檔

# Copy a configuration file from the current directory
ADD nginx.conf /etc/nginx/
#新增本機端的conf設定檔到image裡

# Append "daemon off;" to the configuration file
RUN echo "daemon off;" >> /etc/nginx/nginx.conf
#用docker 的話，nginx設定檔得加一行

ADD default.conf /etc/nginx/sites-enabled
ONBUILD COPY . /usr/src/app
#將目前工作目錄copy 過來

CMD service nginx start & npm start;
#一定要&加在一起，而且只能一行，不然後行會取代前行...

EXPOSE 80 3000-3002
#因為新的nginx.conf設定從3000port轉過來，並且有設定gzip

nginx.conf
//proxy_pass http://localhost:3000; 直接轉3000 port的資料來用
//gzip_types 開啟那些附檔名

worker_processes 4;

events { worker_connections 1024; }

http {

server {
listen 80;
server_name localhost

client_max_body_size 1000M;

access_log /var/log/nginx/http.log;

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_min_length 256;
gzip_types text/html text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

proxy_pass http://localhost:3000;
proxy_read_timeout 300;
}
}

}

Unknown

aws eb 會認定沒有附檔名的檔案是yaml，會檢查格式，所以記得加上conf

Wolke

http://bbandydd.github.io/blog/2016/10/13/add-component-on-react-starter-kit/

Wolke

git diff <masterbranch_path> <remotebranch_path>

Wolke

1.轉換你的工程師腦袋。工程師很容易為了鑽一個問題，而一直深陷下去，coding出比別人更屌的code，是真的滿爽的。＜～雖然我到現在還是會這樣，糟！

確沒有先跳出來看，任何時間的花費其實都是成本，你應該想的是，這個需求的市場，夠不夠大，未來的淺力如何，是不是應該要花這些學習成本去處理這個問題，還是有其他成本較低會較快速solution的來解決這個問題，並且創造出更大的效益。

2.介紹許多好用的工具(例如 AARRR 指標..)來幫助你了解你的產品或服務，在目前的startup 線上的那一個位置，而盡量不要陷入一直在無知的樂觀和有知的悲觀中打轉。

3.育成經理很正，心情就好(最早是joan,後來是 Phini , Gaga, 現在是 Jessica ，以後會是Alyssa嗎？)

Unknown

出處：
https://semaphoreci.com/community/tutorials/dockerizing-a-node-js-web-application

最後要用
docker run -it -P markthethomas/dockerizing-nodejs-app
-it 別忘

怕那天被砍檔，紀錄他的file setting

# Dockerfile
# using debian:jessie for it's smaller size over ubuntu
FROM debian:jessie

# Replace shell with bash so we can source files
RUN rm /bin/sh && ln -s /bin/bash /bin/sh

# Set environment variables
ENV appDir /var/www/app/current

# Run updates and install deps
RUN apt-get update

RUN apt-get install -y -q --no-install-recommends \
apt-transport-https \
build-essential \
ca-certificates \
curl \
g++ \
gcc \
git \
make \
nginx \
sudo \
wget \
&& rm -rf /var/lib/apt/lists/* \
&& apt-get -y autoclean

ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 5.1.0

# Install nvm with node and npm
RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash \
&& source $NVM_DIR/nvm.sh \
&& nvm install $NODE_VERSION \
&& nvm alias default $NODE_VERSION \
&& nvm use default

# Set up our PATH correctly so we don't have to long-reference npm, node, &c.
ENV NODE_PATH $NVM_DIR/versions/node/v$NODE_VERSION/lib/node_modules
ENV PATH $NVM_DIR/versions/node/v$NODE_VERSION/bin:$PATH

# Set the work directory
RUN mkdir -p /var/www/app/current
WORKDIR ${appDir}

# Add our package.json and install *before* adding our application files
ADD package.json ./
RUN npm i --production

# Install pm2 so we can run our application
RUN npm i -g pm2

# Add application files
ADD . /var/www/app/current

#Expose the port
EXPOSE 80

CMD ["pm2", "start", "processes.json", "--no-daemon"]

# voila!

.dockignore :
.git
.gitignore
node_modules

processes.json :

{

"apps": [

{

"name": "api",

"script": "./bin/www",

"merge_logs": true,

"max_restarts": 20,

"instances": 4,

"max_memory_restart": "200M",

"env": {

"PORT": 80,

"NODE_ENV": "production"

}

]

}

package.json:

{

"name": "dd",

"version": "0.0.0",

"private": true,

"scripts": {

"start": "node ./bin/www"

},

"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",

"pm2": "^2.0.18",

"serve-favicon": "~2.3.0"

}

Unknown

初探篇很亂，所以寫了整理篇。

前言：
為什麼要用Docker，因為npm package 相依性問題，造成開發端(developer) 和產品端(prouction)，因為機器環境的不同，造成無止盡的套件debug....

而Docker很神奇的用準VM(虛擬機器)解決了這個問題，又不像傳統VM大吃資源，故流行了起來。

目前各大雲端產品，幾乎都有相對應支援Docker，而本山人，因為AWS送很多credit用不完，所以還是以AWS上為主。

基本上，要在AWS上用Docker，有三種方法。

1.直接開EC2 instance，並且直接於ec2 instance 上安裝Docker Engine，就可以用了。
壞處是，你就得自已設定Scale....

2.EB: 只要直接將DockerFile上傳，就可以了。eb的好處...Scale...都幫你處理完..
http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/docker-singlecontainer-deploy.html

3.ECS: 目前 AWS 主打，就是從 docker-compose衍生而來，幫你做私有倉庫管理....等功能。
不過有點複雜，如果你的產品環境，跟我一樣單純，而且懶得再摸另一套東西，例如debug，ECS又有自已的做法，但我很習慣從eb的日誌去找log了...

Wolke

https://github.com/zalmoxisus/redux-devtools-extension

有用到 middleware

1.2 Advanced store setup

If you setup your store with middleware and enhancers, change this:

  import { createStore, applyMiddleware, compose } from 'redux';

  let store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware)
  ));

to this:

  let store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  ));

Unknown

為什麼要摸Docker
1.AWS EB node 環境，有無止境的相依性問題
git clone react-starter-kit
eb init
eb create
git add * (without node_module)
git commit -m
eb deploy
eb open <=(should be OK? but! -> logs...)

2.所以Docker
AWS ECS = Docker + EB(scale .... load balancing ...)
神聖的AWS開創出，神奇的ECS(private images..)
ECS task ... ≠ Docker
ECS <= Docker Compose (YAML) <=?..
前因後果加demo.

install on ec2
http://www.ybrikman.com/writing/2015/11/11/running-docker-aws-ground-up/

教學
https://ap-southeast-1.console.aws.amazon.com/ec2/v2/home?region=ap-southeast-1#V2CreateELBWizard:
https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

command : aws ecr get-login --region ap-southeast-1

docker push 897420788211.dkr.ecr.ap-southeast-1.amazonaws.com/images:latest

command : ecs-cli

==========================然後還是搞不定=============

最後原來 EB　支援 Docker

package.json

{
"name": "docker_web_app",
"version": "1.0.0",
"description": "Node.js on Docker",
"author": "First Last <first.last@example.com>",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.13.3"
}
}

server.js

'use strict';

const express = require('express');

// Constants

const PORT = 8080;

// App

const app = express();

app.get('/', function (req, res) {

res.send('Fucker world\n');

});

app.listen(PORT);

console.log('Running on http://localhost:' + PORT);

Dockerfile

FROM node:argon
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . /usr/src/app
EXPOSE 8080
CMD [ "npm", "start" ]

eb init ... 都一樣

＝＝＝＝＝＝完成＝＝＝＝

再來要自訂自已的image
所以要上傳 ECR

aws ecr get-login

會回傳一大堆 copy paste 再執行　就可以傳上去了

DockerFile
怎麼將本機端的image傳到 ecr ，然後再 Dockfile 來用

Unknown

發現 GraphQL 是目前的 DB 查詢主流，所以又跳坑了...

https://learngraphql.com/

Wolke

[屍速列車]

很多[創業]者，所想到的題目都是要規模化之後，才可能會實現；可是因為你是[創業]者，根本不可能有資源達到你剛開始所設想。

這階段[活下去]才是你的首要目標，所以很常看到為了生存而[不擇手段]的團隊；不斷的看久了，好像也是理所當然。

[屍速列車]防雷頁

像是簡化了這些過程，重新探討你的初心，到底是為了什麼而做出[不擇手段]的行為，而你現在卻覺得理所當然。

火車上的一票人[創業者]，目標都是要從首爾逃往釜山[實現創業成功]，但出發後，才發現喪屍的出現[資金燃燒的速度]，超過你的想像，然後就一直被喪屍追[每天被錢追]，為了逃往釜山[實現創業成功]，短期的和他人合作，或者是犧牲他人，變成常態，男主角就是這樣的職業，而在火車上，巴士運輸社長一路上也示範的很好；而咬了之後變成喪屍，也很切合創業者，創業者就是一群覺得去幫人打工一輩子，就等於30歲就死了，只是等到70歲就埋葬，中間40年漫無目地的活著，是不是很像喪屍啊。

戲中最揪心的就是對於人性的描述，到了最後原來從頭到尾的犧牲他人的社長，是為了回家見他的老母親，而男主角為了保護女兒，而犧牲自已讓喪屍咬，也變成喪屍，這裡的運鏡真的非常好，超虐心。

爸爸不怕嗎？女兒問；爸爸也會害怕。男主角回答。中間的一暮。

因為從頭到尾都無冷場，這一暮感覺就算剪掉，也不防礙劇情發展，但導演或許想表達的是，我們只要有真心想保護的人，就算害怕，也會勇敢面對在這個人吃人的世界裡吧！哈！

Unknown

SyntaxError: /var/app/current/server/server.js: Unexpected token (

 // Render the component to a string
  46 |     const html = renderToString(
> 47 |       <Provider store={store}>
     |       ^
  48 |         <App />
  49 |       </Provider>
  50 |     )

加.babelrc

內容

{

  presets: ["es2015", "react"]  

}
用aws記得要git add 上去

Unknown

route 53 設 *.ex.com
然後後端判斷domain來決定是那個帳號載入，
然後再response 他的個人資料。
ex : amy.ex.com

custom domain:
amy.com -> amy.ex.com
直接在後端上判斷 amy.com 就 response amy的資料

Unknown

隨著APP浪潮於2015年底逐漸消退(Game我不化入APP類，Game不一樣，請勿炮我)。

想要做starup的團隊無不嘗試新的進入點：

例如：AR VR IOT 穿戴式裝置 ...

不過閉人總覺得，這些題目的榘道太小（因為有進入障礙，進入的機器索費不滋，且也不是必需品），怎麼可能有機會撐起獨角獸。

所以就決定開始重新學起寫網站。

但web在這5年的發展，已經拉出一條很大的差距，
web 已進入太空梭時代，我的知識還停留在鑽木取火。

不過跌跌撞撞之下，總算理出一條路，不管是技術面或是實務面。

資訊產品要獨立生存，成為平台是必然。

不管是找工作的平台，找場地的平台，找同好的平台，找炮朋友的平台，總之就是食衣住行育樂某方面的平台。

而平台要做的成功，不外乎三點。

吸引
篩選
媒合

2010年開始的APP浪潮之所以可貴百年難得一遇。

就是手機製造商(iphone及android陣營htc samsung..)在當時的時空環境下無力製造足夠及花時間找出對的內容應付爆發性成長的用戶，所以將這上億的使用者，開放給startup做實驗，手機使用者也樂於被實驗。

所以在APP浪潮時代，「吸引」這個平台首要工作，幾乎是不存在，因為你很容易就可以獲得第一批使用者做為你的實驗對象，而且通常其本盤是10萬下載，第一個 beta版沒有十萬，立刻換題目就對了，但那個美好年代已經過去，「吸引」其實是相當困難的，只是當時我沒發現。

面對問題是解決問題的第一步：

現下的手機規格跑網站，以不像五六年前非常之慢，難以忍受(但要忍受一些愚蠢APP亂做內建瀏覽器)，所以startup我覺得還是得回歸從網站出發，因為沒有直接連網沒有APP需要下載才能使用的門檻，才有機會成長出上億使用者，成為獨角獸。

但跟已經發展5年的APP一樣，各種類型可以做的題目，已發展成熟。網站更不用說，多的是一方之霸，但幸好網站不像APP下載之後，介面用習慣就很難換（例如等公車系列，3年來就不再動了，差不多就那3支），網站更替的速度更快，也就是如果大網站沒有在現有的優勢之下，不斷的找出成長點（或是併購）。

很容易明天就被幹掉了，詳見每年網站排名。

2014年

1	2	Yahoo!奇摩	入口網站	598.65
2	1	Facebook	社群	598.60
3	3	YouTube	線上娛樂	596.65
4	4	Google台灣	搜尋引擎	594.35
5	7	巴哈姆特電玩資訊站	社群	588.85
6	9	露天拍賣	電子商務	585.65
7	6	伊莉討論區	社群	585.20
8	14	Mobile01	社群	584.80
9	31	ETtoday東森新聞雲	新聞	584.50
10	12	痞客邦	社群	584.40

《數位時代》2015年 Web 100 台灣熱門網站100 強完整榜單 : 《數位時代》2015年 Web 100 台灣熱門網站100 強完整榜單
2015


排名	總分	網站名稱	網域	類別	簡介
1	298.1	Facebook	facebook.com	社群平台	全球最大的社群網站，可分享個人動態並與朋友互動，日前剛來台創立辦公室
2	296.3	YouTube	youtube.com	影音娛樂	全球最大的影音分享網站，讓使用者上傳、觀看及分享影片，隸屬Google旗下
3	289.4	Yahoo奇摩	yahoo.com	入口網站	台灣最大的入口網站，提供搜尋、新聞、購物、信箱等功能
4	289.2	Google	google.com.tw	服務工具	全球最大搜尋引擎Google的繁體中文版頁面，日前剛推培育人才的火星計劃
5	285.3	中時電子報	chinatimes.com	傳播媒體	中時媒體集團的新聞網站，集結旗下中國時報、工商時報等媒體當日的新聞內容
6	281.6	露天拍賣	ruten.com.tw	電子商務	由PChome Online與eBay共同合資成立，是全台成交額最大的網路拍賣平台
7	278.2	聯合新聞網	udn.com	傳播媒體	集結聯合報系旗下媒體的新聞內容，包括文字和影音新聞
8	278.1	巴哈姆特	gamer.com.tw	遊戲平台	台灣最大的動漫、遊戲社群網站，提供遊戲新聞、作品介紹與討論區
9	276.8	Mobile01	mobile01.com	社群平台	內含手機、3C產品、自行車、時尚、運動等議題的綜合論壇
10	276.4	蘋果日報	appledaily.com.tw	傳播媒體	《蘋果日報》的線上新聞版本，以動畫呈現的動新聞是一大特色

不過一年而已，什麼都想做的yahoo已經失去龍頭寶座，線上媒體從１家上榜到多了３家，fb像怪獸不斷的將所有社群平台的使用者吸走，照這個趨勢來看明年肯定一家獨大了。

也就是說，以「行動端」做為出發的網站，才正要開始！
一起來踏進這個新的大航海時代吧！

工商服務一下：需要借錢嗎？　有資金需求嗎？　歡迎使用1797 一起救急匿名快速安全的借貸媒合平台。

Unknown

import { loadQuestions } from '../actions/questions'

本來有設NODE_PATH=./app　在aws eb 上
但完全失效
只能用相對目錄 load component，
才不會錯誤。

Unknown

So i get error "Unexpected token " for line 19 .

  18 | const router = (
> 19 |     <Provider store={store}>

直接加.babelrc

{
  "presets": ["react", "es2015"],  "env": {
    "test": {
      "plugins": [ "babel-plugin-rewire" ]
    }
  }
}

然後記得 git add

Wolke

Wolke

跨區教學
https://steachs.com/archives/3838

Wolke

正確解法在

.ebextensions/

加 01run.config

container_commands: addGzipType: command: sed -i 's/$gzip_types.*$;/\1 application\/javascript;/' /tmp/deployment/config/#etc#nginx#conf.d#00_elastic_beanstalk_proxy.conf

Wolke

https://github.com/runnables/line-bot-sdk-nodejs

一下子就在 aws 上run起來了

為了要開發方便，
所以要在本機run
才發現 aws 的方便，
造成了我的不便。

1.ssl 免費的要用
http://wolke-codes.blogspot.tw/2016/01/lets-encrypt-ssl.html
結果 lets encypt 有改版要重抓卡了一下。

ip分享器不能先https 獨立出來，所以卡了一下。
然後要選 3 。

2.ssl 可以用之後，
運行https
明明在 chrome 上，是正常，
偏偏賴的verfify
一直吐 ssl驗證錯誤，
真是賴。

卡操久，
忽然想說試一下 firefox 居然也是 ssl 驗證錯誤.
最後找到解 firefox的解
也解了 line verfify
完工

var https = require('https')
,fs = require("fs");

var options = {
ca : fs.readFileSync('/etc/letsencrypt/live/xxx.co.uk/chain.pem'), // 差這一M
key: fs.readFileSync('/etc/letsencrypt/live/xxx.co.uk/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/xxx.co.uk/cert.pem')
};

https.createServer(options, app).listen(443, function () {
console.log('Https server listening on port ' + 443);
});

Wolke

1797不斷的在攻擊第一頁。
原本一直煩惱平台上不去的問題，也漸漸收起來，取而代之的是戒慎恐懼的心情。

用平台的方式提供　匿名　快速及成交後，慢慢累積評價來達到　安全　的最終目標能否實現。
來顛覆借貸這個千年行業。
畢竟每一筆需求的刊登，都代表著一個急迫性。背後有著委託人的著急及那一份拖付。都在在不是我一開始，所能想像到的龐大壓力。

Wolke

https://github.com/andreypopp/react-fa
用javascript
範例
var React = require('react');
var Icon = require('react-fa').Icon;

Wolke

mongodb 打包

mongodump -h 127.0.0.1 -d dev -o ./mongo-backup

壓縮

zip mongodb ~/mongo-backup/* -r

http://blog.sina.com.cn/s/blog_7479f7990100zwkp.html

傳檔
scp user@example.com:/home/name/dir/file /tmp
http://askubuntu.com/questions/157381/in-ssh-how-do-i-mv-to-my-local-system

Wolke

1.aws elb 不支援 websocket，
先
http://wolke-codes.blogspot.tw/2016/06/websocket-on-aws-elb-nginx-setting.html

2.然後只吃 tcp 跟 ssl

所以要改load balacer http - > tcp
https -> ssl

3.然後elb的設定就要跟著改成
http - >tcp
https - ssl
結案...看...搞好久

Wolke

直接新增在myapp/.ebextensions/ environmentvariables.config

Hullo - I got this working using Node, NGINX, SSL, and an ELB on Elastic Beanstalk doing the following:

Create a container command in .ebextensions to modify the nginx configuration script to include proxy websockets:

前面兩個要斷行

container_commands:
    00proxy:
        command: sed -i 's/proxy_http_version.*/proxy_http_version\ 1.1\;\n\ \ \ \ \ \ \ \ proxy_set_header\ \ \ \ \ \ \ \ Upgrade\ \ \ \ \ \ \ \ \ \$http_upgrade\;\n\ \ \ \ \ \ \ \ proxy_set_header\ \ \ \ \ \ \ \ Connection\ \ \ \ \ \ \"upgrade\"\;/g' /tmp/deployment/config/#etc#nginx#conf.d#00_elastic_beanstalk_proxy.conf

Install your SSL cert on the load balancer using the Elastic Beanstalk web console.

Then go to the EC2 web console, and change the load balancer to listen on SSL 443 -> TCP 80. This did not working when I changed it in the EB web console, I had to do it directly in EC2.

That should get everything working. I haven't had to do any redirects and I managed to get NGINX working too.

Wolke

solution
https://github.com/DCWoods/sente-example

Wolke

http://coding-ceo.ghost.io/how-to-run-socket-io-behind-elb-on-aws/

這個沒處理好，
站上十八個人就變很慢，
估計是因為http request 一直狂發的關係。

所以還是得用 web socket來實現聊天室。
http太吃資源　

Wolke

parse server 目前不能用 2.1.19會錯

https://github.com/ParsePlatform/parse-server/issues/1855

Wolke

ACM跟IAM不一樣
ACM是從 Certificate Manager 來的
IAM是從 IAM來的......

Wolke

從下午搞到隔天
AWS https 的監聽方式一直改是怎樣?
===============================
做法
什麼都不用動，動了ec2或load balbncer反而會錯誤

直接在
eb->

网络套餐

到负载均衡器的面向外部的 HTTPS 端口号。

协议:

安全侦听器使用的协议。

Wolke

找很久記錄一下

eb create -r ap-southeast-1

Wolke

因為google developer 一直改版

結果找 gcm sender id 超久

在這邊喔!
https://console.cloud.google.com/home/dashboard?

Wolke

https://mobile.awsblog.com/post/TxCD57GZLM2JR/How-to-set-up-Parse-Server-on-AWS-using-AWS-Elastic-Beanstalk

- Create a directory for your project and change your working directory into that directory.

- Run 'eb init' to log in and select the application you created through the quick launch link.

- Run 'eb labs download'. This will download the code that is running on the AWS Elastic Beanstalk environment to your local folder.

- Make necessary changes to the code.

這裡要設eb 環境，找一下aws console 產生出來的環境名稱

eb use XXX-env

git add *

git commit -m""

eb deploy

這個方法在 AWS一下有時候成功，有時候失敗

結果還是先在本機端生一個 express 然後加 parse-server 在 eb deploy 在ec2上安裝 mongo 重開後就沒可以了

Wolke

https://www.webniraj.com/…/parse-com-setting-up-the-open-s…/
原來要先架這個才行。
我架起來了。

Wolke

jade 產生 compont 時會讓 bootstrap form validate 錯誤
fix div
p(class="help-block text-danger")

Wolke

$match 要比對 ObjectId

postedBy : new mongoose.Types.ObjectId(account_id)

Wolke

如果你跟我一樣是 mongodb 的初心者，
驚艷於 object 儲存實體的mongoose，
但不熟mongoose的語法，
想要用node shell 來做 mongoose的測試，
那就follow吧。

到app目錄下
node
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/XXX');
var Post = mongoose.Schema({....});
var P (在nodejs下是 module.exports ，不過node shell 不吃module.exports)= mongoose.model('posts', Post);
P.find({},function(err,p){console.log(p)})
......

Wolke

因為godaddy 2016年初台灣了，
.tw 699元，比別人便宜，我就買了。
但要設 NS 轉到我的aws ec2上，
確刪不了godaddy的預設NS。。。orz
======

最後找到了：
管理我的網域->管理DNS->console切到設定->域名伺服器->管理->自訂->設 aws route 53上，給你的那四個－＞等等等10分鐘吧！ｏｋ！

Wolke

module.exports = mongoose.model('accounts'//<===要注意
, Account);

postedBy: {
type: mongoose.Schema.Types.ObjectId,
ref: 'accounts' <==要注意
}

Wolke

 Account.register(new Account({ username : req.body.username }), req.body.password, function(err, account) {
        if (err) {
          return res.render("register", {info: "Sorry. That username already exists. Try again."});
        }

        passport.authenticate('local')(req, res, function () {
            req.session.save(function (err) {
                if (err) {
                    return next(err);
                }
                res.redirect('/');
            });
        });
    });

送出表單時，一定要有在表單裡設定 req.body.username　req.body.password　不然會Bad Request

不知道mongoose在那裡有作驗證

https://github.com/mjhea0/passport-local-express4

Wolke

mongoose 4.x跟好多環境不相容　照原本設定做

Wolke

先申請免費domain;
再去route 53 ;
create hosted zone -> 填 domain name;完成後，得到4個name server 的網址。
回到freenom Use custom nameservers (enter below) 填一填

等24小時以內，
打網址看有沒有照你的route 53 的設定走。

Wolke

為什麼標題會這樣下呢？「mobile」的圖片搜尋結果

因為手機到2016此時，

APP市場，

已經能佔一塊就被佔一塊了，

不然你就去玩IOT吧，

如果純粹以mobile端出發開發遊戲也很不錯；

因為２０１６年的手機使用者，

已經不主動尋找APP了，

為什麼？

因為每次下載新APP，
我就要想，
我要砍掉那個對我是有價值的APP，
才能裝的進去。

現在會主動下載的APP，
幾乎都是被報導

因為沒有主動尋找，

沒有自然下載，

現在這個period感覺像是，

2000年大量賺不到的錢.com泡沫，2001年開始web 2.0誕生；

2015年大量賺不到的錢APP泡沫，2016年APP 2.0誕生或者該說是web3.0(以APP行動端為主體想法的開發邏輯的網站)誕生。

web2.0之於web1.0，就是沒錢了，錢不能亂花，公司要生存，能外包就外包，連內容都外包了。最成功的要屬一些一開始很多無酬主編後來成為知名blog客，但公司活下來了。

web3.0 or app 2.0

將會誕生許多不用安裝，只要連上網站，就能展現原本只能用APP才能展現的價值(照相美編LBS交友拍賣等...)將異軍突起。

原本對我有價值，

但被我忍痛刪除的APP，

現在有了Web APP的替代品，

自然又找回我這個使用者了。

身為一個裝裝砍砍台北等公車n次的我，

發現這個2015年底才上線的大台北公車web app，
幾乎可以完全取代台北等公車了。

超驚艷的我。

你可能想問為什麼是這個時間點做？
能做大家早做了。
沒錯主要原因是，
四核心以上手機跑網頁才順，
之前超級慘不忍睹。
而HTML 5跟 WEB API正在完善中，
加上fb主推的react架構。

而手機瀏覽器：
android只要專注在chrome跟 fb內建瀏覽器，
ios只要專注在safari跟 fb內建瀏覽器，

重點是：
web app我剛剛提的上述機會點；
還有很多都沒有人做喔！
已經錯過2010年開始至今結束的APP潮的你，
不可放棄這個新的機會。

補充：

相關報導

消費者手機使用困擾：4成民眾覺得手機容量不足　

http://www.find.org.tw/market_info.aspx?k=2&n_ID=8663

大台北公車

https://ebus.gov.taipei/

Wolke

service worker 還在寫 20160113

所以 service worker 開　

self.addEventListener('push', function(event)
只能被觸發，無法從client端傳值。
不過 haha(Message...C)

Wolke

Notification短期內content相同就不會被show

self.registration.showNotification("title", {
body: "body",
icon: "icon",
tag: "tag",
data: "data"
});
例如呼叫這個短期內兩次以上，就不會show

Cooperation

標籤

訂閱

網誌存檔

Facebook

analytic

總網頁瀏覽量

熱門文章

訂閱

2016年12月29日 星期四

2016年12月19日 星期一

2016年12月18日 星期日

2016年12月17日 星期六

2016年12月3日 星期六

2016年11月17日 星期四

2016年11月6日 星期日

2016年11月2日 星期三

2016年10月19日 星期三

2016年10月16日 星期日

2016年10月14日 星期五

2016年10月13日 星期四

2016年10月12日 星期三

2016年10月7日 星期五

2016年10月5日 星期三

2016年9月28日 星期三

1.2 Advanced store setup

2016年9月17日 星期六

2016年9月16日 星期五

2016年9月9日 星期五

2016年9月7日 星期三

2016年9月4日 星期日

2016年8月31日 星期三

2016年8月30日 星期二

2016年8月17日 星期三

2016年7月28日 星期四

2016年7月2日 星期六

2016年6月21日 星期二

2016年6月15日 星期三

2016年6月13日 星期一

2016年6月6日 星期一

2016年6月3日 星期五

2016年5月27日 星期五

2016年5月21日 星期六

网络套餐

2016年5月20日 星期五

2016年4月21日 星期四

2016年3月22日 星期二

2016年3月18日 星期五

2016年2月21日 星期日

2016年2月11日 星期四

2016年2月5日 星期五

2016年1月29日 星期五

2016年1月26日 星期二

2016年1月24日 星期日

2016年1月23日 星期六

2016年1月15日 星期五

2016年1月14日 星期四

2016年1月13日 星期三

2016年1月12日 星期二

2016年12月29日星期四

2016年12月19日星期一

2016年12月18日星期日

2016年12月17日星期六

2016年12月3日星期六

2016年11月17日星期四

2016年11月6日星期日

2016年11月2日星期三

2016年10月19日星期三

2016年10月16日星期日

2016年10月14日星期五

2016年10月13日星期四

2016年10月12日星期三

2016年10月7日星期五

2016年10月5日星期三

2016年9月28日星期三

2016年9月17日星期六

2016年9月16日星期五

2016年9月9日星期五

2016年9月7日星期三

2016年9月4日星期日

2016年8月31日星期三

2016年8月30日星期二

2016年8月17日星期三

2016年7月28日星期四

2016年7月2日星期六

2016年6月21日星期二

2016年6月15日星期三

2016年6月13日星期一

2016年6月6日星期一

2016年6月3日星期五

2016年5月27日星期五

2016年5月21日星期六

2016年5月20日星期五

2016年4月21日星期四

2016年3月22日星期二

2016年3月18日星期五

2016年2月21日星期日

2016年2月11日星期四

2016年2月5日星期五

2016年1月29日星期五

2016年1月26日星期二

2016年1月24日星期日

2016年1月23日星期六

2016年1月15日星期五

2016年1月14日星期四

2016年1月13日星期三

2016年1月12日星期二