ถ้ายังไม่ได้ติดตั้ง ATOM หรือยังไม่เคยลองใช้ก็ติดตั้งและลองเล่นสักพักหนึ่งก่อนนะครับ https://atom.io/ ผมเองเคยใช้มาทั้ง Edit Plus, Sublime และตอนนี้มาจบที่ ATOM เหตผลเพราะมัน Open Source เลยอยากแนะนำให้ทุกๆ คนลองใช้ดู

มาเริ่มสร้าง code snippet ของเรากันต่อ ให้เลือกไปที่เมนู File -> Snippets (ถ้าเมนูไม่ขึ้นให้กด ALT ข้างไว้นะครับ)

ATOM จะเปิดไฟล์ snippets.cson ขึ้นมาให้เราแก้ไข โดยรูปแบบการเขียนจะเป็น CoffeeScript Object Notation (CSON) คล้ายๆ กับ JSON แต่ไม่มีวงเล็บเปิดปิด ใช้ tab อย่างเดียว แต่เราก็ไม่ต้องสนใจอะไรมาก เราใช้อยู่ไม่กี่คำสั่งครับ

ตรง comment ด้านบนที่เขาให้มาด้วย เขาแนะนำว่าถ้าเราจะสร้าง snippet ของตัวเองได้โดยแค่พิมพ์ snip แล้วกด tab เดียวมันจะสร้าง template ขึ้นมาให้เรา ซึ่งจะได้ code ออกมาประมาณนี้ ซึ่งเป็นตัวอย่างของการทำ snippet สำหรับไฟล์ .js โดย Snippet name คือชื่อคำอธิบายที่จะแสดงตอนที่มีคำสั่งขึ้นมาให้เลือก ส่วน prefix คือ keyword ที่เรากำหนดว่าเมื่อพิมพ์คำนี้แล้วให้แสดง snippet ตัวนี้ขึ้นมา และ body คือส่วนของโค้ดที่เราต้องการ จะเห็นว่าส่วนของ boby ถ้าเราใส่แค่บรรทัดเดียว ให้ใส่เครื่องหมาย ‘ ครอบคำสั่งได้ แต่ถ้ามีหลายๆ บรรทัดเราต้องใช้ “”” ครอบคำสั่งแทน และเราสามารถใส่ $1 เพื่อกำหนดตำแหน่งของ cursor ได้ เดียวเราลองดูจากตัวอย่างหละกัน จะได้เห็นภาพ

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

แต่ของเรา เราจะสร้าง snippet สำหรับ php และเพิ่ม snippet เข้าไปสัก 2 ตัว ให้แก้ตามตัวอย่างนี้ครับ

'.source.php':
  'Copyright by LookHin':
    'prefix': 'lookhin'
    'body': '//Copyright by LookHin [email protected]$1'

  'MySQL Select':
    'prefix': 'sqls'
    'body': """
    //Select Data
    $query = "SELECT * FROM `table_name` ORDER BY `ID` ASC";$1
    $result = mysql_query($query);
    while($line = mysql_fetch_array($result)){
      echo $line['ID'];
    }
    """

หลังจากสร้าง snippet เสร็จแล้ว ให้ลองสร้างไฟล์ test.php และใช้ ATOM เปิดไฟล์นี้ขึ้นมา จากนั้นพิมพ์คำว่า sqls เราจะเห็นว่ามี snippet ของเราขึ้นมาให้ใช้งานแล้วครับ

เริ่มด้วยการสร้างโปรเจคขึ้นชื่อ “EasyEmbedHTML”

จากนั้นเข้าไปที่ res -> layout -> main.xml และทำการเพิ่ม WebView เข้าไปในโปรเจคโดยกำหนด properties ของ WebView ดังนี้

# WebView01
   - Layout width : fill_parent
   - Layout height : fill_parent

# main.xml

ต่อไปทำการสร้างโฟลเดอร์ www ไว้ข้างใน assets และนำไฟล์ HTML และรูปที่เราจะใช้มาไว้ในโฟลเดอร์นี้

# page1.html

# page2.html

# wall-e-icon.png

# eve-icon.png

