Environment Setting

ENVIRONMENT SETUP GUIDE FOR DEVELOPER

VietBrain

Version: 1.1

Environment Setup Guide for Developer Version: 1.0

Table of Contents

Environment Setup Guide for Developer......................................................................................0

VietBrain..................................................................................................................................................0

Version: 1.1.............................................................................................................................................0

I. Tạo thư mục cơ bản.....................................................................................................................3

1. D:\webserver...................................................................................................................................3

2. D:\www...........................................................................................................................................3

II. Setup apache, php, phpMydmin và config Apache..............................................................................4

1. Copy webserver_apache24_php55.zip (gồm có apache, php & phpmyadmin)...............................4

2. Giải nén vào thư mục D:\webserver\..............................................................................................4

3. Edit và copy file httpd.conf..............................................................................................................5

4. Setup Microsoft Visual C++ 2012 Redistributable 32 bit (VC11-x86)...............................................6

5. Setup Apache...................................................................................................................................6

Cài service Apache2.4..........................................................................................................................6

Apache Monitor:..................................................................................................................................7

6. Run Apache......................................................................................................................................8

III. Cài mysql vào thư mục D:/webserver/mysql.......................................................................9

IV. Setup TortoiseSVN......................................................................................................................22

V. Setup Netbean [Deprecated] Nên sử dụng Sublime Text 3.........................................................24

1. Setup Netbean...............................................................................................................................24

2. Import Setting................................................................................................................................24

3. Setup các add-in............................................................................................................................26

VI. Setup Thunderbird [Deprecated] Nên sử dụng Gmail (web)......................................................30

1. Set up Thunderbird........................................................................................................................30

2. Setup new email............................................................................................................................30

VII. Setup remote debugging for Chrome on Android...........................................................33

1. Install ADB extension.....................................................................................................................33

2. Install driver for Nexus 7................................................................................................................33

3. Debug............................................................................................................................................36

©VietBrain, Apr-2023 Page 1 of 53


VIII. Set up Chrome DevTool workspace và Less preprocessors...............................................................38

1. Workspace.....................................................................................................................................38

2. Working with CSS preprocessors...................................................................................................38

Thư mục output CSS..........................................................................................................................39

Auto Compile và output Source Maps khi compile LESS....................................................................39

3. Kết hợp DevTool workspace với Less preprocessors.....................................................................41



Note:

Thư mục chứa các file cài đặt:

\\KHANHNQ\Download\

Username/password: window user

Nếu đang dùng XAMPP, XWAMPP thì phải gỡ đi.

I. Tạo thư mục cơ bảnThư mục cơ bản gồm có 2 thư mục: webserver và www

1. D:\webserver

Là thư mục chứa phần cài đặt chung của một server: apache, mysql, php. Các cài đặt này giúp cho PC của mình có thể hoạt động tương đương với một server (host) thật.

2. D:\www

Là thư mục chứa các website ở trên máy local.

Khi vào đường dẫn: http://localhost qua browser, thực chất là dẫn đến thư mục www này.


http://localhost/


II. Setup apache, php, phpMydmin và config ApacheCách cài đặt cho version Apache 2.2.22 đã cũ. Giờ phải cài đặt Apache 2.4 theo cách mới.

Từ bản 2.4, Apache ko có file .msi để cài đặt nữa nên phải copy file chạy và dùng command line để cài đặt.

\\KHANHNQ\Download\Developer tools\webserver\

1. Copy webserver_apache24_php55.zip (g m có apache, php & ồphpmyadmin)

2. Gi i nén vào th m c D:\webserver\ả ư ụ

Chú ý là giải nén trực tiếp, không phải tạo thư mục con webserver.



3. Setup Microsoft Visual C++ 2012 Redistributable 32 bit (VC11-x86)

Apache và PHP mới được compile bằng Visual Studio 2012 (VC11) nên cần phải có Microsoft Visual C++ 2012 Redistributable để chạy. Chú ý, phải là bản 32 bit vì Apache compile bằng bản 32 bit.

Kiểm tra xem máy đã cài đặt Microsoft Visual C++ 2012 Redistributable chưa



