Skip to content

zh

  • in zh
  • 1 min read

關於Ionic框架的註解：OS X中的Android平台

在這篇博客文章中，我們將一起研究你在Mac OS X上為Ionic框架的Android平台安裝依賴時可能遇到的幾種錯誤信息。請按照這個官方指南來安裝Cordova和Ionic，然後創建一個項目，直到你配置平台的步驟。

要啟用Android平台，請運行以下命令：

ionic platform add android

然而，你可能遇到這個錯誤：

Error: ANDROID_HOME is not set and "android" command not in your PATH.

步驟1：下載Android SDK

訪問 Android 開發者網站並下載獨立的 SDK 工具：https://developer.android.com/sdk/installing/index.html。

步驟2：解壓縮文件

我將SDK解壓縮到我的工作空間的路徑：

/Users/Victor/Workspace/android-sdk-macosx

步驟3：在您的PATH中設置Android命令

注意：將"Victor"替換成您的用戶名。如果您使用的是oh-my-zsh，請將.bash_profile替換成您的.zshrc配置文件。

  1. 打開您的終端並確保 .bash_profile 以一個新行結束：
echo >> /Users/Victor/.bash_profile
  1. 在 .bash_profile中設置 ANDROID_HOME 環境變量：
echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile
  1. 也更新PATH變量：
echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile
  1. 重載終端以應用更改：
. /Users/Victor/.bash_profile

步驟4：安裝Android-19

現在，如果您嘗試運行：

ionic platform add android

您可能會看到以下的錯誤：

Error: Please install Android target "android-19".

從命令行運行 android 打開SDK管理器：

android

勾選 Android 4.4.2 (API 19)，然後點擊 "Install 8 packages…”。接受授權並等待下載過程完成。

最後，再次嘗試運行命令：

ionic platform add android

然後就成功了：

Project successfully created.

如果您遇到任何問題，請隨時向我發送幫助請求。幹杯！☺

  • in zh
  • 1 min read

將CircleCI與Karma測試配置

問題

我正在設置使用CircleCI和Karma測試的Angular在Heroku上的持續集成。

![] (./2014-12-22.png)

測試在我的本地主機上可以運行，但在CircleCI上找不到Karma：

噢哦，有些測試沒有通過！
失敗的命令：npm測試
退出代碼：1
輸出：
>啟動 karma karma.conf.js

sh：1：karma：找不到
npm ERR！測試失敗。有關詳細信息，請參見上文。
（（npm：test））返回退出代碼1

我的解決方案

要解決這個問題，您可以創建或編輯 circle.yml 配置文件。使用npm添加依賴以全局安裝 karma-cli，並使用Bower安裝Angular，如下所示：

dependencies:
   pre:
     - npm install -g karma-cli bower
     - bower安裝
   cache_directories:
     - ~/nvm

此配置應該可以幫助您在CircleCI上成功運行您的Karma測試。

  • in zh
  • 2 min read

如何使用Meteor.js上傳檔案？

注意: 本教程使用的是2014年12月15日的Meteor 1.1.3 和 cfs:standard-package 0.0.2。由於此功能正在積極開發中，您閱讀此文時可能已有所變化。如果你有任何疑問，請隨時聯絡我。:)

問題描述

上周，我的一個朋友問我如何在Meteor項目中處理檔案上傳。我建議他使用Collection FS，並按照他們存儲庫的README.md指南。檔案上傳功能在本地主機上工作正常，但一旦部署到免費的Meteor測試服務器，就會失敗。事實上，服務器會不斷刷新，甚至無法加載頁面。

我的解釋

這個問題產生的原因是 FS.filesystem 將圖像上傳到公共資料夾目錄。由於安全考慮，除非經過適當配置，否則服務器不允許這樣做。一個解決方法是使用 GridFS 作為儲存適配器，將圖像插入到MongoDB中。

我的解決方案

安裝

首先，不要使用cfs:filesystem，而要為您的套件使用cfs:gridfs。

    meteor add cfs:standard-packages
    meteor add cfs:gridfs
語法

接下來，當聲明您的集合時，從使用 FS.Collection 切換到 FS.Store.GridFS。

var imageStore = new FS.Store.GridFS("images")

Images = new FS.Collection("images", {
  stores: [imageStore],
})
權限

然後，根據你的需求設定'deny'和'allow'規則。

Images.deny({
  insert: function () {
    return false
  },
  update:
  created: function () {
    return false
  },
  remove: function () {
    return false
  },
  download: function () {
    return false
  },
})