ทำการเปิด EasyEmbedHTML.java ขึ้นมาและทำการแก้ไขดังนี้ (ผมจะไม่อธิบายตัวโปรแกรมนะครับ เพราะส่วนใหญ่ได้อธิบายไว้ในบทความก่อนๆหมดแล้ว)

# EasyEmbedHTML.java

package com.LookHin.EasyEmbedHTML;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class EasyEmbedHTML extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // สร้าง WebView
    	WebView  mWebView = (WebView) findViewById(R.id.WebView01);
    	mWebView.getSettings().setJavaScriptEnabled(true);
    	mWebView.setWebViewClient(new EasyWebViewClient());
    	mWebView.loadUrl("file:///android_asset/www/page1.html");
    }

    // Extend Class WebViewClient เพื่อให้คลิก Link ต่างๆแล้วยังคงอยู่หน้าเดิม
    private class EasyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

เท่านี้ก็เรียบร้อยครับ ทำการทดสอบโปรแกรมได้เลย ^^

Download Source Code ทั้งหมดได้จาก https://www.unzeen.com/download/android/EasyEmbedHTML.zip

บทความนี้แนะนำเพียงเบืองต้น หากท่านสนใจที่จะนำไปใช้ทำโปรแกรมอย่างจริงจัง เราแนะนำให้ใช้ PhoneGap http://www.phonegap.com/ เพราะว่าเป็น Framework ที่จัดเตรียมทุกอย่างไว้ให้เราแล้ว เราไม่ต้องเขียนเองทั้งหมด

อย่างแรกสร้างโปรเจ็คขึ้นมาใหม่ก่อน ตั้งชื่อว่า “EasyWebView” หากจำวิธีสร้างไม่ได้ให้กลับไปดูบทความที่แล้วกันก่อน https://www.unzeen.com/article/927/index.html จากนั้นก็ follow ตามนี้เลย

สร้างโปรเจ็คชื่อ EasyWebView

เมื่อสร้างโปรเจ็คเสร็จแล้วก็เข้าไปที่ AndroidManifest.xml และทำการเพิ่ม <uses-permission android:name="android.permission.INTERNET" /> โดยเพิ่มเข้าไปใน node <manifest> เพื่อให้โปรแกรมของเราสามารถใช้งาน Internet ได้

เพิ่ม <uses-permission android:name="android.permission.INTERNET" /> เข้าไปตรงนี้

# และแล้วหน้าตา AndroidManifest.xml ของเราก็จะออกมาแบบนี้

จากนั้นเข้าไปที่ res -> layout -> main.xml เลือกหน้าจอเป็น 3.7in WVGA (Nexus One) และกำหนดเป็น Portrait เพื่อให้จออยู่ในแนวตั้ง จากนั้นคลิกขวาที่ Object TextView แล้วเลือก Remove

เราก็จะได้ Layout ว่างๆเหมือนในรูป ต่อไปให้ทำการเพิ่ม Object ต่างๆดังนี้ LinearLayout , EditText , Button , WebView โดยให้คลิกที่เครื่องหมายบวก (+) ในช่อง Outline หรือจะลากจาก Layouts และ Views ที่อยู่ทางซ้ายมือมาใส่ในหน้าจอก็ได้ แต่ผมลองหลายทีแล้วก็ยังไม่รู้สึกสะดวกเท่ากับการคลิก + ในช่อง Outline ซักที

เมื่อคลิกเครื่องหมายบวก (+) ในช่อง Outline ก็จะได้หน้าจอมาให้เลือกว่าเราจะเอาอะไรใส่ลงไป เริ่มจากใส่ LinearLayout ลงไปก่อน แล้วก็ตามด้วย EditText , Button , WebView

จะได้ Object ต่างๆที่เราใส่ลงไปเหมือนในรูป (หน้าจอที่ preview ออกมาอาจจะยังไม่เหมือนในรูป ให้เราไปกำหนด properties ของ object แต่ละตัวก่อนนะ)

จากนั้นทำการคลิกขวาที่ Object แต่ละตัวแล้วเลือก Properties

ทำการกำหนด Properties ให้แต่ละ Object ตามนี้

# LinearLayout01
   - Layout height : wrap_content
   - Layout width : fill_parent

