Mad IT: 2016

Review free Android cloud music player limitation

Each program limitation.

MyMusicCloud -> limit playing only 250 songs.

Beat - cloud & music -> no song downloading in advance to play offline later. But you can play from cache.

Cloudaround
- limit only 1 cloud account.
- can't move downloaded songs to SD card (only Android6).
- Onedrive can't be downloaded (mean no offline play).

CloudBeats -> download function need to be upgraded.

CloudPlayer -> only premium account can play cloud music files.

AirBeats -> support only Dropbox.

Angular module include module

module ใน Angular เราสามารถไปเรียก module อื่นๆ ได้

ตัวอย่าง

HomeModule.js

var app = angular.module('HomeModule', []);

app.controller('HomeController', function($scope) {
 $scope.name = 'AngularJS';
});

จากนั้นเขียน module ที่ต้องการจะเรียก module

app.js

1	var app = angular.module('A02', ['HomeModule']);

จากนั้นก็เขียน html ในการเรียก angular ปกติ แต่จะต้องใส่ script ทุกไฟล์ที่ module เรียกไว้ให้ครบด้วยนะค่ะ

02.html

<!DOCTYPE html>
<html ng-app="A02">
<head>
 <title>02</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/app.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/HomeModule.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 <div ng-controller="HomeController">
  <p>{{ name }}</p>
 </div>
</body>
</html>

แค่นี้ก็สามารถเรียกใช้เป็น module ได้

จบ.

Angular factory

คราวที่แล้วเราสร้าง service ไปแล้ว คราวนี้จะมาดูกันว่านอกจาก service แล้ว เราสามารถเขียนเป็น factory ก็ได้เหมือนกัน

app.js

var app = angular.module('A05', []);

app.factory('CalculatorFactory', function() {
 var currency = 'US$';

 function resultWithCurrency(value) {
  return currency + ' ' + value;
 }

 return {
  name: 'Calculator Factory',
  calculate: function(value) {
   return resultWithCurrency(value * value);
  }
 }
});

app.controller('FactoryController', function($scope, CalculatorFactory) {
 $scope.name = CalculatorFactory.name;
 $scope.calculate = function() {
  console.log(CalculatorFactory.calculate(10));
 }
});

คราวที่แล้วเราเขียน function เดียวกันแต่ใช้ผ่าน service ซึ่งไม่มีการ return อะไร แต่ว่าผูกค่าหรือ function ไว้กับ this แต่ถ้าเป็น factory จะมีการ return ค่า

file.html

<!DOCTYPE html>
<html ng-app="A05">
<head>
 <title>05</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8" ></script>
 <script src="app/05/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-controller="ConstantController">
 <p><b>Constant</b>: {{ viewPath }}</p>
</div>
<hr>

<div ng-controller="FactoryController">
 <p><b>Factory</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

แต่ตอนที่เรียกใช้ ไม่ว่าจะเป็น service หรือ controller จะเรียกไม่ต่างกัน

จบ.

Reference:
AngularJS: Service vs provider vs factory

Angular service

คราวที่แล้วเราเริ่มต้นด้วย module กับ controller ไปแล้ว ถ้าเราจะเขียนให้สวยก็เขียนใส่ service หรือ factory สำหรับการเรียกใช้ในหลายๆ controller (คิดว่าน่าจะเหมือนกับ MVC)

ตัวอย่างการเขียน service และการเรียกใช้ผ่าน controller

app.js

var app = angular.module('A05', []);

app.service('CalculatorService', function() {
 var currency = 'US$';

 function resultWithCurrency(value) {
  return currency + ' ' + value;
 }

 this.name = 'Calculator Factory';
 this.calculate = function(value) {
  return resultWithCurrency(value * value);
 };
});

app.controller('ServiceController',
function($scope, CalculatorService) {
 $scope.name = CalculatorService.name;
 $scope.calculate = function() {
  console.log(CalculatorService.calculate(10));
 }
});

ใน service เราผูกค่า หรือ function ที่เราต้องใช้ไปกับตัว service เอง (this) แล้วค่อยให้ controller มาเรียกใช้ service ไปอีกที โดยจะต้องผ่านตัวแปร $scope เพื่อให้หน้า client สามารถเห็นค่าเหล่านี้

file.html

<!DOCTYPE html>
<html ng-app="A05">
<head>
 <title>05</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8" ></script>
 <script src="app/05/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div ng-controller="ServiceController">
 <p><b>Service</b>: {{ name }}</p>
 <p><button ng-click="calculate()">{{ name }}</button></p>
</div>
</body>
</html>

