LPMuseum คือ พิพิธภัณฑ์ชุมชนในระบบอิเล็กทรอนิกส์
Node.js | React | Reactnative | JavaScript | Java | LPMuseum | Login-main | JSLibrary
ความเป็นมาของโครงการ
โครงการวิจัย : การจัดการพิพิธภัณฑ์ชุมชนในระบบอิเล็กทรอนิกส์ของจังหวัดลำปาง
ที่มาของแอปพลิเคชัน lpmusem ทั้งรุ่น 1 และ 2 และ 3 ใน Google play store อ้างอิงข้อมูลทั้งหมดจากข้อมูลในเว็บไซต์ lpmuseum.net ที่ดำเนินการภายใต้ โครงการ การจัดการพิพิธภัณฑ์ชุมชนในระบบอิเล็กทรอนิกส์ของจังหวัดลำปาง (The Management of Community Museum in Electronic System of Lampang Province) โดย พระครูสิริธรรมบัณฑิต,ผศ. ผู้อำนวยการวิทยาลัยสงฆ์นครลำปาง หัวหน้าแผนวิจัยและคณะ ซึ่งได้รับทุนอุดหนุนจากมหาวิทยาลัยมหาจุฬาลงกรณราชวิทยาลัย ประจำปีงบประมาณ 2563 MCU RS 6303008 โดยข้อมูลการศึกษาได้มาจาก 3 วัดต้นแบบ ได้แก่ วัดบ้านหลุก 289 หมู่ 6 ตำบลนาครัว อำเภอแม่ทะ จังหวัดลำปาง วัดปงสนุกเหนือ ตำบลเวียงเหนือ อำเภอเมืองลำปาง จังหวัดลำปาง วัดไหล่หินหลวง หมู่ 2 บ้านไหล่หิน ตำบลไหล่หิน อำเภอเกาะคา จังหวัดลำปาง
นโครงการประกอบด้วย 3 โครงการย่อย ได้แก่ โครงการวิจัยย่อยที่ 1 เรื่อง ศึกษาองค์ความรู้และกระบวนการสร้างการจัดการพิพิธภัณฑ์ท้องถิ่นเพื่อความยั่งยืน ก่อให้เกิดแนวปฏิบัติที่ดีในการสร้างการจัดการพิพิธภัณฑ์ท้องถิ่น ผู้ดำเนินการวิจัย : อ.ณรงค์ ปัดแก้ว โครงการวิจัยย่อยที่ 2 เรื่อง การพัฒนาพิพิธภัณฑ์ชุมชนด้วยระบบอิเล็กทรอนิกส์ในจังหวัดลำปางได้สร้างรูปแบบทะเบียนโบราณวัตถุของพิพิธภัณฑ์ชุมชนในระบบอิเล็กทรอนิกส์ ผู้ดำเนินการวิจัย : พระครูสิริธรรมบัณฑิต,ผศ., ผศ.ดร.บุษกร วัฒนบุตร, ดร.อนุกูล ศิริพันธ์, อ.ณฤณีย์ ศรีสุข โครงการวิจัยย่อยที่ 3 เรื่อง การสร้างต้นแบบพิพิธภัณฑ์ชุมชนในระบบอิเล็กทรอนิกส์สร้างแอปพลิเคชัน พิพิธภัณฑ์ชุมชน พัฒนาระบบและเครือข่าย และการสร้างต้นแบบพิพิธภัณฑ์ชุมชนด้วยระบบอิเล็กทรอนิกส์ ดร.ภัทรเดช ปัณชญาธนาดุล
research_fullpaper.pdf (compress 79 MB)
คลิปวิดีโอในโครงการ
โครงการหลัก
โครงการย่อยที่ 1
โครงการย่อยที่ 2
โครงการย่อยที่ 3
รวมภาพที่ใช้ใน google play store icon.png คือ สัญลักษณ์ของแอปพลิเคชัน ที่เป็นตัวแทนเมื่อต้องไปแสดงตัวตนอยู่บนหน้าจอของอุปกรณ์ เป็นเครื่องแสดงความแตกต่างจากแอปพลิเคชันอื่นที่อยู่รวมกัน ดังนั้น icon จะเป็นสัญลักษณ์ที่มีลักษณะเฉพาะ ที่ถูกใช้แทนตัวตนของแอปพลิเคชันนั้น
splash.png คือ ภาพที่ถูกแสดงบนอุปกรณ์ เมื่อมีการดาวน์โหลดแอปพลิเคชัน ในขณะรอการเริ่มต้นทำงาน เพื่อเข้าสู่ระบบในหน้าจอแรกตามคำสั่งที่เขียนใน app.js ก็จะพบกับหน้าของ splash ที่ออกแบบมา เพื่อแสดงตัวตน หรือแสดงความแตกต่างจากแอปพลิเคชันอื่น ซึ่ง splash ควรมีหน้าตาที่สัมพันธ์กับเนื้อหาภายในแอปพลิเคชัน เพื่อบ่งชี้ให้ผู้ใช้ได้รับทราบว่าขณะนี้กำลังรอการใช้งานแอปพลิเคชันใดอยู่
React native : expo - สรุปขั้นตอนการจัดทำแอปพลิเคชัน 1. ศึกษาความต้องการของแอปพลิเคชัน
บว่า ต้องการทำ webview เชื่อมโยงกับเว็บไซต์ที่เป็น responsive web design สามารถแสดงผลบนอุปกรณ์ต่าง ๆ ได้ และผู้ดูแลโครงการได้จดโดเมนเป็น .net เรียบร้อยแล้ว สามารถเข้าบริหารจัดการผ่าน Direct Admin Control Panel ซึ่งสามารถใช้บริการ upload หรือ download ผ่าน ftp protocol และเปิดโฮมเพจได้ผ่านพอร์ต 80 ส่วนอีกวิธีหนึ่ง คือ พัฒนาแอปพลิเคชันด้วย thunkable.com ได้เลือกใช้ webview ที่ต้องใช้บริการ SSL ซึ่งระบบของ web hosting มีให้บริการแบบ SSL ฟรี และมีข้อจำกัด ซึ่งขั้นตอนการใช้ SSL คือ ที่ได้ดำเนินการนั้น เริ่มจาก download แฟ้มทั้งระบบจาก public_html และ upload เข้าไปยัง private_html ทำให้สองระบบนี้แยกออกจากกัน แล้วแก้ไขรหัสต้นฉบับ เพื่อให้สามารถทำงานกับ https ได้ แต่ผลงานแอปพลิเคชันที่ได้จะมี logo ขอ thunkable จึงพัฒนาด้วยเครื่องมือนี้ ก็เพียงเพื่อเปรียบเทียบผลระหว่าง android กับ ios เท่านั้น ซึ่งผู้พัฒนาเลือกพัฒนา application ด้วย react native เพื่อส่งผลงานเผยแพร่ใน google play store เนื่องจากมีความยืดหยุ่นในการพัฒนา และติดตั้งได้ง่ายกว่าสำหรับผู้ใช้ทั่วไป
2. เตรียมเครื่องมือพัฒนาโปรแกรมหลัก
ากการศึกษา พบว่า เครื่องมือที่นิยมพัฒนาแอปพลิเคชันในปัจจุบัน คือ node.js และ react native เชื่อมโยงกับ expo.dev เผยแพร่บน google play store แล้วทดสอบคู่ขนานกับการพัฒนาแอปพลิเคชันบน thunkable.com พบว่า การใช้ react native จะมีประสิทธิภาพ และไม่ติดปัญหา license หลังพัฒนาแล้วเสร็จ เนื่องจากเครื่องมือต่าง ๆ เป็น open source จึงได้ติดตั้งโปรแกรมต่าง ๆ เพื่อใช้ในการพัฒนา ดังนี้
- ติดตั้ง node.js จาก https://nodejs.org/en/download
- เข้าดอส แล้วสั่งเริ่มต้น react native project ด้วย npm install -g create-react-native-app
- ติดตั้ง yarn ด้วย https://classic.yarnpkg.com/en/docs/install/#windows-stable
- ติดตั้ง expo ด้วย npm install -g expo-cli
- สร้าง project ด้วย create-react-native-app myapp
- ทดสอบ project ด้วย npm start
3. เตรียมแฟ้ม app.json ซึ่งเป็นแฟ้มเก็บข้อกำหนดของแอปพลิเคชันแต่ละ release
4. เตรียมแฟ้ม App.js
ดยเลือกเขียนคำสั่ง html เพื่อแสดงหน้าโฮมเพจแรก แทนการใช้ webview แบบกำหนด url โดยตรงตั้งแต่หน้าแรกที่จะไม่มีหน้าแรกในแอปพลิเคชัน แต่เรียกหน้าแรกผ่าน url มาแสดง ซึ่งพบว่า วิธีการเรียก url โดยตรง อาจไม่ผ่านเงื่อนไขการเผยแพร่แอปพลิเคชันของ google play store จึงเปลี่ยนไปใช้เทคนิคเขียน html ทั้งหมด เพื่อให้ผู้ใช้ได้เห็นข้อมูลเริ่มต้นก่อนเข้าสู่เนื้อหา ที่ต้องออกไปตาม url ที่กำหนด
5. ติดตั้งและสั่งประมวลผล
ซึ่งการ build แต่ละครั้งพบปัญหาแตกต่างกันไป จากความไม่เข้ากันของรุ่นในแต่ละ component จึงต้องมีการติดตั้ง ทดสอบ และเลือกรุ่นที่เข้ากันได้มาใช้งาน ดังตัวอย่างการติดตั้ง react-native-webview แบบกำหนดรุ่น ซึ่งตัวอย่างนี้ใช้รุ่น 10.7.0 และพบว่าสามารถประมวลผลได้ตามปกติ บน web
- npm install --save react-native-webview@10.7.0 
- npm run web 
6. ส่งผลงานขึ้นไปยัง expo.io
ริ่มต้นจากการสมัครใช้งาน expo.io ในฐานะผู้พัฒนา ที่จะส่ง application ขึ้นไปเผยแพร่ และมี application ของ expo ในฝั่งผู้พัฒนา ที่สามารถติดตั้งบน android device เพื่อทดสอบ applicaiton เหล่านั้นได้โดยตรง และเชื่อมโยงบัญชีของผู้พัฒนา ซึ่งการ build ผลงานหลังการปรับปรุงในแต่ละ release ตามข้อเสนอแนะของ tester นั้น มีขั้นตอนดังนี้
expo fetch:android:keystore (ใช้สำหรับ backup keystore เป็นแฟ้ม project.jks)
ถ้าพบ There is no valid Keystore defined for this app แสดงว่า ไม่พบข้อมูลประจำตัว (credentials)
ถ้าไม่เคยสร้างไว้ ต้องสร้าง Keystore ก่อน ด้วย expo credentials:manager ใช้สำหรับ Generate new keystore
expo build:android -t app-bundle (ได้แฟ้ม .aab บน expo.dev)
expo build:android (ได้แฟ้ม .apk บน expo.dev)
7. เข้าไปในเว็บไซต์ expo.dev
ป็นบัญชีที่ผูกกับระบบ ที่ใช้ในการ build ผลงาน แล้วไป download แฟ้ม myapp.apk , myapp.aab และ myapp.tar.gz เพื่อนำไปใช้เผยแพร่ หรือเตรียมสำหรับนำเข้า play store หรือ app store ซึ่งการส่งเข้า play store ต้องแสดงถึงความก้าวหน้าโดยกำหนดรุ่นตามลำดับ ทำให้ได้แก้ไขตาม comment แล้ว build ขึ้นมาใหม่ เพื่อให้ได้ release รุ่นล่าสุดที่พร้อมเผยแพร่ การใช้แฟ้ม myapp.apk สามารถนำไปใช้บน android device ได้ทันที หรือแชร์ใน website ผ่าน qr code ก็สามารถทำได้ และใช้งานได้จริง ซึ่งการติดตั้ง myapp.apk แบบไม่ผ่าน play store ก็จะมีขั้นตอนที่ผู้ใช้ต้องเข้าใจ ตั้งแต่เดือนสิงหาคม 2564 ทาง play store กำหนดให้ส่งแบบ .aab แทน .apk
8. เตรียมภาพสำหรับประกอบการพัฒนาแอพ และเผยแพร่ใน store
ารเตรียมภาพ เริ่มต้นจากเข้าไปเลือกภาพจาก lpmuseum.net และตัดต่อภาพ ตามขนาดที่ต้องการ โดยใช้ Adobe Photoshop, Microsoft Paint และ Irfan view เพื่อจัดเตรียมภาพ icon , splash , cover และภาพตัวอย่างหน้าจอบนอุปกรณ์
9. เข้าไปสมัครใช้งาน google developer account
ข้าไปที่ https://play.google.com/console และชำระค่าธรรมเนียม $25 เพื่อการได้รับสิทธิ์ในการ upload application ขึ้นไปยัง play store ดำเนินการส่งแฟ้ม myapp.apk หรือ myapp.aab พร้อมรายละเอียดต่าง ๆ ของแอปพลิเคชัน โดยส่งเข้าไป เพื่อรับการทดสอบในแต่ละ release จนถึงการส่งขึ้น production release แล้วรอการทดสอบ และตรวจสอบเงื่อนไขต่าง ๆ อีกระยะหนึ่ง จึงจะได้รับการอนุมัติเผยแพร่ใน play store
lpmuseum_2563.pdf
React native : expo - สร้างแอพ lpmuseum.net
Download : .apk (v.1.0)
Lpmuseum.net
Build:android
Thunkable.com

