ติดตั้ง ionic2 สำหรับพัฒนา Application

Ionic เป็น Framework ที่ได้รับความนิยมในการพัฒนา Mobile Application มากในปัจจุบัน ซึ่ง ณ ตอนนี้ ได้ออก Version 2 ออกกมาแล้ว ใบบทความนี้จะเสนอขั้นตอนการติดตั้ง Ionic2 สำหรับพัฒนาแอปพลิเคชั่น

1. Download และติดตั้ง Node JS จาก www.nodejs.org
2. ทดสอบว่าติดตั้ง Node JS สมบูรณ์หรือไม่โดยพิมพ์ npm ที่ command line ถ้าขึ้นขอความดังรูปแสดงว่าติดตั้ง Node JS เรียบร้อยแล้ว

3. พิมพ์คำสั่ง npm install -g cordova ดังรูป

4. เมื่อลง cordova แล้ว ให้พิมพ์คำสั่ง npm install -g cordova ionic เพื่อ ลง ionic

5. ทดสอบสร้าง Application โดย ไปที่ Folder Documents
พิมพ์ cd Documents กด enter และพิมพ์ ionic start --v2 myApp blank เพื่อสร้าง Aplication

6. พิมพ์  n 

7. พิมพ์ cd myApp เพื่อเข้าไปที่ folder project  และพิมพ์ ionic serve เพื่อ run Application หากมีหน้าต่างแจ้งเตือนให้กด Allow

ผลลัพธ์ที่ได้คือ  Application ดังรูป

8. ทดลองแก้  Header ของ Application  โดยไปที่  Documents > myApp > src > pages  และเปิดไฟล์ home.html โดย editor ใดก็ได้

9. แก้ code ในไฟล์ ้home.html เป็น

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>My First Ionic2</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

เมื่อ save แล้ว refresh web browser ผลลัพธ์ที่ได้ คือ

การหาที่อยู่จาก latitude longitude โดย google map api jquery

ในการทำ application  ทั้ง mobile  และ web หากเรามีข้อมูล latitude longitude  แต่ไม่รู้ว่า latitude longitude  นั้นอยู่ที่ไหน เราสามารถหาที่อยู่ของ latitude longitude  โดยใช้ google api และ jquery ดังตัวอย่างดังนี้

<!-- ให้ใช้งาน jquery ได้  -->
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

<!-- ให้ใช้งาน jquery ได้ -->

<script>
    //เรียกใช้ google api โดยใช้ jquery
    $.get("http://maps.googleapis.com/maps/api/geocode/json?latlng= latitudeที่ต้องการหา, longitudeที่ต้องการหา&sensor=true&language=th").done(function(response){
        //response คือ json object ที่ส่งกลับมา
        var json=response;
       
        var add=json.results[0].formatted_address;//สร้างตัวแปร add เก็บที่อยู่
       
        document.write(add);//พิมพ์ที่อยู่ออกมา
});

</script>
     

การเรียกโปรแกรมภาษา python โดย php

ภาษา python นับว่าเป็นภาษาที่มาแรงในปัจจุบัน เพราะความง่ายในการเขียน และอ่าน code นอกจากนั้นยังสามารถนำมาประยุกกับงาน machine learning ,  big data ได้อีกด้วย หากเราต้องการแสดงผลของโปรแกรม python ออกทางหน้าเว็บ เราสามารถแสดงได้โดยใช้ ภาษา PHP ได้ดังนี้

code ภาษา PHP

<?php

//สร้างตัวปรรเก็บ path ที่อยู่ ของ python interpreter
$py_location="C:\\Users\\DELL\\AppData\\Local\\Programs\\Python\\Python35-32\\python.exe";

//สร้างตัวแปรเก็บที่อยู่ไฟล์ source code ภาษา python  และส่ง command line agument  Projectsoft.biz
$py_file_location="C:\\Users\\DELL\\Desktop\\python\\hello.py Projectsoft.biz";

$cmd=$py_location." ".$py_file_location;//สร้างคำสั่งให้ python รัน script ใน  ไฟล์ hello.py

system($cmd,$output);//เรียกใช้ภาษา python โดยเก็บผลลัพธ์ไว้ที่ตัวแปร  $output

echo $output[0];//แสดงผลลัพธ์ Hello Projectsoft.biz

?>

