บทความ

สอนทำ WebView สามารถเปิดเว็บไซต์ได้บนแอพแอนดรอยด์ (Android) ง่ายมาก

รูปภาพ
WebView นั่นเป็นเหมือนเครื่องตัวหนึ่งของแอนดรอยด์ที่เอาไว้สำหรับทำฟีเจอร์ให้แอพพลิเคชั่นนั้นสามารถเข้าถึงเว็บไซต์ได้ โดยที่ไม่ต้องสลับไปใช้งานบน Browser หรือแอพพลิเคชั่นเล่นเว็บ ซึ่งการทำ WebView นั้นก็เป็นอะไรที่เขียนโค้ดง่ายมาก เรียกได้ว่าเขียนสั้นๆ ก็จบการทำงานขั้นพื้นฐานได้เลย อธิบายโค้ด this .webView = findViewById (R.id.webview); webView. setWebViewClient ( new WebViewClient ()); webView. loadUrl ( "https://tanat29myproject.com/" ); ประกาศ Widget  เพื่อให้สามารถใช้งาน WebView ได้ และกำหนด loadUrl ว่าให้โหลดเข้าที่แอดเดรสไหน WebSettings webSettings = webView. getSettings (); webSettings. setJavaScriptEnabled ( true ); กำหนดให้เปิด JavaScript ระหว่างการใช้งาน WebView โดยกำหนดให้เป็น true @ Override public void onBackPressed () { if (webView. canGoBack ()) { webView. goBack (); } else { super . onBackPressed (); } } กำหนดว่าถ้ากดปุ่ม Back บนมือถือ ให้หน้าเว็บบน WebView นั้นสามารถย้อนกลั...

การทำ Animated Curved Tabbar บน SwiftUI แบบเท่ห์ๆ

รูปภาพ
  การทำ Animated Curved Tabbar จะคล้ายๆกับการทำ BottomNavigationBar ซึ่งจะมีลักษณะเป็นแถบด้านล่างให้เหมือนกัน แต่อนิเมชั่นการเล่นการแสดงผลนั้นจะแตกต่างกันไป เด่วเราไปดูวิธีการทำ  Animated Curved Tabbar เลย

การทำ Crop Image ตัดรูปภาพเล็กลงบน Android Studio

รูปภาพ
ฟังก์ชั่นการตัดภาพถือว่าเป็นฟังก์ชันที่สำคัญมากของแอพพลิเคชั่นหลายๆตัว ลองคิดดูว่าถ้าหากเราเลือกรูปภาพได้ ภ่ายรูปได้ แต่ไม่สามารถตัดภาพตามแบบที่เรากำหนดได้ รูปภาพนั้นจะออกมาเป็นอย่างไร จะสวยแค่ไหน เพราะบางทีอาจจะมีบางจุดที่เราไม่ต้องการให้มาอยู่ในรูปก็ได้  ดังนั้นจึงมีระบบ CropImage หรือการตัดรูปเข้ามาช่วยในส่วนนี้ โดย ณ ตัวอย่างนี้จะใช้ตัวอย่างของ  ArthurHub (ชื่อบน Github) มาเป็นตัวอย่าง ซึ่งพอนำมาเขียนจริงๆนั้น โค้ดโดยรวมนั้นง่ายมาก จะมากแค่ไหนไปดูได้เลย เพิ่ม Dependencies ไฟล์ build.gradle implementation 'com.theartofdev.edmodo:android-image-cropper:2.8.+' ก่อนที่เราจะเริ่มเขียนโปรแกรม เราต้องเพิ่ท dependencies เข้าไปก่อน โดยให้เข้าไปที่ build.gradle และเพิ่มโค้ดส่วนบนเข้าไปในแถบ dependencies เมื่อเพิ่มเสร็จแล้วให้กด Sync Now และรอสักครู่ อธิบายโค้ด button .setOnClickListener( new View.OnClickListener() { @Override public void onClick (View v) { CropImage. activity ().start(MainActivity. this ) ; } }) ; กำหนดปุ่มกดว่า ถ้ากดแล้วให้ใช้คำสั่ง CropImage.ac...

การจับเวลาบน Flutter ทำยังไง (How to count up timer flutter?)

รูปภาพ
การจับเวลานั้นเป็นหนึ่งในฟีเจอร์ที่สำคัญสำหรับแอพพลิเคชั่นมือถือ ซึ่งสามารถนำไปใช้งานได้หลากหลาย และประยุกต์ได้อีกหลายแบบ สำหรับตัวอย่างเราจะมาสอนการทำฟีเจอร์จับเวลาบน Flutter กันครับ ง่ายๆ แค่ใส่โค้ดหลักหน้าเดียวจบ ไปดูกันเลย

การรับค่า ส่งค่าจากหน้าที่ 1 ไปหน้าที่ 2 บน Flutter (How to pass data between screens in Flutter?)

