:::
顯示具有 GitHub 標籤的文章。 顯示所有文章

在GitHub Actions的工作流加入時間變數 / Formatted Time Variables in the Workflow of GitHub Actions

布丁布丁吃布丁

在GitHub Actions的工作流加入時間變數 / Formatted Time Variables in the Workflow of GitHub Actions

2023-0208-015217.png

如果要讓工作流產生的檔案(artifact)用時間命名的話,要怎麼做呢?

(more...)

使用GitHub做定期爬蟲、保存與提供資料 / Building a Scheduled Crawler and Storing as Accessible Data by GitHub Action and Pages

布丁布丁吃布丁

使用GitHub做定期爬蟲、保存與提供資料 / Building a Scheduled Crawler and Storing as Accessible Data by GitHub Action and Pages

2023-0207-213215.png

網路爬蟲的教學很多,但要怎麼定期執行爬蟲、又要把爬完的資料保存後供人取用,則是一個大問題。

(more...)

GitHub改用Personal Access Token登入 / Using GitHub with Personal Access Token Instead of Password

布丁布丁吃布丁

GitHub改用Personal Access Token登入 / Using GitHub with Personal Access Token Instead of Password

2023-0207-151415.png

開始要用GitHub Workflow的時候,我才捨棄帳號與密碼的登入,認命改用GitHub的Personal Access Token。

(more...)

如何在NetBeans中設定Git的遞交者? / How to change author of Git commits in NetBeans

如何在NetBeans中設定Git的遞交者? / How to change author of Git commits in NetBeans

13-NetBeans_Git_How_to_change_author.png

ALOHA~~這裡是灌新電腦後要重設設定就會非常苦惱的布丁。

NetBeans具備了版本控制工具Git的功能,不過預設Git在遞交的時候,它會用你電腦的使用者帳號名稱跟電腦名稱作為作者的資訊。這時候其實我們可以從「Open Global Configuration」來手動設定Git遞交的作者資訊喔。讓我們來看看怎麼操作吧。

(more...)

改善別人做好的輪子!從原始套件建立自己的NPM私領域套件 / How to create a NPM Scoped Package from an Original Pacakge?

改善別人做好的輪子!從原始套件建立自己的NPM私領域套件 / How to create a NPM Scoped Package from an Original Pacakge?

6-NPM_How_to_Fork_an_Existed_NPM_Package.png

Node.js上開發專案的好處就是可以透過npm找到大量好用的套件。但有時候,你可能會發現某些套件的內容不合你的需求,或是程式運作上有錯誤。也許你可以到問題討論版(issues)提出修改請求、苦苦等待作者的回應,不過其實你也可以在授權條款允許的情況下,自行取得別人的程式碼,並以私領域套件(scoped pacakge)的形式發佈到npm註冊處。來看看這要怎麼做吧。

(more...)

GitHub來信警告:您的相依套件有安全性漏洞 / Alert from GitHub: One of your dependencies may have a security vulnerability

布丁布丁吃布丁

GitHub來信警告:您的相依套件有安全性漏洞 / Alert from GitHub: One of your dependencies may have a security vulnerability

簡報1

之前收到GitHub的警告來信,是說我的儲存庫中使用的相依套件「event-stream > 3.3.4」有安全性漏洞。如果不處理這個問題,GitHub的警告訊息會一直出現在儲存庫的上方。解決問題的方法也不難,就是修改相依套件的版本設定,避開有問題的版本即可。

(more...)

HTML編輯器自己做!布丁版TinyMCE編緝器 / An Online HTML Editor: Customized TinyMCE Editor

HTML編輯器自己做!布丁版TinyMCE編緝器 / An Online HTML Editor: Customized TinyMCE Editor

image

說到編輯HTML的編輯器,你會想到那個工具呢?純寫程式碼用的Sublime TextNotepad++?給不會程式碼用的Word轉存HTML格式?混合編輯的Dreamweaver?真要我說的話,目前我看過最好、最乾淨、各種編輯器之間轉換最漂亮的編輯器,就是TinyMCE