Nếu trong phần Programs and Features có dòng sau là đã cài đặt:

Microsoft Visual C++ 2012 Redistributable (x86)

Nếu chưa cài đặt thì phải cài bằng bộ cài dưới:

\\KHANHNQ\Download\Developer tools\webserver\vcredist_x86.exe

Cài đặt step by step như bình thường.

4. Setup Apache

Vì Apache ko có file .msi để cài đặt nên phải chạy bằng command như sau:

Cài service Apache2.4

Chạy lệnh sau ở màn hình cmd (với quyền Administrator)

D:\webserver\apache\bin\httpd.exe -k install



Apache Monitor:

Apache Monitor chạy bằng cách chạy file ApacheMonitor.exe trong thư mục D:\webserver\apache\bin\. Nếu muốn khởi động cùng windows thì tạo shortcut và paste vào Startup folder.

5. Run Apache

Chạy Apache bằng Apache Monitor hoặc lệnh: D:\webserver\apache\bin\httpd.exe

Nếu ko báo lỗi gì thì ok. Lỗi thường gặp là lỗi conflict với Skype:

Skype hay sử dụng port 80, conflict với Apache & MySQL. Cần phải vào config của Skype để sửa: Trong Skype Options -> Advanced -> Connection: Un-click “Use port 80 and 443 as alternatives for incomming connections”



III. Cài mysql vào thư mục D:/webserver/mysql\\KHANHNQ\Download\Developer tools\webserver\MySQL\

1. Chọn version phù hợp với win: 32 bit hoặc 64 bit

2. Thực hiện install



3. Accept Licence.

4. Chọn Custom install



5. Chọn thư mục cài cho MySql:

Chọn Browse…



6. Chọn thư mục Data cho MySQL

Chọn Server data files rồi Browse…



7. Chọn install, next để hoàn tất việc cài đặt.



Chờ đến khi install xong



8. Kết thúc cài đặt. Chọn Launch the MySQL Instance Configuration Wizard để tiến hành configuration.



9. Bắt đầu config

10. Chọn Detailed Configuration



11. Chọn Developer Machine

12. Chọn Multifunctional Database



13. Next

14. Chọn Decision Support (DSS)/OLAP



15. Chọn như hình dưới.

16. Chọn Best support for Multilingualism



17. Chọn Include Bin Directory in Windows PATH

18. Nhập password: root 19. Chọn Enable root access from remote machines



20. Chọn Execute để chạy configuration

21. Nếu Success hết thì ok, nếu có bước nào lỗi (thường là Start service) thì nhờ support.



IV. Setup TortoiseSVNDownload tại: http://tortoisesvn.net/downloads.html


http://tortoisesvn.net/downloads.html


V. Setup Netbean [Deprecated] Chuy n sang s d ng Sublime ể ử ụText 3

1. Setup Netbean

\\KHANHNQ\Developer tools\ NetBean\

2. Import Setting

Cần phải import setting, đây là những setting chung của công ty như ví dụ như format code.

File setting để ở:

\\KHANHNQ\Developer tools\ NetBean\netbean.zip

Các bước import:



1. Vào Options

2. Chọn import



3. Browse tới file setting và chọn All options

4. Click Ok.

3. Setup các add-in

Netbean cung cấp nhiều plugins hỗ trợ việc coding. Khuyến khích sử dụng 2 plugins sau:

Show path in title bar

Hiển thị đường dẫn của file trên title. Dùng để tránh nhầm lẫn khi mở 2 file trùng tên nhưng ở thư mục khác nhau.

QuickOpener

Hiển thị button và cho phép phím tắt để mở explorer đến thư mục/file đang xem



Cách cài đặt plugins:

1. Tools -> Plugins



2. Chọn Available Plugins, Search và Install



VI. Setup Sublime Text Sublime Text là tool được rất nhiều người sử dụng hiện nay. Tuy không phải là 1 IDE hoàn thiện (không có nhắc biến và hàm, không có báo lỗi, không debug….) nhưng Sublime Text có ưu điểm là nhỏ gọn và tốc độ cao

