mobile app สร้างทีละส่วน กับ ionicframework ตอนที่ 2

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
ionic mobile app

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionic mobile app

ดูแล้ว 9,274 ครั้ง


เนื้อหาต่อเนื่องจากตอนที่ 1
 
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1 
 
พูดคุย ก่อนเข้าเนื้อหา
 
เนื้อหาที่นำมาทำข้อมูล จะสังเกตว่าเป็นลักษณะของการทำตามตัวอย่าง
และเป็นการฝึกเขียน โดยเริ่มจาก 0 ของผู้เชียนเนื้อหาเอง คือกำลังศึกษาไปด้วย
เหตุผลที่ฝึกเขียนไปด้วยและ นำมาสร้างเนื้อไปด้วย เพราะต้องการย้ำความเข้าใจ
ของผู้เขียนเอง รวมทั้งแบ่งปัน เก็บเป็นข้อมูลไว้ 
 
โดยส่วนตัว ผู้เขียนเคยชอบที่จะอ่านและเข้าใจในสิ่งที่อ่าน แต่ไม่เคยลงมือทำ
ทำให้ไม่เกิดประสิทธิผล เช่น มองโค้ด ตามตัวอย่างต่างๆ อ่านไปเรื่อยๆ เข้าใจการทำงาน
แต่ไม่เคยลงมือทำ สุดท้ายก็คือว่างเปล่า ไม่ได้อะไรเลย ดังนั้น จึงย้ำว่า 
สำหรับคนที่สนใจ ลองทำตาม หรือเรียนรู้ไปพร้อมกันได้  ยิ่งฝึกพิมพ์ จะยิ่งมอง
ภาพรวมออกง่ายขึ้น 
 
เช้าเนื้อหา ต่อจากตอนที่ 1
 
ตัวอย่างผลลัพธ์ที่เราต้องการ แสดงตามด้านล่าง
 
 
 
ก่อนเริ่ม ขออธิบาย ส่วนของแท็ก สองส่วนนี้ในไฟล์ index.html จาก
ตอนที่ 1 คร่าวๆ ก่อน
-  <html ng-app="myIonicApp"> ส่วนนี้กำหนด directive ng-app สำหรับใช้งาน angularjs
-  <body ng-controller="myIonicHome"> ส่วนนี้สำหรับกำหนด directive ส่วนของจะจัดการ
เช่น เหตุการณ์ event การคลิก หรือการทำอะไรก็ตามในส่วนของ body ที่ angularjs เรียกใช้
 
หมายเหตุ สำหรับคนที่ไม่เข้าใจ หรือไม่รู้จัก angularjs สามารถศึกษาเพิ่มเติมในเว็บนี้ก็มี หรือ
ถ้าไม่ให้ การเรียนรู้ ionicframework สะดุด ก็ให้เข้าใจเพียงว่า มันคือ javascript ตัวหนึ่ง แค่นี้พอ
 
1. มาเริ่มต้นที่ส่วนแรก on-side-menus
 
ให้เข้าใจว่า ถ้าจะทำ mobile app ทีมี side muenus เราต้องใช้ โค้ด ต่อไปนี้
โดยโค้ดด้านล่าง ไม่ใช่แท็ก html ปกติ แต่เป็น directive ของ angurlarjs 
ที่เราสามารถกำหนดรูปแบบเองได้ ซึ่งทาง ionicframework จะใช้แท็ก 
<ion- ขึ้นต้นแบบนี้เป็น directive 
 
รูปแบบแท็ก side menu แบบเต็ม จะมีแยก สามส่วนคือ ด้านซ้าย สำหรับ side menu ฝั่งซ้าย
ดรงกลาง สำหรับส่วนของเนื้อหา และ ด้านขวา สำหรับ side menu ด้านขวา
 
    <ion-side-menus>
        <!-- Center content -->
        <ion-side-menu-content>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
        </ion-side-menu>

        <!-- Right menu -->
        <ion-side-menu side="right">
        </ion-side-menu>
    </ion-side-menus>
 
แต่ตัวอย่างเรา จะมีแค่สองส่วนคือ ด้านซ้าย และตรงกลาง ดังนั้นเราจะตัด ตัว ด้านขวาออก
 
มาวางในส่วนของ body ตามนี้เลย
 
    <body ng-controller="myIonicHome">

    <ion-side-menus>
        <!-- Center content -->
        <ion-side-menu-content>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
        </ion-side-menu>

    </ion-side-menus>
   
    </body>
 
2. เราจะทำต่อในส่วนของ side menu ด้านซ้าย โดยจะเพิ่ม
header และ content เข้าไป 
รูปแบบแท็กคือ header
 
            <ion-header-bar>

            </ion-header-bar>
 
รูปแบบ content
 
            <ion-content>
                
            </ion-content>
 