TinyMCE一般只是作為網站裡面將<textarea>轉變為所見即得編輯器的小工具,能像是編輯Word一樣地編輯HTML網頁,最後產生的HTML程式碼又乾淨又漂亮。我因為太常使用TinyMCE來編輯HTML網頁程式碼,特別是表格的編輯,所以乾脆索性把TinyMCE做成獨立的布丁版TinyMCE編輯器,讓人需要的時候就直接打開網頁、使用TinyMCE編輯網頁吧。

(more...)

行動應用程式「政大借書籃」介紹 / Introduce “NCCU Book Cart”

行動應用程式「政大借書籃」介紹 / Introduce “NCCU Book Cart”

image

為了試著開發PhoneGap的行動應用程式APP,我使用OnsenUI建構了一個簡單的APP:政大借書籃。這個APP的功能是為了取代在政大圖書館找書時,使用公用電腦旁邊的小紙條來抄書的困擾。政大借書籃可以用掃描條碼功能把政大圖書館公用目錄上面找到的書加入借書清單,然後就可以拿著手機去找書了。

(more...)

如何從GitHub下載檔案? / How to Download Files in GitHub?

如何從GitHub下載檔案? / How to Download Files in GitHub?

image

秉持著開放原始碼的精神,我現在也將很多專案跟文件放在GitHub上供人下載、取用。懂版本控制工具git的人可以用clone來抓取資料,不過其他人也可以直接用網頁上的功能來抓取GitHub上的檔案喔。這篇會介紹的是兩種方法來下載GitHub中的檔案。一個是完整下載各個儲存庫 (repository) ,另一種則是下載個別檔案。

(more...)

NetBeans用SSH複製git儲存庫:以GitLab為例 / Clone git Repository via SSH in NetBeans: a GitLab Example

NetBeans用SSH複製git儲存庫:以GitLab為例 / Clone git Repository via SSH in NetBeans: a GitLab Example

image

之前我寫過在NetBeans裡面用HTTP來複製(clone) git保存庫的作法,這篇則是要介紹使用SSH來複製保存庫的另一種作法。雖然SSH連線需要比較多設定,但較適合正式開發時使用。而這次要連接的對象也不是公開的GitHub,而是私人使用的git保存庫GitLab,但介面跟作法都跟GitHub大同小異就是了。


關於Git的基本知識 / About Git technology

我在之前幾篇文章中都有介紹過git,首先這三篇是使用TortoiseGit作為git工具的入門介紹:

TortoiseGit是很強大的git工具,比NetBeans內建的git還要好用,像是要取代分支(branch)檔案時特別方便:

但是如果要開發的話,還是使用NetBeans這種IDE會比較適合。所以我就寫了以NetBeans使用git的教學:

然而這篇是用HTTP存取git儲存庫,這種作法雖然簡單,但是使用HTTP的缺點是不能上傳大檔案。git使用HTTP傳輸檔案時,http.postBuffer預設值只能夠上傳1MB,而伺服器端通常也不允許過大的檔案,GitHub最多一次上傳100MB,而GitLab使用的Nigix則是預設只能上傳20MB。上傳過大檔案時會發生411錯誤,必須要同時修改git客戶端跟伺服器端的設定才能解決。雖然修改過後可以用TortoiseGit來連線,但在NetBeans上卻仍然不能上傳大檔案。

最後我只好回頭改用SSH的方式連接,一併把SSH連接時使用不同連接埠的方法也找了出來。請照著以下步驟一起來操作吧。


環境說明 / Environment

首先必須說明git的客戶端與伺服器端的基本資訊。

Git客戶端:NetBeans / Git client: NetBeans

我目前使用的是NetBeans 8.0版本。但是Git功能並沒有多大改變,前幾版使用時應該差不多。

我現在大部分以專案進行的開發都是使用NetBeans,不論是寫網頁、JavaScript、PHP、Java都能夠支援。例如最近一篇編譯WISE就是用NetBeans來進行。相對的,我反而比較不推薦使用大學很常教的Eclipse,它在開發網頁應用的支援較差。

Git伺服器端:GitLab / Git server: GitLab

如果要架設GitLab的話,有兩種方式可以選擇:

如果不想架設的話,也可以直接使用GitLab的雲端空間:

  • GitLab.com:雲端私人儲存庫,剛好跟GitHub強調開放原始碼的運作方式打對臺