# EditText01
   - Layout height : wrap_content
   - Layout width : fill_parent // กำหนดให้ object นี้ขยายความกว้างเต็มจอ
   - Layout weight : 1 // ใส่เป็น 1 จะได้มีพื้นที่เหลือให้ object อื่นด้วย
 (ถ้าไม่ใส่ Layout weight เป็น 1 ออบเจ็ค Button01 ที่อยู่ถัดไปจะหายไปจากหน้าจอเลยนะ)

# Button01
   - Layout width : wrap_content
   - Layout height : wrap_content
   - text : "Go.."
   - onClick : goWebsiteNow // เรียกใช้ Method goWebsiteNow

# LinearLayout02
   - Layout height : wrap_content
   - Layout width : fill_paren
   - Layout weight : 1

# WebView01
   - Layout width : fill_parent
   - Layout height : fill_parent

ตัวอย่าง Properties On Click ของ Button01

# ถ้าทำแล้วยังไม่เหมือนก็ copy layout main.xml ไปใช้ก่อนเลย

จากนั้นทำการเพิ่ม Method goWebsiteNow ลงใน EasyWebView.java

    public void goWebsiteNow(View view) {
		// EditText ที่เราจะพิมพ์ URL เข้ามา
		EditText  text1 = (EditText) findViewById(R.id.EditText01);

		// สร้าง WebView
		WebView  mWebView = (WebView) findViewById(R.id.WebView01);
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.setWebViewClient(new EasyWebViewClient());
		mWebView.loadUrl("http://"+text1.getText().toString());
    }

    // Extend Class WebViewClient เพื่อให้คลิก Link ต่างๆแล้วยังคงอยู่หน้าเดิม
    private class EasyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

เมื่อเพิ่ม code ลงไปแล้วให้กด CTRL + SHIFT + O ตัว Eclipse ก็จะทำการ import package ต่างๆที่ต้องใช้มาให้เราอย่างไม่น่าเชื่อ

จากนั้นก็ Run เพื่อทดสอบโปรแกรมได้แล้วจ้า ^^

1. การใช้ jQuery หลายเวอร์ชั่นร่วมกัน
2. การใช้ jQuery ร่วมกับ library อื่นๆ เช่น prototype

# กรณีแรก ใช้ jQuery หลายเวอร์ชั่นร่วมกัน

# กรณีที่สอง ใช้ jQuery ร่วมกับ library อื่นๆ เช่น prototype

แต่เมื่อเวลาผ่านไป ก็ได้มี library หลายๆตัวที่ถูกคิดค้นขึ้นมาเพื่อช่วยให้เราใช้งาน ajax ให้ง่ายขึ้น และตัวที่ผมจะเลือกใช้ก็คือ jQuery พระเอกของเรานี้เอง ซึ่งก็ได้นำไปใช้ในบทความก่อนๆของผมด้วย มันเทพมากๆ

เลิกโม้แล้วก็เข้าเรื่องและดูตัวอย่างกันเลย

อย่างแรกสุดของที่สุด ก็ต้องทำการ download jQuery จาก http://jquery.com/ ซะก่อน

จากนั้นมาสร้าง file ต่างๆเอาไว้ทดสอบตามนี้

ใจร้อนอยากทดสอบก็คลิก https://www.unzeen.com/example/jquery-ajax/ajax-jquery.html
ถ้าขี้เกียจพิมพ์ก็ download https://www.unzeen.com/example/jquery-ajax/jquery-ajax.zip

# ajax-jquery.html

# get.php

# post.php

# load.php

คงพอเห็นภาพกันแล้ว ต่อไปอธิบายให้งง เล็กน้อย (จะอธิบายทำไมเนี้ย)

เริ่มกันที่ function getData จะเป็นการเรียกใช้ method $.get ที่ jQuery ได้เตรียมไว้ให้เราอยู่แล้ว โดยที่เราก็ไม่ต้องทำอะไรมาก แค่กำหนดตัวแปรที่ต้องการจะส่ง และทำ function เพื่อรับค่ากลับมาจาก server เท่านั้น โดยจากตัวอย่างเป็นการรับค่ากลับมาแล้วนำไปแสดงใน divGetData