โดย content ในเมนูด้านซ้าย เราจะไม่เพิ่มอะไรเข้าไป
ส่วน header เราจะใส่หัวข้อเข้าไป และกำหนด สีสัน ด้วย css
 
 
ใช้ class="bar bar-header bar-positive" 
 
โดยแทรกโค้ดตามนี้ เข้าไปใน side menu ด้านซ้าย
 
        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-positive">
                <h1 class="title">bar-positive</h1>
            </ion-header-bar>
            <ion-content>
                
            </ion-content>
        </ion-side-menu>
 
 
3. เพิ่มในส่วนของ ตรงกลาง คือใน side-menu-content
ทำแบบเดียวกับ side-menu left จะได้ตามโค้ดด้านล่าง
 
        <!-- Center content -->
        <ion-side-menu-content>
             <ion-header-bar class="bar bar-header bar-positive">
                <h1 class="title">bar-positive</h1>
            </ion-header-bar>
            <ion-content>
                
            </ion-content>       
        </ion-side-menu-content>
 
4. เพิ่มปุ่ม สำหรับเรียกแสดง side-menu ด้านซ้ายด้วยโค้ด
 
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
และเปลี่ยน title h1 ซักหน่อยเป็น My Home Ionic จะได้เป็น
 
        <!-- Center content -->
        <ion-side-menu-content>
             <ion-header-bar class="bar bar-header bar-positive">
               <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
                <h1 class="title">My Home Ionic</h1>
            </ion-header-bar>
            <ion-content>
                
            </ion-content>       
        </ion-side-menu-content>
 
อธิบายเพิ่มตรงปุ่ม
menu-toggle="left" ให้เข้าใจว่า เป็นส่วนที่ใช้ซ่อน หรือแสดง side-menu 
class="button button-icon icon ion-navicon"  สำหรับส่วนนี้ก็จะเป็นการกำหนด css class
ในที่นี้จะเป็นปุ่มรูปเส้นขีดแนวนอน โดยใช้ชื่อ  ion-navicon
ดูเพิ่มเติมชื่อได้ที่ http://ionicons.com/
 
 
ก่อนไปต่อใน เรามาดูหน้าตา การแสดงผลก่อน เรียกใช้งาน angularjs เพื่อ complie 
แท็ก directive กับหลัง เรียกใช้งาน 
 
ตัวอย่าง ก่อนเรียกใช้งาน angularjs
 
 
จากตัวอย่างด้านบน จะเห็นว่า เนื่องจากเรายังไม่ได้เรียกใช้การจัดการ app ด้วย angularjs
ก็จะแสดงไม่สมบูรณ์ ตามรุปแสดงเฉพาะส่วนของ side-menu ด้านซ้าย
 
ต่อที่ขั้นตอนที่ 5
 
5. เรียกใช้งาน angularjs เพื่อสร้าง module จาก directive ng-app
<html ng-app="myIonicApp">
 
โดยให้ไปแก้ไขที่ไฟล์ app.js
 
โค้ดไฟล์ app.js แบบมีคำอธิบาย
 
// สร้าง module ขึ้นมาชื่อ myIonicApp และเรียกใช้ ionic components 
angular.module('myIonicApp', ['ionic']) // อ้างอิงชื่อ module <html ng-app="myIonicApp">
// กำหนดกิจกรรม หรือการกระทำทั้งในส่วนควบคุม <body ng-controller="myIonicHome">
.controller('myIonicHome', function($scope) { // ส่งค่า scope เข้ามาใช้งาน
    // scope ก็คือ object ของ module มีลักษณะเลียนแบบตามรูปแบบของ DOM 
    // หรือโครงส้ราง html   
});
 
โค้ดไฟล์ app.js
 
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) { 

});
 
 
พอเรามีการเรียกใช้งาน javascirpt ทำให้ module ทำงาน ก็จะทำให้ side-menu และปุ่ม
กดซ่อนแสดง ท่ำงานได้ ตามตัวอย่างด้านล่าง
 
 
 
6. มาเพิ่มแท็บเมนูด้านล่าง ด้วยแท็กต่อไปนี้
 
            <div class="tabs tabs-icon-top">
                <a class="tab-item" href="#">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a class="tab-item" href="#">
                    <i class="icon ion-star"></i>
                    Favorites
                </a>
                <a class="tab-item" href="#">
                    <i class="icon ion-gear-a"></i>
                    Settings
                </a>
            </div> 
 
โดยจะเพิ่มต่อแท็ก </ion-content> ที่แสดงตรงส่วนกลาง 
อันนี้เราเพิ่มดูการแสดงผล ไม่ได้ต่อยอด ทำอะไรต่อในตอนนี้
 
ผลที่ได้
 
 
7. ส่วนสุดท้าย ลองทดสอบ การใช้งาน angularjs กับการแสดง checkbox
 
โดยจะไปเพิ่ม model data ในไฟล์ app.js
ให้กับ scope เป็นชุดของ ข้อมูล arrays ที่เป็น object อีกที  
 
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) { 
	 $scope.listItem=[
		{listtext:'List number 1'},
		{listtext:'List number 2'},
		{listtext:'List number 3'},
		{listtext:'List number 4'}
	  ];
	
});
 
listItem จะเป็น model ที่จะถูกเรียกใช้
 
จากนั้นที่ไฟล์ index.html เราจะเพิ่มโค้ดต่อไปนี้เข้าไปใน ส่วน ion-content ส่วนกลาง
เป็นลิสรายการ checkbox  ตามโค้ดด้านล่าง 
 
            <ion-content  class="scroll-content ionic-scroll  has-header">
                <ul class="list">
                    <li class="item item-checkbox" ng-repeat="mylist in listItem">
                    <label class="checkbox">
                    <input type="checkbox">
                    </label> 
                    {{mylist.listtext}}
                    </li>                        
                </ul>              
            </ion-content> 
 
โค้ดพร้อมคำอธิบาย
 
ำหนด class ให้กับ ion-content กรณี มี header-->
            <ion-content  class="scroll-content ionic-scroll  has-header">
                <ul class="list">
<!--
                   มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat
                   ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem" 
                   โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist
-->
                    <li class="item item-checkbox" ng-repeat="mylist in listItem">
                    <label class="checkbox">
                    <input type="checkbox">
                    </label> 
<!--                    แสดงข้อความของ model -->
                    {{mylist.listtext}}
                    </li>                        
                </ul>              
            </ion-content> 
 
 
ตัวอย่าง เมื่อเสร็จแล้ว
 
 
 
ไฟล์ index.html ทั้งหมด
 
<!DOCTYPE html>
<html ng-app="myIonicApp"> 
    <head>
        <meta charset="utf-8" />
<!--        เบอร์โทรทีแสดง กำหนดให้เป็นลิ้งค์ และกดโทรได้ กรณี ios ในที่นี้ เป็น no-->
        <meta name="format-detection" content="telephone=no" />
<!--        กำหนดให้กดลิ้งค์ แล้วแสดง highlight ใน window phone ในที่นี้ เป็น no-->
        <meta name="msapplication-tap-highlight" content="no" />
<!--        กำหนด การแสดงผลสำหรับมือถือ รายละเอียด ค้นหาเพิ่มเติมได้-->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!--        เรียกใช้ css ionic-->
        <link href="css/ionic.css" rel="stylesheet">
<!--        เรียกใช้งาน javascript ไฟล์นี้จะมีการรวมไปถึง angularjs ด้วย-->
        <script type="text/javascript" src="js/ionic.bundle.js"></script>  
<!--        ไฟล์ javascript ที่เราจะเขียนโค้ดเพิ่ม เพื่อใช้งาน   -->
        <script type="text/javascript" src="app.js"></script>
        <title>MyIonicApp 1</title>
    </head>
    <body ng-controller="myIonicHome">

    <ion-side-menus>
        <!-- Center content -->
        <ion-side-menu-content>
             <ion-header-bar class="bar bar-header bar-positive">
               <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
                <h1 class="title">My Home Ionic</h1>
            </ion-header-bar>
<!--            กำหนด class ให้กับ ion-content กรณี มี header-->
            <ion-content  class="scroll-content ionic-scroll  has-header">
                <ul class="list">
<!--
                   มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat
                   ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem" 
                   โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist
-->
                    <li class="item item-checkbox" ng-repeat="mylist in listItem">
                    <label class="checkbox">
                    <input type="checkbox">
                    </label>	
<!--                    แสดงข้อความของ model			-->
                    {{mylist.listtext}}
                    </li>                        
                </ul>              
            </ion-content> 

            <div class="tabs tabs-icon-top">
                <a class="tab-item" href="#">
                    <i class="icon ion-home"></i>
                    Home
                </a>
                <a class="tab-item" href="#">
                    <i class="icon ion-star"></i>
                    Favorites
                </a>
                <a class="tab-item" href="#">
                    <i class="icon ion-gear-a"></i>
                    Settings
                </a>
            </div>	            
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-positive">
                <h1 class="title">bar-positive</h1>
            </ion-header-bar>
            <ion-content>
                
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>
   
    </body>
</html>
 
ไฟล์ app.js ทั้งหมด
 
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) { 
	 $scope.listItem=[
		{listtext:'List number 1'},
		{listtext:'List number 2'},
		{listtext:'List number 3'},
		{listtext:'List number 4'}
	  ];
	
});



ขอจบเท่านี้ รอติดตาม เนื้อหาเพิ่มเติมต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







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



Tags:: mobile app ionic







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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