How to install and configure AngularJS Web Project in Eclipse

ขั้นที่ 1 : ให้ไปที่ Menu Help > Install New Software

ขั้นที่ 2 : ให้ Add Repository เพื่อลง Package
Name : AngularJS
Location : http://oss.opensagres.fr/angularjs-eclipse/1.2.0/

ขั้นที่ 3 : ให้เลือก Select All เพื่อเลือก Package ทั้งหมด

ขั้นที่ 4 : ให้ทำการสร้าง Dynamic Web Project เพื่อทดสอบการใช้งาน Package

ขั้นที่ 5 : ตั้งชื่อ Project File แล้วกด Finish เพื่อสร้าง Project

ขั้นที่ 6 : เราจะได้ไฟล์ Project ขึ้นมา 1 ไฟล์

ขั้นที่ 7 : ให้ทำการ Config File Project จาก Dynamic Web Project ไปเป็น AngularJS Project

ขั้นที่ 8 : การตั้งค่าให้ใช้ NodeJS โดยให้ไปที่ Windows > Preferences

ขั้นที่ 9 : ให้ Config Properties Project เป็น AngularJS

Reference Packages :
https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started
https://github.com/angelozerr/tern.java/wiki/Tern-Script-Path
https://github.com/angelozerr/angularjs-eclipse
https://github.com/angelozerr/angularjs-eclipse/wiki/Installation-Update-Site
https://github.com/angelozerr/angularjs-eclipse/tree/master/samples

Bootstrap Test : https://github.com/BlackrockDigital/startbootstrap-modern-business

References :
https://techanand.wordpress.com/2014/03/09/how-to-install-and-configure-angularjs-in-eclipse/
http://javahonk.com/install-angularjs-plugin-eclipse/
https://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app

ทดสอบการสร้าง Project :
http://blog.diniscruz.com/2014/02/using-angularjs-in-eclipse-part-1.html

How to install Package in Sublime Text 3 to build AngularJS 2 Web Project

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอขั้นตอนการติดตั้ง Package ที่จำเป็นใน Sublime Text 3 ซึ่งทุก Package ที่ติดตั้งเข้าไป นำมาสู่การพัฒนา Web Application ของ AngularJS 2 ทั้งหมด

โดยขั้นตอนการติดตั้ง มีดังนี้

ขั้นที่ 1. เข้าไป Download Sublime Text 3 ที่ https://www.sublimetext.com/3

เมื่อ Download เสร็จเรียบร้อยแล้ว ให้ทำการติดตั้งลงเครื่อง

ขั้นที่ 2. ก่อนที่จะติดตั้ง Package ต่างๆ ในขั้นตอนนี้ ให้เข้าไปติดตั้ง Package Control ให้กับ Sublime Text 3 ที่ https://packagecontrol.io/ ก่อน เพื่อที่จะได้ลง Package อื่นๆ ในลำดับต่อไป

ขั้นที่ 3. เข้าไปที่ https://packagecontrol.io/installation แล้ว Copy คำสั่ง

ขั้นที่ 4. ให้เปิดโปรแกรม Sublime ขึ้นมา แล้วให้ไปที่ View > Show Console

ขั้นที่ 5. ให้ Copy คำสั่งแล้วไปวางใน Console จากนั้นกด Enter เพื่อ Run คำสั่ง โดยเมื่อเราลง Package เสร็จแล้ว ให้ Restart Program ขึ้นมาใหม่

ขั้นที่ 6. ให้กด Ctrl+Shift+P เพื่อค้นหา Install Package และเมื่อเจอแล้ว ให้ Double Click เข้าไป

ขั้นที่ 7. หลังจาก Double Click เข้าไปแล้ว ให้พิมพ์คำว่า Emmet เพื่อที่เราจะลง Emmet Package ใน User Package ของเรา แล้วก็ Double Click ลงได้เลย....

ถ้าหน้าจอปรากฏขึ้นมาแบบนี้ แสดงว่า ลงเสร็จเรียบร้อยแล้ว ให้ทำการ Restart ขึ้นมาใหม่

โดยวิดีโอแสดงวิธีการ Setup ก็ตามนี้ครับ...

ต่อมา คือ... ขั้นตอนการลง Snippets จาก Github โดยให้ทุกคนเข้าไปที่ https://packagecontrol.io/packages/AngularJS%20Snippets เพื่อใช้งานคีย์ลัดสำหรับการเรียก Service ของ AngularJS ซึ่งจะมีให้ใช้ตามหัวข้อดังนี้

-Services
-Directives
-Globals
-jQuery lite
-Scope functions
-Log functions
-Variables

