顯示具有 電腦相關 標籤的文章。 顯示所有文章
顯示具有 電腦相關 標籤的文章。 顯示所有文章

2017年7月14日 星期五

建立簡單的ES6+React+webpack 3開發環境

在大約1年前,我分享過一篇關於"利用webpack+babel建立簡單的ES6(ES2015)+React開發環境"的文章。

由於最近出了webpack 3,以及包括node,REACT在內的各樣更新。那篇文章恐怕已經過時了。此外,最近開始準備利用REACT開發新的項目,所以,我順便在這裡分享一下建立一個簡單的ES6+React+webpack 3開發環境。


Github地址為:
https://github.com/crongjie/simple_react_webpack3_environment



詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.11.1 LTS
npm v3.10.10
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_react_webpack3_environment/

3. 輸入以下指令建立 package.json

npm init


在裡面隨便輸入一些內容, 如下:





2017年5月4日 星期四

[Raspberry Pi] 在Raspbian上安裝GitLab CE


由於個人開發用了svn好一段時間;另外,因為近期的工作上,都在用git....而且慢慢開始習慣了用git進行版本控制。所以,個人考慮在自家的服務器上裝上git的服務器,來給自己的新項目進行版本控制。
所以,我考慮在自家的Rabpberry Pi上,裝上GitLab。



這篇文章主要的參考內容為:
https://about.gitlab.com/downloads/#raspberrypi2


安裝方法如下:

Step #1:
首先執行以下指令, 更新Rabpberry Pi。
apt-get update
apt-get upgrade


Step #2:
然後,安裝需要的東西。
sudo apt-get install curl openssh-server ca-certificates postfix apt-transport-https
curl https://packages.gitlab.com/gpg.key | sudo apt-key add -


Step #3:
輸入以下指令,開始安裝GitLab:
sudo curl -sS https://packages.gitlab.com/install/repositories/gitlab/raspberry-pi2/script.deb.sh | sudo bash
sudo apt-get install gitlab-ce


安裝需要下載300多MB的內容,而且還額外需要多860MB, 對空間的需求也頗大。
安裝完畢後,會出現以上畫面。

Step #4:
然後,需要編輯檔案 /etc/gitlab/gitlab.rb

預設的話, external_url 的內容為 'http://raspberrypi'

由於HTTP服務器方面,我的Raspberry Pi已用上其他web server方面的服務,所以我在 /etc/gitlab/gitlab.rb 輸入以下內容,把我的GitLab Server設置到 Port 8081, 例子如下:
external_url 'http://IP地址:8081'
unicorn['listen'] = '127.0.0.1'
unicorn['port'] = 10087
nginx['listen_port'] = 8081


Step #5:
編輯 完畢後,輸入以下指令,重設並啟動GitLab。
sudo gitlab-ctl reconfigure


Step #6:
然後,利用 http://你的IP地址:8081  就會進入以下畫面設定管理員密碼:


Step #7:
在輸入完密碼以後,就可以利用以下賬號登入GitLab,或者另外去做一個新帳號。
ID: root
密碼: (剛才輸入的密碼)





後話:

雖然GitLab安裝容易,但可以,在Raspberry Pi裡反應太慢,而且還會因為反應慢,出現Error 502畫面。
所以,個人感覺很一般。也許需要把GitLab裝到別的服務器內,或者是因為我的Raspberry Pi已經運行了很多服務,不適合再用GitLab

2017年4月24日 星期一

建立和發布開源的npm模組


由於最近打算建立一些開源的項目來分享及交流一下,所以在這篇blog文裡,我做一做筆記,分享一下我是如何建立npm的模組,並且利用github分享出來。


參考文章:
npm官方的文件 - https://docs.npmjs.com/getting-started/publishing-npm-packages


這篇文章的Github:  https://github.com/crongjie/npm-rjn-helloworld




1. 首先,需要到以下網址,建立一個npm的賬號:
https://www.npmjs.com/signup