本篇我採用OpenVZ架設Turnkey Linux GitLab,設定IP為192.168.11.102,SSH連接埠為22,Domain Name為 git2.pudding.dlll.nccu.edu.tw。這些都是區域網路的設定,僅供本篇測試用,其他人是連不到這個網站的喔。


步驟說明 / Steps description

如果要用SSH來連接Git,我們必須要先用SSH金鑰製作工具產生公鑰私鑰,然後將公鑰上傳到Git伺服器端(也就是本篇的GitLab),而Git客戶端(也就是本篇的NetBeans)要存取伺服器端時,則需要搭配私鑰來連接。

Step 1. 產生SSH的公鑰與私鑰 / Create SSH public key and private key

image

我在「GitHub入門 Part.2 工具安裝與環境配置 」這一篇中有介紹如何用PuTTYgen (PuTTY Key Generator)產生公私鑰。

不過這裡我們簡單一點,我隨便產生一個公鑰與私鑰直接給大家下載:

這個公鑰與私鑰僅供測試使用,正式開發環境請不要用它,不然其他人也可以用這個私鑰去連接你的私人git儲存庫喔。

Step 2. 加入SSH公鑰到GitLab / Add SSH public key to GitLab

image

接著登入GitLab,進入帳號中的SSH Keys。一般來說SSH Keys的網址是:

請按下右上角的「Add new」新增公鑰。

image

新增公鑰並非是上傳檔案,而是要用複製貼上的方式來將公鑰貼到Key的欄位。至於Title欄位可以填寫一個容易記得的名字即可,例如「puli-public-key」。

image

請用文字編輯器(像是Notepad++)來開啟公鑰檔案,複製裡面全部的內容,貼到網頁中Key的欄位內。

或是複製以下文字框裡面的內容,裡面的文字跟我上面分享的公鑰是一樣的:

 

2015-08-07_011436

完成之後應該會像是這樣子,然後按下「Save」儲存。

image

新增完成。

image

讓我們回到要複製的git儲存庫首頁。在這裡可以找到連接git儲存庫的連接網址,以SSH來說,通常會是「git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git」。請記下這個連接網址,下一步設定git客戶端的時候,我們就會用這個網址來連接git儲存庫。

Step 3. 使用NetBeans連接Git儲存庫 / Connect Git Repository in NetBeans

image

接著我們來設定Git客戶端:NetBeans。開啟NetBeans之後,從Team > Git > Clone… 找到複製的功能。

image

接下來是很重要的關鍵設定。

首先,Repository URL本來應該設定剛剛看到的連接網址「git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git」,但如果伺服器必須指定SSH連接埠的話,那就要改用不同的形式:

  • 原本的連接網址格式:[user@]host.xz:path/to/repo.git/
    例如:git@git2.pudding.dlll.nccu.edu.tw:pudding/test.git
  • SSH的連接網址格式: ssh://host.xz[:port]/path/to/repo.git/
    例如:ssh://git2.pudding.dlll.nccu.edu.tw:22/pudding/test.git

接著Username請務必輸入git,請不要用GitLab的帳號。

然後Pirvate Key File則選擇剛剛產生的SSH私鑰 puli-private-key.ppk。

下面還可以在Clone into: 設定檔案的位置。

設定完成之後就按下「Next >」進入下一步。

image

這時候應該會跳出一個Warning,要加入GitLab伺服器的連線授權。請按下「Yes」即可。

image

看到這個畫面表示正常連接,按「Next >」進入下一步。

image

這樣就完成了,按下「Finish」確定。

image

複製完成之後,接下來再建立專案,請按下「Create Project」。

後續的步驟就跟「Git合作開發從NetBeans開始!NetBeans複製git專案教學」的「Part 2. 新增NetBeans專案」一樣了,請參考之前的文章繼續操作吧。

只要第一次設定後,Git連接方式就會保存在NetBeans裡面,以後每次存取Git儲存庫就不用重複輸入帳號密碼了。


結論:需要學習使用IDE跟版本控制 / Conclusion: Learn to use IDE and version control

最近實驗室又加入了新進成員,而許多人也需要開發系統作為畢業論文。由於我們系所並不是強調軟體工程的科系,所以進來的學弟妹雖然能夠看得懂程式碼,但是在開發上仍顯得生澀。