ในหน้าเวป เราก็เรียกใช้ controller เหมือนปกติ

จบ.

Angular module and controller

function หรือ global API คือคำสั่งที่เรียกผ่าน object angular ทั้งหมด ซึ่งมีด้วยกันหลายคำสั่ง ซึ่งตามหลักที่ดี ก็คือเขียนเป็น module และใน module แยกเป็นแต่ละ controller เพื่อใช้เรียก service หรือ factory อีกที (ส่วนตัวเข้าใจว่า service จะเป็นการสร้าง object service ใหม่ แต่ factory เป็นการเรียก service นั้นๆ โดยไม่สร้างใหม่)

ซึ่งเราจะแยกไฟล์ AngularJS แยกไว้ต่างหาก และในไฟล์ HTML ก็จะ include script เข้ามาโดยผ่าน directive ng-app และ ng-controller

ตัวอย่างไฟล์ AngularJS ที่เขียนเป็น module และการเรียนใช้ controller ภายใน module

app.js

// create angular model A02
var app = angular.module('A02', []);

app.controller('HomeController', function($scope) {
 $scope.name = 'AngularJS';
});

02.html

<!DOCTYPE html>
<html ng-app="A02">
<head>
 <title>02</title>
 <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="app/02/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
 <div ng-controller="HomeController">
  <p>{{ name }}</p>
 </div>
</body>
</html>

อันนี้ถือเป็นการเริ่มทำความคุ้นเคยกับการเขียน Angular ซึ่งจะเห็นว่า เราก็จะเขียน Angular function ต่างๆ ไว้ในไฟล์แยกเหมือน javascript ตัวหนึ่ง แล้วเรียกใช้ เพียงแต่การเรียกใช้เราจะเรียกผ่าน Angular directive ต่างๆ

จบ.

Basic Angular Directive

นอกจาก Angular Expression แล้ว เรายังสามารถใช้ Angular Directive สำหรับการผูกข้อมูล (binding) โดย directive ที่ใช้ทั่วไป มีดังนี้

ng-init

สำหรับการกำหนดค่าเริ่มต้นให้กับตัวแปร

<div ng-init="price=50;qty=25">

    <p>Amount: {{ price * qty }}</p>
    <p>Amount: {{ price * qty | currency }}</p>
    <p>Amount: {{ price * qty | currency:'THB' }}</p>

</div>

ตัวอย่างจะเป็นการกำหนดค่าตัวแปร price กับ qty

ng-model

เป็นการผูกค่าตัวแปรกับ input tag ใน HTML

1 2	<input type="text" ng-model="name"> <p>Name: {{ name }}</p>

ในตัวอย่างเป็นการผูก input text กับตัวแปรชื่อ name ซึ่งในการผูกค่า อาจจะใช้เป็นตัวแปรแบบ primitive หรือว่า object ก็ได้

หรืออีกตัวอย่างหนึ่ง เป็นการผูกค่าตัวแปร like กับ input radio

<div ng-init="like='Yes'">
    <input type="radio" value="Yes" ng-model="like">I like
    <input type="radio" value="No" ng-model="like">I don't like
    <p>Answer: {{ like }}</p>
</div>

หรือ ผูกค่ากับ select tag

<select ng-model="food">
    <option value="Rice">Rice</option>
    <option value="Noodle">Noodle</option>
    <option value="Soup">Soup</option>
</select>

Your Order: {{ food }}

ng-click

เนื่องจากใน javascript ตัวแปรนอกจากจะเก็บค่าต่างๆ หรือว่าใช้เก็บเป็น object ของ property (ซึ่งก็เป็นการเก็บค่าอยู่ดี) ได้แล้ว ยังสามารถกำหนดให้ตัวแปรมีค่าเก็บ function ได้ด้วย เสมือนกับ function เป็นค่าๆ หนึ่ง ดังนั้นเราจึงใช้คุณสมบัตินี้มากำหนดพฤติกรรมของการทำงานในเอกสาร HTML ได้

ตัวอย่างกำหนดการคำนวณให้กับปุ่ม

1 2	<button ng-click="counter=counter+1">Count</button> <p>Counter: {{ counter }}</p>

ng-if

เป็น directive ที่ใช้กำหนดเงื่อนใขให้กับ HTML

ตัวอย่างกำหนดให้แสดงหรือไม่แสดงข้อความ (รวมถึงสีพื้น)

<div ng-init="show=true">
    <p ng-if="show" style="background-color: red;">Red</p>
    <p ng-if="!show" style="background-color: green;">Green</p>

    <button ng-click="show=!show">Toggle</button>
</div>

