Skip to content

Home

  • in podcast
  • 3 min read

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

Hello everyone and welcome to another episode of Continuous Improvement - your source for tips, tricks, and solutions to help you overcome hurdles in your development journey. I'm your host, Victor, and in today's episode, we will be discussing some common error messages that you might come across while installing dependencies for the Android platform of the Ionic framework on Mac OS X.

But before we dive into that, I want to remind you to check out our official guide at ionicframework.com/docs/guide/installation.html. It provides a step-by-step walkthrough for installing Cordova and Ionic, as well as creating a project up until the point where you configure the platform.

Alright, let's get started!

So, you've followed the official guide and reached the point where you need to enable the Android platform by running the command:

ionic platform add android

But hold on, you might encounter an error message that says:

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

What does this mean? Well, it simply means that the Android command is not recognized by your system because the necessary environment variables are not properly set. But fret not, I'm here to guide you through the process of resolving this.

Step 1 is to download the Android SDK. You can find the link to the Android developer website in our blog post at [link]. Once you're there, go ahead and download the stand-alone SDK Tools.

Step 2 involves unzipping the downloaded file. Make sure to choose a suitable location for the SDK. For me, I extracted it to my workspace directory at:

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

But you can choose a different location if you prefer.

Now that we have the Android SDK set up, it's time for Step 3: setting the Android command in your PATH. This step is crucial for your system to recognize the Android command as a valid command. So, open your terminal and follow along.

First, let's make sure your .bash_profile ends with a newline:

echo >> /Users/Victor/.bash_profile

Next, we need to set the ANDROID_HOME environment variable in your .bash_profile file. This can be accomplished with the following command:

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

Remember to replace "Victor" with your own username.

In addition to the ANDROID_HOME variable, we also need to update the PATH variable. This ensures that your system knows where to find the Android tools and platform tools. Execute the following command:

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

Great, we're almost there! Now, in order to apply the changes we made to the .bash_profile file, we need to reload the terminal. You can do this by executing the command:

. /Users/Victor/.bash_profile

Phew, we've made it through Step 3! Now we're ready for Step 4, which involves installing Android-19. If you try running the command:

ionic platform add android

You might come across the following error message:

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

To resolve this, we need to open the SDK manager by running the android command from your terminal:

android

Once the SDK manager is open, check the box for Android 4.4.2 (API 19) and click on "Install 8 packages…". Then, simply accept the license and patiently wait for the download process to complete.

Now, it's time to give it another shot! Run the command again:

ionic platform add android

And voila! Hopefully, you will see the reassuring message:

Project successfully created.

And there you have it, folks! You've successfully resolved the error messages that can occur while installing dependencies for the Android platform of the Ionic framework on Mac OS X. If you experience any issues throughout the process, don't hesitate to reach out to me via email at victorleungtw@gmail.com.

That wraps up another episode of Continuous Improvement. I hope you found this information helpful and that it saves you time and frustration in your development journey. Make sure to subscribe to our podcast for more valuable tips and solutions. Until next time, happy coding!

  • 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.

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

  • 1 min read

Configure CircleCI with Karma Test

The Problem

I was setting up continuous integration using CircleCI and Karma tests for Angular on Heroku.

The tests were working on my local host, but Karma was not found on CircleCI:

Uh-oh, some tests have failed!
Failing command: npm test
Exit code: 1
Output:
> karma start karma.conf.js

sh: 1: karma: not found
npm ERR! Test failed. See above for more details.
((npm :test)) returned exit code 1

My Solution

To resolve this issue, either create or edit your circle.yml config file. Add dependencies using npm to install karma-cli globally, and use Bower to install Angular, as shown below:

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

This configuration should help you run your Karma tests successfully on CircleCI.

  • in podcast
  • 2 min read

Configure CircleCI with Karma Test

Welcome to "Continuous Improvement," the podcast where we discuss solutions to common programming and development challenges. I'm your host, Victor. Today, we're going to delve into an issue that many developers face when setting up continuous integration with CircleCI and Karma tests for Angular on Heroku.

So, picture this: you've been working hard on your Angular project, and you're ready to set up continuous integration to ensure that your code is always tested and deployed smoothly. You choose CircleCI as your CI/CD platform because of its popularity and great features. You follow all the necessary steps, configure your build process, and run your tests locally. Everything seems to be working fine until you push your code to CircleCI. Suddenly, your tests fail, and you're left scratching your head.

Let me paint you a clearer picture. The error message you see on CircleCI says, "Uh-oh, some tests have failed! Failing command: npm test. Exit code: 1. Output: > karma start karma.conf.js. sh: 1: karma: not found. npm ERR! Test failed. See above for more details." Frustrating, isn't it?

But fear not, my friends! I have a solution for you. After spending some time digging through forums and consulting the documentation, I found a way to resolve this issue.

To get Karma to work on CircleCI, you'll need to make a small tweak to your CircleCI configuration file, commonly referred to as the circle.yml file. This file specifies the build process and dependencies required for your project.

Here's what you need to do: open your circle.yml file and add the following lines of code:

dependencies:
  pre:
    - npm install -g karma-cli
  cache_directories:
    - ~/.npm

By adding these lines, you're instructing CircleCI to install karma-cli globally before running your tests. This ensures that the karma command is available and avoids the dreaded "karma not found" error. Additionally, the cache_directories line ensures that npm dependencies are cached for faster builds.

Once you make these changes and push your code to CircleCI, you should see your tests running successfully, without any errors. And that's it! You've conquered this challenge and brought continuous integration to your Angular project seamlessly.

Thanks for tuning in to this episode of "Continuous Improvement." I hope you found the solution to the CircleCI and Karma issue helpful. Remember, as developers, we encounter problems all the time, but it's through continuous learning and improvement that we grow. Join me next time as we explore more programming challenges and their solutions.

  • 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測試。

  • 2 min read

How to Upload Files with Meteor.js?

NOTE: This tutorial uses Meteor 1.1.3 with cfs:standard-package 0.0.2 as of December 15, 2014. Since this feature is under active development, it may have changed by the time you read this. Feel free to contact me if you have any questions. :)

The Problem

Last week, a friend of mine asked me how to handle file uploads in a Meteor project. I recommended he use Collection FS, and he followed the README.md instructions on their repository. The file upload feature worked fine on localhost but failed once deployed to the free Meteor testing server. In fact, the server would keep refreshing and wouldn't even load a page.

My Explanation

This issue arises because FS.filesystem uploads the image to a public folder directory. Due to security concerns, this is not allowed by the server unless properly configured. A workaround is to use GridFS as a storage adapter to insert images into MongoDB.

My Solution

Installation

First, instead of using cfs:filesystem, use cfs:gridfs for your package.

    meteor add cfs:standard-packages
    meteor add cfs:gridfs
Syntax

Next, when declaring your collection, switch from using FS.Collection to FS.Store.GridFS.

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

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

Then, set up 'deny' and 'allow' rules based on your needs.

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
  },
})
User Interface

Add a file input button in your client template for users to click.

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

Handle the event as follows:

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 })
        }
      })
    })
  },
})
Publication/Subscription

Lastly, don't forget to set up publication and subscription in case you've removed the autopublish package.

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

Subscribe to it in your iron:router:

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

I hope this solution works for you. If you're using an Amazon S3 bucket, consider using cfs:s3 as the adapter. If all else fails, Filepicker could serve as an alternative approach for handling file uploads. For more information, visit Filepicker's website.

  • in podcast
  • 3 min read

How to Upload Files with Meteor.js?

Welcome to another episode of Continuous Improvement where we discuss ways to enhance your development skills and solve common coding challenges. I'm your host, Victor. Today, we're going to talk about handling file uploads in a Meteor project.

Last week, a friend of mine ran into an issue when deploying his Meteor app with a file upload feature. It worked perfectly fine on his local machine, but once deployed, the server kept refreshing and failed to load any page. After investigating this issue, I found a solution that I want to share with you all.

The problem arises when using cfs:filesystem, which uploads the file to a public folder directory. This is not allowed by the server for security reasons, resulting in the page failing to load. However, we have a workaround to solve this issue by using GridFS as a storage adapter to insert files into MongoDB.

Let's go through the steps to implement this solution in your Meteor project.

First, you need to install the necessary packages. Replace cfs:filesystem with cfs:gridfs in your project.

Open your terminal and enter the following commands:

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

Great! Once you've added the required packages, you can move on to the syntax changes. Instead of using FS.Collection, switch to FS.Store.GridFS when declaring your collection.

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

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

Now, let's configure the permissions for your collection. Add the following deny and allow rules based on your requirements.

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

Images.allow({
 insert: function(){
 return true;
 },
 return true;
 },
 remove: function(){
 return true;
 },
 download: function(){
 return true;
 }
});

Moving on to the user interface. In your client template, add a file input button for users to select their file.

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

Now, let's handle the file upload event in your template.

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});
          }
        });
      });
   },
});

Don't forget to set up the publication and subscription if you have removed the autopublish package.

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

Subscribe to it in your iron:router to ensure that you have the necessary data when rendering the template.

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

That's it! By following these steps, you can successfully handle file uploads in your Meteor project, even when deployed to a server. If you're using an Amazon S3 bucket, consider using cfs:s3 as the adapter. And as a last resort, consider Filepicker as an alternative approach for file uploads.

I hope this solution helps you overcome any file upload challenges you may encounter in your projects. Remember, continuous improvement is key to becoming a better developer.

Thank you for listening to this episode of Continuous Improvement. Stay tuned for more tips, tricks, and solutions to enhance your coding journey. I'm Victor, your host, signing off.

  • 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的網站。

  • 2 min read

Q&A with General Assembly Hong Kong

I was invited by General Assembly (GA) Hong Kong to talk about my experience in the Web Development Immersive (WDI) course.

1. Introduce Yourself and Describe Your Current Projects