function ต่อไปเป็น postData อันนี้ก็เหมือนอันแรก แค่เปลียนจาก get เป็น post และรับข้อมูลมาแสดงผลเหมือนกัน

ส่วนอีกตัว loadData ตัวนี้ใช้สำหรับ load ข้อมูลมาแสดงใน div โดยเฉพาะ ทำให้ง่ายขึ้นหากเราต้องการแค่จะน้ำข้อมูลมาแสดงผล โดยไม่ต้องประมวลผลอะไรเพิ่มเติม

การจะเลือกว่าจะใช้ get , post , load ก็ขึ้นอยู่กับความเหมาะสมของงานนะครับ ใช้วิจารณาญาณเอา !!

ขั้นแรกทำการติดตั้ง CSSViewer กันก่อน โดยเข้าไปที่

https://addons.mozilla.org/en-US/firefox/addon/13357

ติ๊กที่ช่อง Let me install this experimental add-on.
จากนั้นคลิก “Add to Firefox” เพื่อทำการติดตั้ง

เมื่อทำการติดตั้งเรียบร้อยแล้ว ทำการปิดและเปิด FireFox ใหม่อีกรอบ เพื่อเอาฤกษ์เอาชัย

จากนั้นเปิดเข้าไปยัง website ที่ต้องการ ของผมก็เข้า https://www.unzeen.com/ ซะเลย

ต่อไป ไปที่ Tools -> CSSViewer

จากนั้นเลือน mouse ไปยังตำแหน่งที่เราต้องการจะดูว่าใช้ CSS อะไรได้เลย

ถ้าต้องการจะปิด ก็ให้เข้าไปที่ Tools -> CSSViewer อีกครั้งก็จะเป็นการปิดการใช้งาน Ads-on ตัวนี้นะครับ

ขอให้สนุกกับการ แอบดู css ชาวบ้านครับ

ดูตัวอย่างก่อน ได้ที่นี้เลย https://www.unzeen.com/example/setFormValue.html

ต่อไปมาเริ่มดู code ทั้งหมดกันต่อเลยดีกว่า

# setFormValue.html

  
  

  
  

  
  

  
    aa
    bb
    cc
    dd
    ee
  
  

  
  
  
  

  
  
  
  
  

  
    1
    2
    3
    4
    5
  

จากตัวอย่างจะเห็นว่ามี function setFormValue ซึ่ง function นี้จะทำการค้นหา input ที่มีชื่อตรงกับ ตัวแปร objName และทำการกำหนดค่าที่อยู่ในตัวแปร strValue ให้กับ input ตัวนั้นๆ ฟังดูง่ายๆ อธิบายเท่านี้ ^_^

เริ่มจากการ download jQuery มาก่อน http://www.jquery.com/
จากนั้นก็ download Validate Plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/

ต่อไปทำการ unzip และนำ jquery-1.3.2.js และ jquery.validate.js ไปไว้ใน folder /js และก็สร้าง file jquery.start.js ขึ้นมาด้วย เพื่อกำหนดค่าเริ่มต้นให้ jQuery ทำงาน โครงมีสร้างของ folder และ file ดังนี้

โครงสร้างของ folder และ file

- /js/jquery-1.3.2.js
- /js/jquery.validate.js
- /js/jquery.start.js
- /css/custom-styles.css
- /example.html

หรือจะ download file ตัวอย่างที่ผมทำไว้ไปดูก่อนก็ได้นะครับ น่าจะเข้าใจง่ายขึ้น
https://www.unzeen.com/download/jquery-css-validation-plugin.zip

ต่อไปมาดูว่าใน file ต่างมีอะไรบ้าง

# jquery.start.js

// Start
$(document).ready(function(){
	// Validate Form
	$("form").each(function(){
		$(this).validate();
	});
 }
);

# custom-styles.css

/************************** Form Input ************************************/
form label{
	float: left;
	text-align: left;
	width: 120px;
}
input, textarea, select {
	padding: 2px;
	margin: 2px;
}
input[type="text"], input[type="password"], textarea {
	border: 1px solid #CCCCCC;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	border: 1px solid #0033FF;
}