นอกจากนี้ยังมี

ng-repeat
ng-app
ng-controller

พื้นฐานของ Angular Directive ก็จะมีประมาณนี้ เอาไว้ค่อยมาต่อกันนะค่ะ

Reference:
ng Directive

Angular Expression

Angular สามารถเขียน code ลงไปได้ 2 รูปแบบ คือ Angular Expression และ Angular Directive ซึ่งสำหรับ Angular Expression จะมีลักษณะคล้ายๆ การเขียน JavaScript ลงไปยัง {{ script }}

ซึ่งตัวอย่างที่สามารถเขียนลงไปได้ก็อย่างเช่น

{{ 'Hello World' }} - แสดงข้อความ
{{ 1 + 2 }} - คำนวณค่าคงที่
{{ a + b }} - คำนวณค่าจากตัวแปร
{{ user.name }} - แสดงค่า property จาก object
{{ items[index] }} - แสดงค่าจาก array

แต่จะแตกต่างจาก JavaScript คือ

JavaScript อ้างอิงจาก ตัวแปร window แต่ Angular จะใช้ $scope object
ตัวแปรไหนที่ไม่อยู่ใน scope หรือไม่เคยกำหนดค่ามาก่อน Angular จะใส่ให้เป็น null หรือเริ่มต้น เช่น ถ้าเป็นตัวเลขก็จะใส่เป็นค่า 0 เป็นต้น
ไม่สามารถใส่ Control Flow ได้ เช่น loop, if
ไม่สามารถสร้าง function ได้

ไว้โอกาสหน้าจะมาต่อกันเรื่อง Directive

Reference:

AngularJS Documentation for expression

Angular Expressions - W3Schools

AngularJS 101

AngularJS เป็น lib ของ javascript ที่จะช่วยให้การเขียนได้ง่ายขึ้น (เข้าใจว่า) ดังนั้นการเขียน Angular JS จึงเหมือน javascript ทั่วๆ ไป แต่อาจจะมีการรูปแบบการเขียน (syntax) ที่แตกต่างออกไป

การจะเริ่มเขียน AngularJS สามารถเขียนได้บนไฟล์ .html ทั่วๆ ไป โดยเพิ่มการอ้างอิง AngularJS lib และใส่ module เข้าไป

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <title>test</title>
    </head>
    <body>
        {{ 'Hello World '}}
    </body>
</html>

ส่วนที่เพิ่มเข้าไปคือ "ng-app" ใน html tag และ script ที่อ้างไปยัง AngularJS lib เพียงเท่านี้ก็เป็นอันเสร็จ คือไฟล์ html นี้สามารถเพิ่ม code ส่วนที่เป็น Angular เข้าไปได้แล้ว ซึ่งในตัวอย่างจะเป็นการแสดงข้อความ 'Hello World' ผ่านทาง AngularJS

เอาหอมปากหอมคอแค่นี้ก่อน ไว้มาดูตอนต่อไป

ติดตั้ง Sublime และ Package Control

Sublime เป็น text editor ตัวหนึ่งคล้ายๆ กับ Notepad++ แต่ว่าเป็นโปรแกรมที่มีอยู่ทั้งใน Windows, MacOS ก็เลยทำให้หลายคนใช้กัน เพราะว่าจะได้สภาพแวดล้อมที่คล้ายกันทั้งใน PC และ Mac

การติดตั้ง Sublime ก็ไม่ได้ยุ่งยากอะไร Search มาแล้วก็สามารถเลือกติดตั้งกันได้เลยทั้ง Windows, Mac แต่การจะใช้ Sublime ให้เป็นประโยชน์จะไม่ได้สิ้นสุดแค่นั้น จะต้องหา package อื่นๆ มาติดตั้งเพิ่มเติม เพื่อให้ Sublime สามารถทำงานได้มีประสิทธิภาพมากขึ้น ดังนั้นเมื่อติดตั้ง Sublime แล้ว สิ่งที่ควรติดตั้งตามมาคือ Package Control เพื่อให้สามารถติดตั้ง package อื่นๆ ต่อไปได้ ซึ่งวิธีติดตั้งสามารถเข้าไปดูจาก https://packagecontrol.io/installation ได้ค่ะ แต่สั้นๆ ก็คือไปที่เมนู View > Show Console แล้ว copy text จากในหน้าเวปนั้น ไปใส่กด enter เป็นอันเสร็จค่ะ

หลังจากนั้นสามารถกด Ctrl + Shift + p เพื่อติดตั้ง package อื่นๆ ต่อไป ซึ่ง package อื่นๆ ก็อย่างเช่น