มี 2 วิธีที่จะสามารถติดตั้ง Pagkage นี้ได้ คือ
-วิธีที่ 1 : ไปที่ github แล้ว Clone ด้วย NPM หรือ Download Project ลงมาแล้วไปที่โปรแกรม Sublime และ Browse Package ไปที่ Folder User ของตัวเอง หลังจากนั้นก็ Copy File Shippets มาแล้ววาง
-วิธีที่ 2 : ใช้ Ctrl+Shift+P แล้วไปที่ Install Package หลังจากนั้นค้นหาคำว่า AngularJS Snippets แล้วลง Package

โดยขั้นตอนนี้ท๊อปจะสาธิตวิธีแรกให้ดูก่อนนะ...

โดยใน Github บอกว่า ให้คุณดาวโหลดแล้วเข้าไปที่ Menu User Folder ของคุณแล้ว Copy File มาวางและก็ใช้งานได้เลย...

เราก็เริ่มทำตามที่เขาบอกกันเลย... ไปที่ Preference > Browse Packages

แล้วไปที่ User Folder

หลังจากนั้น Copy File มาวางแล้วใช้งาน Tag ได้เลยยย

ทดสอบการทำงานด้วยการสร้างไฟล์ javascript ขึ้นมา 1 ไฟล์และเรียกใช้คำสั่ง

Reference Packages:

http://nextflow.in.th/2014/use-angular-js-on-sublime-text/

https://github.com/maxhoffmann/angular-snippets

https://github.com/angular-ui/AngularJS-sublime-package

https://github.com/alienhard/SublimeAllAutocomplete

https://github.com/sergeche/emmet-sublime

https://github.com/start-angular/SB-Admin-BS4-Angular-2

ส่วนขั้นตอนการสร้างโปรเจค ติดตามได้ที่นี่เลย เรื่อง AngularJS Structure...

http://www.helloho.me/getting-started-with-angular/

https://scotch.io/tutorials/angularjs-best-practices-directory-structure

http://www.davecooper.org/angular-project-structure

http://stackoverflow.com/questions/18542353/angularjs-folder-structure

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...

How to Clone AngularJS 2 Web Project from github with NPM Command and Git Bash

สวัสดีครับ วันนี้ท๊อปจะมานำเสนอวิธีการทดสอบ Web Application ที่ถูกพัฒนาด้วย AngularJS 2 ซึ่ง ณ.ปัจจุบันนี้ ก็เป็นที่นิยมอย่างมากในหมู่นักพัฒนา Web Application

สิ่งที่เราจะต้องมี คือ...

1. NodeJS เพื่อการลอง Package ด้วย cmd
2. github
3. Typescript Library
4. Json Package

วันนี้ท๊อปจะยกตัวอย่าง Dashboard Project จาก https://github.com/start-angular/SB-Admin-BS4-Angular-2 โดยที่ท๊อปจะ Clone Project มาไว้ที่เครื่องตัวเอง...

ขั้นตอนการ Setup Project

ให้เราเริ่ม Setup Package ที่จำเป็นตามคำสั่งดังต่อไปนี้

$ npm install -d : คำสั่งสำหรับลง Package

$ npm update -d : คำสั่งเพื่อ Update Package
$ npm -v : คำสั่งเพื่อตรวจสอบเวอร์ชั่นของ npm
$ npm install gulp -g : คำสั่งเพื่อลง gulp Package

$ npm install typescript-node -g : คำสั่งเพื่อลง Typescript Package

ขั้นตอนการ Clone Project

1. เราต้องการ Clone โปรเจคจาก github มาไว้ที่เครื่องของเรา
$ git clone https://github.com/start-angular/SB-Admin-BS4-Angular-2.git

2. ตรวจสอบ npm เพื่อลง Type Script
npm install -g ts-node

โดยเมื่อ Clone ลงมาที่เครื่องตาม Path ที่ระบุแล้ว ก็จะมี Folder ของ Project ปรากฏออกมา ดังรูป

3. เขียน command prompt เพื่อ Run คำสั่ง $ cd `project-directory` เพื่อ Setup Project ตาม Folder ที่ได้ Clone จาก github ลงมา

หลังจากนั้น Git Bash จะสั่ง Run Command ด้วยคำสั่ง $ npm install เพื่อลง Web Project

เมื่อลง Clone Project เสร็จแล้ว เราจะสั่ง Run Web Project ด้วยคำสั่ง $ npm start

หลังจากนั้น Server ก็จะสั่ง Start Server ขึ้นมา ผ่าน Localhost ตามที่ได้ Configuration ไว้

