neno-tech/index.html

## index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name = "viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
    <title>ทดสอบ LIFF</title>
    </head>
  <body id = "body">
   <section id="profile">
     <img id="pictureUrl" src="https://mokmoon.com/images/ic_liff.png">
     <p id="userId"></p>
     <p id="displayName"></p>
     <p id="statusMessage"></p>
     <p id="email"></p>
  </section>

  <section id = "button">
    <button id="btnShare">Share Message</button>
  </section>
  </body>
</html>

## index.js

// Import stylesheets
import './style.css';

import liff from "@line/liff"
// Write Javascript code!
const body = document.getElementById("body");

const pictureUrl = document.getElementById("pictureUrl");
const userId = document.getElementById("userId");
const displayName = document.getElementById("displayName");
const statusMessage = document.getElementById("statusMessage");
const email = document.getElementById("email");

const btnShare = document.getElementById("btnShare");

async function main(){
liff.ready.then(()=>{
  if (liff.getOS() ==="android"){
    body.style.backgroundColor="#ffffcc"
  }
  if (liff.isInClient()){
    getUserProfile()
  }
  btnShare.style.display = "block"
})
await liff.init({liffId:"1655299133-9moOyO2p"})

}
main();
async function getUserProfile(){
  const profile = await liff.getProfile()
  pictureUrl.src = profile.pictureUrl
  userId.innerHTML = "<b>userId</b>" + profile.userId
  displayName.innerHTML = "<b>displayName</b>" + profile.displayName
  statusMessage.innerHTML = "<b>statusMessage</b>" + profile.statusMessage
  email.innerHTML = "<b>email</b>"+liff.getDecodedIDToken().email
}

async function shareMsg(){
  const result = await liff.shareTargetPicker([
    {
      type: "text",
      text: "นี่คือข้อความที่ส่งจาก LIFF"
    }
  ])
  if (result){
    alert("แชร์เรียบร้อย")
  }else{
    alert("ผู้ใช้ยกเลิกการแชร์")
  }
  liff.closeWindow()
}
btnShare.onclick=()=>{
  shareMsg()
}

## package.json
{
  "name": "js-atafxq",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@line/liff": "^2.3.1"
  }
}

## style.css

body {
margin: 20px;
color: white;
}

button{
  display: none;
  width: 100%;
  padding: 8px 0;
  margin: 8px auto;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

p{
  border-bottom: 1px dashed #bbb;
}

#pictureUrl{
margin: 0 auto;
width: 32%;
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-pack: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-box-align: center;
box-pack: center;
box-align: center;
-moz-border-radius: 256px;
-webkit-border-radius: 256px;
border-radius: 256px;
}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name = "viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
	<title>ทดสอบ LIFF</title>
	</head>
	<body id = "body">
	<section id="profile">
	<img id="pictureUrl" src="https://mokmoon.com/images/ic_liff.png">
	<p id="userId"></p>
	<p id="displayName"></p>
	<p id="statusMessage"></p>
	<p id="email"></p>
	</section>

	<section id = "button">
	<button id="btnShare">Share Message</button>
	</section>
	</body>
	</html>

	// Import stylesheets
	import './style.css';

	import liff from "@line/liff"
	// Write Javascript code!
	const body = document.getElementById("body");

	const pictureUrl = document.getElementById("pictureUrl");
	const userId = document.getElementById("userId");
	const displayName = document.getElementById("displayName");
	const statusMessage = document.getElementById("statusMessage");
	const email = document.getElementById("email");

	const btnShare = document.getElementById("btnShare");

	async function main(){
	liff.ready.then(()=>{
	if (liff.getOS() ==="android"){
	body.style.backgroundColor="#ffffcc"
	}
	if (liff.isInClient()){
	getUserProfile()
	}
	btnShare.style.display = "block"
	})
	await liff.init({liffId:"1655299133-9moOyO2p"})

	}
	main();
	async function getUserProfile(){
	const profile = await liff.getProfile()
	pictureUrl.src = profile.pictureUrl
	userId.innerHTML = "<b>userId</b>" + profile.userId
	displayName.innerHTML = "<b>displayName</b>" + profile.displayName
	statusMessage.innerHTML = "<b>statusMessage</b>" + profile.statusMessage
	email.innerHTML = "<b>email</b>"+liff.getDecodedIDToken().email
	}

	async function shareMsg(){
	const result = await liff.shareTargetPicker([
	{
	type: "text",
	text: "นี่คือข้อความที่ส่งจาก LIFF"
	}
	])
	if (result){
	alert("แชร์เรียบร้อย")
	}else{
	alert("ผู้ใช้ยกเลิกการแชร์")
	}
	liff.closeWindow()
	}
	btnShare.onclick=()=>{
	shareMsg()
	}
	{
	"name": "js-atafxq",
	"version": "0.0.0",
	"private": true,
	"dependencies": {
	"@line/liff": "^2.3.1"
	}
	}

	body {
	margin: 20px;
	color: white;
	}

	button{
	display: none;
	width: 100%;
	padding: 8px 0;
	margin: 8px auto;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	}

	p{
	border-bottom: 1px dashed #bbb;
	}

	#pictureUrl{
	margin: 0 auto;
	width: 32%;
	display: -moz-box;
	display: -webkit-box;
	display: box;
	-moz-box-pack: center;
	-moz-box-align: center;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	box-pack: center;
	box-align: center;
	-moz-border-radius: 256px;
	-webkit-border-radius: 256px;
	border-radius: 256px;
	}