Download : Play store(v.2.0)
Lpmuseum2
เริ่มบันทึก 631110 แล้วปรับปรุง 640905
C:\> npm install -g npm (updated need)
C:\> npm -v (7.21.0)
C:\> yarn -v (1.22.4)
C:\> npm install -g expo-cli (อ่าน https://docs.expo.dev/workflow/expo-cli/)
C:\> npm install -g create-react-native-app
C:\> expo -V (4.5.2) (เช่น เคยลงนานแล้ว 3.28.0 จึงต้องติดตั้งใหม่)
C:\> expo upgrade
C:\> react-native -v (react-native-cli: 2.0.1 react-native: 0.63.3 - อยู่ใน project )
C:\> yarn upgrade 
C:\> create-react-native-app lpmuseum1  (รอคอย 12 นาที ประมาณ 206 MB)
>   Default new app
C:\> cd lpmuseum1
---
C:\lpmuseum1> mkdir assets มี 2 แฟ้มในห้องนี้ 
- http://www.thaiall.com/reactnative/assets/icon.png 
- http://www.thaiall.com/reactnative/assets/splash.png
---
C:\lpmuseum1> **notepad** app.json (กำหนดชื่อโปรแกรม และภาพที่ใช้ในโปรแกรม)
C:\lpmuseum1> **notepad** App.js (กำหนดการประมวลผล)
---
// เปลี่ยนจาก expo เป็น expo-cli
C:\lpmuseum1> expo -V (4.11) (อ่าน https://docs.expo.dev/distribution/building-standalone-apps/)
C:\lpmuseum1> expo whoami (อ่าน https://docs.expo.dev/workflow/expo-cli/)
C:\lpmuseum1> expo login (และ login https://expo.dev/ เข้าไปสำรวจ และรอดูผลงาน)
# copy your keystore to this project or create it
C:\lpmuseum1> expo credentials:manager (create keystore)
> android
> yes : currently in a directory
> Update upload keystore
> Generate new keystore
> Quit : Keystore updated successfullly
C:\lpmuseum1> expo fetch:android:keystore (สร้าง หรือดึงข้อมูลใน keystore ที่เคยสร้างขึ้นมาแล้วมาแสดง)
C:\lpmuseum1> dir lpmuseum1.jks (2214 bytes)
C:\lpmuseum1> npm install --save react-native-webview
---
C:\lpmuseum1> npm run android (บน android emulator และได้แฟ้ม .apk ใน )
- dir D:\reactnative\lpmuseum1\android\app\build\outputs\apk\debug\app-debug.apk
---
C:\lpmuseum1> npm run web (บน browser)
- เลือก Run on Android device/emulator (มีย้ำครั้งที่ 2)
1. Opening emulator Nexus_5X_API_24
2. Opening exp://172.50.0.7:19000 on Nexus_5X_API_24
- มีการติดตั้ง expo บน emulator และพบ app บน expo
- ใช้ expo บนโทรศัพท์ scan qr code ในเครือข่ายเดียวกันได้
---
C:\lpmuseum1> expo build:android -t app-bundle (สร้างแฟ้ม .aab ใน expo.io)
Successfully built standalone app: https://expo.dev/artifacts/7d42..4548 (download : lpmuseum1 .. .aab - 52.7 MB อัตโนมัติ)
---
# พบว่า 19 พ.ค. 2565 ต้องใช้แทน C:\> expo build:android ..
# expo build:android will be discontinued on January 4, 2023 (230 days left).
C:\lpmuseum1> npm install -g eas-cli
C:\lpmuseum1> eas build -p android 
---
C:\lpmuseum1> expo build:android -t apk (สร้างแฟ้ม .apk ใน expo.io) 
Successfully built standalone app: https://expo.dev/artifacts/26e8.. 81d4 (lpmuseum1 .. .apk - ทุกครั้งที่ build จะได้ link ใหม่)
---
C:\lpmuseum1> expo doctor --fix-dependencies
แก้ปัญหาตามที่รับทราบจากผลการ build ใน https://expo.io
---
C:\lpmuseum1> expo prebuild --clean
แก้ปัญหา versionCode เป็น 1 ต้องสั่ง clean
---
https://expo.dev/accounts/thaiall/projects/lpmuseum1/
---
C:\lpmuseum1> npm run web (บน browser)
1. Android application : expo สั่ง Scan QR Code พบ Application
2. Run on Android device/emulator (Start metro bundle + AVD : Android Virtual Device)
- พบว่า expo ถูกติดตั้งอัตโนมัติ แล้วจึงเปิด lpmuseum1 ขึ้นมา
3. หลัง download - lpmuseum1.apk จาก expo.dev สามารถลากแฟ้ม .apk ไปวางบน emulator และใช้งานได้ทันที
4. upload lpmuseum1.apk ไปประมวลผลบน APKonline APK manager : https://chrome.google.com/webstore/detail/lnhnebkkgjmlgomfkkmkoaefbknopmja
รหัสต้นฉบับใน project มื่อสั่งสร้าง apk ด้วยคำสั่ง expo build:android -t apk เรียบร้อยแล้ว สามารถนำ apk มาใช้ได้ทันทีบนอุปกรณ์ใด ๆ เช่น bluestacks หรือจะ run เพื่อทดสอบก่อน สามารถสั่ง npm run android แล้วคลิ๊ก Run on Android device/emulator ถ้าบนเรื่องมี Android Virtual Device เป็น emulator ที่มีมาพร้อม Android Studio ผลลัพธ์จะพบ output ของ application บนโปรแกรม expo ใน Android emulator หรือนำ apk มาวางเพื่อติดตั้งก็ทำได้เช่นกัน แต่การใช้ผ่าน expo จะเป็น debug mode ซึ่งครั้งแรกจากการทดสอบพบคำว่า Expo has stopped จึงคลิ๊กสั่ง Run on Android device/emulator อีกครั้ง เมื่อพยายาม Run ใหม่ พบว่า application ถูก load ไปบนอุปกรณ์ emulator และทำงานได้ตามปกติบน Android emulator ซึ่งในระหว่างใช้งาน application สามารถเรียก menu ด้วย Ctrl+M ได้ และทุกครั้งที่มีการแก้ไข code ใน app.js พบว่ามีการ compiling ใหม่ บน Metro bundler และผลลัพธ์ของ application ใน expo ก็จะเปลี่ยนไป (เดิม app.js มี encoding เป็น thai เมื่อเปลี่ยนเป็น utf-8 พบว่า ภาษาไทย และ font แสดงผลได้ปกติ)
**notepad** app.json
{
  "expo": {
    "name": "LP Museum1",
    "slug": "lpmuseum1",
    "privacy": "public",
    "sdkVersion": "39.0.0",
    "platforms": ["android", "ios", "web"],
    "version": "1.0.1",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffdd"
    },
    "updates": { "fallbackToCacheTimeout": 0 },
    "assetBundlePatterns": [ "**/*" ],
    "android": { 
      "package": "com.thaiall.lpmuseum", 
      "versionCode": 1,
      "permissions": []      
    }
  },
  "name": "lpmuseum1"
}
**notepad** App.js
import React, { Component } from 'react'
import { WebView } from 'react-native-webview'
export default class App extends Component {
  render() {
    var myhtml = "<link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'>"
    myhtml = myhtml + "<style type='text/css'>body { font-family: 'Kanit'; background-color:#ddffdd; }</style>"
    myhtml += "<center><h1><span style={{ fontFamily: 'Kanit' }}><div style='font-family:Kanit; font-size:72px;'>การจัดการ</div>"
    myhtml += "<br/>การจัดการพิพิธภัณฑ์ชุมชน<br/>ในระบบอิเล็กทรอนิกส์ของจังหวัดลำปาง<br/>โดย พระครูสิริธรรมบัณฑิต, ผศ.<br/>ผู้อำนวยการวิทยาลัยสงฆ์นครลำปาง<br/>หัวหน้าแผนวิจัยและคณะ<br/><br/><a href='http://www.lpmuseum.net/banlook.html'>วัดบ้านหลุก</a><br/><a href='http://www.lpmuseum.net/pongsanook.html'>วัดปงสนุกเหนือ</a><br/><a href='http://www.lpmuseum.net/raihen.html'>วัดไหล่หินหลวง</a><br/><a href=http://www.lpmuseum.net/research.html><img src=http://www.lpmuseum.net/images/research%20index.jpg></a></h1></center>"
    return (
    <WebView 
    originWhitelist={['*']}
    source={{ html: myhtml  }}		
    style={{marginTop: 50}}
    />
    );
  }
}
**notepad** App.js
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
export default class App extends Component {
  render() {
    return (
    <WebView 
    originWhitelist={['*']}
    source={{ html: "<center><h1><div style='font-size:72;'>LP MUSEUM</div>
	<br/>การจัดการพิพิธภัณฑ์ชุมชน<br/>ในระบบอิเล็กทรอนิกส์ของจังหวัดลำปาง<br/>โดย พระครูสิริธรรมบัณฑิต, ผศ.
	<br/>ผู้อำนวยการวิทยาลัยสงฆ์นครลำปาง<br/>หัวหน้าแผนวิจัยและคณะ<br/>
	<br/><a href='http://www.lpmuseum.net/banlook.html'>วัดบ้านหลุก</a>
	<br/><a href='http://www.lpmuseum.net/pongsanook.html'>วัดปงสนุกเหนือ</a>
	<br/><a href='http://www.lpmuseum.net/raihen.html'>วัดไหล่หินหลวง</a>
	<br/><a href=http://www.lpmuseum.net/research.html>
	<img src=http://www.lpmuseum.net/images/research%20index.jpg></a></h1></center>"  }}     
    style={{marginTop: 50}}
    />
    );
  }
}
**notepad** eas.json
{
  "cli": {
    "version": ">= 0.52.0"
  },
  "build": {
    "development": {
      "distribution": "internal",
      "android": {
        "gradleCommand": ":app:assembleDebug",
		"autoIncrement": true
      },
      "ios": {
        "buildConfiguration": "Debug"
      }
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}
Thunkable
Thunkable
Create New App
New Project Name: lpmuseum6
Category: Education, Entertainment
---
URL = https://lampang.mcu.ac.th/?page_id=2145
Height = Fill container
Weight = Fill container
Download Android (App downloads this month 0/2)
---
เปิดอีเมลด้วย firefox หรือ safari จะ download .apk ได้
lpmuseum6-v1-release.apk
https://lampang.mcu.ac.th/research/lpmuseum6.apk
rspsocial
Thaiall.com