My name is Victor, and I am a software engineer. Currently, I am working on several interesting projects that utilize JavaScript frameworks:

  1. A native iOS/Android mobile app using Ionic and the Neo4j graph database.
  2. A video chatroom using WebRTC, Node.js, and Express.js.
  3. A music visualizer using WebGL and Three.js.
  4. A LinkedIn-like network platform using Angular.js and MongoDB.
  5. A real-time voting system using Meteor.js and D3 data visualization.

Some of these are open-source projects. If you're interested in contributing or trying out the demos, please check out my GitHub.

2. Reasons for Choosing WDI at GA

Prior to enrolling in WDI at GA, I was a digital marketer responsible for social media promotions in Australia. My role sparked an interest in how technology is rapidly changing traditional media and marketing channels. Recognizing the importance of a good website as the cornerstone of digital marketing efforts, I was motivated to develop coding skills. I chose WDI at GA over night classes at a Hong Kong university because I wanted an education that was in tune with cutting-edge technologies.

3. Recapping the Student Experience

My favorite part of the WDI course was the camaraderie among students from diverse backgrounds. We all helped each other technically and emotionally. Web development is teamwork, and a website is too complex to build entirely on your own, regardless of your skill level.

4. How the Course Helped Achieve My Goals

My goal was to land a job in the industry, and GA's strong network in Hong Kong greatly assisted me. I networked extensively and participated in various events, including hackathons. Special thanks to Justin for his support during this period.

5. Top 3 Lessons from the Course

  1. Wireframing: Initially, I underestimated the importance of wireframing. With more project experience, I’ve come to realize that planning ahead saves time in the long run.
  2. User Testing: Continuous user feedback is crucial. Code should be driven by market demand and user needs, not just by what a developer thinks is cool.
  3. Learning How to Learn: The course couldn’t cover everything, so self-directed learning is crucial for ongoing development.

6. Life After GA: What's Next?

I abide by the principle of "Always Be Coding." The more you code, the better you get. Currently, I am strengthening my theoretical foundation to take on leadership roles in the IT industry.

  • in podcast
  • 3 min read

Q&A with General Assembly Hong Kong

Welcome to Continuous Improvement - the podcast where we delve into the world of web development, share stories, and explore ways to continuously improve our skills and projects. I'm your host, Victor, a software engineer with a passion for coding and a thirst for knowledge.

In today's episode, we'll be discussing my experience in the Web Development Immersive course at General Assembly Hong Kong. But before we dive in, let me give you a brief overview of what I'm currently working on.

At the moment, I'm involved in several exciting projects that make use of JavaScript frameworks. One project is a native iOS/Android mobile app using Ionic and the Neo4j graph database. Another is a video chatroom built with WebRTC, Node.js, and Express.js. And then there's a music visualizer using WebGL and Three.js. Additionally, I'm working on a LinkedIn-like network platform using Angular.js and MongoDB, as well as a real-time voting system using Meteor.js and D3 data visualization. Some of these projects are open-source, so if you're interested in contributing or checking out demos, head over to my GitHub page at github.com/victorleungtw.

Now, let's rewind a bit and talk about my decision to enroll in the Web Development Immersive course at General Assembly. Before diving into web development, I was actually a digital marketer handling social media promotions in Australia. This job sparked my curiosity about how technology is transforming traditional media and marketing channels. Realizing the significance of having a strong web presence, I wanted to develop my coding skills. I chose the WDI course at General Assembly because I wanted an education that matched the pace of cutting-edge technologies.

Moving on, I want to share some insights about the student experience at General Assembly. One of my favorite aspects of the WDI course was the sense of camaraderie among students. We all came from different backgrounds, but we helped and supported each other both technically and emotionally. Building a website is a team effort, no matter your skill level.

Now, let's talk about how the course helped me achieve my goals. My primary objective was to secure a job in the web development industry, and General Assembly's strong network in Hong Kong greatly facilitated that process. I actively networked and participated in various events, such as hackathons. I'm grateful for the support of Justin, who played a significant role during this period.

Throughout the course, I learned countless lessons, but let me share the top three takeaways with you.

Lesson number one is the importance of wireframing. Initially, I underestimated the significance of planning ahead. But as I gained more project experience, I realized that taking the time to wireframe can save us a lot of time in the long run.

Lesson number two is all about user testing. It's crucial to continuously gather feedback from users. After all, code should be driven by market demand and user needs, not solely by what a developer thinks is cool.

Lastly, lesson number three is learning how to learn. The WDI course provided a strong foundation, but technology is ever-evolving. This means that ongoing self-directed learning is crucial to stay on top of the game.

Now that I've completed the course, you might be wondering what's next for me. Well, I live by the principle of "Always Be Coding." The more we code, the better we become. Currently, I'm focusing on strengthening my theoretical foundation to prepare for leadership positions within the IT industry.

And that's a wrap for today's episode of Continuous Improvement. Thank you for joining me on this journey as we explore the world of web development and share our experiences. If you have any questions, suggestions, or topics you'd like us to cover in future episodes, feel free to reach out to me on social media. You can find me on Twitter and LinkedIn. Stay tuned for more episodes focused on continuous improvement in the world of web development. Until next time, keep coding and keep improving!