PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง mobile app dictionary อย่างง่าย ด้วย ionicframework ตอนที่ 6

07 September 2014 By


มาลองสร้าง dictionary ไว้ใช้เอง ด้วย ionicframework นี้
เราจะใช้งาน dict longdo เขามี api อย่างง่ายให้แล้ว แต่คงต้อง
เอามาปรับให้เข้ากับ angularjs อีกนิดหน่อย
 
อธิบายหลักการทำงาน พอเข้าใจกันก่อน
เราจะมีหน้า app สำหรับพิมพ์คำค้นหา โดยกำหนดว่า 
จะเริ่มค้นหาคำที่พิมพ์เมื่อ มีความยาวคำตั้งแต่ 2 คำขึ้นไป
โดยส่งค่าคำค้นไปเรียกไฟล์ ที่เราทำการไปดึงค่าจาก longdo dict 
แล้วแปลงเป็น json object อีกที
 
สิ่งที่จะได้รู้เพิ่มเติม เกี่ยวกับการใช้งาน angularjs directive และ service เพิ่มเติม
ได้แก่ (บางรายการมีในเนื้อหา การใช้งาน angularjs ดูเพิ่มในหมวด angularjs ได้)
ng-keyup เมื่อกดป่ม แล้วปล่อย สำหรับแป้นพิมพ์
ng-keydown  เมื่อกดปุ่ม ขณะกดยังไม่ปล่อย สำหรับแป้นพิมพ์
ng-click  เมื่อคลิก ถ้ามือถือก็คือ เมื่อ กดที่ รายการใดๆ
ng-show  ซ่อนหรือแสดงเนื้อหาหรือข้อมูลหรือส่วนที่กำหนด
ng-bind-html   แปลงค่าข้อมูลที่ได้รับแสดงเป็นแบบ html
 
service ได้แก่
$http  สำหรับส่งค่าเพื่อเรียกใช้ข้อมูล คล้าย ajax
$timeout  สำหรับตั้งเวลา คล้าย setTImeout ใน javascript
 
โครงสร้างไฟล์
index.html  ไฟล์หลัก
app.js ไฟล์ javascript 
get_dict.php ไฟล์ php สำหรับเรียกใช้และแปลงข้อมูลเป็น json object
tpl\mydict.html  ไฟล์ template ในโฟลเดอร์ tpl แสดงหน้าฟอร์มค้นหา
 
 
1. โค้ดไฟล์ index.html
ไฟล์นี้จะเป็นไฟล์ธรรมดา เราจะใช้งาน navigation โดยใช้ ion-nav-view
เนื้อหาเกี่ยวกับส่วนนี้ มีในบทความก่อนหน้าไม่ขอกล่าวถึง
 
