Khởi tạo dự án AngularJS với generator-boom

Khi bắt đầu một dự án AngularJS chúng ta có rất nhiều việc phải làm như tạo cấu trúc thư mục, viết code để tự động build các file js, css, chuẩn bị code để test… Dĩ nhiên ta có thể tự mình lần lượt làm các việc đó, hoặc như trước đây, tôi tạo sẵn một thư mục dự án mẫu rồi khi nào dùng sẽ copy qua dùng lại. Tuy nhiên vẫn tốt hơn nếu như có một công cụ giúp mình làm các việc kể trên, và trong bài này tôi giới thiệu đến các bạn công cụ generator-boom, một công cụ sinh code AngularJS dành cho Yeoman.

Cài đặt generator-boom

Để có thể dùng generator-boom ta cần phải cài:

  • NodeJS

  • Yeoman

    $ npm install -g yo

  • Generator-boom

    $ npm install -g generator-boom

  • Bower

    $ npm install -g bower

  • Gulp : Generator-boom sử dụng Gulp để build code nên ta cài đặt Gulp luôn

    $ npm install -g gulp

Khởi tạo dự án bằng generator-boom

Đúng như tên gọi của nó “Boom”, chỉ cần một câu lệnh và boom tất cả đã xong.

  • Di chuyển đến thư mục code của bạn

    $ cd /path/to/your/code

  • Gõ lệnh

    $ yo boom [app-name]

    app-name ở đây là tên module chính cho dự án angularjs của bạn.

Sau đó công cụ sẽ hỏi bạn một vài câu hỏi như bạn có muốn nhúng thư viện jquery vào không, muốn sử dụng những thành phần nào của angularjs… Cuối cùng, công cụ sẽ tạo thư mục code cho bạn, tự động tải các thư viện liên quan về. Xong, giờ là thời gian cho bạn viết code, chỉ mất chưa đầy 1 phút.

Generator-boom có gì?

Dưới đầy là một vài đặc điểm của generator-boom:

  • Sử dụng Gulp để build code.
  • LiveReload: khi sửa code, tự động tải lại trang web.
  • Code của Development và Production được tách riêng.
  • Sử dụng JsHint để kiểm tra JS code.
  • Có sẵn Protractor cho E2E testing.
  • Một đống các câu lệnh giúp tạo nhanh file style, controller, service …

Cấu trúc của dự án do boom tạo ra

Dự án của boom tạo ra có cấu trúc phân chia rõ ràng các thành phần:

- app/
    |- css/
        |- application.scss
        |- fonts.css
    |- fonts/
    |- img/
    |- js/
        |- controllers/
        |- directives/
        |- factories/
        |- filters/
        |- libs/
        |- providers/
        |- services/
        |- app.js
    |- templates/
    |- index.html
    |- bower.json
    |- package.json
    |- gulpfile.js

Chạy code

Để chạy dự án ta gõ lệnh:

$ gulp

Khi đó Gulp sẽ tự động tạo 1 thư mục build, đưa các files cần chạy vào đó và mở 1 tab mới trên trình duyệt vào trang chủ của dự án.

Build code cho phiên bản Production

Khi đã hoàn thành xong dự án ta muốn build một phiên bản code đã được minify, ta chạy:

$ gulp prod

Thông tin thêm

  • Style trong boom có thể dùng scss hoặc css bình thường.
  • Boom có sẵn các câu lệnh để nhanh chóng tạo file, xem phần Commands trong trang của Boom.
  • Khi đã chạy Gulp, mỗi lần bạn chỉnh sửa file trình duyệt sẽ tự động tải lại trang web cho bạn.
  • Mọi thông tin thêm về Boom có thể coi tại đây Generator-boom

Kết

Tất nhiên, công cụ sinh code ngoài generator-boom ra còn rất nhiều, các bạn có thể tự mình tìm hiểu và thử nghiệm. Dù gì đi nữa thì mục đích của các công cụ cũng giúp ta giảm thiểu thời gian tạo dự án, tự động hóa các tác vụ phải làm thường xuyên như build code, kiểm tra code…

