1. ภาพรวม
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีตรวจสอบประสิทธิภาพของแอปในระหว่างการเปิดตัวคุณลักษณะ แอปตัวอย่างของเราจะมีฟังก์ชันพื้นฐาน และตั้งค่าให้แสดงภาพพื้นหลังที่แตกต่างกันโดยอิงจากแฟล็ก Firebase Remote Config เราจะพูดถึงการติดตามเครื่องมือเพื่อตรวจสอบประสิทธิภาพของแอป การเปิดตัวการเปลี่ยนแปลงการกำหนดค่าในแอป การตรวจสอบผลกระทบ และดูว่าเราจะปรับปรุงประสิทธิภาพได้อย่างไร
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่มการตรวจสอบประสิทธิภาพของ Firebase ลงในแอปบนอุปกรณ์เคลื่อนที่เพื่อรับเมตริกที่พร้อมใช้งานทันที (เช่น เวลาเริ่มต้นแอปและเฟรมที่ช้าหรือหยุดนิ่ง)
- วิธีเพิ่มการติดตามที่กำหนดเองเพื่อทำความเข้าใจเส้นทางรหัสที่สำคัญของเส้นทางผู้ใช้ของคุณ
- วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจเมตริกและติดตามการเปลี่ยนแปลงที่สำคัญ เช่น การเปิดตัวคุณลักษณะ
- วิธีตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อตรวจสอบเมตริกหลักของคุณ
- วิธีเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase
ข้อกำหนดเบื้องต้น
- Android Studio 4.0 หรือสูงกว่า
- โปรแกรมจำลอง Android ที่มี API ระดับ 16 ขึ้นไป
- Java เวอร์ชัน 8 ขึ้นไป
- ความเข้าใจพื้นฐานของ Firebase Remote Config
2. ตั้งค่าตัวอย่างโครงการ
ดาวน์โหลดรหัส
เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนโค้ดตัวอย่างสำหรับ codelab นี้ สิ่งนี้จะสร้างโฟลเดอร์ชื่อ codelab-perf-rc-android
บนเครื่องของคุณ:
$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git
หากคุณไม่มี Git ในเครื่อง คุณสามารถดาวน์โหลดโค้ดได้โดยตรงจาก GitHub
นำเข้าโครงการภายใต้โฟลเดอร์ firebase-perf-rc-android-start
ลงใน Android Studio คุณอาจเห็นข้อยกเว้นรันไทม์หรืออาจมีคำเตือนเกี่ยวกับไฟล์ google-services.json
ที่หายไป เราจะแก้ไขในส่วนถัดไป
ใน Codelab นี้ คุณจะใช้ปลั๊กอิน Firebase Assistant เพื่อลงทะเบียนแอป Android ของคุณกับโปรเจ็กต์ Firebase และเพิ่มไฟล์การกำหนดค่า Firebase ปลั๊กอิน และการพึ่งพาที่จำเป็นให้กับโปรเจ็กต์ Android ของคุณ ทั้งหมดนี้ทำได้จากภายใน Android Studio !
เชื่อมต่อแอพของคุณกับ Firebase
- ไปที่ Android Studio / Help > Check for updates เพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio เวอร์ชันล่าสุดและ Firebase Assistant
- เลือก เครื่องมือ > Firebase เพื่อเปิดบานหน้าต่าง ผู้ช่วย
- เลือก การตรวจสอบประสิทธิภาพ เพื่อเพิ่มแอปของคุณ จากนั้นคลิก เริ่มต้นใช้งานการตรวจสอบประสิทธิภาพ
- คลิก เชื่อมต่อกับ Firebase เพื่อเชื่อมต่อโปรเจ็กต์ Android ของคุณกับ Firebase (ซึ่งจะเป็นการเปิดคอนโซล Firebase ในเบราว์เซอร์ของคุณ)
- ในคอนโซล Firebase คลิก เพิ่มโปรเจ็ กต์ จากนั้นป้อนชื่อโปรเจ็กต์ Firebase (หากคุณมีโปรเจ็กต์ Firebase อยู่แล้ว คุณสามารถเลือกโปรเจ็กต์ที่มีอยู่แทนได้) คลิกดำเนินการ ต่อ และยอมรับข้อกำหนดเพื่อสร้างโปรเจ็กต์ Firebase และแอป Firebase ใหม่
ถัดไป คุณควรเห็นกล่องโต้ตอบ เชื่อมต่อ แอป Firebase ใหม่กับโปรเจ็กต์ Android Studio
- คลิก เชื่อมต่อ
- เปิด Android Studio ในบานหน้าต่าง ผู้ช่วย คุณจะเห็นการยืนยันว่าแอปของคุณเชื่อมต่อกับ Firebase
เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ
ในบานหน้าต่าง ผู้ช่วย ใน Android Studio ให้คลิก เพิ่มการตรวจสอบประสิทธิภาพในแอปของคุณ
คุณควรเห็นกล่องโต้ตอบ ยอมรับการเปลี่ยนแปลง หลังจากนั้น Android Studio ควรซิงค์แอปของคุณเพื่อให้แน่ใจว่ามีการเพิ่มการพึ่งพาที่จำเป็นทั้งหมด
สุดท้าย คุณควรเห็นข้อความแสดงความสำเร็จในบานหน้าต่าง ผู้ช่วย ใน Android Studio ว่าการขึ้นต่อกันทั้งหมดได้รับการตั้งค่าอย่างถูกต้อง
เป็นขั้นตอนเพิ่มเติม เปิดใช้งานการบันทึกการดีบัก โดยทำตามคำแนะนำในขั้นตอน "(ไม่บังคับ) เปิดใช้งานการบันทึกการดีบัก" คำแนะนำเดียวกันนี้มีอยู่ใน เอกสารสาธารณะ ด้วย
3. เรียกใช้แอพ
ตอนนี้คุณควรเห็นไฟล์ google-services.json
ในไดเรกทอรีโมดูล (ระดับแอป) ของแอป และตอนนี้แอปของคุณควรรวบรวม ใน Android Studio คลิก เรียกใช้ > เรียกใช้ "แอป" เพื่อสร้างและเรียกใช้แอปบนโปรแกรมจำลอง Android
เมื่อแอปทำงาน คุณควรเห็นหน้าจอเริ่มต้นดังนี้:
หลังจากนั้นไม่กี่วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะแสดงขึ้น:
เกิดอะไรขึ้นภายใต้ประทุน?
หน้าจอเริ่มต้นถูกนำมาใช้ใน SplashScreenActivity และดำเนินการดังต่อไปนี้:
- ใน
onCreate()
เราเริ่มต้นการตั้งค่า Firebase Remote Config และดึงค่า config ที่คุณจะตั้งค่าในแดชบอร์ด Remote Config ในภายหลังใน Codelab นี้ - ใน
executeTasksBasedOnRC()
เราอ่านค่า config ของแฟล็กseasonal_image_url
หาก URL มาจากค่า config เราจะดาวน์โหลดภาพพร้อมกัน - เมื่อการดาวน์โหลดเสร็จสิ้น แอพจะนำทางไปยัง MainActivity และเรียก
finish()
เพื่อสิ้นสุดSplashScreenActivity
ใน MainActivity
หาก seasonal_image_url
การกำหนด season_image_url ผ่าน Remote Config คุณลักษณะนี้จะเปิดใช้งานและภาพที่ดาวน์โหลดจะแสดงเป็นพื้นหลังของหน้าหลัก มิฉะนั้น รูปภาพเริ่มต้น (ที่แสดงด้านบน) จะแสดงขึ้น
4. ตั้งค่า Remote Config
ขณะนี้แอปของคุณกำลังทำงานอยู่ คุณสามารถตั้งค่าสถานะคุณลักษณะใหม่ได้
- ในแผงด้านซ้ายของ คอนโซล Firebase ให้ค้นหา ส่วน Engage จากนั้นคลิก Remote Config
- คลิกปุ่ม สร้างการกำหนดค่า เพื่อเปิดแบบฟอร์มการกำหนดค่าและเพิ่ม
seasonal_image_url
เป็นคีย์พารามิเตอร์ - คลิก เพิ่มคำอธิบาย จากนั้นป้อนคำอธิบายนี้:
Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
- คลิก เพิ่มใหม่ -> ค่าตามเงื่อนไข -> สร้างเงื่อนไขใหม่
- สำหรับชื่อเงื่อนไข ให้ป้อน
Seasonal image rollout
- สำหรับส่วน
Applies if...
เลือกUser in random percentile <= 0%
(คุณต้องการปิดคุณลักษณะนี้ไว้จนกว่าคุณจะพร้อมเปิดตัวในขั้นตอนต่อไป) - คลิก สร้างเงื่อนไข คุณจะใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวคุณลักษณะใหม่ให้กับผู้ใช้ของคุณ
- เปิด แบบฟอร์มสร้างพารามิเตอร์แรกของคุณ และค้นหาฟิลด์ Value for Seasonal image rollout ป้อน URL ที่จะดาวน์โหลดภาพตามฤดูกาล:
https://images.unsplash.com/photo-1552691021-7043334e0b51
- ปล่อยให้ค่าดีฟอลต์เป็นสตริงว่าง ซึ่งหมายความว่ารูปภาพเริ่มต้นใน codebase จะแสดงแทนรูปภาพที่ดาวน์โหลดจาก URL
- คลิก บันทึก
คุณจะเห็นว่าการกำหนดค่าใหม่ถูกสร้างขึ้นเป็นแบบร่าง
- คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลงที่ด้านบนเพื่ออัปเดตแอปของคุณ
5. เพิ่มการตรวจสอบเวลาในการโหลดข้อมูล
แอปของคุณโหลดข้อมูลบางอย่างล่วงหน้าก่อนที่จะแสดง MainActivity
และแสดงหน้าจอเริ่มต้นเพื่อซ่อนกระบวนการนี้ คุณไม่ต้องการให้ผู้ใช้ของคุณรอบนหน้าจอนี้นานเกินไป โดยปกติแล้ว การตรวจสอบระยะเวลาที่หน้าจอเริ่มต้นจะเป็นประโยชน์
การตรวจสอบประสิทธิภาพของ Firebase มีวิธีดำเนินการดังกล่าว คุณสามารถใช้เครื่องมือ ติดตามโค้ดแบบกำหนดเอง เพื่อตรวจสอบประสิทธิภาพของโค้ดเฉพาะในแอปของคุณ เช่น เวลาในการโหลดข้อมูลและเวลาในการประมวลผลของคุณลักษณะใหม่ของคุณ
ในการติดตามระยะเวลาที่แสดงหน้าจอเริ่มต้น คุณจะต้องเพิ่มการติดตามโค้ดที่กำหนดเองใน SplashScreenActivity
ซึ่งเป็น Activity
ที่ใช้หน้าจอเริ่มต้น
- เริ่มต้น สร้าง และเริ่มการติดตามโค้ดแบบกำหนดเองที่ชื่อ
splash_screen_trace
:
SplashScreenActivity.java
// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...
public class SplashScreenActivity extends AppCompatActivity {
private static final String TAG = "SplashScreenActivity";
private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";
// TODO: Initialize splash_screen_trace
private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
// ...
}
- สิ้นสุดการติดตามใน
onDestroy()
ของSplashScreenActivity
:
SplashScreenActivity.java
@Override
protected void onDestroy() {
super.onDestroy();
// TODO: Stop the splash_screen_trace here
splashScreenTrace.stop();
}
เนื่องจากคุณลักษณะใหม่ของคุณดาวน์โหลดและประมวลผลภาพ คุณจะเพิ่มการติดตามโค้ดที่กำหนดเองครั้งที่สอง ซึ่งจะติดตามเวลาเพิ่มเติมที่คุณลักษณะของคุณเพิ่มลงใน SplashScreenActivity
- เริ่มต้น สร้าง และเริ่มการติดตามโค้ดแบบกำหนดเองที่ชื่อ
splash_seasonal_image_processing
:
SplashScreenActivity.java
private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);
if (!seasonalImageUrl.isEmpty()) {
// TODO: Start the splash_seasonal_image_processing here
final Trace seasonalImageProcessingTrace = FirebasePerformance
.startTrace("splash_seasonal_image_processing");
// ...
}
}
- สิ้นสุดการติดตามในเมธอดทั้ง
onLoadFailed()
และonResourceReady()
ของRequestListener
:
SplashScreenActivity.java
Glide.with(SplashScreenActivity.this.getApplicationContext())
.asBitmap()
.load(seasonalImageUrl)
.signature(new ObjectKey(Utils.getCacheUUID()))
.listener(new RequestListener<Bitmap>() {
@Override
public boolean onLoadFailed(
@Nullable GlideException e,
Object model, Target<Bitmap> target,
boolean isFirstResource) {
// TODO: Stop the splash_seasonal_image_processing here
seasonalImageProcessingTrace.stop();
launchMainActivity();
return true;
}
@Override
public boolean onResourceReady(Bitmap resource, Object model,
Target<Bitmap> target, DataSource dataSource,
boolean isFirstResource) {
// TODO: Stop the splash_seasonal_image_processing here
seasonalImageProcessingTrace.stop();
launchMainActivity();
return true;
}
})
.preload();
ตอนนี้คุณได้เพิ่มการติดตามโค้ดที่กำหนดเองเพื่อติดตามระยะเวลาหน้าจอสแปลช ( splash_screen_trace)
และเวลาประมวลผลของฟีเจอร์ใหม่ ( splash_seasonal_image_processing
) ให้ เรียกใช้แอป ใน Android Studio อีกครั้ง คุณควรเห็นข้อความการบันทึกที่มี Logging trace metric: splash_screen_trace
ตามด้วยระยะเวลาของการติดตาม คุณจะไม่เห็นข้อความบันทึกสำหรับ splash_seasonal_image_processing
เนื่องจากคุณยังไม่ได้เปิดใช้งานคุณลักษณะใหม่
6. เพิ่มแอตทริบิวต์ที่กำหนดเองในการติดตาม
สำหรับการติดตามโค้ดที่กำหนดเอง การตรวจสอบประสิทธิภาพจะบันทึกแอตทริบิวต์เริ่มต้นโดยอัตโนมัติ (ข้อมูลเมตาทั่วไป เช่น เวอร์ชันแอป ประเทศ อุปกรณ์ ฯลฯ) เพื่อให้คุณสามารถกรองข้อมูลสำหรับการติดตามใน คอนโซล Firebase คุณยังสามารถเพิ่มและตรวจสอบ แอตทริบิวต์ที่กำหนดเอง ได้
ในแอปของคุณ คุณเพิ่งเพิ่มการติดตามโค้ดที่กำหนดเองสองรายการเพื่อตรวจสอบระยะเวลาหน้าจอสแปลชและเวลาในการประมวลผลของคุณลักษณะใหม่ ปัจจัยที่อาจส่งผลต่อระยะเวลาเหล่านี้คือ รูปภาพที่แสดงเป็นรูปภาพเริ่มต้นหรือต้องดาวน์โหลดรูปภาพจาก URL และใครจะรู้ – ในที่สุดคุณอาจมี URL ที่แตกต่างจากที่คุณดาวน์โหลดรูปภาพ
ดังนั้น มาเพิ่มแอตทริบิวต์ที่กำหนดเองซึ่งแสดง URL รูปภาพตามฤดูกาลให้กับการติดตามโค้ดที่กำหนดเองเหล่านี้ ด้วยวิธีนี้ คุณสามารถกรองข้อมูลระยะเวลาตามค่าเหล่านี้ได้ในภายหลัง
- เพิ่มแอตทริบิวต์ที่กำหนดเอง (
seasonal_image_url_attribute
) สำหรับsplash_screen_trace
ในตอนต้นของเมธอดexecuteTasksBasedOnRC
:
SplashScreenActivity.java
private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);
// TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
if (seasonalImageUrl.isEmpty()) {
splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
} else {
splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
}
// ...
}
- เพิ่มแอตทริบิวต์ที่กำหนดเองเดียวกันสำหรับ
splash_seasonal_image_processing
หลังจากการstartTrace("splash_seasonal_image_processing")
:
SplashScreenActivity.java
if (!seasonalImageUrl.isEmpty()) {
// TODO: Start the splash_seasonal_image_processing here
final Trace seasonalImageProcessingTrace = FirebasePerformance
.startTrace("splash_seasonal_image_processing");
// TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
seasonalImageProcessingTrace
.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
// ...
}
เมื่อคุณได้เพิ่มแอตทริบิวต์ที่กำหนดเอง ( seasonal_image_url_attribute
) สำหรับการติดตามที่กำหนดเองทั้งสองของคุณแล้ว ( splash_screen_trace
และ splash_seasonal_image_processing
) ให้ เรียกใช้แอป ใน Android Studio อีกครั้ง คุณควรเห็นข้อความบันทึกที่มี Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'.
คุณยังไม่ได้เปิดใช้งานพารามิเตอร์ Remote Config seasonImageUrl ซึ่งเป็นสาเหตุที่ค่าแอตทริบิวต์ไม่ถูก unset
SDK การตรวจสอบประสิทธิภาพจะรวบรวมข้อมูลการติดตามและส่งไปยัง Firebase คุณสามารถดูข้อมูลใน แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase ซึ่งเราจะอธิบายโดยละเอียดในขั้นตอนต่อไปของ Codelab
7. กำหนดค่าแดชบอร์ดการตรวจสอบประสิทธิภาพของคุณ
กำหนดค่าแดชบอร์ดของคุณเพื่อตรวจสอบคุณสมบัติของคุณ
ใน คอนโซล Firebase เลือกโปรเจ็กต์ที่มีแอป Friendly Eats ของคุณ
ในแผงด้านซ้าย ค้นหาส่วน Release & Monitor จากนั้นคลิก Performance
คุณควรเห็นแดชบอร์ด ประสิทธิภาพ พร้อมจุดข้อมูลแรกในกระดานตัวชี้วัดของคุณ! SDK การตรวจสอบประสิทธิภาพจะรวบรวมข้อมูลประสิทธิภาพจากแอปของคุณและแสดงภายในไม่กี่นาทีหลังจากรวบรวม
กระดานเมตริกนี้เป็นที่ที่คุณสามารถติดตามเมตริกที่สำคัญสำหรับแอปของคุณได้ มุมมองเริ่มต้นจะรวมระยะเวลาของการติดตามเวลาเริ่มต้นของแอป แต่คุณสามารถเพิ่มเมตริกที่คุณสนใจมากที่สุดได้ เนื่องจากคุณกำลังติดตามคุณลักษณะใหม่ที่คุณเพิ่ม คุณสามารถปรับแต่งแดชบอร์ดของคุณเพื่อแสดงระยะเวลาของการติดตามโค้ดที่กำหนดเอง splash_screen_trace
- คลิกที่ช่อง Select a metric ที่ว่างเปล่า
- ในหน้าต่างไดอะล็อก เลือกประเภทการติดตามของ Custom traces และชื่อการติดตาม
splash_screen_trace
- คลิก Select metric และคุณจะเห็นระยะเวลาของ
splash_screen_trace
ถูกเพิ่มลงในแดชบอร์ดของคุณ!
คุณสามารถใช้ขั้นตอนเดียวกันนี้เพื่อเพิ่มเมตริกอื่นๆ ที่คุณสนใจ เพื่อให้คุณสามารถดูได้อย่างรวดเร็วว่าประสิทธิภาพเปลี่ยนแปลงไปอย่างไรเมื่อเวลาผ่านไป และแม้กระทั่งในรุ่นต่างๆ
บอร์ดเมตริกเป็น เครื่องมือที่มีประสิทธิภาพใน การติดตามประสิทธิภาพของเมตริกหลักที่ผู้ใช้ของคุณสัมผัส สำหรับ Codelab นี้ คุณมีชุดข้อมูลขนาดเล็กในช่วงเวลาที่แคบ ดังนั้นคุณจะใช้มุมมองแดชบอร์ดอื่นๆ ที่จะช่วยให้คุณเข้าใจประสิทธิภาพของการเปิดตัวคุณลักษณะ
8. เปิดตัวคุณลักษณะของคุณ
เมื่อคุณตั้งค่าการตรวจสอบแล้ว คุณก็พร้อมที่จะเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase ( seasonal_image_url)
ที่คุณตั้งค่าไว้ก่อนหน้านี้แล้ว
ในการเปิดตัวการเปลี่ยนแปลง คุณจะต้องกลับไปที่ หน้าการกำหนดค่าระยะไกล ในคอนโซล Firebase เพื่อเพิ่มเปอร์เซ็นต์ไทล์ผู้ใช้ของเงื่อนไขการกำหนดเป้าหมายของคุณ โดยปกติ คุณจะเผยแพร่คุณสมบัติใหม่ให้กับผู้ใช้ส่วนเล็กๆ และเพิ่มคุณสมบัตินั้นก็ต่อเมื่อคุณมั่นใจว่าไม่มีปัญหากับมัน อย่างไรก็ตาม ใน Codelab นี้ คุณเป็นผู้ใช้แอปเพียงคนเดียว ดังนั้นคุณจึงเปลี่ยนเปอร์เซ็นต์ไทล์เป็น 100% ได้
- คลิกแท็บ เงื่อนไข ที่ด้านบนของหน้า
- คลิกเงื่อนไข
Seasonal image rollout
ที่คุณเพิ่มไว้ก่อนหน้านี้ - เปลี่ยนเปอร์เซ็นไทล์เป็น 100%
- คลิก บันทึกเงื่อนไข
- คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง
กลับมาที่ Android Studio ให้รีสตาร์ทแอปในโปรแกรมจำลองเพื่อดูคุณลักษณะใหม่ หลังจากหน้าจอเริ่มต้น คุณจะเห็นหน้าจอหลักสถานะว่างใหม่!
9. ตรวจสอบการเปลี่ยนแปลงประสิทธิภาพ
ตอนนี้ มาดูประสิทธิภาพของการโหลดหน้าจอเริ่มต้นโดยใช้ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase ในขั้นตอนนี้ของ Codelab คุณจะใช้ส่วนต่างๆ ของแดชบอร์ดเพื่อดูข้อมูลประสิทธิภาพ
- บนแท็บ แดชบอร์ด หลัก ให้เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บ Custom traces ในตารางนี้ คุณจะเห็นการติดตามโค้ดแบบกำหนดเองที่คุณเพิ่มไว้ก่อนหน้านี้ บวกกับ การติดตามแบบสำเร็จรูป บางส่วน
- เมื่อคุณเปิดใช้งานคุณลักษณะใหม่แล้ว ให้มองหาโค้ดที่กำหนดเอง trace
splash_seasonal_image_processing
ซึ่งวัดเวลาที่ใช้ในการดาวน์โหลดและประมวลผลภาพ จากค่า Duration ของการติดตาม คุณจะเห็นว่าการดาวน์โหลดและการประมวลผลนี้ใช้เวลานานพอสมควร
- เนื่องจากคุณมีข้อมูลสำหรับ
splash_seasonal_image_processing
คุณจึงเพิ่มระยะเวลาของการติดตามนี้ในกระดานเมตริกที่ด้านบนของแท็บ แดชบอร์ด ได้
คล้ายกับก่อนหน้านี้ คลิกที่ช่อง Select a metric ที่ว่างเปล่า ในหน้าต่างไดอะล็อก เลือกประเภทการติดตาม Custom traces และชื่อการติดตาม splash_seasonal_image_processing
สุดท้าย คลิก เลือกเมตริก เพื่อเพิ่มเมตริกนี้ลงในบอร์ดเมตริก
- หากต้องการยืนยันความแตกต่างเพิ่มเติม คุณสามารถดูข้อมูลของ
splash_screen_trace
ได้อย่างละเอียดยิ่งขึ้น คลิกการ์ดsplash_screen_trace
ในบอร์ดเมตริก จากนั้นคลิก ดูรายละเอียดเมตริก
- ในหน้ารายละเอียด คุณจะเห็นรายการแอตทริบิวต์ที่ด้านล่างซ้าย รวมทั้งแอตทริบิวต์ที่กำหนดเองที่คุณสร้างไว้ก่อนหน้านี้ คลิกแอตทริบิวต์ที่กำหนดเอง
seasonal_image_url_attribute
เพื่อดูระยะเวลาหน้าจอสแปลชสำหรับ URL รูปภาพตามฤดูกาลแต่ละรายการทางด้านขวา:
- ค่าระยะเวลาหน้าจอเริ่มต้นของคุณอาจแตกต่างไปจากในภาพหน้าจอด้านบนเล็กน้อย แต่คุณควรจะมี ระยะเวลานานกว่า เมื่อดาวน์โหลดรูปภาพจาก URL เมื่อเทียบกับการใช้รูปภาพเริ่มต้น (แสดงโดย "unset")
ใน Codelab นี้ สาเหตุของระยะเวลาที่นานกว่านี้อาจตรงไปตรงมา แต่ในแอปจริงอาจไม่ชัดเจนนัก ข้อมูลระยะเวลาที่รวบรวมจะมาจากอุปกรณ์ต่าง ๆ ใช้งานแอพในเงื่อนไขการเชื่อมต่อเครือข่ายที่หลากหลาย และเงื่อนไขเหล่านี้อาจแย่กว่าที่คุณคาดไว้ ลองดูว่าคุณจะตรวจสอบปัญหานี้อย่างไรหากเป็นสถานการณ์ในโลกแห่งความเป็นจริง
- คลิก ประสิทธิภาพ ที่ด้านบนของหน้าเพื่อกลับไปที่แท็บหลักของ แดชบอร์ด :
- ในตารางการติดตามที่ด้านล่างของหน้า คลิกแท็บ คำขอเครือข่าย ในตารางนี้ คุณจะเห็นคำขอเครือข่ายทั้งหมดจากแอปของคุณ รวมกันเป็นรูปแบบ URL รวมถึงรูปแบบ URL
images.unsplash.com/**
หากคุณเปรียบเทียบค่าของเวลาตอบสนองนี้กับเวลาโดยรวมที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ (กล่าวคือ ระยะเวลาของการติดตามsplash_seasonal_image_processing
) คุณจะเห็นว่าใช้เวลาในการ ดาวน์โหลด รูปภาพเป็นจำนวนมาก
ผลการปฏิบัติงาน
เมื่อใช้ Firebase Performance Monitoring คุณเห็นผลกระทบต่อไปนี้ต่อผู้ใช้ปลายทางที่เปิดใช้งานคุณสมบัติใหม่:
- เวลาที่ใช้ใน
SplashScreenActivity
เพิ่มขึ้น - ระยะเวลาสำหรับ
splash_seasonal_image_processing
นั้นใหญ่มาก - ความล่าช้าเกิดจากเวลาตอบสนองสำหรับการดาวน์โหลดภาพและเวลาในการประมวลผลที่จำเป็นสำหรับภาพ
ในขั้นตอนต่อไป คุณจะลดผลกระทบต่อประสิทธิภาพโดยย้อนกลับคุณลักษณะและระบุว่าคุณจะปรับปรุงการใช้งานคุณลักษณะได้อย่างไร
10. ย้อนกลับคุณสมบัติ
การเพิ่มเวลารอของผู้ใช้ระหว่างหน้าจอเริ่มต้นเป็นสิ่งที่ไม่พึงปรารถนา ประโยชน์หลักประการหนึ่งของการกำหนดค่าระยะไกลคือความสามารถในการหยุดชั่วคราวและย้อนกลับการเปิดตัวโดยไม่ต้องเผยแพร่เวอร์ชันอื่นให้กับผู้ใช้ วิธีนี้ช่วยให้คุณตอบสนองต่อปัญหาได้อย่างรวดเร็ว (เช่น ปัญหาด้านประสิทธิภาพที่คุณพบในขั้นตอนที่แล้ว) และลดจำนวนผู้ใช้ที่ไม่พึงพอใจให้เหลือน้อยที่สุด
เพื่อเป็นการบรรเทาปัญหาอย่างรวดเร็ว คุณจะรีเซ็ตเปอร์เซ็นไทล์การเปิดตัวกลับเป็น 0
เพื่อให้ผู้ใช้ทั้งหมดเห็นรูปภาพเริ่มต้นอีกครั้ง:
- กลับไปที่ หน้าการกำหนดค่า ระยะไกล ในคอนโซล Firebase
- คลิก เงื่อนไข ที่ด้านบนของหน้า
- คลิกเงื่อนไข
Seasonal image rollout
ที่คุณเพิ่มไว้ก่อนหน้านี้ - เปลี่ยนเปอร์เซ็นไท ล์เป็น 0%
- คลิก บันทึกเงื่อนไข
- คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง
รีสตาร์ทแอปใน Android Studio และคุณจะเห็นหน้าจอหลักของสถานะว่างดั้งเดิม:
11. แก้ไขปัญหาด้านประสิทธิภาพ
คุณค้นพบก่อนหน้านี้ใน Codelab ว่าการดาวน์โหลดรูปภาพสำหรับหน้าจอเริ่มต้นทำให้แอปของคุณทำงานช้าลง เมื่อมองดูรูปภาพที่ดาวน์โหลดให้ละเอียดยิ่งขึ้น คุณจะเห็นว่าคุณกำลังใช้ ความละเอียดดั้งเดิม ของรูปภาพ ซึ่งเกิน 2MB! การแก้ไขปัญหาด้านประสิทธิภาพอย่างรวดเร็วอย่างหนึ่งคือการลดคุณภาพเป็นความละเอียดที่เหมาะสมยิ่งขึ้น เพื่อให้รูปภาพใช้เวลาดาวน์โหลดน้อยลง
เปิดตัวค่า Remote Config อีกครั้ง
- กลับไปที่ หน้าการกำหนดค่า ระยะไกล ในคอนโซล Firebase
- คลิกไอคอน แก้ไข สำหรับพารามิเตอร์
seasonal_image_url
- อัปเดต Value for Seasonal image rollout เป็น
https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640
จากนั้นคลิก Save
- คลิกแท็บ เงื่อนไข ที่ด้านบนของหน้า
- คลิก การเปิดตัวรูปภาพตามฤดูกาล จากนั้นตั้งค่าเปอร์เซ็นต์ไทล์กลับเป็น 100%
- คลิก บันทึกเงื่อนไข
- คลิกที่ปุ่ม เผยแพร่การเปลี่ยนแปลง
12. ทดสอบการแก้ไขและตั้งค่าการแจ้งเตือน
เรียกใช้แอพในเครื่อง
ด้วยการตั้งค่าคอนฟิกใหม่ให้ใช้ URL รูปภาพดาวน์โหลดอื่น ให้เรียกใช้แอปอีกครั้ง คราวนี้คุณควรสังเกตว่าเวลาที่ใช้บนหน้าจอเริ่มต้นสั้นลงกว่าเดิม
ดูประสิทธิภาพของการเปลี่ยนแปลง
กลับไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase เพื่อดูว่าเมตริกมีลักษณะอย่างไร
- คราวนี้คุณจะใช้ตารางการติดตามเพื่อไปยังหน้ารายละเอียด ในตารางการติดตาม ในแท็บ Custom traces ให้คลิก custom trace
splash_seasonal_image_processing
เพื่อดูมุมมองรายละเอียดเพิ่มเติมของตัวชี้วัดระยะเวลาอีกครั้ง
- คลิกแอตทริบิวต์ที่กำหนดเอง
seasonal_image_url_attribute
เพื่อดูรายละเอียดแอตทริบิวต์ที่กำหนดเองอีกครั้ง หากคุณวางเมาส์เหนือ URL คุณจะเห็นค่าที่ตรงกับ URL ใหม่สำหรับรูปภาพขนาดย่อ:https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640
(พร้อมเครื่องหมาย?w=640
ในตอนท้าย) ค่าระยะเวลาที่เกี่ยวข้องกับรูปภาพนี้สั้นกว่าค่าสำหรับรูปภาพก่อนหน้าอย่างมาก และเป็นที่ยอมรับสำหรับผู้ใช้ของคุณมากขึ้น!
- ในตอนนี้ คุณได้ปรับปรุงประสิทธิภาพของหน้าจอเริ่มต้นแล้ว คุณสามารถตั้งค่าการแจ้งเตือนเพื่อแจ้งให้คุณทราบเมื่อการติดตามเกินเกณฑ์ที่คุณตั้งไว้ เปิด แดชบอร์ด ประสิทธิภาพ และคลิกไอคอนเมนูรายการเพิ่มเติม (สามจุด) สำหรับ splash_screen_trace และคลิก การตั้งค่าการแจ้งเตือน
- คลิกปุ่มสลับเพื่อเปิดใช้งานการแจ้งเตือน Duration ตั้งค่าเกณฑ์ให้สูงกว่าค่าที่คุณเห็นเล็กน้อย เพื่อที่ว่าถ้า splash_screen_trace ของคุณเกินเกณฑ์ คุณจะได้รับอีเมล
- คลิก บันทึก เพื่อสร้างการแจ้งเตือนของคุณ เลื่อนลงไปที่ ตาราง การติดตาม จากนั้นคลิกแท็บ Custom traces เพื่อดูว่าการแจ้งเตือนของคุณเปิดใช้งานอยู่!
13. ขอแสดงความยินดี!
ยินดีด้วย! คุณเปิดใช้ Firebase Performance Monitoring SDK และรวบรวมการติดตามเพื่อวัดประสิทธิภาพของฟีเจอร์ใหม่ คุณตรวจสอบเมตริกประสิทธิภาพหลักสำหรับการเปิดตัวคุณลักษณะใหม่และตอบสนองอย่างรวดเร็วเมื่อพบปัญหาด้านประสิทธิภาพ ทั้งหมดนี้เป็นไปได้ด้วยความสามารถในการเปลี่ยนแปลงการกำหนดค่าด้วย Remote Config และตรวจสอบปัญหาด้านประสิทธิภาพแบบเรียลไทม์
สิ่งที่เราได้กล่าวถึง
- การเพิ่ม Firebase Performance Monitoring SDK ให้กับแอปของคุณ
- การเพิ่มการติดตามโค้ดที่กำหนดเองลงในโค้ดของคุณเพื่อวัดคุณลักษณะเฉพาะ
- การตั้งค่าพารามิเตอร์การกำหนดค่าระยะไกลและค่าตามเงื่อนไขเพื่อควบคุม/เปิดตัวคุณลักษณะใหม่
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อระบุปัญหาระหว่างการเปิดตัว
- การตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพของแอปเกินเกณฑ์ที่คุณตั้งไว้