Project ถูก Start ขึ้นมาเรียบร้อย....

References : 

http://startangular.com/

https://help.github.com/articles/cloning-a-repository/

https://github.com/mgechev/angular2-seed/issues/132

How to control android phone using PC by MyPhoneExplorer

สวัสดีครับ วันนี้ท๊อปจะมาแนะนำ MyPhoneExplorer ซึ่งเป็นโปรแกรมที่สามารถควบคุมการทำงานและการแสดงผลของมือถือระบบ Android ได้อย่างง่ายๆ ซึ่งติดตั้งง่าย และใช้งานง่ายด้วยครับ...

MyPhoneExplorer เป็นโปรแกรมฟรี !!! สำหรับการควบคุมโทรศัพท์ระบบปฏิบัติการ Android เพียงแค่คุณมีโทรศัพท์ แล้วใช้ USB, wifi, Bluetooth เชื่อมต่อสัญญาณเข้ากับ PC ซึ่งเมื่อลงโปรแกรมเสร็จเรียบร้อยแล้ว โปรแกรมก็จะให้โทรศัพท์ของคุณส่งข้อมูลทั้งหมดมาที่โปรแกรม โดยต่อไป... เราก็จะสามารถควบคุมการทำงานของโทรศัพท์ทั้งหมดผ่าน PC ได้แล้ว...

วิธีการติดตั้ง มีดังนี้....

ขั้นที่ 1 : ให้เข้าไป Download Software ที่ http://www.fosshub.com/MyPhoneExplorer.html

ขั้นที่ 2 : ทำการติดตั้งโปรแกรมให้เรียบร้อย

ขั้นที่ 3 : หลังจากติดตั้งโปรแกรมเสร็จ เราจะได้ไฟล์ Portable มา 1 ไฟล์ ให้เราเข้าไปที่ Folder แล้ว Double Click ที่ MyPhoneExplorer portable.exe ก็จะได้หน้าต่างโปรแกรมแบบนี้ขึ้นมา

ขั้นที่ 4 : ให้ทำการเชื่อมต่อ USB กับ PC ตัวเองให้เรียบร้อย หลังจากนั้น เข้าไปที่ Menu File > Connect หรือกด F1 ก็ได้ตามภาพ

ขั้นที่ 5 : ให้เลือกเชื่อมต่อแบบ Google Android OS แล้วเลือกเชื่อมต่อแบบ USB Cable

ขั้นที่ 6 : ให้ตรวจสอบโทรศัพท์มือถือของเราว่า ได้เปิด USB Debugging Mode แล้วหรือยัง 

-ให้เข้าไปตรวจสอบที่เมนู Setting

-ถ้าไม่พบ Developer Mode ให้มาเลือกที่ About Device และเลื่อนมาด้านล่างจนเจอคำว่า Build number ซึ่งจะเป็น Font สีหมองๆ เหมือนกดไม่ได้ ให้กดตรงคำว่า Build number ไปเลย 7 ครั้ง (กดย้ำๆไปเลย เกินไม่เป็นไร) 

-หลังจากนั้น... กลับออกมาหน้า Settings ปกติ ก็จะเห็น Developer options ออกมาแล้วนะครับ

-หลังจากนั้น...ให้ Enable USB Debugging Mode ให้เรียบร้อยครับ

ขั้นที่ 7 : เมื่อ Setup เสร็จสมบูรณ์แล้ว ระบบก็จะทำการโอนถ่ายข้อมูลมาที่โปรแกรมทันที

ขั้นที่ 8 : ให้ตั้งชื่อ Phone ของตัวเอง

ขั้นที่ 9 : ระบบก็จะทำการโอนถ่ายข้อมูล (ระวังเรื่องการ log หน้าจอด้วยนะครับ เดี๋ยวจะไม่ Success)

ขั้นที่ 10 : หลังจากนั้น เมื่อเราต้องการ Control หน้าจอ ให้ไปที่เมนู Extras > Control phone/LoadScreenshot หรือกด Shift+F6 ก็จะสามารถ Control หน้าจอได้แล้ว

หลังจากติดตั้งเสร็จเรียบร้อยแล้ว.... ใช้งานได้ตามใจชอบเลยครับ....

วิดีโอตัวอย่างการใช้งาน...

Reference : http://www.basehacker.com/2016/06/how-to-control-android-phone-using-pc.html

เพิ่มเติม : โปรแกรมจากค่ายอื่นๆ ที่ไว้ใช้ Remote มาที่ Android เพื่อควบคุมการทำงาน

URL : https://www.mobizen.com/

URL : http://web.airdroid.com/

URL : http://www.vysor.io/