การตรวจสอบประสิทธิภาพของการเปิดตัวฟีเจอร์

1. ภาพรวม

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

สิ่งที่คุณจะได้เรียนรู้

• วิธีเพิ่ม Firebase Performance Monitoring ลงในแอปบนอุปกรณ์เคลื่อนที่เพื่อรับเมตริกสำเร็จรูป (เช่น เวลาเริ่มต้นของแอปและเฟรมที่ช้าหรือหยุดนิ่ง)
• วิธีเพิ่มการติดตามที่กำหนดเองเพื่อทำความเข้าใจเส้นทางโค้ดที่สำคัญของเส้นทางของผู้ใช้
• วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทําความเข้าใจเมตริกและติดตามการเปลี่ยนแปลงที่สําคัญ เช่น การเปิดตัวฟีเจอร์
• วิธีตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อตรวจสอบเมตริกหลัก
• วิธีเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase

ข้อกำหนดเบื้องต้น

• Android Studio 4.0 ขึ้นไป
• โปรแกรมจำลอง Android ที่มี API ระดับ 16 ขึ้นไป
• Java เวอร์ชัน 8 ขึ้นไป
• ความเข้าใจพื้นฐานเกี่ยวกับการกำหนดค่าระยะไกลของ Firebase

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 ที่ขาดหายไป เราจะแก้ไขเรื่องนี้ในส่วนถัดไป

ในโค้ดแล็บนี้ คุณจะได้ใช้ปลั๊กอินผู้ช่วย Firebase เพื่อลงทะเบียนแอป Android กับโปรเจ็กต์ Firebase และเพิ่มไฟล์การกำหนดค่า ปลั๊กอิน และทรัพยากร Dependency ของ Firebase ที่จำเป็นลงในโปรเจ็กต์ Android ทั้งหมดจากภายใน Android Studio

เชื่อมต่อแอปกับ Firebase

1. ไปที่ Android Studio/Help > Check for updates เพื่อให้แน่ใจว่าคุณใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
2. เลือกเครื่องมือ > Firebase เพื่อเปิดแผงผู้ช่วย
   
3. เลือก Performance Monitoring เพื่อเพิ่มลงในแอป แล้วคลิกเริ่มต้นใช้งาน Performance Monitoring
4. คลิกเชื่อมต่อกับ Firebase เพื่อเชื่อมต่อโปรเจ็กต์ Android กับ Firebase (ซึ่งจะเปิดคอนโซล Firebase ในเบราว์เซอร์)
5. คลิกปุ่มเพื่อสร้างโปรเจ็กต์ใหม่ แล้วป้อนชื่อโปรเจ็กต์ (เช่น Feature Rollout Performance Codelab)
6. คลิกต่อไป
7. หากได้รับแจ้ง ให้อ่านและยอมรับข้อกำหนดของ Firebase แล้วคลิกต่อไป
8. (ไม่บังคับ) เปิดใช้ความช่วยเหลือจาก AI ในคอนโซล Firebase (เรียกว่า "Gemini ใน Firebase")
9. สําหรับ Codelab นี้ คุณไม่จําเป็นต้องใช้ Google Analytics ดังนั้นปิดตัวเลือก Google Analytics
   คุณเลือกเปิดใช้ Google Analytics ได้เนื่องจากจะให้ตัวเลือกการกําหนดเป้าหมาย Remote Config ที่ขยาย อย่างไรก็ตาม Codelab นี้ใช้ตัวเลือกการกำหนดเป้าหมายที่ไม่ต้องใช้ Google Analytics
10. จากนั้นคุณจะเห็นกล่องโต้ตอบเพื่อเชื่อมต่อแอป Firebase ใหม่กับโปรเจ็กต์ Android Studio
    
11. คลิกเชื่อมต่อ
12. เปิด Android Studio ในแผงผู้ช่วย คุณจะเห็นการยืนยันว่าแอปเชื่อมต่อกับ Firebase แล้ว
    

เพิ่มการตรวจสอบประสิทธิภาพลงในแอป

ในแผงผู้ช่วยใน Android Studio ให้คลิกเพิ่ม Performance Monitoring ลงในแอป

คุณควรเห็นกล่องโต้ตอบเพื่อยอมรับการเปลี่ยนแปลง หลังจากนั้น Android Studio จะซิงค์แอปเพื่อให้มั่นใจว่าได้เพิ่มทรัพยากร Dependency ที่จำเป็นทั้งหมดแล้ว