1. Sublime Text 2 or 3

Hiện bản 3 vẫn là bản beta nhưng khuyến khích sử dụng bản 3 vì tốc độ tốt hơn. Trong phần này sẽ hướng dẫn dùng bản Sublime Text 3.

2. Cài đ t Sublime Text 3ặ

Download ở đây và cài: http://www.sublimetext.com/3

Crack: \\KHANHNQ\Download\Developer tools\sublime\sublime_text_3_build_3059_all\

Chọn bản phù hợp, copy & paste đè lên file exe tương ứng.

3. Add menu Open with Sublime Text to folder

Mặc định thì khi chuột phải vào 1 file sẽ có menu Open with Sublime, nhưng có thể add thêm menu Open with Sublime cho folder. Cách thực hiện:

\\KHANHNQ\Download\Developer tools\sublime\

Copy và run file .bat: OpenWithSublimeText3.bat

Kết quả:


http://www.sublimetext.com/3


4. Cài đ t Package Control và các package:ặ

Package Control là để quản lý các package cho Sublime, cài đặt thì làm như hướng dẫn ở đây:

https://sublime.wbond.net/installation

Sau khi cài đặt, có thể chạy Package Control để search và install các package: (Ctrl + Shift + P và gõ package control) chọn install package để search package:


https://sublime.wbond.net/installation


Package cho Sublime Text rất nhiều, ở đây khuyến khích sử dụng những packages cơ bản sau:

- Sidebar Enhancements: thêm chức năng cho explore sidebar bên trái.- CodeFormatter: format code php, js, html- Less- List Less Variables- SublimeLinter: add thêm các ‘linter’ để analysis và báo lỗi cho các ngôn ngữ khác nhau.

o SublimeLinter-Annotationso SublimeLinter-CssLint (muốn hoạt động phải cài đặt Node.js npm và csslint).o SublimeLinter-Jshint (muốn hoạt động phải cài đặt Node.js npm và jshint).o SublimeLinter-Php: (chú ý là muốn hoạt động phải add đường dẫn của PHP vào

environment PATH của windows.)

VII. Setup Thunderbird [Không b t bu c]ắ ộ

1. Set up Thunderbird

Download version mới nhất từ Thunderbird và cài đặt bình thường.

http://www.mozilla.org/en-US/thunderbird/download


http://www.mozilla.org/en-US/thunderbird/download


2. Setup new email

1. Chọn add account -> Skip this and use my existing email



2. Input Name, email và password

3. Choose Manual Config



4. Điền thong tinIMAP và SMTP như config email Gmail bình thường

IMAP host: imap.gmail.comIMAP port: 993IMAP SSL: SSL/TLSAuthentication: Normal password

SMTP host: smtp.gmail.comSMTP port: 465SMTP SSL: SSL/TLSAuthentication: Normal password

Username: <email account>

5. Chọn Done



VIII. Setup remote debugging for Chrome on AndroidPhần này sẽ hướng dẫn cài đặt debug cho Chrome trên Android. Sau khi cài đặt xong, sẽ có khả năng view website bằng thiết bị Android và view html source cũng như debug script trên máy tính.

Chi tiết xem ở: https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=es

Bên dưới là hướng dẫn đơn giản để chạy được trên Nexus 7 ở công ty. Các phần 1, 2 là phần setup ban đầu, sau khi setup một lần, cần làm theo các bước ở phần 4. Debug mỗi khi muốn debug.

1. Install driver for Nexus 7

Kết nối với Nexus 7 và vào Devices Manager, nếu thấy báo warning tương tự như hình dưới thì phải install driver.

Copy driver ở:

\\KHANHNQ\Download\Developer tools\android\

Và giải nén vào 1 folder trong máy.


https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=es


1. Chuột phải vào Device, chọn Update driver

2. Chọn Browse my computer for driver software



3. Browse đến thư mục đã giải nén driver ở trên và tick vào Include subfolders

4. Chọn Next để install

Kết quả như hình dưới là đã cài đặt driver thành công. Nếu không được phải uninstall driver cũ đi và cài đặt lại.