選擇好用的IDE與版本控制工具能夠降低開發過程中繁雜的操作,程式設計師主要是在邏輯思維上下工夫,而不是像打字員一樣複製大量的程式碼,還難以維護。而IDE與版本控制也是未來踏入業界開發團隊中,與他人合作開發系統時必須要具備的技能。作為未來進入職場的投資,請務必多多熟悉IDE與版本控制的操作吧。

(more...)

Git合作開發從NetBeans開始!NetBeans複製git專案教學 / Clone Git Project in NetBeans

Git合作開發從NetBeans開始!NetBeans複製git專案教學 / Clone Git Project in NetBeans

2014-08-18_154048

本文介紹如何在NetBeans中複製Git專案到本機端,然後建立NetBeans專案,以便開始進行程式的開發。

This article describes how to clone Git project and then create a NetBeans project in NetBeans.

Git專案 / Git Project

2014-08-18_152111 - Copy

本文以我最近要開始的新專案「PHP File Host」為例子來做示範。這是一個存放在GitHub的開放原始碼專案,大家可以任意複製(Clone)裡面的程式碼到本機端來修改。要複製Git專案的方法很多,有HTTPS、SSH與Subversion等通訊協定。在NetBeans裡面,我們可以用HTTPS通訊協定來進行複製,連線方式在GitHub專案網頁的右方下面「HTTPS clone URL」。

總結上述,以下是Git專案的資訊:

NetBeans環境 / NetBeans Version

2014-08-18_152321

NetBeans是我現在主要的IDE開發環境,他也是一個開放原始碼的自由軟體。NetBeans不僅支援語法標亮、自動完成(auto-completion),從7.4版之後也開始支援Git。以往我使用TotoiseGIT來管理GIT的工作,現在逐漸都改以NetBeans來進行操作。

為了讓大家能夠更輕易以NetBeans來開始使用Git專案,本文將介紹如何複製Git專案到NetBeans中,並直接建立一個NetBeans專案來使用。


在NetBeans中複製Git專案 / Clone Git Project in NetBeans

以下介紹如何在NetBeans中複製Git專案。大致上操作步驟分成兩個部分:從Git複製專案檔案、以及在NetBeans中建立NetBeans專案。

Git專案主要負責程式碼的版本控制,NetBeans專案通常還包括一些專案程式碼指定編碼、伺服器上傳連線等資訊,而這些資訊並不建議放到Git專案中公開,兩者要分開處理。

Part 1. 複製Git專案 / Clone Git Project

2014-08-18_152403

在NetBeans中,請進入Team > Git > Clone…

2014-08-18_152450 - Copy

接著會開啟Clone Repository對話視窗。在這裡我們先進行Remote Repository設定。要輸入的欄位包括:

  • Repository URL: 請輸入剛剛的HTTPS複製網址「https://github.com/pulipulichen/php-file-host.git
  • UserPassword登入GitHub的身份認證。
  • Clone into:存放專案的目錄。NetBeans會在這個目錄底下再建立一個Git專案的目錄。舉例來說,我的XAMPP網頁擺在「D:\xampp\htdocs」,那麼Git專案就會出現在「D:\xampp\htdocs\php-file-host」底下。

2014-08-18_152557 - Copy

接下來選擇要複製的Remote Branches。一般是選擇該專案的代表master分支即可。直接按「Next >」按鈕吧。

2014-08-18_152609 - Copy

然後最後是確定目標資料夾 Destination Directory。這邊會帶入剛剛的設定,只要按「Finish」按鈕完成即可。

2014-08-18_152634 - Copy

複製完成之後,NetBeans會問你是否要建立NetBeans專案。打勾「Open Sources in Favorites」,然後按下「Create Project…」,接下來就進入新增專案的步驟。

Part 2. 新增NetBeans專案 / Create NetBeans Project

2014-08-18_152648

NetBeans會顯示「Net Project」對話視窗。在這邊我們要選擇與該專案相對應的程式語言類型。PHP File Host是一個PHP程式語言的專案,而且已經有Git專案過來的檔案,因此我在PHP目錄底下選擇專案類型「PHP Application with Existing Sources」。

然後按下「Next >」按鈕進入下一步。

2014-08-18_152739

在Name and Location這邊要設定的東西蠻多的。