สุดท้าย คุณควรเห็นข้อความว่าดำเนินการสำเร็จในแผงผู้ช่วยใน Android Studio ซึ่งระบุว่าตั้งค่าการขึ้นต่อกันทั้งหมดอย่างถูกต้อง

ในขั้นตอนเพิ่มเติม ให้เปิดใช้การบันทึกการแก้ไขข้อบกพร่องโดยทำตามวิธีการในขั้นตอน "(ไม่บังคับ) เปิดใช้การบันทึกการแก้ไขข้อบกพร่อง" นอกจากนี้ คุณยังดูวิธีการเดียวกันได้ในเอกสารประกอบแบบสาธารณะด้วย

3. เรียกใช้แอป

ตอนนี้คุณควรเห็นไฟล์ google-services.json ในไดเรกทอรีโมดูล (ระดับแอป) ของแอป และแอปควรคอมไพล์ได้แล้ว ใน Android Studio ให้คลิกเรียกใช้ > เรียกใช้ "แอป" เพื่อสร้างและเรียกใช้แอปในโปรแกรมจำลอง Android

เมื่อแอปทํางาน คุณควรเห็นหน้าจอแนะนําแบบนี้ก่อน

จากนั้นหลังจากผ่านไป 2-3 วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะแสดงขึ้น

สิ่งที่เกิดขึ้นเบื้องหลัง

หน้าจอแนะนำจะใช้งานใน SplashScreenActivity และทำสิ่งต่อไปนี้

1. ใน onCreate() เราจะเริ่มต้นการตั้งค่าการกำหนดค่าระยะไกลของ Firebase และดึงค่าการกำหนดค่าที่คุณจะตั้งค่าในแดชบอร์ดการกำหนดค่าระยะไกลในภายหลังในโค้ดแล็บนี้
2. ใน executeTasksBasedOnRC() เราจะอ่านค่าการกำหนดค่าของแฟล็ก seasonal_image_url หากค่าการกำหนดค่าระบุ URL เราจะดาวน์โหลดรูปภาพแบบซิงโครนัส
3. เมื่อดาวน์โหลดเสร็จแล้ว แอปจะไปยัง MainActivity และเรียกใช้ finish() เพื่อสิ้นสุด SplashScreenActivity

ใน MainActivity หากมีการกำหนด seasonal_image_url ผ่านการกำหนดค่าระยะไกล ระบบจะเปิดใช้ฟีเจอร์นี้และแสดงรูปภาพที่ดาวน์โหลดเป็นพื้นหลังของหน้าหลัก มิเช่นนั้น ระบบจะแสดงรูปภาพเริ่มต้น (แสดงด้านบน)

4. ตั้งค่าการกำหนดค่าระยะไกล

เมื่อแอปทํางานแล้ว คุณก็ตั้งค่าฟีเจอร์แฟล็กใหม่ได้

1. ในแผงด้านซ้ายของ Firebase Console ให้ไปที่ส่วนมีส่วนร่วม แล้วคลิกการกำหนดค่าระยะไกล
2. คลิกปุ่มสร้างการกำหนดค่าเพื่อเปิดแบบฟอร์มการกำหนดค่า แล้วเพิ่ม seasonal_image_url เป็นคีย์พารามิเตอร์
3. คลิกเพิ่มคำอธิบาย แล้วป้อนคำอธิบายนี้ Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
4. คลิกเพิ่มใหม่ -> ค่าแบบมีเงื่อนไข -> สร้างเงื่อนไขใหม่
5. สำหรับชื่อเงื่อนไข ให้ป้อน Seasonal image rollout
6. สำหรับส่วน Applies if... ให้เลือก User in random percentile <= 0% (คุณต้องการปิดใช้ฟีเจอร์นี้ไว้จนกว่าจะพร้อมเปิดตัวในขั้นตอนต่อๆ ไป)
7. คลิกสร้างเงื่อนไข คุณจะใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวฟีเจอร์ใหม่ให้ผู้ใช้

7. เปิดสร้างแบบฟอร์มพารามิเตอร์แรก แล้วหาช่องค่าสำหรับการเปิดตัวรูปภาพตามเทศกาล ป้อน URL ที่จะดาวน์โหลดรูปภาพตามเทศกาล: https://images.unsplash.com/photo-1552691021-7043334e0b51
8. ปล่อยให้ค่าเริ่มต้นเป็นสตริงว่างเปล่า ซึ่งหมายความว่าระบบจะแสดงรูปภาพเริ่มต้นในโค้ดเบสแทนที่จะแสดงรูปภาพที่ดาวน์โหลดจาก URL
9. คลิกบันทึก

