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 > ตรวจสอบการอัปเดต เพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
- เลือก เครื่องมือ > Firebase เพื่อเปิดบานหน้าต่าง ผู้ช่วย
- เลือก การตรวจสอบประสิทธิภาพ เพื่อเพิ่มลงในแอปของคุณ จากนั้นคลิก เริ่มต้นใช้งานการตรวจสอบประสิทธิภาพ
- คลิก เชื่อมต่อกับ Firebase เพื่อเชื่อมต่อโปรเจ็กต์ Android ของคุณกับ Firebase (ซึ่งจะเป็นการเปิดคอนโซล Firebase ในเบราว์เซอร์ของคุณ)
- ในคอนโซล Firebase คลิก เพิ่มโปรเจ็กต์ จากนั้นป้อนชื่อโปรเจ็กต์ Firebase (หากคุณมีโปรเจ็กต์ Firebase อยู่แล้ว คุณสามารถเลือกโปรเจ็กต์ที่มีอยู่แทนได้) คลิก ดำเนินการต่อ และยอมรับข้อกำหนดเพื่อสร้างโปรเจ็กต์ Firebase และแอป Firebase ใหม่
ถัดไป คุณควรเห็นกล่องโต้ตอบเพื่อ เชื่อมต่อ แอป Firebase ใหม่ของคุณกับโปรเจ็กต์ Android Studio ของคุณ
- คลิก เชื่อมต่อ
- เปิด Android สตูดิโอ ในบานหน้าต่าง ผู้ช่วย คุณจะเห็นการยืนยันว่าแอปของคุณเชื่อมต่อกับ Firebase
เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ
ในบานหน้าต่าง ผู้ช่วย ใน Android Studio ให้คลิก เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ
คุณควรเห็นกล่องโต้ตอบเพื่อ ยอมรับการเปลี่ยนแปลง หลังจากนั้น Android Studio ควรซิงค์แอปของคุณเพื่อให้แน่ใจว่ามีการเพิ่มการอ้างอิงที่จำเป็นทั้งหมดแล้ว
สุดท้าย คุณควรเห็นข้อความแสดงความสำเร็จในบานหน้าต่าง ผู้ช่วย ใน Android Studio ว่าการตั้งค่าการขึ้นต่อกันทั้งหมดถูกต้อง
สำหรับขั้นตอนเพิ่มเติม ให้เปิดใช้งานการบันทึกการแก้ไขข้อบกพร่อง โดยทำตามคำแนะนำในขั้นตอน "(ไม่บังคับ) เปิดใช้งานการบันทึกการแก้ไขข้อบกพร่อง" คำแนะนำเดียวกันนี้มีอยู่ใน เอกสารสาธารณะ ด้วย
3. เรียกใช้แอป
ตอนนี้คุณควรเห็นไฟล์ google-services.json
ในไดเรกทอรีโมดูล (ระดับแอป) ของแอป และตอนนี้แอปของคุณควรคอมไพล์แล้ว ใน Android Studio คลิก เรียกใช้ > เรียกใช้ 'แอป' เพื่อสร้างและเรียกใช้แอปบนโปรแกรมจำลอง Android ของคุณ
เมื่อแอปทำงาน คุณควรเห็นหน้าจอสแปลชดังนี้:
หลังจากนั้นไม่กี่วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะแสดง:
เกิดอะไรขึ้นภายใต้ประทุน?
หน้าจอเริ่มต้นถูกนำไปใช้ใน SplashScreenActivity และดำเนินการดังต่อไปนี้:
- ใน
onCreate()
เราจะเริ่มต้นการตั้งค่า Firebase Remote Config และดึงค่าการกำหนดค่าที่คุณจะกำหนดไว้ในแดชบอร์ด Remote Config ในภายหลังใน Codelab นี้ - ใน
executeTasksBasedOnRC()
เราอ่านค่าการกำหนดค่าของการตั้งค่าสถานะseasonal_image_url
หากค่ากำหนดระบุ URL เราจะดาวน์โหลดรูปภาพพร้อมกัน - เมื่อการดาวน์โหลดเสร็จสิ้น แอปจะนำทางไปที่ MainActivity และเรียก
finish()
เพื่อสิ้นสุดSplashScreenActivity
ใน MainActivity
หากกำหนด seasonal_image_url
ผ่านการกำหนดค่าระยะไกล คุณลักษณะนี้จะเปิดใช้งานและรูปภาพที่ดาวน์โหลดจะแสดงเป็นพื้นหลังของหน้าหลัก มิฉะนั้น รูปภาพเริ่มต้น (แสดงด้านบน) จะปรากฏขึ้น
4. ตั้งค่าการกำหนดค่าระยะไกล
ขณะนี้แอปของคุณกำลังทำงานอยู่ คุณสามารถตั้งค่าสถานะคุณลักษณะใหม่ได้
- ในแผงด้านซ้ายของ คอนโซล 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%
(คุณต้องการปล่อยให้คุณลักษณะนี้ปิดใช้งานอยู่จนกว่าคุณจะพร้อมที่จะเปิดตัวในขั้นตอนต่อไป) - คลิก สร้างเงื่อนไข คุณจะใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวฟีเจอร์ใหม่ให้กับผู้ใช้ของคุณ
- เปิด แบบฟอร์มสร้างพารามิเตอร์แรกของคุณ และค้นหา ช่องค่าสำหรับการเปิดตัวรูปภาพตามฤดูกาล ป้อน 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'.
คุณยังไม่ได้เปิดใช้งานพารามิเตอร์การกำหนดค่าระยะไกล seasonImageUrl ซึ่งเป็นสาเหตุที่ค่าแอตทริบิวต์ unset
SDK การตรวจสอบประสิทธิภาพจะรวบรวมข้อมูลการติดตามและส่งไปยัง Firebase คุณสามารถดูข้อมูลได้ใน แดชบอร์ด ประสิทธิภาพ ของคอนโซล Firebase ซึ่งเราจะอธิบายโดยละเอียดในขั้นตอนถัดไปของ Codelab
7. กำหนดค่าแดชบอร์ดการตรวจสอบประสิทธิภาพของคุณ
กำหนดค่าแดชบอร์ดของคุณเพื่อตรวจสอบคุณสมบัติของคุณ
ใน คอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป Friendly Eats ของคุณ
ในแผงด้านซ้าย ให้ค้นหาส่วน Release & Monitor จากนั้นคลิก Performance
คุณควรเห็นแดชบอร์ด ประสิทธิภาพ พร้อมจุดข้อมูลแรกในกระดานเมตริกของคุณ! SDK การตรวจสอบประสิทธิภาพรวบรวมข้อมูลประสิทธิภาพจากแอปของคุณและแสดงภายในไม่กี่นาทีของการรวบรวม
บอร์ดเมตริกนี้เป็นที่ที่คุณสามารถติดตามเมตริกหลักๆ สำหรับแอปของคุณได้ มุมมองเริ่มต้นจะรวมระยะเวลาการติดตามเวลาเริ่มต้นของแอป แต่คุณสามารถเพิ่มเมตริกที่คุณสนใจมากที่สุดได้ เนื่องจากคุณกำลังติดตามคุณลักษณะใหม่ที่คุณเพิ่ม คุณสามารถปรับแต่งแดชบอร์ดของคุณให้แสดงระยะเวลาของการติดตามโค้ดที่กำหนดเอง splash_screen_trace
- คลิกที่ช่องว่างช่องใดช่องหนึ่ง เลือกเมตริก
- ในหน้าต่างข้อความ ให้เลือกประเภทการติดตามของ การติดตามแบบกำหนดเอง และชื่อการติดตาม
splash_screen_trace
- คลิก เลือกเมตริก และคุณควรเห็นระยะเวลาของ
splash_screen_trace
ที่เพิ่มลงในแดชบอร์ดของคุณ!
คุณสามารถใช้ขั้นตอนเดียวกันนี้เพื่อเพิ่มเมตริกอื่นๆ ที่คุณสนใจ เพื่อให้คุณดูได้อย่างรวดเร็วว่าประสิทธิภาพเปลี่ยนแปลงไปอย่างไรเมื่อเวลาผ่านไป และแม้จะมีรุ่นต่างๆ ก็ตาม
บอร์ดตัวชี้วัดเป็น เครื่องมือที่มีประสิทธิภาพ ในการติดตามประสิทธิภาพของตัวชี้วัดหลักที่ผู้ใช้ของคุณประสบ สำหรับ Codelab นี้ คุณมีชุดข้อมูลเล็กๆ ในช่วงเวลาที่แคบ ดังนั้นคุณจะใช้มุมมองแดชบอร์ดอื่นๆ ที่จะช่วยให้คุณเข้าใจประสิทธิภาพของการเปิดตัวฟีเจอร์นี้
8. นำเสนอฟีเจอร์ของคุณ
เมื่อคุณตั้งค่าการตรวจสอบแล้ว คุณก็พร้อมที่จะเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase ( seasonal_image_url)
ที่คุณตั้งค่าไว้ก่อนหน้านี้
หากต้องการเปิดตัวการเปลี่ยนแปลง คุณจะต้องกลับไปที่ หน้าการกำหนดค่าระยะไกล ในคอนโซล Firebase เพื่อเพิ่มเปอร์เซ็นไทล์ผู้ใช้ของเงื่อนไขการกำหนดเป้าหมายของคุณ โดยปกติ คุณจะเปิดตัวคุณลักษณะใหม่ให้กับผู้ใช้ส่วนเล็กๆ และเพิ่มเฉพาะเมื่อคุณมั่นใจว่าไม่มีปัญหาใดๆ อย่างไรก็ตาม ใน Codelab นี้ คุณเป็นผู้ใช้แอปเพียงคนเดียว ดังนั้นคุณจึงเปลี่ยนเปอร์เซ็นไทล์เป็น 100% ได้
- คลิกแท็บ เงื่อนไข ที่ด้านบนของหน้า
- คลิกเงื่อนไข
Seasonal image rollout
ที่คุณเพิ่มไว้ก่อนหน้านี้ - เปลี่ยนเปอร์เซ็นไทล์เป็น 100%
- คลิก บันทึกเงื่อนไข
- คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง
ย้อนกลับไปใน Android Studio ให้รีสตาร์ทแอปในโปรแกรมจำลองของคุณเพื่อดูคุณสมบัติใหม่ หลังจากหน้าจอเริ่มต้น คุณจะเห็นหน้าจอหลักสถานะว่างใหม่!
9. ตรวจสอบการเปลี่ยนแปลงประสิทธิภาพ
ตอนนี้เรามาดูประสิทธิภาพของการโหลดหน้าจอเริ่มต้นโดยใช้ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase กัน ในขั้นตอนนี้ของ Codelab คุณจะใช้ส่วนต่างๆ ของแดชบอร์ดเพื่อดูข้อมูลประสิทธิภาพ
- บน แท็บแดชบอร์ด หลัก เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บ การติดตามแบบกำหนดเอง ในตารางนี้ คุณจะเห็นการติดตามโค้ดที่กำหนดเองที่คุณเพิ่มไว้ก่อนหน้านี้ พร้อมด้วย การติดตามแบบสำเร็จรูป บางส่วน
- ตอนนี้คุณได้เปิดใช้งานคุณสมบัติใหม่แล้ว ให้มองหาโค้ดที่กำหนดเองการติดตาม
splash_seasonal_image_processing
ซึ่งวัดเวลาที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ จากค่า ระยะเวลา ของการติดตาม คุณจะเห็นว่าการดาวน์โหลดและการประมวลผลนี้ใช้เวลานานพอสมควร
- เนื่องจากคุณมีข้อมูลสำหรับ
splash_seasonal_image_processing
คุณจึงเพิ่มระยะเวลาของการติดตามนี้ลงในบอร์ดหน่วยเมตริกได้ที่ด้านบนของ แท็บแดช บอร์ด
คล้ายกับเมื่อก่อน คลิกที่ช่องว่างช่องใดช่องหนึ่ง เลือกเมตริก ในหน้าต่างไดอะล็อก ให้เลือกประเภทการติดตาม การติดตามที่กำหนดเอง และชื่อการติดตาม 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 คุณเห็นผลกระทบต่อไปนี้ต่อผู้ใช้ปลายทางเมื่อเปิดใช้ฟีเจอร์ใหม่:
- เวลาที่ใช้ใน
SplashScreenActivity
เพิ่มขึ้น - ระยะเวลาในการ
splash_seasonal_image_processing
มีขนาดใหญ่มาก - ความล่าช้านั้นเกิดจากเวลาตอบสนองสำหรับการดาวน์โหลดรูปภาพ และเวลาประมวลผลที่สอดคล้องกันซึ่งจำเป็นสำหรับรูปภาพ
ในขั้นตอนถัดไป คุณจะลดผลกระทบต่อประสิทธิภาพโดยการย้อนกลับคุณลักษณะนี้ และระบุวิธีที่คุณสามารถปรับปรุงการใช้งานคุณลักษณะดังกล่าวได้
10. ย้อนกลับคุณสมบัติ
การเพิ่มเวลารอของผู้ใช้ในระหว่างหน้าจอเริ่มต้นนั้นไม่เป็นที่พึงปรารถนา ประโยชน์หลักประการหนึ่งของการกำหนดค่าระยะไกลคือความสามารถในการหยุดชั่วคราวและย้อนกลับการเปิดตัวของคุณโดยไม่ต้องเผยแพร่เวอร์ชันอื่นให้กับผู้ใช้ของคุณ วิธีนี้ช่วยให้คุณตอบสนองต่อปัญหาต่างๆ ได้อย่างรวดเร็ว (เช่น ปัญหาด้านประสิทธิภาพที่คุณพบในขั้นตอนสุดท้าย) และลดจำนวนผู้ใช้ที่ไม่พึงพอใจให้เหลือน้อยที่สุด
เพื่อบรรเทาผลกระทบอย่างรวดเร็ว คุณจะต้องรีเซ็ตเปอร์เซ็นไทล์การเปิดตัวกลับเป็น 0
เพื่อให้ผู้ใช้ทุกคนเห็นรูปภาพเริ่มต้นอีกครั้ง:
- กลับไปที่ หน้า การกำหนดค่าระยะไกล ในคอนโซล Firebase
- คลิกที่ เงื่อนไข ที่ด้านบนของหน้า
- คลิกเงื่อนไข
Seasonal image rollout
ที่คุณเพิ่มไว้ก่อนหน้านี้ - เปลี่ยนเปอร์เซ็นไทล์เป็น 0%
- คลิก บันทึกเงื่อนไข
- คลิก เผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง
รีสตาร์ทแอปใน Android Studio และคุณจะเห็นหน้าจอหลักสถานะว่างเปล่าดั้งเดิม:
11. แก้ไขปัญหาด้านประสิทธิภาพ
คุณค้นพบก่อนหน้านี้ใน Codelab ว่าการดาวน์โหลดรูปภาพสำหรับหน้าจอสแปลชทำให้แอปของคุณช้าลง เมื่อพิจารณาภาพที่ดาวน์โหลดมาอย่างละเอียด คุณจะเห็นว่าคุณกำลังใช้ ความละเอียดดั้งเดิม ของรูปภาพ ซึ่งมีขนาดเกิน 2MB! การแก้ไขด่วนประการหนึ่งสำหรับปัญหาด้านประสิทธิภาพของคุณคือการลดคุณภาพให้มีความละเอียดที่เหมาะสมมากขึ้น เพื่อให้รูปภาพใช้เวลาในการดาวน์โหลดน้อยลง
เปิดตัวค่า Remote Config อีกครั้ง
- กลับไปที่ หน้า การกำหนดค่าระยะไกล ในคอนโซล Firebase
- คลิกไอคอน แก้ไข สำหรับพารามิเตอร์
seasonal_image_url
- อัปเดต ค่าสำหรับการเปิดตัวรูปภาพตามฤดูกาล เป็น
https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640
จากนั้นคลิก บันทึก
- คลิกที่แท็บ เงื่อนไข ที่ด้านบนของหน้า
- คลิก การเปิดตัวรูปภาพตามฤดูกาล จากนั้นตั้งค่าเปอร์เซ็นไทล์กลับเป็น 100%
- คลิก บันทึกเงื่อนไข
- คลิกที่ปุ่ม เผยแพร่การเปลี่ยนแปลง
12. ทดสอบการแก้ไขและตั้งค่าการแจ้งเตือน
เรียกใช้แอปในเครื่อง
เมื่อตั้งค่าการกำหนดค่าใหม่ให้ใช้ URL รูปภาพดาวน์โหลดอื่น ให้เรียกใช้แอปอีกครั้ง ในครั้งนี้ คุณจะสังเกตเห็นว่าเวลาที่ใช้บนหน้าจอสแปลชสั้นกว่าเดิม
ดูประสิทธิภาพของการเปลี่ยนแปลง
กลับไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase เพื่อดูว่าเมตริกมีลักษณะอย่างไร
- คราวนี้คุณจะใช้ตารางการติดตามเพื่อนำทางไปยังหน้ารายละเอียด ที่ด้านล่างของตารางการติดตาม ในแท็บ การติดตามที่กำหนดเอง ให้คลิก
splash_seasonal_image_processing
ติดตามที่กำหนดเอง เพื่อดูมุมมองโดยละเอียดเพิ่มเติมของเมตริกระยะเวลาอีกครั้ง
- คลิกแอตทริบิวต์ที่กำหนดเอง
seasonal_image_url_attribute
เพื่อดูรายละเอียดแอตทริบิวต์ที่กำหนดเองอีกครั้ง หากคุณวางเมาส์เหนือ URL คุณจะเห็นค่าที่ตรงกับ URL ใหม่สำหรับรูปภาพที่ลดขนาด:https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640
(โดยมี?w=640
ในตอนท้าย) ค่าระยะเวลาที่เกี่ยวข้องกับรูปภาพนี้สั้นกว่าค่าของรูปภาพก่อนหน้าอย่างมาก และผู้ใช้ของคุณยอมรับได้มากกว่า!
- เมื่อคุณได้ปรับปรุงประสิทธิภาพของหน้าจอเริ่มต้นแล้ว คุณสามารถตั้งค่าการแจ้งเตือนเพื่อแจ้งให้คุณทราบเมื่อมีการติดตามเกินเกณฑ์ที่คุณตั้งไว้ เปิด แดชบอร์ด ประสิทธิภาพ แล้วคลิกไอคอนเมนูรายการเพิ่มเติม (สามจุด) สำหรับ Splash_screen_trace แล้วคลิก การตั้งค่าการแจ้งเตือน
- คลิกปุ่มสลับเพื่อเปิดใช้งานการแจ้งเตือน ระยะเวลา ตั้งค่าเกณฑ์ให้สูงกว่าค่าที่คุณเห็นเล็กน้อย เพื่อว่าหาก Splash_screen_trace ของคุณเกินเกณฑ์ คุณจะได้รับอีเมล
- คลิก บันทึก เพื่อสร้างการแจ้งเตือนของคุณ เลื่อนลงไปที่ ตารางการติดตาม จากนั้นคลิกแท็บ การติดตามที่กำหนดเอง เพื่อดูว่าการแจ้งเตือนของคุณเปิดใช้งานอยู่!
13. ขอแสดงความยินดี!
ยินดีด้วย! คุณเปิดใช้ Firebase Performance Monitoring SDK และรวบรวมการติดตามเพื่อวัดประสิทธิภาพของฟีเจอร์ใหม่ คุณได้ตรวจสอบตัวชี้วัดประสิทธิภาพหลักสำหรับการเปิดตัวฟีเจอร์ใหม่และตอบสนองอย่างรวดเร็วเมื่อพบปัญหาด้านประสิทธิภาพ ทั้งหมดนี้เป็นไปได้ด้วยความสามารถในการเปลี่ยนแปลงการกำหนดค่าด้วย Remote Config และตรวจสอบปัญหาด้านประสิทธิภาพแบบเรียลไทม์
สิ่งที่เราได้กล่าวถึง
- การเพิ่ม SDK การตรวจสอบประสิทธิภาพ Firebase ให้กับแอปของคุณ
- การเพิ่มการติดตามโค้ดที่กำหนดเองลงในโค้ดของคุณเพื่อวัดคุณลักษณะเฉพาะ
- การตั้งค่าพารามิเตอร์การกำหนดค่าระยะไกลและค่าตามเงื่อนไขเพื่อควบคุม/เปิดตัวคุณลักษณะใหม่
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อระบุปัญหาระหว่างการเปิดตัว
- การตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพของแอปของคุณเกินเกณฑ์ที่คุณตั้งไว้