Góp ý phát triển Forum

Plugin upload hình của forum nodejs.vn là gi vậy mọi người ơi

read more
Hỏi về cách rewrite url trong node.js

@NgaNguyenDuy à có đó bạn. :D
Nhân tiện, còn về việc rewrite url như diễn đàn của mình thì sao hả bạn? (trên thanh address, tiếng Việt có dấu luôn ấy)

read more
Cần giúp đở về sorket io socket.emit gửi đến một client

@trongbui Hi bạn, mình đã chỉnh sửa giúp bạn đoạn trả lời trên. Để chèn code bạn sử dụng cú pháp của markdown với từng ngôn ngữ xác định nhé.

read more
Error MSB3428 - Lỗi khi cài đặt npm install socket.io trên Win7

MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe".
To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visua
l Studio 2005 or 3) add the location of the component to the system path if it
is installed elsewhere. [C:\Users\vietnv\node_modules\socket.io\node_modules\e
ngine.io\node_modules\ws\build\binding.sln]
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe".
To fix this, 1) install the .NET Framework 2.0 SDK, 2) install Microsoft Visua
l Studio 2005 or 3) add the location of the component to the system path if it
is installed elsewhere. [C:\Users\vietnv\node_modules\socket.io\node_modules\e
ngine.io\node_modules\ws\build\binding.sln]

Nhờ chỉ giúp - cảm ơn

read more
Làm sao có thể socket.emit array

vấn đề này đã đc giải quyết :),
cũng cứ send array như bình thường là đc thôi

read more
Xây dựng một ứng dụng RealTime sử dụng Angularjs và Firebase

angular-firebase-real-time-scheduling.png

Xây dựng một ứng dụng RealTime sử dụng Angularjs và Firebase

Các ứng dụng thời gian thực cung cấp rất nhiều chức năng trên các ứng dụng khác nhau. Chúng ta có Google Drive có thể chỉnh sửa thời gian thực (real-time), twitter hiển thị các twetts mới, bất kì hệ thống chat nào được xây dựng gần đây và nhiều hơn thế nữa.

Một thay thế cho việc xây dựng toàn bộ backend của chúng ta là sử dụng một dịch vụ có tên là Firebase.

Vậy Firebase là gì?

Firebase là một dịch vụ API để lưu trữ và đồng bộ dữ liệu real-time (thời gian thực). Điều này có nghĩa là bạn không cần phải lo lắng về backend server, cơ sở dữ liệu, hay các thành phần real-time (socket.io). Tất cả đều được Firebase xử lý cho bạn.

Chỉ cần lấy dữ liệu từ Firebase, lưu trữ dữ liệu vào Firebase, và Firebase sẽ lo công việc làm thế nào để lưu trữ, và cũng đồng bộ trên tất cả các thiết bị đã được kết nối.

Bạn chỉ cần lo về phần front-end trong ứng dụng của bạn.

firebase.jpg

Firebase mới gia nhập Google, vì vậy nền tảng này có một sự hỗ trợ tuyệt vời và đang có kế hoạch cho việc tiếp tục phát triển.

Đây là một demo nho nhỏ. Bạn có thể nhấn nút Play để một ứng dụng chát thời gian thực. Bạn cũng có thể click vào link đã được cung cấp: https://xxxxxxx.firebaseio-demo.com để xem những cập nhật trong cơ sở dữ liệu trên Firebase dashboard. Dashboard (bảng điều khiển) cho phép chúng ta xem dữ liệu cũng như sự thay đổi của dữ liệu.

Chúng ta hãy cùng xây dựng một ứng dụng đơn giản với Firebase để chúng ta có thêm sự hiểu biết sâu hơn về những gì mà nó làm.

Our Sample Application

Chúng ta sẽ xây dựng một ứng dụng lập lịch nơi mà mọi người có thể đặt thời gian cho mình. Đây là một khái niệm đơn giản tương tự như một cái gì đó giống như youcanbook.me. Chúng ta cũng muốn ứng dụng của chúng ta là real-time (thời gian thực).

Những yêu cầu:

Hiển thị toàn bộ ngày và những ngày còn trống Nếu ai đó đánh dấu một vùng nào đó, thì nó sẽ không có sẵn cho tất cả mọi người. Sử dụng AngularJs/HTML/CSS ở phía front-end. Sử dụng Firebase ở backend.

Đây là một demo đơn giản:

Setting Up

Những tập tin dưới đây là cần thiết cho demo này:

index.html style.css app.js

Giải thích một chút:

index.html Sẽ giữ tất cả mã HTML của chúng ta style.css lưu trữ những style cơ bản. Chúng ta sẽ sử dụng bootstrap cho việc style này. app.js Sẽ tổ chức những module angular của chúng ta. Đây là nơi mà chúng ta sẽ kết nối với Firebase và đồng bộ dữ liệu của chúng ta với dịch vụ của Firebase.

Hãy cùng thiết lập các cơ sở cần thiết cho các tệp tin của chúng ta.

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angular Scheduling</title> <!-- CSS --> <!-- load Bootstrap and custom style.css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- JS --> <!-- load Angular, Firebase, Firebase Angular Library, and custom app.js --> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script> <script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script> <script src="app.js"></script> </head> <body> <div class="container"> <div class="page-header text-center"> <h1>Schedule City</h1> </div> <!-- were doing one day with 1 time slot for simplicity --> <!-- we'll use angular's ng-repeat in a bit to get the other days and times --> <div class="row times"> <div class="col-xs-4 text-center"> <h2>Monday</h2> <div class="time-slot"> <input type="checkbox" id="monday-time"> <label for="monday-time">9:00am</label> </div> </div> </div> <p class="text-center"> <a href="#" class="btn btn-primary">Reset</a> </p> </div> </body> </html>

Chúng ta đang ẩn các input box và sử dụng các lable như các item có thể click (tương tự như việc upload ảnh). Để tiện cho làm việc này, chúng ta cần chắc chắn rằng label có một thuộc tính for mà trỏ đến id của input.

style.css