首先我們要指定Sources Folder,請設定剛剛跟Git專案複製的目標資料夾路徑「D:\xampp\htdocs\php-file-host」。接著NetBeans會自動帶入下面的資訊。

接著我們要確認Default Encoding為UTF-8。如果沒有設定NetBeans專案的話,NetBeans會用非UTF-8的編碼來開啟檔案,造成檔案看起來會是亂碼。

然後請打勾「Put NetBeans metadata into a separate directory」,然後指定另一個地方存放NetBeans專案的資訊,不要跟Git專案擺在同一個地方。這是為了避免NetBeans專案資訊被納入Git版本控制之中,這個動作很重要。

2014-08-18_152810

最後就是運作環境設定 Run Configuration。由於我的專案會先在本機端的XAMPP底下運作測試,所以設定Run As: Local Web Site即可。如果你實際運作的伺服器在遠端,那也可以在此步驟設定遠端伺服器的連線方式。不過遠端伺服器設定比較複雜,在此就先不說明。

其他沒有特別要設定的地方,按下「Finish」完成。

2014-08-18_152833 - Copy

NetBeans會顯示剛剛設定的php-file-host專案,複製Git專案的工作就大功告成囉。

其他的Git操作 / How to use Git in NetBeans

當然,除了clone (複製)之外,NetBeans也支援很多Git的操作動作。以下舉例來說常用的指令與其位置:

  • commit: Team > commit ,我還特地設了熱鍵Alt+C,讓自己更方便就能commit
    2014-08-18_172652
  • Pull & Push: Team > Remote > Pull or Push
    2014-08-18_172709
  • 比較檔案差異 Diff: Team > Diff > Diff To…  (可以取代「Git取代分支檔案的方法」一文中以TortoiseGIT的操作動作)
    2014-08-18_172722

Git詳細的說明請參考「Using Git Support in NetBeans IDE」一文。我也還在持續摸索中,有任何心得歡迎在下面討論喔。


結語:IDE的重要性 / Conclusion: The Importance of IDE

以前常常會聽到有人會以「只要筆記本(notepad)就可以寫網頁」來當作自豪的特技,我覺得這只能說是程式設計師的基本,只能拿來跟外行人炫耀。但是如果要往更進階前進,你就必須學習使用IDE。

就目前為止,我主要使用的IDE有Aptana Studio 2 (第三版是是完全不同的東西)跟NetBeans,在我工作中,這些IDE有幾個我非常仰賴的重要工具:

  • 全文搜尋(full text search):當我要找某個函式要如何使用時,全文搜尋是很重要的。特別是像NetBeans能夠解讀程式碼,可以在你使用函式時顯示對應的註解說明,這個功能在閱讀程式(trace code)是非常好用的輔助工具。
  • 正規表達式(regular expression)的搜尋與取代:當要取代換行、找尋某個函式的使用處的時候,正規表達式非常重要。
  • 自動完成(auto-completion):有了語法自動完成,你就不用煩惱每次都為函式或變數少打一個字而帶來的bug。
  • 程式導航(navigation or outline):像是地圖一樣地顯示程式的組成,這在檢視大程式的時候十分有用。
  • Git版本控制功能:一個不做版本控制的專案不僅無法持久發展,也很難跟別人協同開發。

因此我會建議每一位致力於寫程式的朋友,請務必要熟悉一些好用的IDE。如果你跟我一樣是寫PHP與JavaScript,那我建議你就從NetBeans開始吧。

(more...)

Git取代分支檔案的方法 / Replace Branch Files In Git

布丁布丁吃布丁

Git取代分支檔案的方法 / Replace Branch Files In Git

2014-08-09_221445

我通常使用TotoiseGIT工具利用Git與團隊協同開發。當我想要把自己的分支清空,全部改用別人的檔案時,可以使用以下的方法來取代自己的分支。

This article describes how to use TotoiseGIT to replace a branch’s files to another branch.


分支說明 / Branch Description

在本文的例子中會使用兩個分支(Branch)。

  • Branch A:我目前所在的分支,以本地端的pudding分支為例。我不再需要該分支的所有檔案,我希望換成Branch B的檔案。
  • Branch B:目標分支,以遠端伺服器上的master為例。我希望把Branch B的檔案拿到Branch A使用。