คุณจะเห็นว่าระบบสร้างการกำหนดค่าใหม่เป็นฉบับร่าง

10. คลิกเผยแพร่การเปลี่ยนแปลงและยืนยันการเปลี่ยนแปลงที่ด้านบนเพื่ออัปเดตแอป

5. เพิ่มการตรวจสอบเวลาในการโหลดข้อมูล

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

การตรวจสอบประสิทธิภาพ Firebase มีวิธีช่วยให้คุณทำเช่นนั้นได้ คุณสามารถใช้การติดตามโค้ดที่กำหนดเองเพื่อตรวจสอบประสิทธิภาพของโค้ดที่เฉพาะเจาะจงในแอป เช่น เวลาในการโหลดข้อมูลและเวลาในการประมวลผลฟีเจอร์ใหม่

หากต้องการติดตามระยะเวลาที่หน้าจอเริ่มต้นแสดง คุณจะต้องเพิ่มการติดตามโค้ดที่กำหนดเองไปยัง SplashScreenActivity ซึ่งเป็น Activity ที่ใช้หน้าจอเริ่มต้น

1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดที่กำหนดเองชื่อ 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");
    
    // ...
}

2. สิ้นสุดการติดตามในเมธอด onDestroy() ของ SplashScreenActivity

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

เนื่องจากฟีเจอร์ใหม่จะดาวน์โหลดและประมวลผลรูปภาพ คุณจึงต้องเพิ่มการติดตามโค้ดที่กำหนดเองที่ 2 ซึ่งจะติดตามเวลาเพิ่มเติมที่ฟีเจอร์เพิ่มลงใน SplashScreenActivity

1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดที่กำหนดเองชื่อ 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");

        // ...
    }
}

2. สิ้นสุดการติดตามในทั้ง 2 วิธี 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 Console ได้ นอกจากนี้ คุณยังเพิ่มและตรวจสอบแอตทริบิวต์ที่กำหนดเองได้ด้วย

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

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

1. เพิ่มแอตทริบิวต์ที่กำหนดเอง (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);
    }

    // ...
}

2. เพิ่มแอตทริบิวต์ที่กำหนดเองเดียวกันสำหรับ 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) สำหรับทั้ง 2 การติดตามที่กำหนดเอง (splash_screen_trace และ splash_seasonal_image_processing) แล้ว ให้เรียกใช้แอปใน Android Studio อีกครั้ง คุณควรเห็นข้อความบันทึกที่มี Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. คุณยังไม่ได้เปิดใช้พารามิเตอร์การกำหนดค่าระยะไกล seasonalImageUrl ค่าแอตทริบิวต์จึงเป็น unset

SDK ของ Performance Monitoring จะรวบรวมข้อมูลการติดตามและส่งไปยัง Firebase คุณดูข้อมูลได้ในแดชบอร์ดประสิทธิภาพของคอนโซล Firebase ซึ่งเราจะอธิบายรายละเอียดในขั้นตอนถัดไปของ Codelab

7. กำหนดค่าแดชบอร์ดการตรวจสอบประสิทธิภาพ

กำหนดค่าแดชบอร์ดเพื่อตรวจสอบฟีเจอร์

ในคอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป Friendly Eats

ในแผงด้านซ้าย ให้ค้นหาส่วนเผยแพร่และตรวจสอบ แล้วคลิกประสิทธิภาพ

คุณควรเห็นแดชบอร์ดประสิทธิภาพพร้อมจุดข้อมูลแรกสุดในบอร์ดเมตริก Performance Monitoring SDK จะรวบรวมข้อมูลประสิทธิภาพจากแอปและแสดงข้อมูลภายในไม่กี่นาทีหลังจากการรวบรวม

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

1. คลิกช่องเลือกเมตริกที่ว่างอยู่ช่องใดช่องหนึ่ง
2. ในหน้าต่างกล่องโต้ตอบ ให้เลือกประเภทการติดตามของการติดตามที่กำหนดเองและชื่อการติดตาม splash_screen_trace

3. คลิกเลือกเมตริก แล้วคุณจะเห็นระยะเวลาของ splash_screen_trace ที่เพิ่มลงในแดชบอร์ด