form.required{

}

label.error {
	float:none;
	color: red;
	font-style: italic;
	display:none;
}

# example.html

    

    

    
    
    


Data Form

  Name : 
  
  

  Date : 
  
  

  Password : 
  
  

  Data : 
  
  

  Checkbox : 
  
  
  
  Please select 2 item.
  

  Radio : 
  
  
  
  This field is required.
  

  Select : 
  
    Please Select
    xx
    rrr
  
  

  File : 
  
  

  Data : 
  
  

   
  
  

  

จากตัวอย่าง example.html เราจะเห็นว่าถ้าหากว่าต้องการให้ input ตัวไหนทำการ validate เราก็แค่กำหนดให้มี class=”required” เท่านั้น ซึงก็ง่ายดีอยู่แล้ว แต่เราสามารถทำให้ง่ายขึ้นได้อีกโดยการใช้ dreamweaver ช่วย

มาต่อกันเลย :)

ทำการเปิด example.html โดยใช้ Dreamweaver จากนั้นให้ทำการคลิกที่ input ที่ต้องการ และเลือก class เป็น required ดังรูป

เพียงเท่านี การทำ validate form ที่เคยเป็นเรืองยาก ก็จะง่ายขึ้นทันตากเห็น

ส่วนเรืองการใช้งานขั้นสูงก็ศึกษาดูจากตัวอย่างที่ download มาจาก http://bassistance.de/jquery-plugins/jquery-plugin-validation/ เองนะครับ ผมแนะนำแค่เบื่องต้น สูงกว่านี้ผมทำไม่เป็นเหมือนกัน หุหุ

ขั้นต่อไปทำการ unzip และนำ file ที่ได้ไปไว้ใน folder js (ของคุณจะตั้งเป็นอะไรก็แล้วแต่ แต่ของผม js) จากนั้นทำการลบ file ของ fckeditor ที่ไม่จำเป็นออก หรือถ้าหากไม่แน่ใจว่า file ไหนใช้บ้างไม่ใช้บ้าง ก็เอาไว้ทั้งหมดนั้นหละครับ ไม่เป็นไรไม่ต้องลบออกก็ได้ แต่มันก็จะดูรกๆ ไปหน่อย ไม่ค่อยงามนัก ซึ่งเราชอบแต่ของงามๆ (ไปอ่านต่อข้างใน)

โครงสร้างของ folder ต่างๆ ที่ผมใช้

	- /js/jquery-1.3.2.js
	- /js/jquery.start.js
	- /fckeditor/
	- /example.html

– ต่อไปสร้าง file jquery.start.js ใน folder js โดยมีข้อมูลดังนี้

// Start
$(document).ready(function(){
	// FCKeditor
	$("textarea.FCKeditor").each(function(){
		var oFCKeditor = new FCKeditor(this.name);
		oFCKeditor.BasePath	= 'fckeditor/' ;
		oFCKeditor.Config['SkinPath'] = 'skins/office2003/';
		oFCKeditor.Width = '820';
		oFCKeditor.Height = '500px';
		oFCKeditor.ReplaceTextarea() ;
	});
  }
);

จาก code จะเห็นว่ามีการ loop หา textarea ที่มี class ชื่อ FCKeditor เพื่อทำการ replace เป็น FCKEditor และกำหนด properties ต่างๆของ FCKEditor ที่ file นี้ด้วย

– จากนั้นสร้าง file example.html โดยมีข้อมูลดังนี้

  
  

    
    
    






Title : 







Editor : 

จากตัวอย่างของ HTML นี้จะเห็นได้ว่า input ที่เป็น textarea ได้มีการเพิ่ม class ชือ FCKeditor เข้าไปด้วย เพื่อทำการ replace textarea ตัวนี้ให้เป็น FCKEditor

หากดูแล้วยัง งง ก็ download ตัวอย่างที่ผมทำไว้ไปดูก่อนก็ได้นะครับ น่าจะเข้าใจง่ายขึ้น
https://www.unzeen.com/download/jquery-css-fckeditor.zip

