Ionic: การทำ Icons และ Splash Screens

เตรียมไฟล์ icon (icon.png) และ Splash Screens (splash.png) โดยนำไปไว้ในโฟลเดอร์ resources

ไฟล์ที่ใช้เตรียมเป็น Splash Screens ควรมีขนาด 1920×1920 พิกเซล
โดยมีสีพื้นทั้งภาพ และเอาภาพที่ต้องการจริงๆอยู่ตรงกลางภาพ

เมื่อเตรียมทั้ง 2 ไฟล์ เสร็จ ต่อมาก็ใช้คำสั่ง ionic cordova resources เพื่อทำการ crop และ resize images

ดูวิธีใช้คำสั่ง

สั่งสำหรับ android

 

Link

Ionic: Icons

src/pages/home/home.html

src/pages/home/home.scss

บรรทัดที่ 4 : font-size ไว้ปรับขนาดของ icon

https://ionicframework.com/docs/components/#icons

Ionic: Checkbox

Ionic: Cards

src/pages/home/home.html

 

Lists In Cards

 

Images In Cards
ภาพที่ใช้ โดยเอาไปไว้ใน src\assets\imgs

 

Background Images

src/pages/home/home.html

src/pages/home/home.scss

 

Social Cards

src/pages/home/home.html

src/pages/home/home.scss

 

Map Cards

src/pages/home/home.html

src/pages/home/home.scss

Ionic: Badges

Badges are small components that typically communicate a numerical value to the user. They are typically used within an item.

ในรูปใช้ Badge เน้นตัวเลข โดยสามารถกำหนดสีต่างๆได้

Continue reading

ionic3: การอ่านข้อมูลของเครื่อง (Device)

Installation
Install the Cordova and Ionic Native plugins:

[code]
> ionic cordova plugin add cordova-plugin-device
> npm install –save @ionic-native/device
[/code]

 

Add platform
It’s now time to add a platform. You can add iOS or Android by running the following command.

[code]
> ionic cordova platform add android
> ionic cordova platform add ios
[/code]

Continue reading

การใช้ ionic เรียก WebApi เป็น Object

1. สร้างโปรเจ็กส์ ASP.NET Core

สร้างโปรเจ็กส์แบบ ASP.NET Core WebAPI in Azure

Startup.cs

ValuesController.cs

2. สร้างโปรเจ็กส์ ionic

สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native (GET)

home.html

home.ts

3. ผลการรัน

ลองใช้ Postman ทำการ POST

[code]
{
"ID": 101,
"FirstName": "Phaisarn",
"LastName": "Sutheebanjard"
}
[/code]

ได้ผลลัพธ์กลับมาเป็น

[code]
101 : Phaisarn Sutheebanjard
[/code]

เรียกผ่าน browser แบบ Get

ไปที่ http://jackwebapi25610824112107.azurewebsites.net/api/values/1

ได้ผลลัพธ์กลับมาเป็น

[code]
{"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
[/code]

ใช้ ionic เรียกแบบ Get

[code]
http://jackwebapi25610824112107.azurewebsites.net/api/values/1
this.stStatus 200
this.stValue {"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
person[‘id’] 50
person[‘firstName’] Phaisarn
person[‘lastName’] Sutheebanjard
[/code]

ใช้ ionic เรียกแบบ Post

[code]
this.stStatus 200
this.stValue 101 : Phaisarn Sutheebanjard
[/code]

ionic: ปัญหา Date

Javascript date is invalid on iOS

Your date string is not in a format specified to work with new Date. The only format in the spec is a simplified version of ISO-8601, but that was only added in ES5 and so support may be touch and go. Your string isn’t in that format, but it’s really close.

Note that there was an error in the ES5 specification which was corrected in ES2015 (ES6):

พยายามหลีกเลี่ยงการกำหนดค่าให้กับตัวแปร Date โดยตรง
เช่น กำหนดให้เป็นวันที่ปัจจุบันก่อน แล้วค่อยกำหนดวัน กำหนเดือน ดังตัวอย่างนี้

[code]
this.date = new Date();
this.date.setDate(2); // 2
this.date.setMonth(5); // june
[/code]

*โดย Jan น่าจะเริ่ม่ที่ 0

อันนี้น่าจะแก้ปัญหาได้นะ น่าจะ work!!

[code]
var firstDayThisMonth = new Date(this.date.getFullYear(), this.date.getMonth(), 1).getDay();
[/code]

เป็นการกำหนดให้เป็นวันที่ 1 ของเดือนปี ที่กำหนด

แต่ถ้าต้องการแค่เปรียบเทียบว่าวันที่ตรงกันมั๊ย กำหนดให้เป็น string แทน เช่น

[code]
let thisDate = this.date.getFullYear() + "-" + month + "-" + date;
[/code]