รูปภาพ
  สำหรับนักพัฒนาทุกคนคงเคยเจอปัญหากับรายละเอียดการส่งค่าจะหน้าที่ 1 ไปหน้าที่ 2 เพราะเราต้องให้ตัวแอปมีการนำค่าเหล่านี้ไปใช้งานได้ต่อ ไม่ทำการดึงค่ามาใหม่จากที่ต่างๆ ซึ่งทุกระบบสามารถทำได้ครับ และตัวอย่างนี้จะเป็นของ Flutter บ้างจะมีการรับค่าส่งค่ายังไง (How to pass data) ListTile ( leading : CircleAvatar ( backgroundImage : AssetImage ( 'assets/images/logo.png' ), ), title : Text ( 'A1' ), subtitle : Text ( 'Floor: 1st, Roof: No' ), onTap : () => Navigator . push ( context, MaterialPageRoute (builder : (context) => MainPage2 (name : "A1" )), ), ), สำหรับตัวอย่างนี้เราจะใช้ ListTile ในการส่งค่าครับ อันอื่นใช้ Button หรืออะไรก็ได้นะ โดยเราจะกำหนดรูปภาพเป็นวงกลมและใส่ Title , Subtitle จากนั้นใส่ onTap เป็นการบอกว่ากดแล้วให้ทำอะไรต่อ โดยคำสั่งคือ Navigator . push ( context, MaterialPageRoute (builder : (context) => MainPage2 (name : "A1" )), ), ให้ไปยังคลาส MainPage2 ...

ความเป็นมาของซอสถั่วเหลือง (ซีอิ๊ว)

รูปภาพ
ซอสถั่วเหลือง หรือซีอิ๊ว เป็นเครื่องปรุงอาหารที่ทำจากถั่วเหลืองหมัก, เมล็ดข้าวย่าง, น้ำเกลือ และเชื้อรา Aspergillus oryzae หรือ Aspergillus sojae ซอสถั่วเหลืองมีการคิดค้นมาราว 2,500 ปีมาแล้ว ในช่วงราชวงศ์ฮั่นตะวันตกของจีนโบราณ กำเนิดขึ้นทางบริเวณตอนใต้ของประเทศจีน และแพร่ขยายไปทั่วเอเชียตะวันออกและตะวันออกเฉียงใต้ โดยใช้เป็นเครื่องปรุงอาหาร คนจีนนั้นรู้จักถั่วเหลืองมานานแล้ว ตั้งแต่สมัย 3500 ปีที่แล้ว ว่ากันว่าซีอิ๊วนั้นเกิดขึ้นในราชวงศ์จู (246-1134 ปี ก่อนคริสตกาล) โดยเรียกมันว่า chiang/jiang แต่ก็ว่ากันว่าซีอิ๊วในสมัยนั้นอาจไม่ได้มีวิธีการผลิตอย่างสมัยนี้ แต่เป็นถั่วเหลืองหมักทั้งเมล็ดจนพัฒนาเป็นเต้าเจี้ยวเเบบเมล็ดและแบบข้นเช่นมิโสะญี่ปุ่น จนพัฒนาเป็นน้ำกรองจากถั่วเหลืองหมักกับข้าวและน้ำเกลือ จนมาถึงสมันราชวงศ์ซ้อง(ค.ศ.960-1279) ซีอิ๊วจึงเริ่มแพร่หลายมาก ถึงขั้นเป็น 1 ใน 7 สิ่งจำเป็นของวิถีจีน คือ ฟืน ข้าว น้ำมัน เกลือ น้ำส้มฯ ชา ซีอิ๊ว และในสมัยนี้ คำว่า chiang ก็เริ่มมีความหมายเจาะจงถึงซีอิ๊ว ไม่ใช่หมายถึงถั่วเหลืองหมักเหมือนเมื่อก่อน ต่อมาจีนได้เรียกซีอิ๊วว่า "เจี่ยงอิ้ว...

การทำรูปภาพใน AlertDialog บน Flutter