คุณสามารถใช้ขั้นตอนเดียวกันนี้เพื่อเพิ่มเมตริกอื่นๆ ที่คุณสนใจ เพื่อให้ดูได้อย่างรวดเร็วว่าประสิทธิภาพของเมตริกเหล่านั้นเปลี่ยนแปลงไปอย่างไรเมื่อเวลาผ่านไปและแม้แต่ในแต่ละรุ่น

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

8. เปิดตัวฟีเจอร์

เมื่อตั้งค่าการตรวจสอบแล้ว คุณก็พร้อมที่จะเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase (seasonal_image_url) ที่คุณตั้งค่าไว้ก่อนหน้านี้

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

1. คลิกแท็บเงื่อนไขที่ด้านบนของหน้า
2. คลิกSeasonal image rolloutเงื่อนไขที่คุณเพิ่มไว้ก่อนหน้านี้
3. เปลี่ยนเปอร์เซ็นต์ไทล์เป็น 100%
4. คลิกบันทึกเงื่อนไข
5. คลิกเผยแพร่การเปลี่ยนแปลงและยืนยันการเปลี่ยนแปลง

กลับไปที่ Android Studio แล้วรีสตาร์ทแอปในโปรแกรมจำลองเพื่อดูฟีเจอร์ใหม่ หลังจากหน้าจอแนะนํา คุณจะเห็นหน้าจอหลักใหม่ที่ว่างเปล่า

9. ตรวจสอบการเปลี่ยนแปลงด้านประสิทธิภาพ

ตอนนี้เรามาดูประสิทธิภาพการโหลดหน้าจอเริ่มต้นโดยใช้แดชบอร์ดประสิทธิภาพในคอนโซล Firebase กัน ในขั้นตอนนี้ของ Codelab คุณจะได้ใช้ส่วนต่างๆ ของแดชบอร์ดเพื่อดูข้อมูลประสิทธิภาพ

1. ในแท็บแดชบอร์ดหลัก ให้เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บการติดตามที่กำหนดเอง ในตารางนี้ คุณจะเห็นร่องรอยของโค้ดที่กำหนดเองซึ่งคุณเพิ่มไว้ก่อนหน้านี้ รวมถึงร่องรอยสำเร็จรูปบางรายการ
2. เมื่อเปิดใช้ฟีเจอร์ใหม่แล้ว ให้มองหาร่องรอยของโค้ดที่กำหนดเอง splash_seasonal_image_processing ซึ่งวัดเวลาที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ จากค่าระยะเวลาของ Trace คุณจะเห็นว่าการดาวน์โหลดและการประมวลผลนี้ใช้เวลานานพอสมควร

3. เนื่องจากคุณมีข้อมูลสำหรับ splash_seasonal_image_processing คุณจึงเพิ่มระยะเวลาของการติดตามนี้ลงในบอร์ดเมตริกที่ด้านบนของแท็บแดชบอร์ดได้

เช่นเดียวกับก่อนหน้านี้ ให้คลิกช่องเลือกเมตริกที่ว่างอยู่ช่องใดช่องหนึ่ง ในหน้าต่างกล่องโต้ตอบ ให้เลือกประเภทการติดตาม Custom traces และชื่อการติดตาม splash_seasonal_image_processing สุดท้าย ให้คลิกเลือกเมตริกเพื่อเพิ่มเมตริกนี้ลงในบอร์ดเมตริก

4. หากต้องการยืนยันความแตกต่างเพิ่มเติม คุณสามารถดูข้อมูลสำหรับ splash_screen_trace ได้อย่างละเอียด คลิกการ์ด splash_screen_trace ในบอร์ดเมตริก แล้วคลิกดูรายละเอียดเมตริก

5. ในหน้ารายละเอียด คุณจะเห็นรายการแอตทริบิวต์ที่ด้านล่างซ้าย ซึ่งรวมถึงแอตทริบิวต์ที่กำหนดเองที่คุณสร้างไว้ก่อนหน้านี้ คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูระยะเวลาของหน้าจอ Splash สำหรับ URL ของรูปภาพตามฤดูกาลแต่ละรายการทางด้านขวา

6. ค่าระยะเวลาของหน้าจอเริ่มต้นอาจแตกต่างจากค่าในภาพหน้าจอด้านบนเล็กน้อย แต่คุณควรมีระยะเวลาที่นานขึ้นเมื่อดาวน์โหลดรูปภาพจาก URL เทียบกับการใช้รูปภาพเริ่มต้น (แสดงด้วย "unset")

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