Hy vọng các bạn sẽ thích công cụ này, hoặc nếu các bạn đang làm việc với một công cụ khác xin hãy chia sẻ với tôi và mọi người cùng biết tại đây.

  • Khởi tạo dự án AngularJS với generator-boom
  • Build your code with Gulp

    Gulp is the streaming build system. Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build.

    I didn’t use Gulp or Grunt before. Today, I hear about it and decide to use it on my project. What I write here is not a tutorial, it just what I do with Gulp.

    1. Install

    – NodeJS: To install Gulp we must have node installed. Nodejs can be installed from here http://nodejs.org/

    – Gulp: We should install gulp globally

    $ npm install -g gulp

     2. Using Gulp in project

    First, jump to your project folder.

    $ cd /path/to/your/project

    Install gulp and gulp-util in your project as devDepencies. Before it you should have package.json file in your project or init it by npm init

    $ npm install --save-dev gulp gulp-util

    –save-dev will let npm add gulp and gulp-util into devDepencies of file package.json

    Create file gulpfile.js  at your project root with bellow simple content:

    var gulp = require('gulp');
    var gutil = require('gulp-util');
    
    gulp.task('default', function(){
      // place code for your default task here
    });

    Run gulp

    $ gulp

     3. Do more with gulp

    Above is just some step to get started with gulp. You can find here  https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

    I want do more with gulp in my project, such as minify JS code, build LESS code to CSS… Let install some gulp plugins and write some simple code.

    Gulp plugins can be found here: http://gratimax.github.io/search-gulp-plugins/

    As my requirement I will install gulp-less, gulp-uglify and gulp-jshint.

    $ npm install --save-dev gulp-less gulp-uglify gulp-jshint

    Now, we create (make) some tasks for gulp by writing code.

    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var jshint = require('gulp-jshint');
    var less = require('gulp-less');
    var uglify = require('gulp-uglify');
    
    // jshint task
    gulp.task('jshint', function(){
      gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });
    
    // Minify JS code
    gulp.task('minify', function(){
      gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
    });
    
    // Convert less to css
    gulp.task('less', function(){
      gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
    });
    
    gulp.task('default', function(){
      // Run default tasks
      gulp.run('jshint', 'minify', 'less');
    
      // Watch for JS files changing
      gulp.watch('./js/*.js', function(){
        gulp.run('jshint', 'minify');
      });
    
      // Watch for Less files changing
      gulp.watch('./less/*.less', function(){
        gulp.run('less');
      });
    });

    There are 4 gulp tasks and they can be called by commands:

    $ gulp jshint
    
    $ gulp minify
    
    $ gulp less
    
    $ gulp

     Task jshint

    This task will check all JS file in folder /js and report error.

    Task minify

    This task will get all JS files in folder /js , minifies them and save to folder /dist/js

    Task less

    This task will convert all LESS files in folder /less to CSS and save to folder /dist/css

    Task default

    This task will run 3 above tasks and add watching for JS, LESS files. If JS files in folder /js change, it will run task jshint and minify. The same with LESS file in folder /less.

     Wrapping UP

    After all, we can:

    – Install NodeJS

    – Install Gulp and its plugins

    – Create Gulp tasks for our project

    This is the first time I using gulp, if you have any info or ideal about gulp feel free to comment and let me know. Very thank you for your comments.

     

  • Build your code with Gulp
  • Quản lý các gói thư viện phía client site bằng Bower

    Thời gian trước, có người nói với tôi rằng nên sử dụng Bower để cài đặt những gói thư viện js, css phía client site của một plugin tôi đang phát triển. Tôi cũng chỉ ậm ừ qua, và nghĩ rằng không cần thiết lắm bởi vì hiện tại những thư viện đó vẫn đang chạy tốt.

    Vậy tại sao hôm nay tôi lại giới thiệu về bower cho các bạn, đơn giản vì anh bạn đó của tôi đã sử dụng bower cho dự án của mình. Khi anh ta gởi source code cho tôi nó không hề có các thư viện nào như jquery, angulajs, boostrap… và anh ta bảo tôi cài vào đi.

    Lúc đó tôi mới mày mò lên các trang web để tải về các thư viện từ jquery, angularjs, boostrap …. rồi copy nó vào thư mục code.

    – Không! Không cần phải làm như vậy.

    Anh ta nói. “Chỉ cần sử dụng bower install “. Và quả nhiên, bower đã tự động cài hết các gói thư viện cho tôi. Thật tuyệt vời!

    bower-logo

     

    Continue Reading…

  • Quản lý các gói thư viện phía client site bằng Bower
  • Viết chức năng upload bằng ajax với jquery và javascript chay

    Trong bài viết này, tôi sẽ chỉ ra hai cách để tạo ajax upload. Cách thứ nhất sử dụng Jquery cùng với plugin Form Plugin của nó và cách thứ hai dành cho bạn nào muốn mày mò vọc code để tự mình viết riêng phần upload chỉ dùng javacript. Ở bài viết này, tôi sử dụng PHP để viết phần server.

    File xử lý server

    Để cho đơn giản, nhiệm vụ của file phía server ở đây chỉ bắt file được upload lên, lưu vào thư mục upload  và trả về thông tin của file. Continue Reading…

  • Viết chức năng upload bằng ajax với jquery và javascript chay
  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery

    Ngày hôm nay, trong khi đang làm, tôi bắt gặp 2 trường hợp cần giải quyết với jquery. Trường hợp thứ nhất là bắt sự kiện khi người dùng kích chuột bên ngoài một phần tử và trường hợp thứ hai là kiểm tra một phần tử có đang hiển thị hay không.

    Cách giải quyết hai trường hợp này cũng khá đơn giản, nhưng tôi nghĩ nõ cũng sẽ làm ta mất một số thời gian nếu như chưa biết. Vì vậy tôi sẽ chia sẽ hai thủ thuật này ở đây.

    Bắt sự kiện kích chuột bên ngoài một phần tử

    Giả sử tôi có một phần tử có id là click-me  và tôi cần bắt sự kiện kích chuột lên nó hoặc kích chuột bên ngoài nó để có những xử lý khác nhau. Đoạn code ngắn dưới đây sẽ giải quyết vấn đề đó: Continue Reading…

  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery
  • Kiểm tra một phần tử tồn tại bằng JQuery

    Trong khi sử dụng JQuery, có nhiều trường hợp tôi tự hỏi làm sao để kiểm tra một phần tử có tồn tại hay không. Chẳng hạn như div có id là “exist” đã có hay chưa.

    Ngay khi nảy ra câu hỏi tôi nghĩ ngay đến một cách kiểm tra đơn giản:

    if ($('#exist')) {
      console.log('exist');
    }

    Nhưng thực tế thì cách trên hoàn toàn sai bởi vì khi sử dụng $()  nó luôn trả về một đối tượng cho dù không tồn tại phần tử ta muốn xác định thì nó cũng sẽ trả về một đối tượng rỗng.  Vì vậy điều kiện trong câu lệnh if  sẽ luôn luôn đúng. Continue Reading…

  • Kiểm tra một phần tử tồn tại bằng JQuery
  • Xóa 1 phần tử trong mảng bằng Javascript

    Khi lập trình với javascript và một vài ngôn ngữ khác, có một thao tác tưởng chừng rất đơn giản nhưng lại luôn khiến tôi bối rối về cách thực hiện nó. Đó chính là Xóa một phần tử trong mảng.

    Javascript: Splice

    Trong javascript, để xóa một phần tử trong mảng ta có thể dùng hàm splice()

    var a = ['say', 'sua', 'com'];
    a.splice(0,1); // Xóa 1 phần tử tại vị trí 0
    console.log(a); // => a = ['sua', 'com']

    Chúng ta có thể kết hợp splice()  cùng với indexOf()  để xóa phần tử dựa vào giá trị của nó:

    var a = ['say', 'sua', 'com'];
    var deleteElement = 'sua';
    
    var i = a.indexOf(deleteElement);
    if (i != -1) {
        a.splice(i,1);
    }
    
    console.log(a); // => ['say', 'com']

    Nếu các bạn muốn thực hiện thêm nhiều thao tác với mảng các bạn có thể tham khảo thư viện underscore như ở bài viết Xử lý mảng với underscore

    Tóm lại: để xóa một phần tử trong mảng ta có thể dùng array.splice(vị trí cần xóa, 1)

  • Xóa 1 phần tử trong mảng bằng Javascript
  • Đổi đối tượng JQuery sang DOM

    Trong đối tượng JQuery nó đã có chứa thành phần DOM. Để lấy được thành phần DOM từ đối tượng JQuery ta có thể sử dụng phương thức get() .

    Ví dụ ta có một danh sách như sau :

    <ul>
      <li>say</li>
      <li>sua</li>
    </ul>

    Nếu như đối tượng JQuery chỉ có một thành phần DOM ta có thể dùng 2 cách lấy:

    $(‘ul’).get(0)  hoặc $(‘ul’)[0]

    Nếu đối tượng JQuery có nhiều thành phần DOM, để lấy hết tất cả ta sử dụng:

    $(‘li’).get()

    Ví dụ:

  • Đổi đối tượng JQuery sang DOM
  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe

    Đã từ lâu lắm rồi tôi hay sử dụng Google translate, và có thói quen những từ mới tôi thường hay nhấn vào nút phát âm để nghe nó đọc như thế nào. Khi nghe tôi thường hay nhấn đi nhấn lại nhiều lần để nghe cho rõ.

    Và hôm nay cũng vậy, tuy nhiên tôi chợt nghĩ làm sao để có thể nghe liên tục tiếng phát âm mà không phải nhấn liên tục nhiều lần nhỉ. Vậy là tôi quyết định viết một đoạn JS vui vui để thực hiện công việc đó và bây giờ tôi muốn chia sẻ nó cho các bạn đọc để giải trí.

    Ở đây tôi sẽ lấy từ “hello” để làm ví dụ, đoạn code chạy được trên trình duyệt Chrome.

    Việc đầu tiên, tôi cần phải biết nguồn của file âm thanh đó là gì, khi mở chương tình debug của Chrome lên tôi bắt được đoạn link như sau.

    http://translate.google.com/translate_tts?ie=UTF-8&q=hello&tl=en&total=1&idx=0&textlen=5&prev=input

    Ở đoạn link trên có 2 tham số quan trọng:

    • q=hello : Ta sẽ thay chữ hello này bằng những chữ khác ta muốn nghe phát âm
    • textlen=5: Tham số này là độ dài của chữ ta muốn nghe (độ dài của hello = 5)

    Như vậy tôi đã có được đường dẫn của file âm thanh, tiếp theo tôi sẽ dùng JS để tạo ra một đối tượng Audio và yêu cầu nó phát âm thanh từ đoạn link trên. Continue Reading…

  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe
  • Trích xuất dữ liệu web bằng PHP với PQLite

    Đã bao giờ bạn muốn trích xuất thông tin từ một trang web bằng PHP, chẳng hạn như giá cổ phiếu, giá vàng, nội dung bài báo… công việc đầu tiên là bạn sẽ đọc nội dung của trang web đó rồi tìm đến phần tử chứa nội dung cần lấy. Hẳn các bạn đã từng thử nhiều cách bằng hàm tìm chuỗi hoặc dùng biểu thức chính quy và bạn thấy nó thật phức tạp, hoặc nếu trên trang web đó có thay đổi lại cấu trúc thì chúng ta cũng phải rất vất vã để sửa lại hàm lấy thông tin của mình.

    Và rồi bạn tự hỏi rằng, ước gì mình có thể thao tác với nội dung trang web đó đơn giản như bạn đã làm với JQuery, bạn có thể lấy các thẻ bằng ID hoặc là class của nó.

    Và đây, tôi xin giới thiệu đến cho các bạn một thư viện PHP có thể giúp bạn làm việc với các phần tử HTML đơn giản như các bạn đang làm với Jquery. Các bạn có thể đi qua từng phần tử, lấy nội dung của nó, thậm chí có thể thay đổi nội dung bên trong của 1 phần tử, thay đổi class,…

    PQlite sẽ giúp chúng ta làm phần khó.

    Thay vì trình bày chi tiết về nó, tôi sẽ cùng với các bạn làm một chức năng nho nhỏ như sau:

    Đây là trang web chúng ta sẽ cùng nhau lấy dữ liệu:

    http://hcm.24h.com.vn/ttcb/giavang/giavang.php

    Nội dung tôi muốn lấy ở đây là bảng giá vàng. Các bạn dùng Chrome mở trang web lên, rồi kích chuột phải vào bảng giá vàng, chọn “Inspect Element” để coi nội dung.

    Ta có thể thấy bảng giá vàng ở đây là một table  với class là tb-giaVang . Thường thì để lấy chính xác nội dung của một phần tử ta nên dựa vào ID của nó bởi vì ID được đặt là định danh duy nhất, nhưng ở đây bảng giá vàng lại không có ID, tuy nhiên khi kiểm tra class tb-giaVang  cũng là duy nhất nên chúng ta có thể dựa vào nó để lấy giá trị của bảng giá vàng được. Continue Reading…

  • Trích xuất dữ liệu web bằng PHP với PQLite