code ภาษา Python ไฟล์  hello.py

import sys
print("Hello ") //แสดง text  Hello
print(sys.argv[1])//แสดงค่าที่ได้จาก command line agument

Upload file แบบ ajax ด้วย jQuery

เพื่อประสบการณ์การใช้งาน Web Application ที่ดีสำหรับผู้ใช้ การ Upload ไฟล์นั้นเราให้การ Upload อยู่ในรูปแบบ ajax โดย ตัวอย่างการ Upload ไฟล์แบบ ajax เป็นดังนี้

<!--  เรียกใช้งาน jquery -->
<script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<!-- สร้างฟอร์ม  Upload -->
<form id="upload_form" method="post">

<!-- สร้าง input ตัวเลือกไฟล์ -->
<input  type="file" id="my_file" name="my_file" />
<!-- สร้างปุ่ม Upload โดยหากกด ปุ่ม  upload จะ ไปทำงานที่ function ชื่อ save_upload() -->
<button type="button" onclick="save_upload()"  >Upload</button>


<!--  แสดงข้อความแจ้งเตือน หากไฟล์ไม่ใช่รูปภาพ-->
<div id="err_div" style="color: red" ></div>
<br />
<!--  แสดงสถานะการ Upload ที่เสร็จแล้วกี่ %-->
<div id="upload_status_bar" ></div>

</form>

<script>

 function save_upload()
 {

   var file_name= $("#my_file").val().toLowerCase();//เปลี่ยนชื่อไฟล์เป็น ตัวพิพม์เล็ก

   //check ประเภทไฟล์
   if( (file_name.indexOf(".jpg")==-1)&&(file_name.indexOf(".jpeg")==-1)&&(file_name.indexOf(".png")==-1)&&(file_name.indexOf(".gif")==-1) )
   {
 $("#err_div").html("Not picture file !");//แจ้งเตือนหากไฟล์ไม่ใช่ไฟล์รูปภาพ
 return;
   }
 
    //-----------upload ไฟล์ ---------
           
                    var fd = new FormData(document.getElementById("upload_form"));//สร้าง object ไฟล์ เพื่อส่งไป Upload
                     
                       $.ajax({
                     
                             xhr: function() {
                           
var xhr = new window.XMLHttpRequest();
 
xhr.upload.addEventListener("progress", function(evt) {
 if (evt.lengthComputable) {
   var percentComplete = evt.loaded / evt.total;
   percentComplete = parseInt(percentComplete * 100);

    //แสดง % ที่เสร็จแล้ว
$("#upload_status_bar").html("<h4>"+percentComplete+"%</h4>");

 
 }
}, false);
 
return xhr;
                                },
                              url: "upload.php",//ไฟล์ที่ใช้ upload
                              type: "POST",
                              data: fd,//Object ไฟล์ที่ Upload
                              enctype: 'multipart/form-data',
                              processData: false,
                              contentType: false
                            }).done(function( response ) { //response คือ ข้อมูลที่ส่งกลับมา ที่ส่งกลับมา
                           
//clear สถานะการ upload
$("#upload_status_bar").html("");
//clear input ไฟล์ที่เลือก
$("#my_file").val('');

                           });
              //-----------upload ไฟล์ ---------

 }
</script>

ไฟล์ upload.php ซึ่งคือ ไฟล์ที่ใช้ Upload ฝั่ง server
<?php

$file=$_FILES["my_file"];//เก็บไฟล์ที่ upload มาไว้ในตัวแปร $file

copy($file["tmp_name"],$file["name"]);//ย้ายไฟล์มาที่ server

echo "ok"; //ส่ง text ok กลับไปที่  client

?>

ตัวอย่างการเขียนโปรแกรมตัดคำภาษาไทยต้วย PHP

การตัดคำภาษาไทยนั้น projectsoft.biz ได้สร้างโปรแกรมบริการการตัดคำภาษาไทยที่

http://projectsoft.biz/cut_thai.php?word=คำภาษาไทยที่ต้องการตัด

สามารถใช้งานได้เลยโดยส่งค่าประโยคภาษาไทยแบบ GET เข้าไป ตาม URL

เช่น http://projectsoft.biz/cut_thai.php?word=อาหารร้านนี้อร่อย ผลลัพธ์ที่ได้คือ

อาหาร | ร้าน | นี้ | อร่อย |

หากนักพัฒนาต้องการ เชื่อมต่อ Web Application เพื่อใช้บริการตัดคำสามารถเรียกใช้ได้ตามตัวอย่าง

<?php

    header('Content-Type: text/html; charset=utf-8');
   
    $word=file_get_contents("http://projectsoft.biz/cut_thai.php?word=อาหารร้านนี้อร่อย");
   
    echo $word;// $word จะมีค่าผลลัพธ์การตัดคำ คือ อาหาร | ร้าน | นี้ | อร่อย |

?>

การ resize ภาพด้วย PHP

เพื่อเป็นการประหยัดทรัพยากรของ Server เว็บ Application ควรสามารถที่จะปรัปเปลี่ยนขนาดรูปภาพ  ( resize )ของผู้ใช้ที่ upload มาไว้ที่ server ได้

ตัวอย่างการ  resize ภาพโดยใช้ PHP

<?php

 
     /*---------- การ resize ภาพ ----------*/
   
     $original=imagecreatefromjpeg("picture.jpg");//สร้า object รูปภาพจากไฟล์ "picture.jpg"
   
     $size=getimagesize ("picture.jpg");// หาขนาดภาพปัจจุบัน
     $w_old=$size[0];//ความกว้างของ ภาพปัจจุบัน
     $h_old=$size[1];//ความสูของ ภาพปัจจุบัน
   
     $w=$w_old/5;//กำหนดความกว้างของ ภาพใหม่โดยกำหนดให้เป็น 1 ใน 5 ของความกว้างเดิม
     $h=$h_old/5;//กำหนดความสูงของ ภาพใหม่โดยกำหนดให้เป็น 1 ใน 5 ของความสูงเดิม
 
     $img_new_size=ImageCreateTrueColor($w ,$h);//สร้าง object ภาพใหม่ ชื่อว่า $img_new_size
 
 //ทำการ resize ภาพ 
     imagecopyresized ( $img_new_size, $original, 0, 0, 0, 0, $w , $h , $w_old ,$h_old);
     ImageJPEG($img_new_size,"new_picture.jpg");
  //กำหนดให้ภาพที่ resize แล้ว ชื่อว่า "new_picture.jpg"
 
echo "<img src='picture.jpg' />";//แสดงรูปภาพก่อนเปลี่ยนขนาด
echo "<img src='new_picture.jpg' />";//แสดงรูปภาพหลังเปลี่ยนขนาด


?>

ผลลัพธ์ที่ได้ดังนี้ รูปด้านซ้ายคือ รูปก่อน resize ส่วนรูปขวาคือ รูปที่ resize แล้ว
จะเห็นว่าขนาดเป็น 1 ใน 5 ของรูปเดิม

เขียนโปรแกรมดูตำแหน่ง Latitude Longitude ใน Android Application

ถ้าเราต้องการหาว่าตำแหน่ง Latitude Longitude ปัจจุบันของ Android Device เราสามารถรถใช้ LocationManager เพื่อหาตำแหน่ง Latitude Longitude  ได้ดังนี้

1. ใน ไฟล์ androidmanifest.xml ให้เพิ่ม permission
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
เข้าไปใน <manifest>


2.ในไฟล์  XML Layout ให้เพิ่ม textview tag

<TextView    android:id="@+id/lat_lng"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="" />

ขึ้นมา เพื่อ แสดง Latitude Longitude

3. ในไฟล์ .java ให้ Import class เพื่อหา Latitude Longitude

import android.location.Location;
import android.location.LocationManager;

4. ใน onCreate method ให้ เพิ่ม code  เพื่อแสดง Latitude Longitude ดังนี้

@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    try    {

        //สร้าง object สำหรับ หา latitude  longitude

        LocationManager lm = (LocationManager)getSystemService(this.LOCATION_SERVICE);
        Location location = lm.getLastKnownLocation(LocationManager.GPS_PROVIDER);

        double longitude = location.getLongitude();//รับค่า longitude
        double latitude = location.getLatitude();//รับค่า latitude
        

        //แสดง latitude longitude ใน TextView

        TextView t=(TextView)findViewById(R.id.lat_lng);

        t.setText("Longitude:"+String.valueOf(latitude)+"\nLongitude:"+String.valueOf(longitude));

    }
    catch (SecurityException e)
    {

    }



}