Images.allow({
  insert: function () {
    return true
  },
  update:
  created: function () {
    return true
  },
  remove: function () {
    return true
  },
  download: function () {
    return true
  },
})
使用者介面

在客戶端模板中添加一個檔案輸入按鈕以供使用者點擊。

<input type="file" name="..." class="myFileInput" />

像這樣處理事件：

Template.Profile.events({
  "change .myFileInput": function (event, template) {
    FS.Utility.eachFile(event, function (file) {
      Images.insert(file, function (err, fileObj) {
        if (err) {
          // handle error
        } else {
          // handle success depending on your needs
          var userId = Meteor.userId()
          var imagesURL = {
            "profile.image": "/cfs/files/images/" + fileObj._id,
          }
          Meteor.users.update(userId, { $set: imagesURL })
        }
      })
    })
  },
})
發佈/訂閱

最後，如果你已經移除了 autopublish 套件，不要忘記設定發佈和訂閱。

Meteor.publish("images", function () {
  return Images.find()
})

在你的 iron:router 中訂閱它：

Router.route("/profile", {
  waitOn: function () {
    return Meteor.subscribe("images")
  },
  action: function () {
    if (this.ready()) this.render("Profile")
    else this.render("Loading")
  },
})

我希望這個解決方案對你有所幫助。如果你正在使用Amazon S3 bucket，可以考慮使用 cfs:s3 作為適配器。如果所有其他方法都失敗了，Filepicker可以作為處理文件上傳的另一種方法。欲了解更多信息，請訪問 Filepicker的網站。

  • in zh
  • 1 min read

與香港General Assembly的問答環節

我被香港General Assembly (GA) 邀請，談論我在Web Development Immersive (WDI) 課程裡的經驗。

1. 自我介紹並描述你目前的項目

我叫Victor，是一名軟件工程師。目前，我正在進行幾個利用JavaScript框架的有趣項目：

  1. 使用Ionic和Neo4j圖形數據庫的原生iOS/Android手機應用程式。
  2. 使用WebRTC，Node.js，和Express.js的視頻聊天室。
  3. 使用WebGL和Three.js的音樂視覺化器。
  4. 使用Angular.js和MongoDB的LinkedIn風格的網絡平台。
  5. 使用Meteor.js和D3數據視覺化的實時投票系統。

其中一些是開源項目。如果你有興趣參與或試用demo，請查看我的GitHub。

2. 選擇在GA接受WDI的原因

在參加GA的WDI課程之前，我在澳洲負責社交媒體推廣的數字營銷人員。我的角色激發了我對科技如何迅速改變傳統媒體和市場渠道的興趣。認識到良好網站為數字營銷努力的基石的重要性，我有了開發編碼技能的動力。我選擇在GA接受的WDI而非在香港一所大學夜間上課，是因為我想要一種與最前沿技術保持同步的教育。

3. 回顧學生經驗

我在WDI課程中最喜歡的部分是來自多樣化背景的學生之間的友誼。我們都在技術上和情感上互相幫助。網頁開發是團隊合作，一個網站太複雜，無法完全靠自己建立，無論你的技術水平如何。

4. 課程如何幫助我實現我的目標

我的目標是在這個行業找到工作，GA在香港的強大網絡對此大有幫助。我大量的社交並參與了各種活動，包括黑客馬拉松。對於Justin在這期間的支持表示特別感謝。

5. 課程的前3個經驗

  1. Wireframing：起初，我低估了wireframing的重要性。隨著更多的項目經驗，我已經意識到預先計劃可以長遠節省時間。
  2. 用戶測試：持續的用戶反饋非常重要。代碼應該由市場需求和用戶需求驅動，而不僅僅是由開發人員認為這很酷。
  3. 學習如何學習：課程無法涵蓋所有內容，所以對於持續的發展，自我導向的學習是非常重要的。

6. 過了GA後的生活：接下來是什麼？

我堅守"總是在編碼"的原則。你編碼的越多，你獲得的技能就越好。目前，我正在加強我的理論基礎，以便在IT產業中承擔領導角色。

  • in zh
  • 1 min read

Hack Reactor能否讓你變得更聰明？

日常流程

每天早上，我在午夜12點醒來。我的鬧鐘幫我以成為軟體工程師的目標開始我的一天。作為香港的遠程學生，我比舊金山時間快16個小時。適應這種時差並不容易。課程材料只是增加了複雜性，涵蓋了遞迴、哈希表、偽經典繼承、骨幹和快速等主題。那麼，我從這個經驗中得到了什麼？

學習批判性思考

專業軟體工程師能創造出優秀的產品，不僅僅是因為他們具有出色的編碼技巧，更因為他們具備正確的思維方式。他們對特定框架有多熟練只是其中一個因素。他們也是快速而持久的學習者，有效且富有同理心的溝通者，並且是主動好奇的問題解決者。這些技能不能僅從書本或網上視頻中學習到；他們來自於實踐操作，觀察導師如何解決問題，並從導師身上學習。

從更有知識的同伴身上學習

這個編碼訓練營吸引了許多聰明的人，將它與其他學習平台區分開來。我經常問自己："我是否足夠聰明以應對這個優秀的機構？"騙子症候群的感覺是真實的。與更聰明的人接觸有時會讓我感到害怕，讓我覺得自己不夠好。然而，它也促使我更樂意去犯錯、失敗，從而以更快的速度學習。

編碼能否讓我變得更聰明？

我認為確實能，而我們相信的往往會成為自我應驗的預言。與聰明的人共事提升了我的迎接挑戰和思考問題的方式。總有一種更好、更有效、更簡單的方法來做事。你周圍的人愈聰明，你就越有可能從他們身上學到，從而讓自己變得更聰明。

  • in zh
  • 1 min read

使用Mocha進行測試：陣列比較

問題

在為陣列比較寫一個Mocha測試套件時，我遇到了一個問題。這是測試套件：

describe("Array comparison", function () {
  "use strict"
  it("should return true if two arrays have the same values", function () {
    var myArray = ["a", "b", "c"]
    expect(myArray).to.equal(["a", "b", "c"])
  })
})

與我的期望相反，這個測試失敗了，產生以下的錯誤：

AssertionError: expected ['a', 'b', 'c'] to equal ['a', 'b', 'c']

我的解釋

為什麼陣列不像其他值那樣進行比較呢？這是因為陣列的typeof是物件。在Mocha中，to.equal並不表示操作數在語義上是相等的；相反，它檢查他們是否參考了相同的物件。換句話說，這個測試失敗是因為myArray並不是與['a', 'b', 'c']完全相同的物件。

可能的解決方案

  1. 使用.eql進行"寬鬆相等"以深度比較值。
  2. 使用.deep.equal，這檢查操作數是否在語義上相等，但不一定是相同的物件。
  3. 在陣列中檢查.members。
  4. 將陣列轉換為字符串然後進行比較。

參考

我希望這個修改的版本更好地傳達了您的見解和解決方案。

  • in zh
  • 1 min read

如何自設Sublime Text的預設自動完成功能

我每天都使用Sublime Text 3，我特別欣賞它的JavaScript自動完成功能。

然而，預設完成if語句的方式存在一個問題;它在結尾處包含了一個不必要的分號：

if (true) {
}

使用JSHint時，這個分號會在我寫的大部分代碼中產生錯誤。每次都要手動刪除它是逆生產的。

解決問題的方法

  1. 導航到 首選項 → 瀏覽套件以開啟Sublime Text文件夾。
  2. 找到名為 JavaScript的文件夾（如果不存在，則創建一個）。
  3. 在此文件夾中，打開 if.sublime-snippet（如果不存在，則創建一個）。
  4. 刪除分號，以便您的片段現在看起來像這樣：
    <snippet>
        <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content>
        <tabTrigger>if</tabTrigger>
        <scope>source.js</scope>
        <description>if</description>
    </snippet>

按照這些步驟，您可以消除不必要的分號，使您的編碼過程更有效率。

  • in zh
  • 2 min read

使用Meteor在五分鐘內建立一個超棒的聊天應用程式

在這個教程中，我將向你展示如何使用MeteorJS編寫一個簡單的聊天應用程式。

這裡有一個我們目標的實際演示：http://hrr2demo.meteor.com/

和GitHub上的原始碼：https://github.com/victorleungtw/hrr2demo

在我們開始之前，隨意嘗試演示並分叉存儲庫。

什麼是Meteor？

Meteor是一個用於使用JavaScript構建實時應用程式的出色網絡框架。它基於NodeJS和MongoDB。

步驟1：安裝Meteor

對於macOS和Linux用戶，在終端機中運行以下命令：

> curl [https://install.meteor.com/](https://install.meteor.com/) | sh

步驟2：創建新應用程式

> meteor create awesomeChatApp

然後更改為你應用程式的目錄：

> cd awesomeChatApp

嘗試運行它：

> meteor

並在瀏覽器中打開此地址：http://localhost:3000

步驟3：創建資料夾和檔案結構

使用命令刪除默認檔案：

> rm awesomeChatApp.*

創建三個資料夾：

> mkdir client server both

按慣例，我們將把在客戶端（即，用戶的瀏覽器）運行的任何內容放在“client”資料夾中，將在服務器端運行的任何內容放在“server”資料夾中，將由客戶端和服務器共同訪問的任何內容放在“both”資料夾中。

步驟4a：創建收集來儲存訊息

在'both'文件夾內，我們將在這裡放置我們的模型。

> touch collection.js

創建一個新的'messages'集合：

Messages = new Meteor.Collection("messages")

步驟4b：創建索引頁

在'client'文件夾內，我們將在此處放置我們的首頁視圖。

> touch index.html

使用以下HTML：

<head>
  <title>chatterbox</title>
</head>
<body>
  {{> loginButtons align="right"}} # chatterbox {{> input}} {{> messages}}
</body>

步驟4c：創建帶有助手的HTML模板

為了更好地組織我們的檔案，我們可以創建一個新的文件夾：

> mkdir messages > cd messages > touch messages.html

現在，我們創建一個名為'messages'的模板。

<template name="messages">
  {{#each messages}} {{name}}: {{message}} {{/each}}
</template>

並且我們將創建助手以通過在'Messages'集合中的每個消息。

Template.messages.helpers({
  messages: function () {
    return Messages.find({}, { sort: { time: -1 } })
  },
})

步驟4d：創建帶有事件處理程序的HTML模板

同樣，我們將為輸入框和提交按鈕創建一個模板。

> mkdir input > cd input > touch input.html

<template name="input">
  <form id="send">
    <input id="message" type="text" />
    <input type="submit" value="Submit" />
  </form>
</template>

另外，我們將創建一個JavaScript文件來處理提交按鈕的點擊事件。

Template.input.events({
  "submit form": function (event) {
    event.preventDefault()
    var name = Meteor.user() ? Meteor.user().profile.name : "Anonymous"
    var message = document.getElementById("message")
    if (message.value !== "") {
      Messages.insert({
        name: name,
        message: message.value,
        time: Date.now(),
      })
      message.value = ""
    }
  },
})

步驟4e：添加帳戶包以便使用GitHub帳戶登錄

Meteor非常容易使用。因為它具有豐富的包生態系統，所以我們要添加accounts-ui和accounts-github以便一個簡單的用戶登錄系統。

meteor add accounts-ui
meteor add accounts-github

步驟4f：添加樣式表（可選）

將以下樣式表複製並粘貼到您的'client'文件夾內。

> mkdir style > cd style > touch style.css

步驟5：將您的網站部署到Meteor的免費服務器

meteor deploy awesomeChatApp.meteor.com

完成！如果給出的地址已經在使用，您可能需要部署到其他地址。在瀏覽器中打開您的地址：http://awesomeChatApp.meteor.com

您還將需要配置登錄系統

  • in zh
  • 2 min read

我在墨爾本發現的有趣事實

雪梨和墨爾本，哪一個更好？選擇在你。兩座城市之間有著傳統且小氣的對立。

在我看來，比較它們就像是比較蘋果與橙子。當我終於訪問墨爾本時，它贏得了我的心。對不起，雪梨。

我的故事始於七月。儘管那是一個風雨交加的週末，但沒有任何事情能阻止我去墨爾本探望我最好的朋友。像我大部分的旅行一樣，我沒有計劃；我只是到達後，做我想做的事情。一個城市贏得的綽號往往可以揭示出很多關於它的特性 - 例如"世界上最宜居的城市"。一次造訪無法看盡墨爾本所有的一切，我並不建議大家嘗試。所以，這裡有一些精選的亮點，並無特定的順序。如果你對這個城市並不熟悉，以下是我發現的一些有趣的事實：

冬季極其寒冷 - 這可能看起來很明顯，但墨爾本的冬天有一種獨特的冷。兩個小時前，我正享受著布里斯班的天氣；兩個小時後，我在墨爾本不停地顫抖。雖然我在該市的時間很愉快，但不要被誤導認為這裡總是溫暖和陽光明媚的。最糟糕的經歷是冷到在夜間多次被喚醒。謝天謝地，我朋友的房間有一個暖氣機，真是救星。有趣的是，這次旅行最好的部分是在晚上享用冰淇淋，因為它不會在我走在街上的時候融化。

你可能會迷失方向 - 對於新來的人來說，迷路並不尷尬，尤其是當大多數街道都有普遍存在的"派臉"。幸好，墨爾本的建築使它與眾不同。該市最具標誌性的地標之一是弗林德斯街車站。大多數的旅遊景點都位於城市中心，方便探索和參觀像皇后維多利亞市場和維多利亞州立圖書館這樣的地方。這些景點都在步行距離之內，或者你可以乘坐免費的城市環線電車。

藝術館並非總是免費 - 他們說生活中最好的事情是免費的，許多城市景點可以免費進入。我們直到到達出口 - 還是入口？ - 才意識到我們需要門票。無論如何，我們還是免費看了一些當代藝術。文化愛好者在聯邦廣場將發現有很多能讓他們忙碌的事情。

水族館 - 這可能是該市最少被遊客參觀的旅遊景點。畢竟，它與全世界的其他水族館相差無幾。然而，我喜歡觀察動物，這個地方提供了一次探索之旅 - 企鵝到處吐口水。膽汁導致了綠色的色調。使用衛星，你可以根據他們排泄物的斑點来估算皇帝企鵝的數量 - 除非他們全都有腸胃炎，當然。

唐人街無處不在 - 你不必努力尋找唐人街，它遍布墨爾本。中央商業區人口密集，你很可能會遇到華人。多虧了這種國際融合，不再有所謂的"典型澳洲居民"。有了如此的多元性，可以在幾公里範圍內找到各種國際美食並不令人驚奇。一家中華料理餐館的招牌翻譯成"熱情如火" - 不，它不是一家妓院。

（十二）使徒 - 這個名字有些誤導人 ；那裡既沒有十二個石柱，也沒有任何與聖經相關的東西。該地點原本被稱為"母豬和小豬"，但為了適應旅遊的需要被重新命名為"使徒群"。我們的司機藤原拓海，你可能會認出他是來自漫畫"頭文字D"，他操控在崎嶇曲折的大洋路上行駛得非常漂亮。風景令人驚艷。如果你計劃嘗試一日遊去維多利亞州最熱門的旅遊地點，希望有個好天氣！

那麼，你還在等什麼呢？立即預訂飛機票，直飛那裡。有無數的令人興奮的景點等你去看，還有許多記憶等你去創造。如果你已經去過，那就回去看看有什麼新的。請記住，不同的季節提供了不同的角度來讓你了解這個城市有趣的地方。在我看來，墨爾本是一個無論是生活還是旅遊都極好的地方。

  • in zh
  • 2 min read

我喜愛及討厭香港的事物

這個情況很複雜。我喜歡香港的獨特品質，但也有我覺得令人極度沮喪的方面。

我在香港出生，人口七百萬中的一個人，擠在僅有1104平方公里的地方。我與這個大都市的關係是愛恨交織的。在這裡，我將探討為什麼。

喜愛: 人的多樣性

先從正面說起。香港人的多樣性總是讓遊客著迷。多年前，當中國不易進入時，香港就像遊客的'快速中國'。現在，遊客可以很容易地看到真正的中國，但香港仍然是各種文化的大熔爐。無論是和家人還是朋友，我們都發現這個城市的氣氛充滿活力。我們勤奮、效率高，提供世界上最長的工作時間。當我到海外旅行時，生活步調較慢的情況會讓我感到瘋狂。

討厭: 過度擁擠

有什麼壞處嗎？過度擁擠。無論是你試圖購買票據，搭火車，或者在餐廳找餐桌，總是有長長的隊伍。這個城市感覺像是要爆炸了，那種壓力滲透到整個氛圍中。這是我覺得令人窒息並且絕對討厭的事情。

喜歡: 食物

談到食物，香港從未讓人失望。選項無窮無盡且極其美味。從中式烤肉和台式珍珠奶茶，到日本壽司和韓國烤肉，香港無疑是一個美食天堂。進餐的快樂是一種總是能夠將人們聚在一起的事情。

討厭: 高昂的生活成本

這個城市高昂的生活成本是一個重要的缺點。位置越方便，價格就越高。當地人經常抱怨，香港有世界上租金最高的最小居住空間。而且價格一直在上升。

喜愛: 快樂的回憶

我最喜歡的香港方面之一就是它對我持有的懷舊感。我在這裡有一段無比美好的童年，我希望我能用我們現在擁有的技術捕捉那些時刻。

討厭: 政治氣候

我不滿的源頭是什麼？共產黨對這個曾經活躍的城市的影響扮演著重要的角色。我不喜歡媒體、教育和立法系統是如何被政府控制的。我對於當權者不願給予香港民主權利，並壓制言論自由的行為深感痛恨。

總結

儘管有負面的因素—過度擁擠，成本上升，政治紛爭—我仍然珍愛著香港。是回憶，食物和人們讓我繼續留在這裡。無論何時何地。

我希望這能提供更細緻的理解關於我與這個複雜城市的關係。