7. คลิกประสิทธิภาพที่ด้านบนของหน้าเพื่อกลับไปที่แท็บหลักของแดชบอร์ด
8. ในตารางการติดตามที่ด้านล่างของหน้า ให้คลิกแท็บคำขอเครือข่าย ในตารางนี้ คุณจะเห็นคำขอเครือข่ายทั้งหมดจากแอปของคุณที่รวบรวมเป็นรูปแบบ URL รวมถึงรูปแบบ URL ของ images.unsplash.com/** หากเปรียบเทียบค่าของเวลาตอบสนองนี้กับเวลาโดยรวมที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ (เช่น ระยะเวลาของเทรซ splash_seasonal_image_processing) คุณจะเห็นว่าเวลาส่วนใหญ่ใช้ไปกับการดาวน์โหลดรูปภาพ

ข้อมูลเชิงลึกด้านประสิทธิภาพ

การใช้การตรวจสอบประสิทธิภาพ Firebase ทำให้คุณเห็นผลกระทบต่อไปนี้ต่อผู้ใช้ปลายทางเมื่อเปิดใช้ฟีเจอร์ใหม่

1. เวลาที่ใช้ใน SplashScreenActivity เพิ่มขึ้น
2. ระยะเวลาสำหรับ splash_seasonal_image_processing ยาวมาก
3. ความล่าช้าเกิดจากเวลาในการตอบสนองสำหรับการดาวน์โหลดรูปภาพและเวลาในการประมวลผลที่จำเป็นสำหรับรูปภาพ

ในขั้นตอนถัดไป คุณจะลดผลกระทบต่อประสิทธิภาพโดยการย้อนกลับฟีเจอร์และระบุวิธีปรับปรุงการติดตั้งใช้งานฟีเจอร์

10. ย้อนกลับฟีเจอร์

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

คุณจะรีเซ็ตเปอร์เซ็นไทล์การเปิดตัวกลับไปเป็น 0 เพื่อให้ผู้ใช้ทุกคนเห็นรูปภาพเริ่มต้นอีกครั้งได้ดังนี้

1. กลับไปที่หน้าการกำหนดค่าระยะไกลในคอนโซล Firebase
2. คลิกเงื่อนไขที่ด้านบนของหน้า
3. คลิกเงื่อนไข Seasonal image rollout ที่คุณเพิ่มไว้ก่อนหน้านี้
4. เปลี่ยนเปอร์เซ็นไทล์เป็น 0%
5. คลิกบันทึกเงื่อนไข
6. คลิกเผยแพร่การเปลี่ยนแปลงและยืนยันการเปลี่ยนแปลง

รีสตาร์ทแอปใน Android Studio แล้วคุณจะเห็นหน้าจอหลักที่ว่างเปล่าเหมือนเดิม

11. แก้ไขปัญหาด้านประสิทธิภาพ

คุณได้ทราบใน Codelab ก่อนหน้านี้ว่าการดาวน์โหลดรูปภาพสำหรับหน้าจอ Splash ทำให้แอปทำงานช้าลง เมื่อดูรูปภาพที่ดาวน์โหลดอย่างละเอียด คุณจะเห็นว่าคุณใช้ความละเอียดเดิมของรูปภาพ ซึ่งมีขนาดมากกว่า 2 MB วิธีแก้ไขปัญหาด้านประสิทธิภาพอย่างรวดเร็วคือการลดคุณภาพให้มีความละเอียดที่เหมาะสมยิ่งขึ้นเพื่อให้รูปภาพใช้เวลาในการดาวน์โหลดน้อยลง

เปิดตัวค่าการกำหนดค่าระยะไกลอีกครั้ง

1. กลับไปที่หน้าการกำหนดค่าระยะไกลในคอนโซล Firebase
2. คลิกไอคอนแก้ไขสำหรับพารามิเตอร์ seasonal_image_url
3. อัปเดตค่าสำหรับการเปิดตัวรูปภาพตามเทศกาลเป็น https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 แล้วคลิกบันทึก

4. คลิกแท็บเงื่อนไขที่ด้านบนของหน้า
5. คลิกการเปิดตัวรูปภาพตามฤดูกาล จากนั้นตั้งค่าเปอร์เซ็นไทล์กลับเป็น 100%
6. คลิกบันทึกเงื่อนไข

7. คลิกปุ่มเผยแพร่การเปลี่ยนแปลง

12. ทดสอบการแก้ไขและตั้งค่าการแจ้งเตือน

เรียกใช้แอปในเครื่อง

เมื่อตั้งค่าการกำหนดค่าใหม่ให้ใช้ URL รูปภาพดาวน์โหลดอื่น ให้เรียกใช้แอปอีกครั้ง คราวนี้คุณจะเห็นว่าเวลาที่ใช้ในหน้าจอเปิดแอปสั้นลงกว่าเดิม

ดูประสิทธิภาพของการเปลี่ยนแปลง

กลับไปที่แดชบอร์ดประสิทธิภาพในคอนโซล Firebase เพื่อดูว่าเมตริกมีลักษณะอย่างไร

1. คราวนี้คุณจะใช้ตารางการติดตามเพื่อไปยังหน้ารายละเอียด ในตารางการติดตามที่ด้านล่าง ในแท็บการติดตามที่กำหนดเอง ให้คลิกการติดตามที่กำหนดเอง splash_seasonal_image_processing เพื่อดูมุมมองที่ละเอียดยิ่งขึ้นของเมตริกระยะเวลาอีกครั้ง

2. คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูรายละเอียดของแอตทริบิวต์ที่กำหนดเองอีกครั้ง หากวางเมาส์เหนือ URL คุณจะเห็นค่าที่ตรงกับ URL ใหม่ของรูปภาพขนาดเล็กลง: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (โดยมี ?w=640 อยู่ท้าย) ค่าระยะเวลาที่เชื่อมโยงกับรูปภาพนี้สั้นกว่าค่าของรูปภาพก่อนหน้าอย่างมาก และผู้ใช้ยอมรับได้มากกว่า

3. ตอนนี้คุณได้ปรับปรุงประสิทธิภาพของหน้าจอเริ่มต้นแล้ว คุณสามารถตั้งค่าการแจ้งเตือนให้แจ้งเตือนเมื่อการติดตามเกินเกณฑ์ที่คุณตั้งไว้ได้ เปิดแดชบอร์ดประสิทธิภาพ แล้วคลิกไอคอนเมนูที่ซ่อนอยู่ (3 จุด) สำหรับ splash_screen_trace แล้วคลิกการตั้งค่าการแจ้งเตือน

4. คลิกปุ่มเปิด/ปิดเพื่อเปิดใช้การแจ้งเตือนระยะเวลา ตั้งค่าเกณฑ์ให้สูงกว่าค่าที่คุณเห็นเล็กน้อย เพื่อให้คุณได้รับอีเมลหาก splash_screen_trace เกินเกณฑ์

5. คลิกบันทึกเพื่อสร้างการแจ้งเตือน เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บการติดตามที่กำหนดเองเพื่อดูว่าระบบเปิดใช้การแจ้งเตือนแล้ว

13. ยินดีด้วย

ยินดีด้วย คุณเปิดใช้ Firebase Performance Monitoring SDK และรวบรวมการติดตามเพื่อวัดประสิทธิภาพของฟีเจอร์ใหม่แล้ว คุณตรวจสอบเมตริกประสิทธิภาพหลักสำหรับการเปิดตัวฟีเจอร์ใหม่และตอบสนองอย่างรวดเร็วเมื่อพบปัญหาด้านประสิทธิภาพ ทั้งหมดนี้เกิดขึ้นได้ด้วยความสามารถในการเปลี่ยนแปลงการกำหนดค่าด้วยการกำหนดค่าระยะไกล และตรวจสอบปัญหาด้านประสิทธิภาพแบบเรียลไทม์

สิ่งที่เราได้พูดถึงไปแล้ว

• การเพิ่ม Firebase Performance Monitoring SDK ลงในแอป
• การเพิ่มการติดตามโค้ดที่กำหนดเองลงในโค้ดเพื่อวัดฟีเจอร์ที่เฉพาะเจาะจง
• การตั้งค่าพารามิเตอร์การกำหนดค่าระยะไกลและค่าแบบมีเงื่อนไขเพื่อควบคุม/เปิดตัวฟีเจอร์ใหม่
• ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อระบุปัญหาในระหว่างการเปิดตัว
• การตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพของแอปเกินเกณฑ์ที่คุณตั้งไว้

ดูข้อมูลเพิ่มเติม

• firebase.google.com
• เริ่มต้นใช้งานการตรวจสอบประสิทธิภาพสำหรับ Android
• เริ่มต้นใช้งานการกำหนดค่าระยะไกลของ Firebase