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

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

  1. ไปที่ Android Studio / Help > ตรวจสอบการอัปเดต เพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
  2. เลือก เครื่องมือ > Firebase เพื่อเปิดบานหน้าต่าง ผู้ช่วย

c0e42ef063d21eab.png

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

ถัดไป คุณควรเห็นกล่องโต้ตอบเพื่อ เชื่อมต่อ แอป Firebase ใหม่ของคุณกับโปรเจ็กต์ Android Studio ของคุณ

51a549ebde2fe57a.png

  1. คลิก เชื่อมต่อ
  2. เปิด Android สตูดิโอ ในบานหน้าต่าง ผู้ช่วย คุณจะเห็นการยืนยันว่าแอปของคุณเชื่อมต่อกับ Firebase

40c24c4a56a45990.png

เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ

ในบานหน้าต่าง ผู้ช่วย ใน Android Studio ให้คลิก เพิ่มการตรวจสอบประสิทธิภาพให้กับแอปของคุณ

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

3046f3e1f5fea06f.png

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

62e79fd18780e320.png

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

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

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

เมื่อแอปทำงาน คุณควรเห็นหน้าจอสแปลชดังนี้:

ffbd413a6983b205.png

หลังจากนั้นไม่กี่วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะแสดง:

d946cab0df319e50.png

เกิดอะไรขึ้นภายใต้ประทุน?

หน้าจอเริ่มต้นถูกนำไปใช้ใน SplashScreenActivity และดำเนินการดังต่อไปนี้:

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

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

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

ขณะนี้แอปของคุณกำลังทำงานอยู่ คุณสามารถตั้งค่าสถานะคุณลักษณะใหม่ได้

  1. ในแผงด้านซ้ายของ คอนโซล Firebase ให้ค้นหาส่วน Engage จากนั้นคลิก Remote Config
  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. คลิก สร้างเงื่อนไข คุณจะใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวฟีเจอร์ใหม่ให้กับผู้ใช้ของคุณ

7a07526eb9e81623.png

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

99e6cd2ebcdced.png

คุณจะเห็นว่าการกำหนดค่าใหม่ถูกสร้างขึ้นเป็นแบบร่าง

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

39cd3e96d370c7ce.png

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");
    
    // ...
}
  1. สิ้นสุดการติดตามในเมธอด onDestroy() ของ SplashScreenActivity :

SplashScreenActivity.java

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

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

เนื่องจากคุณลักษณะใหม่ของคุณดาวน์โหลดและประมวลผลรูปภาพ คุณจะต้องเพิ่มการติดตามโค้ดแบบกำหนดเองที่สองซึ่งจะติดตามเวลาเพิ่มเติมที่คุณลักษณะของคุณเพิ่มลงใน 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");

        // ...
    }
}
  1. สิ้นสุดการติดตามในทั้งเมธอด 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 รูปภาพตามฤดูกาลให้กับการติดตามโค้ดที่กำหนดเองเหล่านี้ ด้วยวิธีนี้ คุณสามารถกรองข้อมูลระยะเวลาตามค่าเหล่านี้ได้ในภายหลัง

  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);
    }

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

f57e5450b70034c9.png

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

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

1fb81f4dba3220e0.png

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

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

1d465c021e58da3b.png

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

8. นำเสนอฟีเจอร์ของคุณ

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

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

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

70f993502b27e7a0.png

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

b0cc91b6e48fb842.png

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

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

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

439adc3ec71805b7.png

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

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

7fb64d2340410576.png

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

b1c275c30679062a.png

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

8fa1a69019bb045e.png

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

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

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

6f92ce0f23494507.png

ผลการวิจัยประสิทธิภาพ

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

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

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

10. ย้อนกลับคุณสมบัติ

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

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

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

18c4f1cbac955a04.png

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

d946cab0df319e50.png

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

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

เปิดตัวค่า Remote Config อีกครั้ง

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

828dd1951a2ec4a4.png

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

1974fa3bb789f36c.png

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

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

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

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

b0cc91b6e48fb842.png

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

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

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

2d7aaca03112c062.png

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

10e30c037a4237a2.png

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

4bd0a2a1faa14479.png

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

2bb93639e2218d1.png

13. ขอแสดงความยินดี!

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

สิ่งที่เราได้กล่าวถึง

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

เรียนรู้เพิ่มเติม