/* checkbox - each time slot */ .time-slot { } /* hide the checkbox itself - the label will be styled */ .time-slot input { display:none; } /* default styling for our labels */ .time-slot label { padding:10px 20px; color:#FFF; cursor:pointer; background:#EEE; border-radius:5px; transition:0.3s ease all; } /* if the label is checked */ .time-slot input:checked ~ label { background:#f2dede; cursor:not-allowed; animation:flashBooked 0.5s ease; } /* if the label is not checked */ .time-slot input:not(:checked) ~ label { background:#6AB074; animation:flashAvailable 0.5s ease; } /* animation for the time slot to flash red */ @keyframes flashBooked { 0%, 100% { background:#f2dede; transform:scale(1); } 50% { background:#F99090; transform:scale(1.5); } } /* animation for the time slot to flash green */ @keyframes flashAvailable { 0%, 100% { background:#6AB074; transform:scale(1); } 50% { background:rgb(119, 218, 78); transform:scale(1.5); } }

Vendor Prefixes: Để đơn giản thì chúng ta sẽ bỏ qua các tiền tố (prefixes) như -moz- hay -webkit-, vậy chắc chắn bạn sẽ phải thêm vào dự án cuối cùng của mình

Sau khi thiết lập những tập tin cơ bản, chúng ta sẽ được nhu sau:

firebase-first-css.jpg

Bây giờ chúng ta đã cơ sở cho ứng dụng của mình. Cho đến bây giờ, nó hoàn toàn là tĩnh. Hãy sử dụng Angular và Firebase để chúng ta lấy dữ liệu thực tế ngay bây giờ.

JS (AngularJS)

Chúng ta sẽ thiết kế cơ sở cho ứng dụng Angular của chúng ta ngay bây giờ. Chúng ta sẽ đi từng bước một để tương tác với Firebase.
app.js

// create our angular module and inject firebase angular.module('scheduleApp', ['firebase']) // create our main controller and get access to firebase .controller('mainController', function($scope, $firebase) { // our application code will go here });

Với các cơ sở đã có, chúng ta hãy bắt đầu làm việc với Firebase.

Connecting to and Using Firebase

Đầu tiên chúng ta phải tạo một tài khoản ở Firebase. Sau khi tạo một tài khoản thành công, Firebase sẽ đưa chúng ta đến một ứng dụng mẫu của họ có tên là hacker-plan.

f.png

URL ở đây (https://chris1.firebaseIO.com) sẽ là địa chỉ ứng dụng của cá nhận bạn. Bạn có thể click vào URL đó để vào backend dashboard ứng dụng của bạn.
Bây giờ chúng ta đã có đường dẫn của ứng dụng, chúng ta có thể kết nối đến ứng dụng của chúng ta bên trong các đoạn mã Angular.

Creating the Connection

Để tạo một kết nối từ Firebase đến Angular là vô cùng đơn giản. Firebase cung cấp một thư viện cụ thể cho Anguler được gọi là AngularFire. Chúng ta thực sự đã add nó vào project của mình bằng việc link đến script bên trong đoạn mã HTML ở trên và nhúng firebase vào ứng dụng của chúng ta.

// create our angular module and inject firebase angular.module('scheduleApp', ['firebase']) // create our main controller and get access to firebase .controller('mainController', function($scope, $firebase) { // connect to firebase var ref = new Firebase("https://chris1.firebaseio.com/days"); var fb = $firebase(ref); });

Đây là tất cả những gì mà chúng ta cần để kết nối. Thật thú vị là chúng ta đã thêm days vào cuối đường dẫn URL. Bạn có thể sử dụng URL như là một cách để ánh xạ dữ liệu của mình. Tất cả mọi thứ mà chúng ta làm bây giờ sẽ được lưu trữ trong cơ sở dữ liệu của chúng ta – trong đối tượng days.

Setting Data

Đối tượng fb được chúng ta tạo ra cho việc có một số chức năng và thiết lập. Firebase guilde (https://www.firebase.com/docs/web/guide/) là một hướng dẫn tuyệt vời sẽ giúp bạn làm thế nào để thiết lập và lấy dữ liệu. Hãy cùng tạo dữ liệu cho 2 ngày( thứ 2 và thứ 3) và mỗi ngày 2 mốc thời gian.

Chúng ta sẽ tạo một function Angular để tạo dữ liệu rồi sau đó có một button Reset để reset toàn bộ dữ liệu.

/ create our angular module and inject firebase angular.module('scheduleApp', ['firebase']) // create our main controller and get access to firebase .controller('mainController', function($scope, $firebase) { // connect to firebase var ref = new Firebase("https://chris1.firebaseio.com/days"); var fb = $firebase(ref); // function to set the default data $scope.reset = function() { fb.$set({ monday: { name: 'Monday', slots: { 0900: { time: '9:00am', booked: false }, 0110: { time: '11:00am', booked: false } } }, tuesday: { name: 'Tuesday', slots: { 0900: { time: '9:00am', booked: false }, 0110: { time: '11:00am', booked: false } } } }); };

Chúng ta sẽ thiết lập đối tượng này của thứ 2 và thứ 3 đến DB days trong csdl của chúng ta.
Bây giờ, chúng ta chỉ cần có một nút để reset dữ liệu.

<p class="text-center"> <a href="#" class="btn btn-primary" ng-click="reset()">Reset</a> </p>

Chỉ cần như vậy, chúng ta đã có một button để reset data. Hãy click vào nó rồi truy cập vào firebase dashboard của bạn:

fsetup.png

Bây giờ chúng ta đã có thông tin trong cơ sở dữ liệu, chúng ta cần hiển thị nó ra ứng dụng của mình. Đầu tiên, chúng ta cần bind (liên kết) dữ liệu mà chúng ta lấy được từ Firebase đến Angular. Có 2 cách chính để chúng ta có thể đồng bộ dữ liệu: Three-way data binding và array pushing.

Trong demo này, chúng ta muốn các đối tượng được đồng bộ ngay lập tức, vậy chúng ta sẽ sử dụng three-way data-binding. Array pushing được sử dụng nhiều hơn, nhưng thường dùng cho những ứng dụng không cần đồng bộ ngay lập tức như real-time chat. Những items (tin nhắn) là chỉ được đồng bộ khi người dùng click “Send”.

Chúng ta sẽ xử dụng phương thức three-way data-binding cho ứng dụng này. Đầu tiên, chúng ta cần đồng bộ thông tin từ database của chúng ta đến các biến trong Angular.

Đồng bộ đối tượng

Để các đối tượng đồng bộ hóa như một đối tượng trong Angular, chúng ta có thể làm như sau:

// create our angular module and inject firebase angular.module('scheduleApp', ['firebase']) // create our main controller and get access to firebase .controller('mainController', function($scope, $firebase) { // connect to firebase var ref = new Firebase("https://chris1.firebaseio.com/days"); var fb = $firebase(ref); // sync as object var syncObject = fb.$asObject(); });

Bây giờ, chúng ta đã có tất cả dữ liệu dưới dạng JSON được lưu vào biến syncObject. Phần cuối cùng để nhận được three-way data-binding( giữa Angular, front-end view và Firebase) là chúng ta sử dụng $bindTo function đến đối tượng syncObject của chúng ta.

Three Way Data Binding

Đoạn mã sau đây dùng để lấy thông tin từ database của chúng ta vào một biến $scope.

// create our angular module and inject firebase angular.module('scheduleApp', ['firebase']) // create our main controller and get access to firebase .controller('mainController', function($scope, $firebase) { // connect to firebase var ref = new Firebase("https://chris1.firebaseio.com/days"); var fb = $firebase(ref); // sync as object var syncObject = fb.$asObject(); // three way data binding syncObject.$bindTo($scope, 'days'); });

Điều tuyệt vời ở đây là chúng ta chỉ cần những đoạn mã đơn giản để lấy thông tin từ Firebase và không chỉ đồng bộ trên máy tính của chúng ta, mà còn đồng bộ với mọi người mà đã kết nối vào.

Chúng ta có thể đi vào tệp tin HTML và type {{days}} và bạn sẽ thấy những thông tin mà chúng ta đã tạo trước đó bên trong function reset() để lấy dữ liệu từ Firebase và hiển thị trong view của chúng ta.

Hãy cùng sử dụng ng-repeat của Angular để lặp qua các object này và hiển thị nó trên view của chúng ta.

Displaying Dynamic Days and Time Slots

Trong tệp tin index.html của chúng ta, nơi mà chúng ta đặt dữ liệu của mình, chúng ta sẽ cập nhật nó với dữ liệu từ Angular thông qua biến $scope.

Đây là nội dụng HTML đã được cập nhật:

<div class="row times"> <div class="col-xs-4 text-center" ng-repeat="day in days"> <h2>{{ day.name }}</h2> <div class="time-slot" ng-repeat="slot in day.slots"> <input type="checkbox" id="{{ day.name }}-{{ $index }}" ng-model="slot.booked" ng-disabled="slot.booked"> <label for="{{ day.name }}-{{ $index }}">{{ slot.time }}<br> <span ng-if="slot.booked">Booked</span> <span ng-if="!slot.booked">Available</span> </label> </div> </div> </div>

Chúng ta sẽ lặp qua đối tượng mà chúng ta đã liên kết trước đó đến $scope.days. Bằng việc sử dụng ng-repeat 2 lần, chúng ta sẽ lặp thông qua ngày và các thời gian trong ngày.

Chúng ta cũng sẽ sử dụng một checkbox như chúng ta đã làm trước đó để ng-model sẽ cập nhật từ false sang true khi nó được check.

Chúng ta sẽ sử dụng ng-disabled để disable checkbox sau khi nó đã được booked và cũng sử dụng ng-if để show những thời gian đã được Booked hay Available.

Dưới đây là video demo sau cùng:

Conclusion

Khi các ứng dụng Real-Time ngày càng trở nên phổ biến hơn, một dịch vụ như Firebase là tuyệt vời vì nó sử lý rất nhiều các chi tiết cho ứng dụng của bạn. Những người phát triển Front-end sẽ có không cần phải lo lắng về backend mà chỉ cần lo về việc thiết kế front-end.

Về những đoạn mã trong bài viết, các bạn có thể lên github[1] hoặc sử dụng codepen ở trên.

[1]. https://github.com/NgaNguyenDuy/FireBaseApp

Link gốc tiếng anh: http://goo.gl/lkN2be

read more
[HCM] 09 Node.JS/JavaScript Specialists - ANTS Wants You

The Job

Apply now: http://itviec.com/jobs/css-09-node-js-javascript-specialists-ants-wants-you

If you are a Node.JS Developer with strong JavaScript and back-end development experience, please read on!
Our project is an ad programmatic bidding serving more than 200 Mil ads every day to more than 5 Mil visitors. And we are seeking for a senior JavaScript developer, who will solve the big data and high scalability problems.

** Responsibilities **

Design, implement and optimize a blazing fast delivery system Design, implement and optimize internal management system Design, implement and optimize messaging solution to connect many components written in different languages. Research new technology (HTML5 latest features, go-lang, etc.) Support other members with their JS problems.

Your Skills and Experience

Deep knowledge in Node.js , JavaScript Experience architecting and developing web applications Ability to design, analyze and implement algorithms Understand how and why some popular NODE.js/JS libraries work Experienced with browsers differences in DOM, CSS Familiar with either MongoDB, Redis, MySQL is a plus Familiar with Linux and Git development is a plus

Why You'll Love Working Here

Challenging and dynamic environments with young and talented team members Better chances to employ latest technology Working with country top minds from FPT Technology Council (specialized in Machine Learning, Mathematics, Natural languages, Big Data and Recommendation system etc.) Monthly Salary: Highly competitive Annual bonuses for excellent contributions

Apply now: http://itviec.com/jobs/css-09-node-js-javascript-specialists-ants-wants-you

read more
[NodeJS] Tuyển nhân viên làm tại Hà Nội

@ Nam : bạn gửi 1 bản CV về hr@netbase.vn để hr xem xét nhé

read more
Redis Là Gì?

@Nhân-Vật-Hư-Cấu còn tùy vào cách bạn dùng 20tr record đó như nào

read more
Sử Dụng Công Cụ Chrome DevTools

Chào cả nhà, hôm nay đưa 1 bài viết hữu ích cho những bạn rất cần nó. Chắc hẳn chúng ta đều biết Extension DevTools có sẵn Google Chrome (F12).
Nhưng nhiều bạn ở đây chưa dùng hết được khả năng Tools đưa lại. Đặc biệt là trong vấn đề xử lý hiệu năng và debug javascript.

Website : http://discover-devtools.codeschool.com
Giới thiệu : Là sự kết hợp giữa Code School và sự tài trợ Google, chương trình học cách sử dụng công cụ DevTools của Chrome.

Chúng ta sẽ có 7 level như sau :

Level 1: ** Bắt đầu làm quen và cơ bản DOM và Styles **
Level 2: Nâng cao DOM và Styles
Level 3: Làm việc với Console
Level 4: Làm việc JavaScript
Level 5: Nâng cao hiệu suất Network
Level 6: Nâng cao hiệu suất Website
Level 7: Theo dõi Memory

TungNguyen

read more
Shop bán hàng full nodejs vietcoin.com

Một shop bán hàng bình thường thôi, như #1.
Thiết kế phẳng, hiện đại. Dự bán quần áo, mỹ phẩm, nước hoa. Có Coupon giảm giá, gift card, Store Credit system.
Nodejs, setup chạy trên AWS, responsive, build luôn API để sau làm mobi app
Paygate: nganluong, baokim, 123pay.vn, megabank..
Cần nhận hàng trước tháng 6/2015, các pro cho xin cái báo giá: loveparadisetalk@gmail.com

read more