<!DOCTYPE html>
<html ng-app="myDictionary"> 
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="css/ionic.css" rel="stylesheet">
        <script type="text/javascript" src="js/ionic.bundle.min.js"></script>  
        <script type="text/javascript" src="app.js"></script>
        <style type="text/css">
            table,table tr td{border: 1px solid #E2E2E2;padding:5px;}
        </style>
        <title>My Dictionary</title>
    </head>
    <body ng-controller="myIonicHome">
               
    <ion-nav-bar class="bar bar-header bar-balanced">
    </ion-nav-bar>             
    <ion-nav-view animation="slide-in-up">

    </ion-nav-view>
             
    </body>
</html>
 
สังเกตว่าจะมีการใส่ css style เข้ามาใน header 
 
        <style type="text/css">
            table,table tr td{border: 1px solid #E2E2E2;padding:5px;}
        </style>
 
ที่ต้องเพิ่มเข้ามา เนื่องจาก ค่าที่ได้รับจาก การค้นหาด้วย longdo dict จะมี
การใช้งานตาราง การกำหนดตรงนี้ เพื่อให้มีผลกับการแสดง ตารางให้สวยงามเท่านั้น
 
2. ไฟล์ mydict.html
ไฟล์ template นี้จะถูกเรียกใช้งานทันที ที่เราเปิด app เข้ามา เนื่องจากเรามีการ
กำหนดการใช้งาน ion-nav-view และมีการตั้งค่าใน app.js
 
<ion-view title="Dictionary">
<div class="bar bar-subheader item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" ng-model="keyword" ng-keydown="setkeyword()" ng-keyup="showMydict(keyword,event=$event)" placeholder="Search">
  </label>
  <button ng-click="keyword='';dict_result='พิมพ์คำศัพท์ที่ต้องการค้นหา';showloading=false;" class="button button-clear">
    Cancel
  </button>
</div>
<ion-content  class="scroll-content ionic-scroll  has-subheader">  
<div class="list card">


  <button ng-show="showloading" class="button button-icon button-block">
  <i class="icon ion-loading-c"></i> Loading...
</button>
  <div ng-show="!showloading" class="item item-text-wrap" ng-bind-html="dict_result">
    
  </div>



</div>   

</ion-content>   
</ion-view>
 
สังเกต บรรทัดที่ 2 กับ 11
ปกติ เราจะมีแค่ header ด้านบน แต่กรณีนี้ เราจะมี subheader
css class ชื่อ bar-subheader หมายถึง ส่วนที่แสดงถัดต่อลงมาจาก header
ดังนั้นความสัมพันธ์ กับ บรรทัดที่ 11 ส่วนของ เนื้อหา จะต้องขยับลงมาอีก
จึงมีการใช้งาน css class ชื่อ has-subheader ให้เนื้อหาขยับลงมาให้เพมาะสม
 
มาดูส่วนของช่องค้นหา
 
  <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
    <input type="search" ng-model="keyword" ng-keydown="setkeyword()" ng-keyup="showMydict(keyword,event=$event)" placeholder="Search">
  </label>
 
ng-model="keyword"
มีการเก็บค่าของช่องค้นหาไว้ในตัวแปร keyword ด้วย ng-model
 
ng-keyup="showMydict(keyword,event=$event)"
 
เรียกใช้งานฟังก์ชั่น showMydict() เมื่อมีการกรอกข้อมูล กรณีกดแป้นพิมพ์ และปล่อย
แล้ว โดยทำการส่งค่า keyword เข้าไปในฟังก์ชั่น พร้อมกับ ตัวแปร event ของแป้นพิมพ์
โดยตัวแปร event ของแป้นพิมพ์นี้ เราจะเอาไปเช็คการกดปุ่ม บางปุ่ม โดยใช้งาน 
event.keyCode เป็นเงื่อนไขว่า ถ้ากดปุ่มที่มีรหัสนี้ ทำงานหรือไม่ เป็นต้น
 
ปุ่ม cancel 
 
 <button ng-click="keyword='';dict_result='พิมพ์คำศัพท์ที่ต้องการค้นหา';showloading=false;" class="button button-clear">
    Cancel
  </button>
 
อันนี้ไม่มีอะไร มีการใช้การ ng-click เมื่อกดแล้ว ให้ไปกำหนดค่า เช่น
keyword='' ให้ค่า keyword เป็นค่าว่าง
dict_result='พิมพ์คำศัพท์ที่ต้องการค้นหา'  ให้ค่าในส่วนเนื้อหา ผลลัพธ์เป็นข้อความเริ่มต้น
showloading=false  ให้ค่าสำหรับการแสดง ข้อควม loading เป็น false คือ ไม่แสดง
 
ข้อความ loading
 
  <button ng-show="showloading" class="button button-icon button-block">
  <i class="icon ion-loading-c"></i> Loading...
</button>
 
ในที่นี้จะใช้ปุ่ม เป็นข้อความ loading มีการกำหนดการแสดง ตามตัวแปร showloading 
ขึ้นกับว่า ถ้าเป็น true ก็จะแสดง ถ้าเป็น false ก็ไม่แสดง
ng-show="showloading" 
 
ส่วนสุดท้ายในไฟล์ template 
ส่วนแสดงเนื้อหา และรายละเอียดผลลัพธ์ทีได้
 
  <div ng-show="!showloading" class="item item-text-wrap" ng-bind-html="dict_result">
    
  </div>
 
มีการกำหนดให้แสดง ด้วย ng-show แต่ให้ใช้ค่า เป็นตรงข้าม กับตัว loading 
!showloading  คือ ถ้าตัว loading แสดง เนื้อหาจะไม่แสดง เป็นต้น
ส่วนของการแสดงผลลัพธ์นี้ มีการใช้งาน ng-bind-html ใช้สำหรับแสดง
เนือหาที่ได้ในรุปแบบ html
ng-bind-html="dict_result"  แสดงค่าจากตัวแปร dict_result ในรูปแบบ html
 
 
3. ไฟล์ app.js
คำอธิบายแสดงในโค้ด
 
angular.module("myDictionary", ["ionic"])  // สร้าง module
.config(function ($stateProvider, $urlRouterProvider) { // ตั้งค่า $urlRouterProvider
    $stateProvider
    .state('intro', { // กำหนด ชื่อ state 
        url: '/',  // เข้ามาหนักแรก
        templateUrl: 'tpl/mydict.html',  // ให้แรียกใช้ ไฟล์ template mydict.html
        controller: 'welcomeCtrl'  // กำหนด ชื่อ controller 
    })    
    $urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ไปที่ url เท่ากับ / 
})
// กำหนดการใช้งานใน welcomeCtrl controller เรียกใช้ $http และ $timeout
.controller("welcomeCtrl",function($scope,$http,$timeout){ 
    
    var timeoutID=null; // ค่า id สำรหับกำหนด timeout ใน angularjs เรียกว่า promise
    $scope.dict_result="พิมพ์คำศัพท์ที่ต้องการค้นหา"; //กำหนดค่าเริ่มต้นของผลลัพธ์
    $scope.showloading=false;  // ค่าเริ่มต้นการแสดงของ loading
    
    // ฟังก์ชั่น แสดงข้อมูลการแปล รับค่า keyword และ event ของ แป้นพิมพ์เข้ามาด้วย
    $scope.showMydict = function(keyword,event){
        
        // ถ้าความยาวของข้อความมากกว่า 2 และ ไม่การกดปุ่มลบ 
      if(keyword.length>2 && event.keyCode!=8){ // 8 เป้น keycode ของปุ่มลบ backspace
        timeoutID=$timeout(function(){ // กำหนดการทำงานแบบหน่วงเวลา 
            $scope.showloading=true;  // เมื่อเริ่มทำงานให้แสดงปุ่ม loading
            $scope.dict_result=""; // ให้ค่าผลลัพธ์ เป็นค่าว่าง
            // ใช้ service $http เรียกข้อมูล แบบ jsonp ส่งค่า keyword และ callback ไป
            $http.jsonp("http://localhost/ninenikc/demo/ionic/get_dict.php?callback=JSON_CALLBACK&keyword="+keyword).success(function(result){
                // พอสำเร็จ ได้ผลลัพธ์ นำมาไว้ในตัวแปร ผลลัพธ์ เพื่อไปแสดง
                $scope.dict_result=result[0].data_result; // เนื่องจากข้อมูลเป็นชุดเดียว จึงใช้ key เท่ากับ 0
                $scope.showloading=false; // ซ่อนปุ่ม loading
            });
        },2000); // เริ่มทำงานน 2 วินาที // 1000 เท่ากับ 1 วินาที
      }
    };
    
    // ฟังก์ชั่น ยกเลิกการหน่วงเวลาเพื่อเริ่มต้นนับใหม่
    // ที่ต้องมีส่วนนี้เพื่อ ต้องการให้ป้อนคำให้เสร็จก่อน ค่อยทำงาน
    $scope.setkeyword = function(){
        $timeout.cancel(timeoutID); // คำสั่งยกเลิกการหน่วงเวลา เพื่อเริ่มนับค่าใหม่
    };
})
.controller("myIonicHome",function($scope){ 

});
 
 
4. ไฟล์ get_dict.php
ไฟล์ นี้ใช้สำหรับสร้าง json string แล้วส่งค่าไปใช้งาน
โดยจะทำการไปดึงข้อมูลการแปลจาก longdo dict มาแล้วมาจัดเก็บ
ในรูปแบบ array แล้วแปลงเป็น json string อีกที
 
<?php
header("Content-type:application/json; charset=UTF-8");      
header("Cache-Control: no-store, no-cache, must-revalidate");         
header("Cache-Control: post-check=0, pre-check=0", false);         
// ตรวจสอบว่ามีการส่งคำค้นมาหรือไม่  
if(isset($_GET['keyword']) && trim($_GET['keyword'])!=""){  
    $keyword=trim($_GET['keyword']);  
    // นำผลลัพธ์การค้นหา จาก longdo dictionary มาไว้ในตัวแปร  
    $data=file_get_contents("http://dict.longdo.com/mobile.php?search=".$keyword);  //  
    $data_result=strip_tags($data,"<table><td><tr><font><style><br>"); // แสดงส่วนของเนื้อหาที่จำเป็นต้องแสดง  
}else{ // กรณีไม่มีการส่งคำค้นมา  
    $data_result="โปรดระบุคำที่ต้องการแปล"; // แสดงข้อความแจ้งเตือน  
}  
$json_data[]=array(
    "keyword"=>trim($_GET['keyword']),
    "data_result"=>$data_result
);	
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";    
}else{
echo $json;
}    
exit;
?>
 
มาดูตัวอย่าง การทำงานของ dictionary ฝีมือเราดู สามารถใช้ phonegap แปลงเป็น
ไฟล์ สำหรับมือถือ ไว้ใช้งานได้ 
 


 
 
 
 
 
 
 
 
 



เนื้อหาที่เกี่ยวข้อง



Tags:: dictionay mobile app ionic

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง