การ scroll ( เลื่อนหน้าเว็บ ) โดยใช้ Jquery

สำหรับ Web Application ที่มีความยาวของเนื้อหาที่ผู้ใช้ต้อง เลื่อน scroll ลงมาเพื่อดูเนื้อหาด้านล่าง หรือการกลับขึ้นไปดูเนื้อหาด้านบนซึ่งทำให้ไม่สะดวกต่อผู้ใช้

jquery สามารถแก้ปัญหาได้คือการเลื่อน scroll อัตโนมัติ โดยใช้คำสั่ง

$('html,body').animate({ scrollTop: 400 }, 600 );

{ scrollTop: 400 } คือ ให้แสดงเนื้อที่ตำแหน่ง 400 จากด้านบน
ส่วน  paramether ตัวที่ 2  600 คือ ความเร็วในเลื่อน 600 มิลิวินาที

การแสดง google map ใน mobile application ( ionic2)

google map นับว่า เป็นส่วนสำคัญสำหรับ Mobile Application ที่ต้องการระบุตำแหน่งสถานที่ต่างๆ ในบทความนี้จะแสดงให้เห็นวิธีการแสดงแผนที่ google map  ใน ionic2 ซึ่งคือ platform การพัฒนา mobile application แบบ cross platform

สำหรับผู้ที่ยังไม่รู้จัก ionic สามาถอ่าน
การติดตั้ง ionic2 
และ
การ link หน้าใน ionic2 

ขั้นตอนการแสดง google map  สำหรับ Mobile Application (ionic)

1.  ในไฟล์ src/pages/index.html ให้ใส่ google map api library ใน tag header

<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&language=th"type="text/javascript"></script>

2. ในไฟล์ interface .html ใส่ tag div ภายใต้ <ion-content > สำหรับแสดงแผนที่

<div id="map_div" style="width: 100%;height:100%"></div>

3. หลัง คำสั่ง import  ใส่

declare var google;//เพื่อให้ type script รู้จัก google map

4.  สร้างคำสั่ง วาด แผนที่ ใน ไฟล์ type script ภายใต้ class

public  map: any;//ตัวแปรอ้างอิงค์แผนที่
public marker:any;//ตัวแปรสำหรับหมุดใน google map


 ionViewDidLoad(){ //คำสั่งสร้างแผนที่จะต้องอยู่ภายใต้ ionViewDidLoad 
     

     let latLng = new google.maps.LatLng(13.829,100.528);//กำหนดจุดกึ่งกลางแผนที่

    let mapOptions = {
      center: latLng,//จุดกึ่งกลาง
      zoom: 6,//การซูมที่ระดับ 6
      mapTypeId: google.maps.MapTypeId.ROADMAP//ให้แสดงถนน
    }
 
   //กำหนดให้แสดงแผนที่ใน map_div ( div tag ที่เราสร้างไว้)
    this.map = new google.maps.Map( document.getElementById("map_div"),mapOptions);
 
       //ให้สรา้ง marker บนแผนที่
          this.marker = new google.maps.Marker({
                        position: new google.maps.LatLng(13.829,100.528) ,
        });
        this.marker.setMap(this.map);

        //ให้กึ่งกลางแผนที่อยู่ที่ 13.829,100.528
        this.map.setCenter(new google.maps.LatLng(13.829,100.528));
        this.map.setZoom(6);//ให้แผนที่มีการการซูมที่ระดับ 6


  }

วิธีสร้างการแจ้งเตือนใน Android โดย Notification และการทำงานซ้ำโดย AlarmManager

คุณสมบัติที่สำคัญอย่างหนึ่งสำหรับ Mobile Aplication คือ การแจ้งเตือน ( Notification ) เช่น แจ้งเตือนการนัดหมาย หรือแจ้งเตือนข่าวสาร ซึ่งหากเราต้องการให้ Application แจ้งเตือน ได้นั้นอาจต้องมีการทำงานซ้ำ เช่น ตรวจสอบว่ามีการ Update ข้อมูลใหม่ที่ Server หรือไม่ทุกๆ 1 นาที ซึ่งเราสามารถใช้ Class AlarmManager ของ Android ได้ และใช้ Class Notification เพื่อแจ้งเตือนได้ โดยมีตัวอย่างดังนี้

1. ในไฟล์  AndroidMainFest.xml  

<application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:roundIcon="@mipmap/ic_launcher_round"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

<!-- Class Main -->

        <activity android:name=".MainActivity">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

<!-- หน้าที่จะแสดงเมื่อกดแจ้งเตือน -->

        <activity android:name=".get_activity">

        </activity>

<!-- ให้ สามารถใช้ Class AlarmReceiver สำหรับการแจ้งเตือนได้ -->

        <receiver

            android:name=".AlarmReceiver"

            android:exported="true" >

            <intent-filter>

                <action android:name="android.intent.action.NOTIFY" />

            </intent-filter>

        </receiver>

    </application>

2. ในไฟล์ MainActivity.java 

สร้าง PendingIntent  เพื่อกำหนดว่าให้ AlarmReceiver เป็น Class ที่จะทำงานทุกๆ 1 นาที

PendingIntent pendingIntent = 

PendingIntent.getBroadcast(this, 0, new Intent(this, AlarmReceiver.class), 0);

กำหนดให้ Class AlarmReceiver ทำงานทุก 1 นาที

AlarmManager alarmManager = 

(AlarmManager) this.getSystemService(Context.ALARM_SERVICE);

alarmManager.setRepeating(AlarmManager.ELAPSED_REALTIME_WAKEUP, SystemClock.elapsedRealtime(), 60*1000, pendingIntent);//ทำงานทุกๆ 6000 มิลิวินาที=1 นาที

3. สร้าง Class AlarmReceiver คือ Class ที่จะทำงานทุกๆ 1 นาที

import android.app.Notification;

import android.app.NotificationManager;

import android.app.PendingIntent;

import android.content.BroadcastReceiver;

import android.content.Context;

import android.content.Intent;

import android.support.v4.app.NotificationCompat;

//extends BroadcastReceiver ให้ สมารถทำงานเมื่อปิด App ได้

public class AlarmReceiver extends BroadcastReceiver { 

    @Override //method onReceive คือ method หลักที่จะทำงาน

    public void onReceive(Context context, Intent intent) {

//กำหนดให้ get_activity คือหน้าที่จะเปิดเมื่อกดที่การแจ้งเตือน

        PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, new Intent(context, get_activity.class), 0);

        //สร้างการแจ้งเตือน

        Notification notification =

                new NotificationCompat.Builder(context) 

                        .setSmallIcon(R.mipmap.ic_launcher)

                        .setContentTitle("แจ้งเตือน")//หัวข้อที่จะแจ้งเตือน

                        .setContentText("www.projectsoft.biz")//ข้อความที่จะแจ้งเตือน

                        .setAutoCancel(true)

                        .setContentIntent(pendingIntent)

                        .build();

       //แสดงการแจ้งเตือนด้านบน

        NotificationManager notificationManager =

                (NotificationManager) context.getSystemService(context.NOTIFICATION_SERVICE);

        notificationManager.notify(999, notification);

    }

}

เมื่อ รันโปรแกรมจะพบว่าจะมีการแจ้งเตือนทำงานทุกๆ 1 นาที

สร้าง Mobile Application อ่าน QR Code โดยใช้ ionic2

ตัวอย่างการสร้าง Mobile Application  สำหรับอ่าน QR Code โดยใช้ Ionic2

1. Create ionic2  โปรเจคโดยใช้ คำสั่ง

" ionic start BarcodeProject blank --v2 "

2.  เขาไปใน Folder Project แล้วพิมพ์ คำสั่ง เพิ่ม Plugin barcodescanner

" cd BarcodeProject "
" ionic plugin add phonegap-plugin-barcodescanner "

3.  หากเราต้องการ เรียกใช้ function  การอ่าน QR Code ต้อง ดำเนินการตามนี้

      3.1 ต้อง import Platform โดยใช้คำสั่ง  import { Platform } from 'ionic-angular';
      3.2 ประกาศ object cordova โดยใช้คำสั่ง declare var cordova:any;
      3.3  ถ้าเราต้องการให้ App อ่าน QR Code ให้ใช้คำสั่ง ดังนี้

        this.platform.ready().then(() => {

            cordova.plugins.barcodeScanner.scan((result) => {

              result.text คือ ข้อความที่ได้จาก การอ่าน qr code

             

            }, (error) => {

               กรณี เกิด Error

            });

        });

การเรียกใช้ Javascript ภายนอกจาก TypeScript

เมื่อ ionic2 ที่เปลี่ยนจาก javascript เป็น typescript ปัญหาที่ตามมาคือ หากเรามี javascript library อยู่แล้วและอยากเรียกใช้ javascript ภายนอกจาก typescript เราสามารถเรียกผ่าน typescript ได้ดังนี้

1. ในไฟล์ html ที่กำหนดโดย templateUrl ให้สร้าง function  javascript ภายใต้ tag head

 <script>
      function run_javascript()
      {
          alert("Extaernal javascript");
      }
  </script>

2. ในไฟล์ typescritpt  (.ts) ซึ่งเป็นส่วนควบคุมการทำงาน ให้ใช้คำสั่ง declear หลัง import เพื่อให้ typescript รู้จัก function  javascript ที่อยู่ภายนอก

declare function run_javascript():void;

เพียงเท่านี้ เราก็สามารถใช้ typescript เรียก javascript ได้แล้ว

การเชื่อมต่อ Mobile Application กับ MySQL (โดยใช้ Ionic 2)

การเชื่อมต่อ Mobile Application  กับ ฐานข้อมูล MySql นั้นถือว่าเป็นเรื่องที่สำคัญมากในการพัฒนา Mobile Application เพราะการจะทำ Application  ให้เป็นแบบ online ได้นั้นเราจำเป็นต้องมีการเก็บข้อมูลไว้ในโปรแกรมจัดการฐานข้อมูลที่อยู่บน Server การที่ที่จะ ในที่นี้จะเป็นตัวอย่างการพัฒนา Mobile Application ที่ดึงข้อมูลมาจาก MySql โดย ใช้ Ionic Framework version 2

- Ionic Frame คือ Framework สำหรับพัฒนา Mobile Application ที่ทำงานได้ทั้งบนระบบปฎิบัติการ Android  และ IOS หรือที่เรียกว่า cross platform development

- สำหรับการ Install ionic framework สามารถ ดูได้ที่นี่
- สำหรับการ สร้างหน้า และการเชื่อต่อหน้าใน ionic2 สามารถ ดูได้ที่ที่นี่

โดยในบทความนี้ จะเป็นการเขียนต่อจากบทความที่แล้ว คือ การเชื่อมต่อหน้าใน ionic2 

1. เตรียมโปรแกรมดึงข้อมูลจาก MySQL ทางฝั่ง Server ชื่อ ไฟล์ index.php

<?php

  //ให้โปรแกรมเรียกจากฝั่ง Client ได้
  header("Access-Control-Allow-Origin: *");
  header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

 header('Content-Type: text/html; charset=utf-8');//ให้ใช้ ภาษาไทยได้

//ตรวจสอบ username password
$dbUname="root";
$dbPword="";
$dbHost="localhost";
$dbName="rsi";
        $link=mysqli_connect($dbHost,$dbUname,$dbPword,$dbName);
     
     
 //ให้ใช้ ภาษาไทยได้
mysqli_query($link,'SET CHARACTER SET utf8');
mysqli_query($link,'SET collation_connection = "utf8_unicode_ci"');


       //ส่งคำสั่งให้ mysql ทำงาน
       $result=mysqli_query($link,"SELECT stock_name FROM stock");
       //ตัวแปร $result เก็บผลลัพธ์ของคำสั่ง sql

//ส่งข้อมูลไปให้ฝั่ง Mobile ในรูปแบบ JSON
   while($row = $result->fetch_array(MYSQL_ASSOC)) {
            $myArray[] = $row;
    }
    echo json_encode($myArray);
 
   //ปิดการเชื่อมต่อ mysql
  mysqli_close($link);

?>

2. แก้ Code interface ในไฟล์ p1.html ที่อยู่ใน folder pages เฉพาะในส่วนของ
<ion-content></ion-content>

ดังนี้

<ion-content >
 
  <ion-list>

<ion-item>
  <ion-label>Stock name</ion-label>

<!-- สร้าง Select Controller ชื่อ  stock_name   -->
  <ion-select [(ngModel)]="stock_name" okText="ตกลง" cancelText="ยกเลิก" multiple="true">

    <!--  กำหนดให้ตัวเลือกของ Select Controller มาจากแถวข้อมูลใน object ชื่อ data_table  -->
    <ion-option *ngFor="let row of data_table" value="{{row.stock_name}}" > {{row.stock_name}}
    </ion-option>
 
</ion-select>


</ion-item>

<div padding>

   <!-- สร้างปุ่มเพื่อดูข้อมูลที่เลือกใน select controller และกำหนดให้เมื่อกดปุ่มแล้วทำงานที่ 
          function  get_selected_value   -->

  <button (click)="get_selected_value()"  ion-button block icon-right color="secondary">
        View Selected Items
  </button>

</div>
   
</ion-list>

</ion-content>

3. แก้ code typescript ในส่วนที่ควบคุม ในไฟล์ p1.ts ที่อยู่ใน folder pages

import { Component } from '@angular/core';
//ให้สามารถใช้ service http ของ angular ได้
import { Http } from '@angular/http';
//import LoadingController , AlertController เพื่อให้ใช้ หน้าแสดงข้อความรอ และขึ้นกล่องข้อความ
//แจ้งเตือนได้
import { NavController , LoadingController , AlertController} from 'ionic-angular';

@Component({
  templateUrl: 'p1.html'
})
export class p1 {

//ประกาศ JSON object สำหรับแสดงข้อมูลใน select controller
public data_table: Array<{stock_name: string}>;
//
public stock_name:string;
 
 constructor(public navCtrl: NavController,public loadingCtrl: LoadingController,public http: Http,public alertCtrl: AlertController) {
    //กำหนดให้เมื่อเปิดหน้า app มาทำงาน function  load_data() เป็น function  แรกที่ทำงาน
    this.load_data();
  }

  load_data() {

      // ให้แสดง popup กำลังโหลด
       let loading_popup = this.loadingCtrl.create({
          content: 'กำลังโหลด...'
        });
        loading_popup.present();

        // url ฝั่ง server ที่ดึงข้อมูลจาก mysql
        var link = "http://localhost/ionic_http/index.php";
        var send_data = {};
       
       //เชื่อต่อกับ mysql server โดยส่งข้อมูลแบบ post
        this.http.post(link, send_data)
        .subscribe(response => {

          loading_popup.dismiss();//เมื่อโหลดเสร็จแล้วให้ปิด popup
          // นำข้อมูลจาก mysql มาแสดงในตัวเลือกของ select controller 
          this.data_table=JSON.parse(response["_body"]);

        }, error => {
           
        });


   

  }

//function ดูว่าผู้ใช้เลือกตัวเลือกใน select controller ตัวไหนบ้าง
  get_selected_value()
  {
      //สร้างกล่องข้อความแจ้งเตือน
      let alert = this.alertCtrl.create({
        title: 'รายการที่เลือก',
        subTitle: this.stock_name,//แสดงข้อมูลที่เลือกใน select controller
        buttons: ['ตกลง']//ให้ปุ่มแสดง text คำว่า ตกลง
      });
      alert.present();//แสดงกล่องข้อความแจ้งเตือน
  }



}


ผลลัพธ์ที่ได้คือ

เมื่อเลือก และกดปุ่ม view select items

แสดงกล่องข้อความ item ที่เลือก

การ Link หน้า ใน Ionic2

จากบทความที่แล้ว การติดตั้ง ionic2 ต่อมาเราจะลองสร้าง link ต่างๆของ Application หน้าใน ionic2 ดู

1. สร้าง ionic โปรเจคชื่อ myIonic โดยใช้คำสั่ง ionic start --v2 myIonic blank ( สำหรับขั้นตอนการ install ionic สามารถคลิดดูได้ที่นี่ )

2. เปลี่ยน Theme ของ App เป็น  ios โดย เปิด Folder app  เปิดไฟล์  app.module.ts ( เป็นไฟล์ที่ App ของเรามี class อะไรบ้าง และเป็นการตั้งค่าต่างๆ ของ  App   )

จาก
imports: [
    IonicModule.forRoot(MyApp)
  ],

เปลี่ยนเป็น

imports: [
    IonicModule.forRoot(MyApp,{
       mode:"ios",
        backButtonText: '',
    })
  ],

เพื่อให้ App เป็น รูปแบบ ios

3.  แก้ไข Code ใน folder pages/home/home.html ซึ่งคือ interface ของหน้าแรก ( folder pages คือ folder ที่เอาไว้เก็บหน้าต่างๆใน App ) เป็น

<!-- header ของหน้า App -- >
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic
    </ion-title>
  </ion-navbar>
</ion-header>
<!-- header ของหน้า App -- >

<ion-content padding>
   <!-- 
      (click)="change_page()" คือ  กำหนดให้เมื่อกดเปลี่ยนหน้าแล้วไปทำงานที่ function change_page()   -->
      <button ion-button block icon-right (click)="change_page()" color="secondary">
        เปลี่ยนหน้า
        <ion-icon name="arrow-forward"></ion-icon>
      </button>

</ion-content>

4. แก้ code หน้า home.ts ( เป็นไฟล์ source code typescript สำหรับ ควบคุมการทำงานของหน้า  home ) ใน folder pages/home

import { Component,ViewChild } from '@angular/core';
import {  Nav } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { p1 } from '../p1/p1';// import หน้า App ที่จะ link ไปปลายทาง

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {


  constructor(public navCtrl: NavController) {
 
  }

  //function สำหรับ เปลี่ยนหน้า 
  change_page() {
   
    this.navCtrl.push(p1); //เปลี่ยนไปหน้า p1
   

  }

}

5. สร้างหน้า Application p1 โดยสร้าง folder ชื่อ p1 ในโฟลเดอร์ pages และ สร้างไฟล์ p1.html ( สำหรับ interface ) และ p1.ts ( สำหรับ typescript ควบคุมการทำงาน )

6. แก้ code ไฟล์ interface p1.html

<!-- ตั้งชื่อหัวของหน้า application ให้ชื่อว่า หน้า 1 -->
<ion-header>
  <ion-navbar>
    <ion-title>
      หน้า1
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content >
 
 

</ion-content>

7. แก้ code หน้า p1.ts ซึ่งคือ typescript ควบคุม หน้า app เป็น

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

  templateUrl: 'p1.html'//กำหนดให้ p1.html คือ interface ของหน้า 

})

export class p1 { //ตั้งชื่อ class ว่า  p1

  constructor(public navCtrl: NavController) {

    

  }

}

8.  เปลี่ยน code ในไฟล์ app/app.module.ts ซึ่งคือไฟล์สำหรับกำหนดว่า application เรามีหน้าอะไรบ้าง และ การตั้งค่าต่างเป็น 

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

เมื่อกด เปลี่ยนหน้า