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

CMS của NodeJS

---

mình đang tìm hiểu Keystone. cấu trúc có vẻ khá hay. thằng này dựa trên Express và MongoDB. Mới tìm hiểu nên cũng ko có nhiều để chia sẻ

[Help] Phần mềm tìm địa điểm món ăn gần vị trí mình nhất ( Frontend: Android, Backend: Nodejs, MongoDB )

---

@vunhattruong Bạn nhận đề tài như thế nào thì tìm hiểu về các vấn đề đó thôi. Android - Nodejs và MongoDB. Còn chi tiết cụ thể thì bạn phải làm nó, thực hiện nó, mắc ở đâu mọi người sẽ cùng giúp đỡ.

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

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

Hỏi cách xóa footer được sinh ra khi build hybrid từ Phonegap Build

---

@Trần-Tuấn-Kiệt
Hi,
Code mình để trên github bạn nhé: https://github.com/luanvuvt/envato-market
Trong app thì mình không đặt footer đó :)

Hỏi cách xóa footer được sinh ra khi build hybrid từ Phonegap Build

---

@luanvuvt Bạn đưa đoạn Html lên mình xem được không?

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

---

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 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:

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.

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:

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

[Ho Chi Minh] Senior full-stack Web Engineer / Technical Lead

---

Job Description
Boomerang (http://boomerang-vn.com/) is the leading Social Monitoring platform in Vietnam.
We serve major brands including P&G, Unilever, Uber, Samsung..
Our platform processes millions or data records everyday, and big-data is in our heart.

We’re looking for a Senior full-stack Web Engineer and/or Technical Lead to help us innovate our system and expand to the Regional market, as well as building next-generation Social data based products.
You will be the core engineer of the new system and potentially become technical lead if you could demonstrate strong leadership skills.

Job Requirement
At least 2 years working with web development, both backend and frontend
Strong OOP and design patterns knowledge
Deep understanding of 3-tier web architecture
Adequate knowledge of networking (OSI, TCP/IP, HTTP, DNS, CDN, ..), OS (preferably Linux), database (preferably MongoDB and/or MySQL), distributed systems, parallel processing, web performance
Familiar with fulltext search systems, either Lucene or Solr or ElasticSearch
Understanding of different caching mechanism, from browser cache to server cache and distributed cache
Familiar with at least one frontend framework such as Backbone, Bootstrap, AngularJS, ReactJS
Ability to design web system that is robust, scalable and extendable.
Strong database design skill; knowledge of NoSQL, Big Data processing is a plus.
Preferred if having prior experience with NodeJS, Facebook API, Twitter API, Google+ API, YouTube API, Instagram API

Contact
Email: [email protected]

FPT Telecom tuyển dụng Gấp Lập trình HTML/ Lập trình ứng dụng

---

Các bạn quan tâm xem chi tiết tại link và gửi hồ sơ về sớm nhé
http://vieclam.fpt.net/viec-lam/nhan-vien-lap-trinh-web-1479.html
http://vieclam.fpt.net/viec-lam/nhan-vien-lap-trinh-ung-dung-paytv-1368.html

DiemNTN
Skype: Lena.nguyen86

HtmlJs - MVVM framework của người Việt, performance cực đỉnh, full-fledged framwork.

---

ủng hộ sản phẩm việt

'mongodb' is not recognized as an internal or external command...

---

@nganguyen oke bạn, mình xin cảm ơn ạk

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

http://it-ebooks.info/

---

Trang này đúng hay

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

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á: [email protected]