ต่อไปเวลาที่เราต้องการใช้งาน FCKEditor ไม่ว่าจะต้องการกีตัวๆในหน้านั้นๆ เราก็เพียงเพิ่ม class FCKeditor เข้าไปใน textarea ที่ต้องการเท่านั้น เพียงเท่านี้ ชีวิตก็ง่ายขึ้น (หรือเปล่าหว่า)

อย่างแรกเริ่มด้วยการ enable ให้ gmail ยอมให้เราใส่ gadget จากภายนอกเข้าไปได้ก่อน ซึ่งปกติแล้ว gmail จะให้เราเลือก gadget เพิ่มได้จากแค่ Labs ในเมนู Settings เท่านั้น

ซึ่งเราสามรถทำการเพิ่ม gadget จากภายนอกเข้าไปได้โดยเลือก Add any gadget by URL ให้เป็น Enable
โดยเข้าไปที่ Settings -> Labs จากนั้นคลิกเลือกให้เป็น Enable (เข้าไปอ่านต่อข้างใน)

ทำการ Enable “Add any gadget by URL”

จะเห็นว่าเมือทำการ Enable “Add any gadget by URL” จะมี เมนูชื่อ Gadgets ขึ้นมาดังรูป

จากนี้ไปเราก็หา Gadget ต่างมาเพิ่มเข้าไปใน gmail ได้แล้ว โดยทดสอบทำการเพิ่ม https://twittergadget.appspot.com/gadget-gmail.xml เข้าไปก่อนก็ได้ครับ

แต่นั้นไม่ใช่ที่เราต้องการ อย่างเรามันต้องเขียนเองให้ได้อย่างน้อยก็ Hello World !

เริ่มขั้นตอนถัดไปเขียนโปรแกรมกันเลย

Gadget ที่ทาง google อนุญาตให้ทำไปใส่ใน gmail นั้นก็เป็นเพียงแค่ file XML ที่มีโครงสร้างการแสดงผลเป็น HTML และใช้ JavaScript เท่านั้น ซึ้งนี้เองทำให้คนทำเว็บไซต์เป็นอาชีพอย่างเราไม่เป็นปัญหาที่จะต้องไปเรียนรู้อะไรใหม่ มาเริ่มที่ code HelloWorld.xml กันเลย

  

		
		
		
		
		
		
		
	

  
     
	   Gmail Gadget

	   Hello world!

	   Gmail Gadget

     ]]>
  

  
    Hello world!
	   
Gmail Gadget
     ]]>
  

จาก code ที่เห็นไม่มีอะไรนอกจาก XML กับ HTML ไม่ต้องอธิบาย เอาเป็นว่า ข้อมูลที่อยู่ใน Content ที่มี View=”home” จะถูกนำมาแสดงด้านซ้ายมือ และ view=”canvas” จะถูกนำไปแสดงในพื้นที่แสดงผลตรงกลาง

จากนั้นทำการ upload HelloWorld.xml ไปไว้ที่ server ของเราได้เลย อย่างของผมก็เอาไปไว้ที่ https://www.unzeen.com/article/category/all-categories/index.html

ต่อไปทำการนำ link ของ HelloWorld.xml ไปใส่ในช่อง Add a gadget by its URL: ดังรูป

รอสักครู gadget ที่เราสร้างไว้ก็จะมาแสดงผลด้านซ้ายมืออย่างที่เห็น

และเมื่อทำการคลิกที่ชื่อ Gadget ก็จะเป็นการเปิดหน้าด้านขวามือขึ้นมา

จบ

.
.
.
.

ขอขอบคุณ

http://megamisc.blogspot.com/2009/07/twitter-gadget-twitter-gmail.html

ที่ทำให้ผมรู้ว่า Gmail ก็สามารถทำ Gadget ต่างๆเพิ่มเข้าไปได้

http://code.google.com/intl/th/apis/gadgets/docs/gs.html

ที่ทำให้รู้ว่า Gadget เขียนได้ง่ายซะขนาดนี้

และที่ขาดไม่ได้ ขอขอบคุณ คุณนั้นหละ ที่เสียเวลาเข้ามาอ่าน

บทความต่อไปรอพบกับ Hello World! กับ Google App Engine ใครเขียนแล้วก็ช่างแต่ผมจะเขียนอีก