รูปภาพ
สวัสดีครับวันนี้จะพามาทำ AlertDialog บน Flutter กัน โดยรายละทุกอย่างก็เหมือนกัน AlertDialog ของฝั่ง Android เลย มีการกำหนดเงื่อนไข "ตกลง" หรือ "ยกเลิก" เพื่อแจ้งเตือนผู้ใช้งานให้เลือกอย่างใดอย่างนึง  ไฟล์ pubspec.yaml toast: ^ 0.1 . 5 สำหรับตัวอย่างนี้ขอใส่ Toast ลงไปด้วยละกัน เพื่อจะได้ใช้งานเวลากดเลือกเงื่อนไข จะได้มีข้อความแสดงออกมาครับ return AlertDialog( title: Row( children:[ Image.network( 'https://img.icons8.com/color/452/flutter.png' , width: 50 , height: 50 , fit: BoxFit.contain,), Text( ' Alert Dialog Image. ' ) ] ), content: Text( "Are You Sure Want To Proceed?" ), actions: <Widget>[ FlatButton( child: Text( "ตกลง" ), onPressed: () { // ใส่เงื่อนไขการกดตกลง Toast.show( "ตกลง" , context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); ...

SplashScreen บน Flutter ทำยังไงไปดูกัน

รูปภาพ
เข้าใจเงื่อนไขของ SplashScreen ก่อน การทำหน้านี้นั้นอารมณ์เหมือนหน้าแนะนำแอพก่อนเข้าระบบ ซึ่งแต่ละแอพก็จะมีวิธีการใช้งานต่างกัน แต่ตัวอย่างนี้จะเป็นการรอ 4 วินาที แล้วให้รันไปหน้าถัดไปนะครับ

การทำ BottomNavigationBar บน Flutter

รูปภาพ
  วันนี้จะมาสอนการทำ BottomNavigationBar บน Flutter กันครับ หรือก็คือการทำปุ่ม Tab ด้านล่างของแอพพลิเคชั่น ซึ่งถ้าเป็น Android Studio เขาจะทำเป็น Fragment กัน ส่วนใน Flutter นั้นเราจะใช้  bottomNavigationBar และใช้ BottomNavigationBarItem เป็นตัวกำหนด List ต่างๆ ของ Tab ซึ่งเอาจริงๆ ผมว่าเขียนง่ายกว่าเยอะเลยนะ 

การเลือกรูปภาพจากคลังได้หลายๆ รูป ทำยังไงไปดูกันเลย (Android)

รูปภาพ
การเลือกรูปจากคลังภาพ สวัสดีครับห่างหายไปนานกับการเขียนบทความ วันนี้ผมอยากจะมาแชร์ตัวอย่างการทำเลือกรูปจากคลังภาพแบบหลายๆ รูปมาใช้งาน  ซึ่งปกติเราอาจจะคุ้นชินกับการเลือกมาแค่ 1 รูป ดังนั้นตัวอย่างนี้จึงพิเศษกว่าครับ สามารถทำได้จริง 

การเพิ่ม Background Image ลงบนโปรแกรม Blender

รูปภาพ
การเพิ่ม Background Image ลงบนโปรแกรม Blender จะช่วยให้ผู้ออกแบบโมเดล 3D สามารถเปรียบเทียบโมเดลที่ตัวเองกำลังสร้างอยู่ได้อย่างสะดวก  เพราะสามารถเทียบสัดส่วนกับรูปภาพขนาดจริงได้เลย  ไม่ต้องยุ่งยากสลับโปรแกรมไปมาเพื่อดูรูป

การทำ Unwrap ในโปรแกรม Blender

รูปภาพ
การทำ Unwrap ในโปรแกรม Blender เพื่อที่จะได้ใส่ไฟล์รูปลงในด้านต่างๆของโมเดล 3D ทีเราต้องการ การทำ Unwrap นั้นจะมีขั้นตอนยุ่งยากหน่อยสำหรับมือใหม่เพราะมีหลายขั้นตอน และต้องใช้ 2 โปรแกรมคือ Blender และ Photoshop ควบคู่กันเพื่อให้ได้ไฟล์รูปที่ออกมาดูดี การทำ Unwrap นั้นความยากขึ้นเมื่อโมเดล 3D ของเรานั้นมีความซับซ้อนตามสัดส่วนของตัวงาน

ใช้ for loop ในการ Validate Edittext Android

รูปภาพ
สวัสดีครับ  หลายๆคนอาจจะเคยใช้ใช้งาน Edittext ที่เป็น Widget ตัวนึงบน Android กันมาบ้างแล้ว  ซึ่งการใช้งาน Edittext หรือช่องกรอกข้อความนั้น  ส่วนใหญ่แล้วจะต้องมีการดักข้อมูล (Validate) เพื่อดักข้อมูลที่ไม่ต้องการออกไป  เช่น  ข้อมูลเบอร์โทรศัพท์  จะเอาแต่ตัวเลขไม่เอาอักขระและ Edittext ห้ามว่าง , ข้อมูลอีเมลล์  จะต้องเป็นโครงสร้างมี @.com เช่น test@gmail.com  ซึ่งถ้าเกิดว่า Edittext นั้นมีน้อยก็ไม่มีปัญหาอะไรเพราะว่าสามารถใส่เงื่อนไขต่างๆ  อย่างไม่ยากเย็นอะไร  แต่ถ้ามี Edittext สัก 10 - 20 ตัวขึ้นไปอันนี้เหนื่อยแน่  เพราะต้องมาใส่เงื่อนไขทุกตัว ไฟล์ activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:app= "http://schemas.android.com/apk/res-auto" xmlns:tools= "http://schemas.android.com/tools" android:layout_width= "match_parent" android:layout_height= "match_parent" android:gravity=...