我的方法很笨,就只是單純的替換檔案而已。以下說明做法。

Step 1. 遞交Branch A / Commit Branch A

2014-08-09_234423

由於接下來做的事情會變動到Branch A的檔案,不論任何修改,使用Git都應該養成隨時遞交(Commit)的習慣。因此在此我們也先遞交Branch A。如果沒有任何檔案有修改的話,也可以勾選左下角的「只有訊息」(Message only),並撰寫遞交的訊息(Message)即可。

Step 2. 獲取Branch B的資訊 / Fetch Branch B

我們要在TotoiseGIT中獲取Branch B的資訊。

2014-08-09_232313

做法是開啟Git同步(Git Sync)。

2014-08-09_232658

選擇要同步的Branch B。你可以按下「…」按鈕,開啟分支瀏覽器 (Browse reference),在「/remotes/kals/master」找到我們要的Branch B。按下OK確定。

2014-08-09_233004

點選「獲取」(Fetch)。

2014-08-09_233120

如果出現藍色的「Success」訊息,表示獲取成功。

Step 3. 切換成Branch B / Checkout Branch B

我們要利用TotoiseGIT的Checkout功能,把Branch A切換到Branch B去。

2014-08-09_222217 - Copy

在該Git專案的目錄底下按右鍵,選擇Switch/Checkout。

2014-08-09_231128

選擇Branch為遠端的master分支:remotes/kals/master。然後勾選建立新分支(Create New Branch)、強制切換(Force),追蹤(Track)選項保持預設。然後按下OK。

2014-08-09_231443

接著切換檔案,如果出現藍色的「Success」訊息,表示成功。

2014-08-09_233332

雖然看起來檔案沒有什麼明顯的差別,但是現在的確切換成了分支Branch B。按右鍵可以看到「Git Commit -> "master"」,表示現在的分支的確是Branch B。

Step 4. 複製Branch B的檔案到另一個資料夾 / Copy Branch B’s Files To Another Folder

2014-08-09_233723

接下來我建立一個資料夾叫做「kals-temp」,然後把原本資料夾「kals」裡面的檔案複製到「kals-temp」去。這樣我就可以先保留了Branch B的資料。

Step 5. 切換回Branch A / Checkout Branch A

2014-08-09_233945

接著我再回到「kals」資料夾,然後以類似Step 3的方法切換回Branch A,也就是本機端的pudding分支。記得勾選「強制」(Force)。

Step 6. 刪除Branch A的檔案 / Delete Branch A’s Files

2014-08-09_234410

然後我們不需要Branch A的檔案了,全選檔案之後,把它們統統刪除吧。

Step 7. 移動Branch B的檔案回到專案的資料夾 / Move Branch B’s Files Back To Project Folder

2014-08-09_234956

接著再把存放Branch B的「kals-temp」資料夾中的資料移動到專案目錄「kals」資料夾中。

image

現在Branch A裡面的檔案就會是Branch B的檔案了。

Step 8. 遞交Branch A / Commit Branch A

2014-08-09_235344 

完成取代之後,再一次遞交Branch A。由於現在這個Branch A的檔案是Branch B的檔案,因此跟Step 1遞交的檔案有很大的差異。下面的檔案變動(Changes made)會列出相當多的改變。總之先保存這次的變動,遞交吧。

這樣子我們就完成拿Branch B的檔案替換到Branch A分支裡面去了的任務了。


小結:尚未摸透Git / Conclusion: Complex Git

事實上,上述這個做法看起來很愚蠢。雖然我也寫了一個簡單的Git介紹,但老實說我對於Git仍不是這麼的熟悉。分支之間檔案交換的方法還有很多種,這篇是我找到最可行的一種方式。

2014-08-10_000547

一般的做法都是教你使用「比較跟前面版本的差異」(Diff with previous version)。可是這種做法中,Branch A中有、Branch B中沒有的檔案,依然還會存在在替換後的Branch A中。特別是當Branch B的檔案名稱修改時,就會造成Branch A替換後出現了兩個不同名稱檔案、但是檔案內容卻一樣的問題。

2014-08-10_001020

不過我後來在想,是不是應該要用Rebase這個工具來取代分支檔案呢?這點我就要繼續再研究看看了。希望熟悉Git的朋友能給我一些建議吧。

(more...)