2. Enable debug trên Chrome

Vào Chrome menu > Tools > Inspect Devices: (hoặc about:inspect)



Chọn: Discover USB devices



3. Debug

Sau khi cài đặt xong các bước trên thì có thể tiến hành debug. Mỗi lần debug cần thực hiện các bước sau:

1. Kết nối với thiết bị Android2. Enable debug trên Nexus 7

Khi kết nối lần đầu với một máy tính mới, Nexus 7 sẽ hiện thông báo yêu cầu Allow USB debugging? Chú ý chọn Always allow from this computer để không bị hỏi lại lần nữa.

Sau khi allow debug trên Nexus 7, máy tính sẽ nhận được tất cả các trang web mở trên Nexus 7:



Chọn inspect để bắt đầu debug



IX. Set up Chrome DevTool workspace và Less preprocessorsBắt đầu từ cuối năm 2013 Chrome DevTool đã thêm tính năng mới:

Workspace và working with CSS preprocessors.

(Tham khảo thêm ở: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/)

1. Workspace

Cho phép add folder (thư mục thật trên disk) vào Chrome DevTool. Sau đó có thể thao tác trên thư mục như một IDE (thêm, xóa sửa và save file).

Cách setting xem ở đây:

https://developer.chrome.com/devtools/docs/workspaces

2. Working with CSS preprocessors

CSS preprocessors: LESS và SCSS có một nhược điểm là khi investigate với Chrome DevTools hoặc FireBug sẽ không thể biết được chính xác dòng lệnh nằm ở đâu. Do đó Chrome DevTools đã thêm tính năng này để có thể đọc được dòng lệnh ban đầu của Less hay Scss.

Trong hình dưới, có thể thấy khi inspect một element, style tương ứng là ở file Less, ko phải CSS:


https://developer.chrome.com/devtools/docs/workspaces

http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/


Điều kiện thực hiện:

LESS (hoặc SCSS) phải đi kèm với CSS source maps, là file cho phép mapping giữa CSS và LESS (hoặc SCSS).

Cách setting xem ở đây:

https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Để tạo file CSS source maps cần phải sử dụng tool compile. Ở đây sẽ sử dụng: PrePros

http://alphapixels.com/prepros/

Cài đặt và sử dụng rất đơn giản. Chỉ cần kéo thả thư mục chứa file Less vào PrePros.

Tuy nhiên cần chú ý các config sau:

Thư mục output CSS

Cần set thư mục hợp lý so với thư mục chứa file LESS (hoặc SCSS). Trong hầu hết các trường hợp cần set là: ./css/


http://alphapixels.com/prepros/

https://developers.google.com/chrome-developer-tools/docs/css-preprocessors


Auto Compile và output Source Maps khi compile LESS

Sau khi có source map thì Chrome DevTool sẽ tự nhận được file Less với source map.



3. K t h p DevTool workspace v i Less preprocessorsế ợ ớ

Khi kết hợp DevTool workspace với Less preprocessors thì chúng ta sẽ có 1 work-flow hoàn chỉnh khi làm việc với Less:

- Xem giao diện web trên Chrome- Inspect element với Chrome DevTools- Tìm đến dòng Less cần thay đổi- Sửa lại và save file.- PrePros sẽ nhận biết sự thay đổi và tự động compile file Less.- Chrome sẽ tự động update trang web với css mới.

Để làm thêm bước này cần làm 2 việc:

Add thư mục chứa Less (và cả css) file vào DevTool workspace. (Có thể add cả thư mục chứa trang web đang làm việc nhưng sẽ ngốn nhiều RAM.)

Trong hình dưới: add thư mục assets, trong đó có 2 thư mục con less và css

Mapping file Less với file tương ứng trong disk

Mở một file Less với Chrome DevTool chuột phải và chọn Map to file system resource



Sau đó, DevTool sẽ tự động refresh và kết quả là: đường dẫn file sẽ trỏ đến ổ D:/ chứ không phải localhost/ (xem hình dưới, chú ý thay đổi so với ảnh ở đầu chương):


Environment Setting

Documents

Transcript of Environment Setting