Emmet เป็นตัวช่วยให้การเขียนโปรแกรมง่ายขึ้น เช่น สามารถเขียน table>tr>td แล้วก็กด tab ได้เลย มันก็จะขึ้นมาเป็น tag table ทั้งหมดให้เรียบร้อย
HTML5 เข้าใจว่าเป็นตัวที่ทำให้ Sublime รู้จัก tag HTML5 จะได้แสดงสีอย่างสวยงาม
SublimeCodeIntel ใช้สำหรับ autocomplete code โดยเมื่อพิมพ์เข้าไปแล้วจะแสดงเป็น pop up มาให้เลือก

นอกจากนี้ยังมี package สำหรับแต่ละภาษาเช่น Python เพื่อให้แสดงสีตามแต่ละภาษาด้วย

ก็สรุปจบการแนะนำ Sublime พร้อมการติดตั้งไว้เท่านี้

การเปลี่ยนแปลงจนถึง Java8

เป็นการสรุปที่อบรมมาค่ะ เอาแบบสั้นมากๆ

Java5

Fast Loop

for (int x : list)

Variable Argument

public void doSomething (int... listInt)

Format (printf)
Enumeration ที่เป็น type safe
Autoboxing
Generic type
Annotation
Document annotation
Static import package

import static java.lang.math.*;

Java6

Script engine สามารถ run javascript ใน java ได้ ผ่าน class javax.script.ScriptEngine
String pool คือมีการรวมค่าของ string ที่เป็นค่าเดียวกันไว้ด้วยกัน (แต่ไม่ใช่ค่า string ตอน runtime)

String s1 = "Hello";

String s2 = "Hello"; // s1 = s2

String s3 = new String("Hello"); // s1 <> s3

String s4 = s3.intern(); // s1 == s4

Java7

String switcher คือใช้ string ในการเลือก case ได้
Literal underscore สามารถเพิ่ม _ เพื่อให้อ่านง่าย

long a = 127_777;

byte x = 0b0111_1111;

DiamondOp คือสามารถละ type ที่กำหนดใน generic class ได้

List b = new ArrayList<>();

Null safe มี java.util.Objects ที่เป็น utility สำหรับจัดการค่าที่สามารถเป็น null ได้ เช่น equals(), toString()
Multi-catch

try {

...

} catch (IndexOutOfBoundsException | NumberFormatException | ArithmeticException ex) {

System.out.println(ex.getClass());

}

Try resource block

try (

/* create auto-closeable resource object (class that implements AutoCloseable interface) */

) {

...

} catch (Exception ex) {

...

}

Walk โดยการเพิ่ม FileVisitor ใช้กับ Files.walkFileTree
Watch โดยมี WatchService

WatchService ws = FileSystems.getDefault().newWatchService();

Path p = Paths.get("temp");

p.register(ws, StandardWatchEventKinds.ENTRY_DELETE);

Java8

Interface สามารถสร้าง static method โดยจะต้องเป็น concrete method และเรียกผ่าน Interface ไม่ใช่เรียกที่ class
Interface สามารถสร้าง default method ที่เป็น concrete method ได้
Lambda ซึ่งจะถูกสร้างเป็น private method ใน class นั้นๆ (แม้ว่าจะคล้าย anonymous class) โดยใช้ annotation @FunctionalInterface เพื่อให้ compiler เช็คว่า interface เป็น SAM (Single Abstract Method) หรือเปล่า หรือจะใช้ predefined functional type (java.util.function.*) ก็ได้
Optional ซึ่งเป็น class ใหม่ เพื่อไม่ให้เกิด NullPointerException แต่ต้องใช้คู่กับ method orElse, orElseGet, orElseThrow หรือ ifPresent (ทั้งนี้จะใช้ Optional ก็จะต้องรู้เรื่อง Lambda ก่อน เพราะว่าหลาย method จะต้องใช้ความสามารถนี้)
Stream เป็น class ใหม่ และเพิ่ม method steam() ใน Collection และ Arrays เพื่อใช้ในการสร้าง stream หรือใช้ method of ของ Stream และเพิ่มค่าใน Stream โดย method add

Stream ss = Arrays.stream(array);

Stream sa = Stream.of(array);

Stream sd = Stream.generate(Math::random).limit(3); // สร้างค่าสุ่ม 3 ค่า

Stream sf = Files.lines(Paths.get("test.txt")); // สามารถอ่านจาก IO Stream ได้ด้วย

Parallel โดยสามารถใช้ได้บน Stream โดยแค่กำหนดเป็น Stream.parallel()
Parallel โดยใช้ class CompletableFuture