Genymotion Android Emulator: bạn sẽ kinh ngạc trước khả năng test website trên các thiết bị Android

Giới thiệu

Khi làm Frontend, trước đây tôi hay dùng Simulator của Chrome Developer Tool để test thử, tuy nhiên khi chạy trên các thiết bị thực thì nó vẫn có sai khác. Và số lượng các thiết bị Android thì lại rất nhiều, cho nên nếu bạn chưa thể trang bị hết các thiết bị đó thì bạn có thể sử dụng Genymotion như là một giải pháp thay thế.
Genymotion là một Android Emulator có performance rất tốt hoạt động được trên các hệ điều hành như Windows, Mac, Linux.
Các điểm đặc trưng của Genymotion:
  1. Nhanh
  2. Đơn giản
  3. Mạnh
Với gói cá nhân thì nó miễn phí, cho nên bạn có thể install và thử ngay.

Install

Đăng ký tài khoản

Để download Genymotion, trước hết cần phải đăng ký tài khoản.
  1. Vào trang https://www.genymotion.com/, click vào nút Sign in ở góc trên bên phải màn hình.
  2. Ở trang Sign in, click button Create an account
  3. Ở trang Sign up, hãy điền các thông tin cần thiết.
  4. Sau khi điền xong, click vào button Create an account. Genymotion sẽ gửi email để active account. Hãy click vào link active này để Genymotion active tài khoản của bạn.

Download:

  1. Vào link https://www.genymotion.com/pricing-and-licensing/ , chọn Individual gói BASIC.
  2. Tiếp tục, nếu bạn chưa sign in thì bạn cần sign in để download.

Install

  1. Sau khi download về thì bạn có thể double-click để install theo trình tự install quen thuộc.

Sử dụng:

  1. Open Genymotion
  2. Ban đầu, vì chưa có bất kỳ thiết bị nào được tải về hết, cho nên khi bạn mở Genymotion lên, bạn cần add một thiết bị Android vào. Việc này cũng cần bạn sign in.
  3. Trong danh sách các thiết bị hiện ra, bạn có thể chọn bất kỳ 1 thiết bị nào đó để add vào. Sau đó bạn phải chờ chừng vài phút để nó add thiết bị cần cài vào.
  4. Sau khi add xong thì bạn đã có thể chọn thiết bị và click button Start từ màn hình chính để bắt đầu test.

CSS Horizontal and Vertical align center trick

Horizontal center align

<div class="row box-wrapper row-center" />
 <div class="col-lg-3 col-md-3 box-item one col-center"></div>
 <div class="col-lg-3 col-md-3 box-item two col-center"></div>
 <div class="col-lg-3 col-md-3 box-item three col-center"></div>
</div>
.box-wrapper {
  border: 1px solid black;
  padding :20px; 
  margin-top: 100px
}
.box-item {
  height: 100px;
}
.one {
    border: 1px solid red;
}
.two {
    border: 1px solid blue;
}
.three {
    border: 1px solid brown;
}
.row-center {
  text-align: center;
}
.col-center {
  float: none;
  display: inline-block;
}

Vertical align middle

<div class="row box-wrapper row-middle" />
 <div class="col-lg-3 col-md-3 box-item one"></div>
 <div class="col-lg-3 col-md-3 box-item two"></div>
 <div class="col-lg-3 col-md-3 box-item three"></div>
</div>
.box-wrapper {
  border: 1px solid black;
  padding :20px; 
  margin-top: 100px;
  height: 500px;
}
.box-item {
  height: 100px;
}
.one {
    border: 1px solid red;
}
.two {
    border: 1px solid blue;
}
.three {
    border: 1px solid brown;
}
.row-middle {
  vertical-align: middle;
  display: table-cell;
}

Reactjs - Dùng React-Router và Material UI để tạo Web App có nhiều page

Giới thiệu

Trong bài viết trước về react-router, tôi có giới thiệu sơ qua về react-router, tuy nhiên nội đó đã khá cũ, và react-router cũng đã có nhiều thay đổi. Sau bài viết giới thiệu việc dùng Material UI Component để tạo Web App, tôi muốn thêm phần routing vào Web App đó để nó được hoàn chỉnh hơn và nhân đó tôi muốn thêm về react-router mới và kết hợp nó với MUI để tạo một Web App.

Server side and Client side Routing

Trước khi đi vào vấn đề chính tôi cũng muốn giới thiệu sơ qua về cách routing giữa server side và client side.

Server Side Routting

Mô hình server side routing: khi có request từ Client thì phía server sẽ có bộ Router để nhận request đó, và tương ứng với route hay path từ client mà Server sẽ render nội dung Page tương ứng.
rr.serverSideRender

Client Side Routting

Mô hình client side routing: bộ Router và Render sẽ không nằm ở phía server mà sẽ do phía Client đảm nhận. Trong URL chuyển trang, sẽ có ký hiệu hashtag # để browser không chuyển request này xuống server mà chỉ xử lý ở phía Client thôi.
rr.clientSideRender

React-router

React-Router là một thư việc của React, giúp các React App có thể routing ở phía client.
Bên dưới là lời giới thiệu từ HP của react-router:
“React Router is a complete routing library for React.
React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”
Trong phạm vi bài viết này tôi chỉ giới thiệu cách dùng cơ bản nhất của react-router như render 1 route, nest các route mà không giới thiệu các nội dung khác. Các nội dung khác của react-router, bạn có thể tham khảo thêm tại:
https://github.com/reactjs/react-router-tutorial/tree/master/lessons

3 Components chính của React Router:

  1. Router
  2. Route
  3. Link
rr.overview
Cơ bản, component Link dùng để dẫn hướng trang (component) cần trỏ đến, Route là component kết nối giữa path và component tương ứng với path đó, còn Router thì wrap tất cả các Route con.

Sample

Chúng ta thử tạo 2 sample, một là chỉ đơn thuần là render 1 route tương ứng với 1 URL, hai là lồng các route con trong 1 route cha (nested route)

Simple Route

Ở sample này ta chỉ quan tâm đến vấn đề React App sẽ render Route Component tương ứng với URL (path) nó Route đó đã config.
Cụ thể
  • khi URL là #/page-1 thì nó render component Page1
  • khi URL là #/page-2 thì nó render component Page2
  • khi URL là #/page-3 thì nó render component Page3
rr.sample.simple

Nested Route

Ở sample này, chúng ta sẽ đi sâu hơn 1 chút. Cụ thể sẽ lồng các route con là #/page-1, #/page-2, #/page-3 vào trong route cha là “/”.
Có các vấn đề về nested route như sau:
  1. React App được xây dựng từ việc lồng các Component con trong các Component cha.
  2. Khi chuyển trang thì có những component như Header, Navigation sẽ không thay đổi. Nên thực ra mình chỉ render lại Component Node nào cần thay đổi thôi.
  3. Khi nest các Route thì nó cũng sẽ tự động nest các Component tương ứng.
  4. Trình tự tạo React App sẽ là xác định route cha (App Route), sau đó đặt các Route con (Page Route) bên trong nó. Sau đó, render các Component con (Page) tương ứng bên trong Component cha (App).
rr.sample.nest

Coding

Init Project

Tham khảo Bài viết về reactjs và material-ui

Cấu trúc Project

.
|-- dist                           // build 
|-- node_modules                   // node_modules folder
|-- package.json                   // project packages
|-- readme.md                      // readme
|-- simple.html                    // HTML for simple route
|-- simpleRouteApp.js              // simple route js 
|-- nested.html                    // HTML for nested route
|-- nestedRouteApp.js              // nested route js
|-- webpack-nested-route.config.js // webpack config for nested route
`-- webpack-simple-route.config.js // webpack config for simple route 

Giải thích nội dung config file

Package.json


{
  "name": "react-mui-router-sample",
  "version": "1.0.0",
  "description": "reactjs-mui-router-sample",
  "main": "app.js",
  "scripts": {
    "test": "test",
    "build-simple": "webpack --config webpack-simple-route.config.js --progress --colors",
    "build-nest": "webpack --config webpack-nested-route.config.js --progress --colors"
  },
  "repository": {
    "type": "git"
  },
  "keywords": [
    "reactjs",
    "material-ui",
    "react-router"
  ],
  "author": "phungnc",
  "license": "ISC",
  "homepage": "/reactjs-mui-router-sample#readme",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "material-ui": "^0.15.1",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-router": "^2.4.1",
    "react-tap-event-plugin": "^1.0.0",
    "webpack": "^1.13.1"
  }
}
Có 2 dòng scripts khác với lúc trước đó là
    "build-simple": "webpack --config webpack-simple-route.config.js --progress --colors",
    "build-nest": "webpack --config webpack-nested-route.config.js --progress --colors"
build-simple có nghĩa là sẽ call file webpack-simple-route.config.js và build-nest sẽ call file webpack-nested-route.config.js.
Lệnh call tương ứng sẽ là:
npm run build-simple
npm run build-nest

webpack config

module.exports = {
  entry: './nestedRouteApp.js',
  output: {
    path: __dirname + '/dist',
    filename: 'nestedRouteApp-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude:  /(node_modules)/
      }
    ]
  }
}
module.exports = {
  entry: './nestedRouteApp.js',
  output: {
    path: __dirname + '/dist',
    filename: 'nestedRouteApp-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude:  /(node_modules)/
      }
    ]
  }
}
Source code mẫu cho 2 sample này, tôi có để trên Github:
https://github.com/phungnc/reactjs-mui-router-sample.git
Sau khi fork về, bạn hãy mở các file js tương ứng và tham khảo thêm hình giải thích bên dưới:

Simple Route Sample

rr.coding.simple

Nested Route Sample

rr.coding.nest

Run:

Install node modules:

npm install

Build

// build simple sample
npm run build-simple

// build nested route sample
npm run build-nest

Run

open simple sample
open simple.html
Thử vào các link
../simple.html#/page-1
../simple.html#/page-2
../simple.html#/page-3
open nested route sample
open nested.html
Thử click vào các link của Left Nav

Tham khảo

  1. Bài viết về webpack
  2. Bài viết cơ bản về Reactjs và Material-UI
  3. Loạt bài viết về chủ để Reactjs

Reactjs - Dùng Material UI Component thử tạo một trang web vô cùng đơn giản

Giới thiệu

Material UI Component được tạo ra dựa trên sự kết hợp giữa lý thuyết design của Google và thư viện tạo UI Reactjs của Facebook.
material-ui-component
Xin mời bạn vào trang: http://www.material-ui.com, vào mục components để xem tất cả các MUI Components mà nó đang cung cấp.

Sample

Bây giờ chúng ta thử build 1 layout như sau.
material-ui-component
Phần bên ngoài bọc tất cả, chúng ta gọi là App, trong App có phần header, bên dưới header là container bọc lấy các block.
Bây giờ ta tìm trong MUI Component, thì chúng ta có thể hình dung các MUI Component tương ứng sẽ như sau:
material-ui-component

Howto

Technology

Để thực hiện sample trên, chúng ta sử dụng các tool như là babel, để compile es2015webpack để load các modules, component cần thiết.
material-ui-component

Chuẩn bị

  1. Tạo thư mục: mkdir react-mui-sample
  2. Init project: npm init, khi chạy lệnh này trên màn hình terminal sẽ yêu cầu bạn nhập các thông tin cần thiết.
  3. Install React, ReactDOM, MaterialUI và plugin, tool
npm install react react-dom react-tap-event-plugin material-ui --save-dev
npm install webpack babel-cli babel-preset-es2015 babel-preset-react babel-loader --save-dev
Sau đó, vào thư mục project react-mui-sample, tạo file config cho babel .babelrc, nhập nội dung bên dưới vào file đó để setting preset.
{
  "presets": ["es2015", "react"]
}
Tiếp theo là thêm dòng "build": "webpack --config webpack.config.js --progress --colors" vào file package.json mà bạn đã init ở trên:
{
  "name": "react-mui-sample",
  "version": "1.0.0",
  "description": "this is sample that use material ui component for demo",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "build": "webpack --config webpack.config.js --progress --colors"
  },
  "keywords": [
    "reactjs",
    "material-ui"
  ],
  "author": "phungnc",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-tap-event-plugin": "^1.0.0",
    "webpack": "^1.13.1"
  }
}
Cuối cùng thì config cho webpack:
module.exports = {
  entry: {
    app: './app.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude:  /(node_modules)/
      }
    ]
  }
}
Rồi. Bây giờ hãy ngó chút xíu qua phần usage của Material UI, trước khi chúng ta bước vào phần coding thực sự.
http://www.material-ui.com/#/get-started/usage

Coding, cấu trúc app:

Trước khi bắt đầu coding thì chúng ta hãy hình dung sơ qua về cấu trúc cũng như luồng build của nó như thế nào:
material-ui-component
Cấu trúc source code của project sẽ như sau:
react-mui-sample
 |_ .babelrc             // file config của babel
 |_ webpack.config.json  // file config của webpack
 |_ package.json         // file package của project
 |_ node_module
 |_ app.js               // file chính của App
 |_ index.html           // file giao diện chính của App
 |_ dist                 // thư mục chứa file build 
    |_ bundle.js         // file build 
Source code project:
https://github.com/phungnc/reactjs-mui-simple-sample.git
Sau khi lấy về, hãy mở file app.js, và tham khảo hình tôi giải thích như bên dưới:
material-ui-component

Build and Run

Hãy trỏ đến thư mục react-mui-sample, thực hiện lệnh build:
npm run build
Lệnh này thực ra sẽ gọi script webpack --config webpack.config.js --progress --colors trong file package.json.
Và bây giờ bạn có thể mở file index.html lên và xem thành quả. Bạn có thể edit lại nội dung theo ý mình bằng cách thay đổi file app.js
Hy vọng bài viết này có thể giúp bạn bắt tay vào việc thử xây dựng cho riêng mình 1 giao diện web app bằng Material UI Component. Trong bài viết sau, tôi sẽ đưa ra 1 sample và hướng dẫn cách tạo 1 App phức tạp hơn.

Javascript.Basic - Bài 4 - tạo đối tượng có và không có prototype.

Giới thiệu

Đối tượng có và không có prototype là vấn đề rất thú vị và thực tế, bởi vì giống như trong bài trước, khi giới thiệu về nước lèo và tô phở, tôi có nói rằng tô phở là một object cuối cùng, người dùng chỉ việc thêm gia vị cho phù hợp rồi dùng nó chứ không có ý nghĩa dùng để tạo ra nhiều tô phở khác. Nên bản thân nó không cần chứa prototype. Nó khác với ý nghĩa nước lèo. Từ nước lèo ta có thể tạo ra nhiều tô phở khác nhau, nên nước lèo có ý nghĩa như một prototype. Dưới đây, tôi muốn giới thiệu về việc làm thế nào để tạo object dạng tô phở và object dạng nước lèo.

Tạo object dạng tô phở

Dưới đây là một số ví dụ về cách thức tạo object dạng tô phở:
var obj = new Object();
var date = new Date();
var str = new String();
Các object trên sẽ không có prototype.
obj.prototype
undefined

date.prototype
undefined

str.prototype
undefined
Xem lại hình minh họa mối quan hệ giữa các built-in object trong bài trước, ta để ý một object được tách ra làm 2 gồm có function object và prototype của object. Ví dụ Date thì bao gồm Date() và Date.prototype. Date() được gọi là một function object.
Một object dạng tô phở thì được tạo ra từ một function object thông qua từ khóa new.
Các object dạng này khi sinh ra chỉ chứa một thuộc tính __proto__, link đến prototype của Object mà nó được new ra.
Object dạng tô phở
Bên dưới sẽ giới thiệu việc tạo object dạng nước lèo cũng là function object

Tạo object dạng nước lèo, hay tạo một function object.

var Person = new Function();
// Person có object prototype
Person.prototype 
> Object {}
// Person sẽ có __proto__ trỏ đến prototype của đối tượng mà nó được "sinh ra"
Person.__proto__ === Function.prototype
>true
// __proto__ của bất kỳ prototype nào cũng mặc định trỏ về prototype của Object.
Person.prototype.__proto__ === Object.prototype
>true
// prototypemột object cụ thể nên các prototype của các object khác nhau sẽ là khác nhau. 
Person.prototype === Object.prototype
>false
Nhắc lại: __proto__ mặc định trỏ đến prototype mà từ đó nó sinh ra. Nói cách khác __proto__ trỏ đến prototype của object mà nó muốn kế thừa.
Hình mình họa:
Object dạng nước lèo

Tổng kết:

Dưới đây là hình tổng kết của bài này.
Create an object in JS