如果,沒有github賬號的話,也請到github裡面開一個帳號。
網址: https://github.com/join?source=header-home


2. 然後,到github給你的開源項目,建立一個新的項目:




這篇文章則建立一個名為"npm-rjn-helloworld"的開源項目作例子。

例子:
Github Repository名:  npm-rjn-helloworld
NPM 項目名: rjn-helloworld


2016年10月10日 星期一

URLs memo (經常更新)


這篇文章記錄我經常會用到的URLs.

雖然,我常用的URLs 會用Bookmark/Favorites 功能加到我的瀏覽器裡面. 但是在外面使用瀏覽器時, 則沒有我收藏了的URLs, 會導致我要另外去google.
所以,我在這篇blog 文裡面,記錄一下我經常會用到的URLs:

開發相關:


lodash API:  https://lodash.com/docs/
ExtJS 3.4.0 API: http://docs.sencha.com/extjs/3.4.0/
AngularJS API: https://docs.angularjs.org/api
Scala Cheatsheet: http://docs.scala-lang.org/cheatsheets/
React Doc: https://facebook.github.io/react/docs/react-api.html
React Native Doc: http://facebook.github.io/react-native/docs/getting-started.html

日常/工具:


翻譯: https://translate.google.com/

漢字轉換為ひらがな/ふりがな: http://www.webtoolss.com/hiragana.html

日本的乗換案内:  http://transit.yahoo.co.jp/

RJ Memo(English Blog): http://rj-memo.weebly.com/

樂天旅遊(預約酒店/巴士等用) http://travel.rakuten.co.jp/


日本高速巴士預約:

https://www.kousokubus.net
http://www.kosokubus.com/
http://travel.willer.co.jp
https://secure.j-bus.co.jp

 機票購買:

http://www.hkexpress.com/
http://www.flypeach.com/
http://www.jetstar.com/




2016年9月24日 星期六

利用webpack+babel建立簡單的ES6(ES2015)+React開發環境


關於ES6(ES2015) - ECMAScript 6, 是一種用於front-end(前端)開發,新的JavaScript語法標準.由於是一種新的語法標準的關係,並不是全部瀏覽器都支持,所以需要用babel等transpiler工具,編譯到傳統的Javasript語法.

而React(React.js)方面,可以使用JSX語法開發,這個也不是傳統的Javascript語法,也需要運用到transpiler把JSX語法轉換為傳統的Javasript語法.

所以, 這篇文章主要是分享一下我如何運用webpack+babel, 建立一個簡單的ES6 + React的開發環境.

Github地址為: https://github.com/crongjie/simple_es6_react_environment


詳細步驟如下:

1. 首先, 需要下載和安裝Node.js (https://nodejs.org/)

我這篇文章所運用的開發環境的版本如下:
------------------------
node v6.6.0
npm v3.10.3
------------------------

2. 建立一個新文件夾用作存放文件,在這個例子裡面,我使用的文件夾是 /simple_es6_react_environment/

3. 輸入以下指令建立 package.json

npm init


在裡面隨便輸入一些內容, 如下:



2016年9月5日 星期一

[Raspberry Pi] 在Raspbian上安裝svn(subversion)服務器


這篇文章主要是分享一下我如何安裝svn服務器,及進行一些配置等。

我安裝svn的配置為:

-------------------------------
型號: Raspberry Pi 2 Model B
SD卡: Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
-------------------------------

安裝步驟如下:

1. 如果未安裝apache2的話,請先執行這個指令:
sudo apt-get install apache2

2. 執行以下指令安裝svn服務器
sudo apt-get install subversion libapache2-svn

2016年9月3日 星期六

[Raspberry Pi]把Redmine 2.4.2遷移及更新到Redmine 3.3.0


由於我需要把自家Ubuntu Server上的Redmine 2.4.2 遷移到 Raspbian上的Redmine 3.3.0,所以在這篇文章裡面,我會分享一下我的做法。

舊有的Redmine 環境和配置:
-------------------------------
OS: Ubuntu 14.04
Redmine版本: 3.3.0
-------------------------------

新的Redmine配置:
-------------------------------
型號: Raspberry Pi 2 Model B
SD卡: Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本: 3.3.0
-------------------------------

關於安裝Redmine 3.3.0, 可以參考這篇文章。


步驟如下:

1. 首先用以下指令,備份原有舊版本的Redmine database:
mysqldump -u root -p redmine > redmine_backup.sql



2. 備份redmine/files 文件夾:
tar cvzf redmine_files_bak.tar.gz /var/lib/redmine/default/files

這個視乎安裝redmine的位置來決定,可能會是 /opt/redmine/files 或者 /usr/share/redmine/files


3. 把備份了的 redmine_backup.sql 和 redmine_files_bak.tar.gz 複製到目標的機器(我的情況是Raspberry Pi)。

4. 執行以下指令,恢復備份的database到新的Redmine

mysql -u root -p redmine < redmine_backup.sql


5.  恢復備份的files文件到新的Redmine

tar -xvf redmine_files_bak.tar.gz
mv var/lib/redmine/default/files/ /opt/redmine/


6. 執行以下指令更新database:
cd /opt/redmine/
rake db:migrate RAILS_ENV=production 

7. 執行以下指令清除cache 和 session,並且重啟apache2
rake tmp:cache:clear
rake tmp:sessions:clear
service apache2 restart


完成以上步驟後,就成功把Redmine 2.4.2 更新到 3.3.0了。







[Raspberry Pi] 在Raspbian上安裝Apache+MySQL+Redmine 3.3.0


這篇文章主要是參考自 Redmine 官網上的 HowTo Install Redmine on Debian 8 with Apache2-Passenger

我安裝Redmine的配置為:

-------------------------------
型號: Raspberry Pi 2 Model B
SD卡: Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
Redmine版本: 3.3.0
-------------------------------

安裝步驟如下:

1. 先執行以下指令更新套件
sudo apt-get update && sudo apt-get upgrade


[Raspberry Pi] 利用root賬號ssh登入Raspbian


在前一篇文章裡面,我大概介紹了如何安裝Raspbian,以及修改pi 和 root的密碼。

由於個人需要用root賬號,給Raspbian進行各種安裝和設定。而且我也比較懶,不想經常輸入 sudo 指令。所以,我需要以root的身份,ssh登入Raspbian。
(當然,按安全性考慮的話,不建議允許root賬號ssh登入的。我只是在初期設定時,為了方便才這樣做)

但是,如果什麼都不設定的話,就會看見這個畫面:


login as: root
root@192.168.XXX.XXX's password:
Access denied


P.S.
由於我是在windows SSH登入Raspbian的,所以我使用的是PuTTY 。 PuTTY可到以下網址下載:
http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html



解決方法如下:

1. 先用別的賬號(例如 賬號pi) ssh登入Raspbian

2. 使用以下指令修改ssh server的設定:
sudo nano /etc/ssh/sshd_config


3. 找到 PermitRootLogin without-password 這一行,並且修改為以下內容:
PermitRootLogin yes


4. 按Ctrl + X 退出,並且選擇 Yes 儲存變更。

5. 用以下的指令重啟ssh server
sudo service ssh restart


6. 完成後,就可以成功用root賬號ssh登入Raspbian了

[Raspberry Pi] 安裝Raspbian Jessie Lite



由於將要移居到海外,不能帶太多行李的關係,個人把早前把玩了好一陣子的“玩具”拿了出來,打算弄成給個人用的Linux Server。
所以,由這篇文章開始,我去記錄和分享一下我安裝和設定Raspberry Pi 2的各項內容吧。

關於我購入Raspberry Pi 2的文章,可以看這裡。

先分享一下我的配置吧。

-------------------------------
型號: Raspberry Pi 2 Model B
SD卡: Kingston MicroSD HC Class 10, 32GB
OS: Raspbian Jessie Lite (Version May 2016, Kernel 4.4)
-------------------------------

我今回選擇的, 是 Raspbian Jessie Lite.選擇Raspbian主要是因為這是Raspberry Pi官方支持的OS。選擇 Lite 版,是因為我不需要用到Desktop(桌面)的功能,所以我安裝了Lite版。



以下為我安裝 Raspbian Jessie Lite 的方法。


1. 在以下網站下載 Raspbian Jessie Lite 鏡像:
https://www.raspberrypi.org/downloads/raspbian/

我下載的版本,是Version May 2016, Kernel 4.4


2. 下載及安裝 Win32 Disk Imager (用於我使用的是windows,所以我用的是 Win32 Disk Imager)

 (詳細也可以參考這頁: https://www.raspberrypi.org/documentation/installation/installing-images/README.md )


3. 在電腦插入microSD後, 以"Run as Administrator" 開啟 Win32 Disk Imager

4. 選擇先前下載好的鏡像,我使用的是由2016-05-27-raspbian-jessie-lite.zip 解壓出來的 2016-05-27-raspbian-jessie-lite.img 文件。


5. 按 "Write"把鏡像寫入到microSD卡。

6. 把鏡像寫入到microSD卡以後,就順利地進入了Rasbian了。






7. 第一次登入時,需要使用以下密碼登入:

用戶名: pi
密碼: raspberry


8. 在登入以後,建議使用以下指令去修改密碼:

sudo passwd pi


9. 如果需要用到root的話,也可以用以下指令,修改root的密碼:

sudo passwd root

2015年10月16日 星期五

[自製程式] ImageToBase64CSS



名稱ImageToBase64CSS
版本1.0
下載https://drive.google.com/file/d/0BxCt4SilZyr0TFNpNEZLSkFYYlE
Githubhttps://github.com/crongjie/ImageToBase64CSS

ImageToBase64CSS是一個我自己寫的程序,主要的作用是把選定的圖片,轉換為base64 格式,並且應用到網頁的css上。 在設計網頁時,用base 64圖片在css上,主要的好處是減少使用圖片的url,可以避免一些在網頁設計/加載時,圖片連結錯誤等問題。


[自製程式]Web Compressor



名稱Web Compressor
版本1.0
下載https://drive.google.com/file/d/0BxCt4SilZyr0NDJpZ1JGVFZUZXc
Githubhttps://github.com/crongjie/WebCompressor

Web Compressor 是一個我自己做的簡單程序,主要的作用是給我在發布網站前,把選定的文件夾內的網頁文件(包括html,javascript,css)進行壓縮,並輸出到另一個文件夾內。
 壓縮網頁文件的主要作用是為了對自己寫了的javascript / html 代碼進行保密;另外,對網站進行壓縮可以減少文件的大小,從而加快網頁的載入速度。


2015年10月12日 星期一

Git指令筆記


本人由於主要是用svn作Version Control. 只有一部份開源項目是用Github。 所以,經常會忘記了部份Git的指令。
因此,我在這篇 blog裡,記下幾個我比較常用的Git 指令:

1. 把Git的Repository Clone 下來
git clone {網址}

如果需要用戶登錄/密碼,指令為:
git clone http://{username}:{password}@{hostname}/{repository}.git

自製程式


這個頁面主要是介紹本人自製的程式, 有一部份為開源項目:

開源項目: 

本人的Github網址為 https://github.com/crongjie 我自己的開源項目,都是放到這裡的。雖然裡面有的東西很少呢。 雖然很想開發新的軟件,到時沒有什麼好的點子;另外本人還很忙,空餘的時間也算少呢。

名稱Github下載
Web Compressorhttps://github.com/crongjie/WebCompressor下載
Image To Base64CSShttps://github.com/crongjie/ImageToBase64CSS下載
FisheyeToPanoramahttps://github.com/crongjie/FisheyeToPanorama下載

手機程式:

詳細請去 http://sakurafirefly.weebly.com/

2015年9月23日 星期三

[日誌]用等運到買六合彩居然中了獎!?



由於見同事話今晚六合彩八千萬,所以放工時心血來潮走了去買六合彩, 並且順便試試用自己早前寫的等運到app 去選6個號碼, .........

意想不到的是,第一次用等運到去買六合彩+只買了一注,居然給中左獎了!!!(雖然只中了3個字,獎金只有$40)

這個app的下載網址為:

https://play.google.com/store/apps/details?id=com.sakurafirefly.wflc

雖然我只是因為中了個小獎,高興過頭,在自吹自捧+順便做做宣傳呢~

看見這個文章的人,不妨也下載這個app試試吧,也許真的能中獎哦(笑)~

2015年7月12日 星期日

[Android Studio]入門筆記 Part 2 - Activity


上一篇的筆記 [Android Studio]入門筆記 Part 1介紹了基本的Android編程,例如使用Button, TextView 等。 今回的文章主要是介紹如何使用和切換Activity。

關於 Activity 的說明: http://developer.android.com/guide/components/activities.html
Activity的API: http://developer.android.com/reference/android/app/Activity.html

Activity是什麼呢? 簡單的來說,Activity在android裡面,是提供一個畫面以及畫面內相關操作的元件。在一些比較複雜的程序裡面,通常需要用到多過一種畫面的,這種情況下,則需要多過一種Activity。

以下例子,則介紹如何寫一個多畫面的程序,以及用上多過一個Activity。


2015年6月28日 星期日

Raspberry Pi 2





早陣子在淘寶上買了這件新“玩具” -  Raspberry Pi 2。說這是“玩具”,主要是因為我本身已經有一台Linux Server, 這件Raspberry Pi 2只是給我用來當“玩具”玩,作作測試和學習而已。


2015年6月21日 星期日

[Android Studio]入門筆記 Part 1


由於早陣子開始了使用Android Studio,由於我在也是初學者的關係,所以在一邊學習之餘,一邊做筆記,並且寫上這個blog裡面。

基本上,這篇筆記是給我自己個人使用,所以內容可能寫得沒那麼詳細。只是作為參考的話,對於一些初學者來說也許會有一點幫助。(當然,估計編程方面需要一定程度的知識,才能可能看得明我的筆記)


2015年5月23日 星期六

在Blogger中顯示程序代碼

由於最近開始寫這個Blog,而且寫的文章大部份都是一些技術文章,需要在文章裡面加上指令或者程序代碼等東西。而現在的blog (Blogger)的基本功能並沒有支持顯示程序代碼的功能,所以只能想方法修改HTML來支持顯示程序代碼。

所以我在這篇文章裡面,分享一下我如何在Blogger的文章裡面,顯示程序代碼,以及我試了哪些方法。

用以下的代碼作例子來說。
function Hello() {
    alert('Hello World!');
}

2015年5月21日 星期四

[艦これ]免VPN登入DMM netgame的方法(2016年5月更新)


作為一個海外的艦これ提督, 由於長期用直連玩,需要每個月登入一次DMM去更新1-5/2-5的bar; 另外經常會因為測試網站/ 艦これ而需要清瀏覽器的cookie.
因此,經常要重複用同一方法,去登入DMM 和 艦これ.

所以,我就把以下的方法memo下來,方便將來使用。
順便也向不認識使用這方法的朋友去介紹一下。

主要參考資料來自:

http://kancolle.wikia.com/wiki/Tutorial:_Proxy_Connection


主要使用的,是以下的一段代碼,主要是用來修改cookie,去免除DMM在netgame和艦これ裡面,對海外用戶的封鎖:

document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/";
document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame/";
document.cookie = "cklg=welcome;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame_s/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame/";
document.cookie = "ckcy=1;expires=Sun, 09 Feb 2019 09:00:09 GMT;domain=.dmm.com;path=/netgame_s/";