\n \u003C/div>\n \u003Cinput type=\"file\" accept=\"image/*\" class=\"file-input w-full max-w-xs mb-2\" alt=\"Image Input\" @change=\"handleImageUpload\" />\n \u003Cbutton class=\"btn btn-primary w-32\" @click=\"processImage\" :disabled=\"!isImageSelected\">Classify or Recognize\u003C/button>\n \u003C/div>\n\u003C/template>\n","vue",[363,2465,2466,2478,2496,2512,2547,2585,2594,2648,2700,2709],{"__ignoreMap":365},[1665,2467,2468,2471,2475],{"class":1667,"line":1668},[1665,2469,2470],{"class":2173},"\u003C",[1665,2472,2474],{"class":2473},"s9eBZ","template",[1665,2476,2477],{"class":2173},">\n",[1665,2479,2480,2483,2485,2488,2491,2494],{"class":1667,"line":779},[1665,2481,2482],{"class":2173}," \u003C",[1665,2484,1599],{"class":2473},[1665,2486,2487],{"class":1671}," class",[1665,2489,2490],{"class":2173},"=",[1665,2492,2493],{"class":1675},"\"flex flex-col items-center\"",[1665,2495,2477],{"class":2173},[1665,2497,2498,2501,2503,2505,2507,2510],{"class":1667,"line":782},[1665,2499,2500],{"class":2173}," \u003C",[1665,2502,1599],{"class":2473},[1665,2504,2487],{"class":1671},[1665,2506,2490],{"class":2173},[1665,2508,2509],{"class":1675},"\"indicator\"",[1665,2511,2477],{"class":2173},[1665,2513,2514,2517,2519,2523,2525,2528,2531,2533,2535,2537,2540,2543,2545],{"class":1667,"line":1718},[1665,2515,2516],{"class":2173}," \u003C",[1665,2518,1665],{"class":2473},[1665,2520,2522],{"class":2521},"szBVR"," v-if",[1665,2524,2490],{"class":2173},[1665,2526,2527],{"class":1675},"\"",[1665,2529,2530],{"class":2173},"loadingImage",[1665,2532,2527],{"class":1675},[1665,2534,2487],{"class":1671},[1665,2536,2490],{"class":2173},[1665,2538,2539],{"class":1675},"\"indicator-item indicator-center indicator-middle badge badge-primary\"",[1665,2541,2542],{"class":2173},">Uploading Image...\u003C/",[1665,2544,1665],{"class":2473},[1665,2546,2477],{"class":2173},[1665,2548,2549,2551,2553,2556,2558,2560,2562,2565,2567,2570,2572,2575,2577,2579,2582],{"class":1667,"line":1724},[1665,2550,2516],{"class":2173},[1665,2552,36],{"class":2473},[1665,2554,2555],{"class":2173}," :",[1665,2557,2150],{"class":1671},[1665,2559,2490],{"class":2173},[1665,2561,2527],{"class":1675},[1665,2563,2564],{"class":2173},"previewImage",[1665,2566,2527],{"class":1675},[1665,2568,2569],{"class":1671}," alt",[1665,2571,2490],{"class":2173},[1665,2573,2574],{"class":1675},"\"Input Image\"",[1665,2576,2487],{"class":1671},[1665,2578,2490],{"class":2173},[1665,2580,2581],{"class":1675},"\"w-96 h-96 my-2 rounded\"",[1665,2583,2584],{"class":2173}," />\n",[1665,2586,2587,2590,2592],{"class":1667,"line":1925},[1665,2588,2589],{"class":2173}," \u003C/",[1665,2591,1599],{"class":2473},[1665,2593,2477],{"class":2173},[1665,2595,2596,2598,2601,2604,2606,2609,2612,2614,2617,2619,2621,2624,2626,2628,2631,2634,2637,2639,2641,2644,2646],{"class":1667,"line":2034},[1665,2597,2500],{"class":2173},[1665,2599,2600],{"class":2473},"input",[1665,2602,2603],{"class":1671}," type",[1665,2605,2490],{"class":2173},[1665,2607,2608],{"class":1675},"\"file\"",[1665,2610,2611],{"class":1671}," accept",[1665,2613,2490],{"class":2173},[1665,2615,2616],{"class":1675},"\"image/*\"",[1665,2618,2487],{"class":1671},[1665,2620,2490],{"class":2173},[1665,2622,2623],{"class":1675},"\"file-input w-full max-w-xs mb-2\"",[1665,2625,2569],{"class":1671},[1665,2627,2490],{"class":2173},[1665,2629,2630],{"class":1675},"\"Image Input\"",[1665,2632,2633],{"class":2173}," @",[1665,2635,2636],{"class":1671},"change",[1665,2638,2490],{"class":2173},[1665,2640,2527],{"class":1675},[1665,2642,2643],{"class":2173},"handleImageUpload",[1665,2645,2527],{"class":1675},[1665,2647,2584],{"class":2173},[1665,2649,2650,2652,2655,2657,2659,2662,2664,2667,2669,2671,2674,2676,2678,2681,2683,2685,2688,2691,2693,2696,2698],{"class":1667,"line":2040},[1665,2651,2500],{"class":2173},[1665,2653,2654],{"class":2473},"button",[1665,2656,2487],{"class":1671},[1665,2658,2490],{"class":2173},[1665,2660,2661],{"class":1675},"\"btn btn-primary w-32\"",[1665,2663,2633],{"class":2173},[1665,2665,2666],{"class":1671},"click",[1665,2668,2490],{"class":2173},[1665,2670,2527],{"class":1675},[1665,2672,2673],{"class":2173},"processImage",[1665,2675,2527],{"class":1675},[1665,2677,2555],{"class":2173},[1665,2679,2680],{"class":1671},"disabled",[1665,2682,2490],{"class":2173},[1665,2684,2527],{"class":1675},[1665,2686,2687],{"class":2521},"!",[1665,2689,2690],{"class":2173},"isImageSelected",[1665,2692,2527],{"class":1675},[1665,2694,2695],{"class":2173},">Classify or Recognize\u003C/",[1665,2697,2654],{"class":2473},[1665,2699,2477],{"class":2173},[1665,2701,2702,2705,2707],{"class":1667,"line":2046},[1665,2703,2704],{"class":2173}," \u003C/",[1665,2706,1599],{"class":2473},[1665,2708,2477],{"class":2173},[1665,2710,2711,2714,2716],{"class":1667,"line":2052},[1665,2712,2713],{"class":2173},"\u003C/",[1665,2715,2474],{"class":2473},[1665,2717,2477],{"class":2173},[17,2719,2720],{},"Here, we will take an image from the user and trigger its classification/recognition through a button.",[40,2722,2724],{"id":2723},"functions",[21,2725,2726],{},"Functions",[1817,2728],{"src":2729,"width":1820,"height":2730,"frameBorder":1821,"className":2731,"allowFullScreen":807},"https://giphy.com/embed/26tn33aiTi1jkl6H6",270,[1823],[17,2733,2734],{},"In this stage, instead of explaining the code step by step, I’ll share the entire code with you and explain its functions.",[356,2736,2738],{"className":1836,"code":2737,"language":1838,"meta":365,"style":365},"import { ref, computed } from 'vue';\n// Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\nimport { classifyImage, loadModel } from '@/utils/tensorflowImageClassifier';\n// Create a reactive array to hold image classification results\nconst classificationResults = ref([]);\n// Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\nconst previewImage = ref(\"\u003Chttps://placehold.co/600x600>\");\n// Create a reactive boolean variable to track the loading status of the image\nconst loadingImage = ref(false);\n// Define custom events to be used within the component using the defineEmits function of Vue.js\nconst emit = defineEmits(['getResult', 'getProducts']);\n// Create a computed property to check whether the user has selected an image\nconst isImageSelected = computed(() => previewImage.value !== \"\u003Chttps://placehold.co/600x600>\");\n// Event handler function triggered when the user selects a file\nconst handleImageUpload = (event) => {\n const file = event.target.files[0]; // Get the selected file\n const image = new Image(); // Create a new HTML image element\n const reader = new FileReader(); // Create a FileReader for file reading operations\n // When the file reading process starts\n reader.onloadstart = () => {\n previewImage.value = previewImage; // Set the preview image (this line seems to have no correct function)\n loadingImage.value = true; // Set the image loading status to true\n };\n // When the file reading process is completed\n reader.onloadend = () => {\n loadingImage.value = false; // Set the image loading status to false\n image.src = reader.result; // Set the source of the image element with the read data\n previewImage.value = reader.result; // Set the preview image with the read data\n };\n // Start the reading process by converting the file to base64 format\n reader.readAsDataURL(file);\n};\n// Event handler function that initiates image classification\nconst processImage = async () => {\n if (previewImage.value) { // If a preview image is available\n const image = new Image(); // Create a new HTML image element\n image.src = previewImage.value; // Set the source of the image element with the preview image URL\n await loadModel(); // Load the TensorFlow model\n classificationResults.value = await classifyImage(image); // Classify the image and assign the results to classificationResults\n emit('getResult', classificationResults.value); // Trigger the 'getResult' event and pass the results to upper-level components\n emit('getProducts', classificationResults.value); // Trigger the 'getProducts' event and pass the results to upper-level components\n }\n};\n",[363,2739,2740,2745,2750,2755,2760,2765,2770,2775,2780,2785,2790,2795,2800,2805,2810,2815,2820,2825,2830,2835,2840,2845,2850,2856,2862,2868,2874,2880,2886,2891,2897,2903,2909,2915,2921,2927,2933,2939,2945,2951,2957,2963,2968],{"__ignoreMap":365},[1665,2741,2742],{"class":1667,"line":1668},[1665,2743,2744],{},"import { ref, computed } from 'vue';\n",[1665,2746,2747],{"class":1667,"line":779},[1665,2748,2749],{},"// Import the classifyImage and loadModel functions from the tensorflowImageClassifier module\n",[1665,2751,2752],{"class":1667,"line":782},[1665,2753,2754],{},"import { classifyImage, loadModel } from '@/utils/tensorflowImageClassifier';\n",[1665,2756,2757],{"class":1667,"line":1718},[1665,2758,2759],{},"// Create a reactive array to hold image classification results\n",[1665,2761,2762],{"class":1667,"line":1724},[1665,2763,2764],{},"const classificationResults = ref([]);\n",[1665,2766,2767],{"class":1667,"line":1925},[1665,2768,2769],{},"// Create a reactive variable to hold the preview image URL, initially set with a placeholder URL\n",[1665,2771,2772],{"class":1667,"line":2034},[1665,2773,2774],{},"const previewImage = ref(\"\u003Chttps://placehold.co/600x600>\");\n",[1665,2776,2777],{"class":1667,"line":2040},[1665,2778,2779],{},"// Create a reactive boolean variable to track the loading status of the image\n",[1665,2781,2782],{"class":1667,"line":2046},[1665,2783,2784],{},"const loadingImage = ref(false);\n",[1665,2786,2787],{"class":1667,"line":2052},[1665,2788,2789],{},"// Define custom events to be used within the component using the defineEmits function of Vue.js\n",[1665,2791,2792],{"class":1667,"line":2058},[1665,2793,2794],{},"const emit = defineEmits(['getResult', 'getProducts']);\n",[1665,2796,2797],{"class":1667,"line":2064},[1665,2798,2799],{},"// Create a computed property to check whether the user has selected an image\n",[1665,2801,2802],{"class":1667,"line":2070},[1665,2803,2804],{},"const isImageSelected = computed(() => previewImage.value !== \"\u003Chttps://placehold.co/600x600>\");\n",[1665,2806,2807],{"class":1667,"line":2076},[1665,2808,2809],{},"// Event handler function triggered when the user selects a file\n",[1665,2811,2812],{"class":1667,"line":2082},[1665,2813,2814],{},"const handleImageUpload = (event) => {\n",[1665,2816,2817],{"class":1667,"line":2088},[1665,2818,2819],{}," const file = event.target.files[0]; // Get the selected file\n",[1665,2821,2822],{"class":1667,"line":2094},[1665,2823,2824],{}," const image = new Image(); // Create a new HTML image element\n",[1665,2826,2827],{"class":1667,"line":2305},[1665,2828,2829],{}," const reader = new FileReader(); // Create a FileReader for file reading operations\n",[1665,2831,2832],{"class":1667,"line":2317},[1665,2833,2834],{}," // When the file reading process starts\n",[1665,2836,2837],{"class":1667,"line":2329},[1665,2838,2839],{}," reader.onloadstart = () => {\n",[1665,2841,2842],{"class":1667,"line":2339},[1665,2843,2844],{}," previewImage.value = previewImage; // Set the preview image (this line seems to have no correct function)\n",[1665,2846,2847],{"class":1667,"line":2345},[1665,2848,2849],{}," loadingImage.value = true; // Set the image loading status to true\n",[1665,2851,2853],{"class":1667,"line":2852},23,[1665,2854,2855],{}," };\n",[1665,2857,2859],{"class":1667,"line":2858},24,[1665,2860,2861],{}," // When the file reading process is completed\n",[1665,2863,2865],{"class":1667,"line":2864},25,[1665,2866,2867],{}," reader.onloadend = () => {\n",[1665,2869,2871],{"class":1667,"line":2870},26,[1665,2872,2873],{}," loadingImage.value = false; // Set the image loading status to false\n",[1665,2875,2877],{"class":1667,"line":2876},27,[1665,2878,2879],{}," image.src = reader.result; // Set the source of the image element with the read data\n",[1665,2881,2883],{"class":1667,"line":2882},28,[1665,2884,2885],{}," previewImage.value = reader.result; // Set the preview image with the read data\n",[1665,2887,2889],{"class":1667,"line":2888},29,[1665,2890,2855],{},[1665,2892,2894],{"class":1667,"line":2893},30,[1665,2895,2896],{}," // Start the reading process by converting the file to base64 format\n",[1665,2898,2900],{"class":1667,"line":2899},31,[1665,2901,2902],{}," reader.readAsDataURL(file);\n",[1665,2904,2906],{"class":1667,"line":2905},32,[1665,2907,2908],{},"};\n",[1665,2910,2912],{"class":1667,"line":2911},33,[1665,2913,2914],{},"// Event handler function that initiates image classification\n",[1665,2916,2918],{"class":1667,"line":2917},34,[1665,2919,2920],{},"const processImage = async () => {\n",[1665,2922,2924],{"class":1667,"line":2923},35,[1665,2925,2926],{}," if (previewImage.value) { // If a preview image is available\n",[1665,2928,2930],{"class":1667,"line":2929},36,[1665,2931,2932],{}," const image = new Image(); // Create a new HTML image element\n",[1665,2934,2936],{"class":1667,"line":2935},37,[1665,2937,2938],{}," image.src = previewImage.value; // Set the source of the image element with the preview image URL\n",[1665,2940,2942],{"class":1667,"line":2941},38,[1665,2943,2944],{}," await loadModel(); // Load the TensorFlow model\n",[1665,2946,2948],{"class":1667,"line":2947},39,[1665,2949,2950],{}," classificationResults.value = await classifyImage(image); // Classify the image and assign the results to classificationResults\n",[1665,2952,2954],{"class":1667,"line":2953},40,[1665,2955,2956],{}," emit('getResult', classificationResults.value); // Trigger the 'getResult' event and pass the results to upper-level components\n",[1665,2958,2960],{"class":1667,"line":2959},41,[1665,2961,2962],{}," emit('getProducts', classificationResults.value); // Trigger the 'getProducts' event and pass the results to upper-level components\n",[1665,2964,2966],{"class":1667,"line":2965},42,[1665,2967,2342],{},[1665,2969,2971],{"class":1667,"line":2970},43,[1665,2972,2908],{},[48,2974,2975,2981,2986,2995,3004,3009],{},[51,2976,2977,2980],{},[21,2978,2979],{},"classificationResults",": An array holding the results of image classification.",[51,2982,2983,2985],{},[21,2984,2564],{},": A string holding the URL of the user-uploaded or selected image for preview. Initially starts with a placeholder URL.",[51,2987,2988,2990,2991,2994],{},[21,2989,2530],{},": A boolean variable indicating the loading status of the image. Initially set to ",[21,2992,2993],{},"false"," and updated within the function.",[51,2996,2997,2999,3000,3003],{},[21,2998,2690],{},": A computed property checking whether the user has selected an image, determining the enable/disable status of the \"",[121,3001,3002],{},"Classify","\" button. It checks if the preview URL is different from the placeholder.",[51,3005,3006,3008],{},[21,3007,2643],{},": This function is triggered when the user selects a file. It reads the content of the selected file and converts it into an image for preview. It also shows a loading element while the image is being loaded.",[51,3010,3011,3013,3014,3016,3017,1745,3020,3023],{},[21,3012,2673],{},": This function initiates the image classification process. If a preview image is available, it loads a pre-trained model and classifies the image. The results are stored in ",[21,3015,2979],{},", and events (",[121,3018,3019],{},"getResult",[121,3021,3022],{},"getProducts",") are emitted to pass the results to upper-level components.",[17,3025,3026],{},[121,3027,3028],{},[21,3029,2426],{},[356,3031,3033],{"className":2461,"code":3032,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\ndefineProps({\n labels: Array\n});\n\u003C/script>\n\u003Ctemplate>\n \u003Cdiv class=\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\">\n \u003Ch2 class=\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\">Classification Result\u003C/h2>\n \u003Cul>\n \u003Cli v-for=\"(result, index) in labels\" :key=\"index\" class=\"mb-2 p-2 border rounded\">\n \u003Cspan class=\"font-semibold text-slate-600 dark:text-slate-400\">{{ result.label }}\u003C/span> - {{ (result.probability).toFixed(2) }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n",[363,3034,3035,3047,3055,3060,3065,3073,3081,3096,3116,3124,3171,3205,3214,3222,3230],{"__ignoreMap":365},[1665,3036,3037,3039,3042,3045],{"class":1667,"line":1668},[1665,3038,2470],{"class":2173},[1665,3040,3041],{"class":2473},"script",[1665,3043,3044],{"class":1671}," setup",[1665,3046,2477],{"class":2173},[1665,3048,3049,3052],{"class":1667,"line":779},[1665,3050,3051],{"class":1671},"defineProps",[1665,3053,3054],{"class":2173},"({\n",[1665,3056,3057],{"class":1667,"line":782},[1665,3058,3059],{"class":2173}," labels: Array\n",[1665,3061,3062],{"class":1667,"line":1718},[1665,3063,3064],{"class":2173},"});\n",[1665,3066,3067,3069,3071],{"class":1667,"line":1724},[1665,3068,2713],{"class":2173},[1665,3070,3041],{"class":2473},[1665,3072,2477],{"class":2173},[1665,3074,3075,3077,3079],{"class":1667,"line":1925},[1665,3076,2470],{"class":2173},[1665,3078,2474],{"class":2473},[1665,3080,2477],{"class":2173},[1665,3082,3083,3085,3087,3089,3091,3094],{"class":1667,"line":2034},[1665,3084,2482],{"class":2173},[1665,3086,1599],{"class":2473},[1665,3088,2487],{"class":1671},[1665,3090,2490],{"class":2173},[1665,3092,3093],{"class":1675},"\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\"",[1665,3095,2477],{"class":2173},[1665,3097,3098,3100,3102,3104,3106,3109,3112,3114],{"class":1667,"line":2040},[1665,3099,2500],{"class":2173},[1665,3101,889],{"class":2473},[1665,3103,2487],{"class":1671},[1665,3105,2490],{"class":2173},[1665,3107,3108],{"class":1675},"\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\"",[1665,3110,3111],{"class":2173},">Classification Result\u003C/",[1665,3113,889],{"class":2473},[1665,3115,2477],{"class":2173},[1665,3117,3118,3120,3122],{"class":1667,"line":2046},[1665,3119,2500],{"class":2173},[1665,3121,48],{"class":2473},[1665,3123,2477],{"class":2173},[1665,3125,3126,3128,3130,3133,3135,3137,3140,3143,3146,3148,3150,3153,3155,3157,3160,3162,3164,3166,3169],{"class":1667,"line":2052},[1665,3127,2516],{"class":2173},[1665,3129,51],{"class":2473},[1665,3131,3132],{"class":2521}," v-for",[1665,3134,2490],{"class":2173},[1665,3136,2527],{"class":1675},[1665,3138,3139],{"class":2173},"(result, index) ",[1665,3141,3142],{"class":2521},"in",[1665,3144,3145],{"class":2173}," labels",[1665,3147,2527],{"class":1675},[1665,3149,2555],{"class":2173},[1665,3151,3152],{"class":1671},"key",[1665,3154,2490],{"class":2173},[1665,3156,2527],{"class":1675},[1665,3158,3159],{"class":2173},"index",[1665,3161,2527],{"class":1675},[1665,3163,2487],{"class":1671},[1665,3165,2490],{"class":2173},[1665,3167,3168],{"class":1675},"\"mb-2 p-2 border rounded\"",[1665,3170,2477],{"class":2173},[1665,3172,3173,3176,3178,3180,3182,3185,3188,3190,3193,3196,3199,3202],{"class":1667,"line":2058},[1665,3174,3175],{"class":2173}," \u003C",[1665,3177,1665],{"class":2473},[1665,3179,2487],{"class":1671},[1665,3181,2490],{"class":2173},[1665,3183,3184],{"class":1675},"\"font-semibold text-slate-600 dark:text-slate-400\"",[1665,3186,3187],{"class":2173},">{{ result.label }}\u003C/",[1665,3189,1665],{"class":2473},[1665,3191,3192],{"class":2173},"> - {{ (result.probability).",[1665,3194,3195],{"class":1671},"toFixed",[1665,3197,3198],{"class":2173},"(",[1665,3200,3201],{"class":1685},"2",[1665,3203,3204],{"class":2173},") }}\n",[1665,3206,3207,3210,3212],{"class":1667,"line":2064},[1665,3208,3209],{"class":2173}," \u003C/",[1665,3211,51],{"class":2473},[1665,3213,2477],{"class":2173},[1665,3215,3216,3218,3220],{"class":1667,"line":2070},[1665,3217,2589],{"class":2173},[1665,3219,48],{"class":2473},[1665,3221,2477],{"class":2173},[1665,3223,3224,3226,3228],{"class":1667,"line":2076},[1665,3225,2704],{"class":2173},[1665,3227,1599],{"class":2473},[1665,3229,2477],{"class":2173},[1665,3231,3232,3234,3236],{"class":1667,"line":2082},[1665,3233,2713],{"class":2173},[1665,3235,2474],{"class":2473},[1665,3237,2477],{"class":2173},[17,3239,3240,3241,3244,3245,3248,3249,3252],{},"In this component, we will display the top 3 probabilities on the screen. The reason for having 3 probabilities is that in our ",[21,3242,3243],{},"classifyImage"," function, we use ",[21,3246,3247],{},"slice(0,3)"," to take the top 3 probabilities. For example, if it were ",[21,3250,3251],{},"slice(0,5)",", we would see the top 5 probabilities.",[17,3254,3255],{},[121,3256,3257],{},[21,3258,2429],{},[356,3260,3262],{"className":2461,"code":3261,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\ndefineProps({\n products: Array\n});\n\u003C/script>\n\u003Ctemplate>\n \u003Cdiv class=\"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md\">\n \u003Ch2 class=\"text-xl font-semibold mb-4\">Product Basket\u003C/h2>\n \u003Cdiv class=\"flex justify-between items-center border-b pb-4 mb-4\" v-for=\"product in products\" :key=\"product.id\">\n \u003Cdiv>\n \u003Ch3 class=\"text-lg text-balance font-medium\">1x {{ product.name }}\u003C/h3>\n \u003C/div>\n \u003Cdiv class=\"flex items-center\">\n \u003Cspan class=\"text-slate-600 dark:text-slate-400 font-semibold\">Price: {{ product.price }}\u003C/span>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n",[363,3263,3264,3274,3280,3285,3289,3297,3305,3320,3340,3384,3392,3412,3420,3435,3455,3463,3471,3479],{"__ignoreMap":365},[1665,3265,3266,3268,3270,3272],{"class":1667,"line":1668},[1665,3267,2470],{"class":2173},[1665,3269,3041],{"class":2473},[1665,3271,3044],{"class":1671},[1665,3273,2477],{"class":2173},[1665,3275,3276,3278],{"class":1667,"line":779},[1665,3277,3051],{"class":1671},[1665,3279,3054],{"class":2173},[1665,3281,3282],{"class":1667,"line":782},[1665,3283,3284],{"class":2173}," products: Array\n",[1665,3286,3287],{"class":1667,"line":1718},[1665,3288,3064],{"class":2173},[1665,3290,3291,3293,3295],{"class":1667,"line":1724},[1665,3292,2713],{"class":2173},[1665,3294,3041],{"class":2473},[1665,3296,2477],{"class":2173},[1665,3298,3299,3301,3303],{"class":1667,"line":1925},[1665,3300,2470],{"class":2173},[1665,3302,2474],{"class":2473},[1665,3304,2477],{"class":2173},[1665,3306,3307,3309,3311,3313,3315,3318],{"class":1667,"line":2034},[1665,3308,2482],{"class":2173},[1665,3310,1599],{"class":2473},[1665,3312,2487],{"class":1671},[1665,3314,2490],{"class":2173},[1665,3316,3317],{"class":1675},"\"mx-auto bg-white-800 dark:bg-gray-800 rounded p-4 mt-2 shadow-md\"",[1665,3319,2477],{"class":2173},[1665,3321,3322,3324,3326,3328,3330,3333,3336,3338],{"class":1667,"line":2040},[1665,3323,2500],{"class":2173},[1665,3325,889],{"class":2473},[1665,3327,2487],{"class":1671},[1665,3329,2490],{"class":2173},[1665,3331,3332],{"class":1675},"\"text-xl font-semibold mb-4\"",[1665,3334,3335],{"class":2173},">Product Basket\u003C/",[1665,3337,889],{"class":2473},[1665,3339,2477],{"class":2173},[1665,3341,3342,3344,3346,3348,3350,3353,3355,3357,3359,3362,3364,3367,3369,3371,3373,3375,3377,3380,3382],{"class":1667,"line":2046},[1665,3343,2500],{"class":2173},[1665,3345,1599],{"class":2473},[1665,3347,2487],{"class":1671},[1665,3349,2490],{"class":2173},[1665,3351,3352],{"class":1675},"\"flex justify-between items-center border-b pb-4 mb-4\"",[1665,3354,3132],{"class":2521},[1665,3356,2490],{"class":2173},[1665,3358,2527],{"class":1675},[1665,3360,3361],{"class":2173},"product ",[1665,3363,3142],{"class":2521},[1665,3365,3366],{"class":2173}," products",[1665,3368,2527],{"class":1675},[1665,3370,2555],{"class":2173},[1665,3372,3152],{"class":1671},[1665,3374,2490],{"class":2173},[1665,3376,2527],{"class":1675},[1665,3378,3379],{"class":2173},"product.id",[1665,3381,2527],{"class":1675},[1665,3383,2477],{"class":2173},[1665,3385,3386,3388,3390],{"class":1667,"line":2052},[1665,3387,2516],{"class":2173},[1665,3389,1599],{"class":2473},[1665,3391,2477],{"class":2173},[1665,3393,3394,3396,3398,3400,3402,3405,3408,3410],{"class":1667,"line":2058},[1665,3395,3175],{"class":2173},[1665,3397,40],{"class":2473},[1665,3399,2487],{"class":1671},[1665,3401,2490],{"class":2173},[1665,3403,3404],{"class":1675},"\"text-lg text-balance font-medium\"",[1665,3406,3407],{"class":2173},">1x {{ product.name }}\u003C/",[1665,3409,40],{"class":2473},[1665,3411,2477],{"class":2173},[1665,3413,3414,3416,3418],{"class":1667,"line":2064},[1665,3415,3209],{"class":2173},[1665,3417,1599],{"class":2473},[1665,3419,2477],{"class":2173},[1665,3421,3422,3424,3426,3428,3430,3433],{"class":1667,"line":2070},[1665,3423,2516],{"class":2173},[1665,3425,1599],{"class":2473},[1665,3427,2487],{"class":1671},[1665,3429,2490],{"class":2173},[1665,3431,3432],{"class":1675},"\"flex items-center\"",[1665,3434,2477],{"class":2173},[1665,3436,3437,3439,3441,3443,3445,3448,3451,3453],{"class":1667,"line":2076},[1665,3438,3175],{"class":2173},[1665,3440,1665],{"class":2473},[1665,3442,2487],{"class":1671},[1665,3444,2490],{"class":2173},[1665,3446,3447],{"class":1675},"\"text-slate-600 dark:text-slate-400 font-semibold\"",[1665,3449,3450],{"class":2173},">Price: {{ product.price }}\u003C/",[1665,3452,1665],{"class":2473},[1665,3454,2477],{"class":2173},[1665,3456,3457,3459,3461],{"class":1667,"line":2082},[1665,3458,3209],{"class":2173},[1665,3460,1599],{"class":2473},[1665,3462,2477],{"class":2173},[1665,3464,3465,3467,3469],{"class":1667,"line":2088},[1665,3466,2589],{"class":2173},[1665,3468,1599],{"class":2473},[1665,3470,2477],{"class":2173},[1665,3472,3473,3475,3477],{"class":1667,"line":2094},[1665,3474,2704],{"class":2173},[1665,3476,1599],{"class":2473},[1665,3478,2477],{"class":2173},[1665,3480,3481,3483,3485],{"class":1667,"line":2305},[1665,3482,2713],{"class":2173},[1665,3484,2474],{"class":2473},[1665,3486,2477],{"class":2173},[17,3488,3489,3490,3492],{},"In this component, we handle the scenario of finding the product and adding it to the basket after our basic scenario. Here, in our upper layer, which is the ",[21,3491,2439],{}," layer, we find the product, send its information to this component, and display it.",[17,3494,3495],{},[121,3496,3497],{},[21,3498,2439],{},[356,3500,3502],{"className":2461,"code":3501,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport ImageUpload from '@/components/ImageUpload.vue'\nimport ResultDisplay from '@/components/ResultDisplay.vue'\nimport SimpleBasket from '@/components/SimpleBasket.vue'\n\nconst classificationResults = ref([])\nconst products = ref([])\nconst getResult = (result) => {\n classificationResults.value = result;\n}\nconst getProducts = (result) => {\n products.value = result\n};\n\u003C/script>\n\u003Ctemplate>\n \u003CImageUpload @getResult=\"getResult\" @getProducts=\"getProducts\" />\n \u003CResultDisplay v-if=\"classificationResults.length > 0\" :labels=\"classificationResults\" />\n \u003CSimpleBasket v-if=\"classificationResults.length > 0\" :products=\"products\" />\n\u003C/template>\n",[363,3503,3504,3514,3528,3540,3552,3564,3569,3586,3598,3623,3633,3637,3656,3666,3670,3678,3686,3719,3760,3798],{"__ignoreMap":365},[1665,3505,3506,3508,3510,3512],{"class":1667,"line":1668},[1665,3507,2470],{"class":2173},[1665,3509,3041],{"class":2473},[1665,3511,3044],{"class":1671},[1665,3513,2477],{"class":2173},[1665,3515,3516,3519,3522,3525],{"class":1667,"line":779},[1665,3517,3518],{"class":2521},"import",[1665,3520,3521],{"class":2173}," { ref } ",[1665,3523,3524],{"class":2521},"from",[1665,3526,3527],{"class":1675}," 'vue'\n",[1665,3529,3530,3532,3535,3537],{"class":1667,"line":782},[1665,3531,3518],{"class":2521},[1665,3533,3534],{"class":2173}," ImageUpload ",[1665,3536,3524],{"class":2521},[1665,3538,3539],{"class":1675}," '@/components/ImageUpload.vue'\n",[1665,3541,3542,3544,3547,3549],{"class":1667,"line":1718},[1665,3543,3518],{"class":2521},[1665,3545,3546],{"class":2173}," ResultDisplay ",[1665,3548,3524],{"class":2521},[1665,3550,3551],{"class":1675}," '@/components/ResultDisplay.vue'\n",[1665,3553,3554,3556,3559,3561],{"class":1667,"line":1724},[1665,3555,3518],{"class":2521},[1665,3557,3558],{"class":2173}," SimpleBasket ",[1665,3560,3524],{"class":2521},[1665,3562,3563],{"class":1675}," '@/components/SimpleBasket.vue'\n",[1665,3565,3566],{"class":1667,"line":1925},[1665,3567,3568],{"emptyLinePlaceholder":807},"\n",[1665,3570,3571,3574,3577,3580,3583],{"class":1667,"line":2034},[1665,3572,3573],{"class":2521},"const",[1665,3575,3576],{"class":1685}," classificationResults",[1665,3578,3579],{"class":2521}," =",[1665,3581,3582],{"class":1671}," ref",[1665,3584,3585],{"class":2173},"([])\n",[1665,3587,3588,3590,3592,3594,3596],{"class":1667,"line":2040},[1665,3589,3573],{"class":2521},[1665,3591,3366],{"class":1685},[1665,3593,3579],{"class":2521},[1665,3595,3582],{"class":1671},[1665,3597,3585],{"class":2173},[1665,3599,3600,3602,3605,3607,3610,3614,3617,3620],{"class":1667,"line":2046},[1665,3601,3573],{"class":2521},[1665,3603,3604],{"class":1671}," getResult",[1665,3606,3579],{"class":2521},[1665,3608,3609],{"class":2173}," (",[1665,3611,3613],{"class":3612},"s4XuR","result",[1665,3615,3616],{"class":2173},") ",[1665,3618,3619],{"class":2521},"=>",[1665,3621,3622],{"class":2173}," {\n",[1665,3624,3625,3628,3630],{"class":1667,"line":2052},[1665,3626,3627],{"class":2173}," classificationResults.value ",[1665,3629,2490],{"class":2521},[1665,3631,3632],{"class":2173}," result;\n",[1665,3634,3635],{"class":1667,"line":2058},[1665,3636,1928],{"class":2173},[1665,3638,3639,3641,3644,3646,3648,3650,3652,3654],{"class":1667,"line":2064},[1665,3640,3573],{"class":2521},[1665,3642,3643],{"class":1671}," getProducts",[1665,3645,3579],{"class":2521},[1665,3647,3609],{"class":2173},[1665,3649,3613],{"class":3612},[1665,3651,3616],{"class":2173},[1665,3653,3619],{"class":2521},[1665,3655,3622],{"class":2173},[1665,3657,3658,3661,3663],{"class":1667,"line":2070},[1665,3659,3660],{"class":2173}," products.value ",[1665,3662,2490],{"class":2521},[1665,3664,3665],{"class":2173}," result\n",[1665,3667,3668],{"class":1667,"line":2076},[1665,3669,2908],{"class":2173},[1665,3671,3672,3674,3676],{"class":1667,"line":2082},[1665,3673,2713],{"class":2173},[1665,3675,3041],{"class":2473},[1665,3677,2477],{"class":2173},[1665,3679,3680,3682,3684],{"class":1667,"line":2088},[1665,3681,2470],{"class":2173},[1665,3683,2474],{"class":2473},[1665,3685,2477],{"class":2173},[1665,3687,3688,3690,3693,3695,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717],{"class":1667,"line":2094},[1665,3689,2482],{"class":2173},[1665,3691,3692],{"class":2473},"ImageUpload",[1665,3694,2633],{"class":2173},[1665,3696,3019],{"class":1671},[1665,3698,2490],{"class":2173},[1665,3700,2527],{"class":1675},[1665,3702,3019],{"class":2173},[1665,3704,2527],{"class":1675},[1665,3706,2633],{"class":2173},[1665,3708,3022],{"class":1671},[1665,3710,2490],{"class":2173},[1665,3712,2527],{"class":1675},[1665,3714,3022],{"class":2173},[1665,3716,2527],{"class":1675},[1665,3718,2584],{"class":2173},[1665,3720,3721,3723,3726,3728,3730,3732,3735,3738,3741,3744,3746,3748,3750,3752,3754,3756,3758],{"class":1667,"line":2305},[1665,3722,2482],{"class":2173},[1665,3724,3725],{"class":2473},"ResultDisplay",[1665,3727,2522],{"class":2521},[1665,3729,2490],{"class":2173},[1665,3731,2527],{"class":1675},[1665,3733,3734],{"class":2173},"classificationResults.",[1665,3736,3737],{"class":1685},"length",[1665,3739,3740],{"class":2521}," >",[1665,3742,3743],{"class":1685}," 0",[1665,3745,2527],{"class":1675},[1665,3747,2555],{"class":2173},[1665,3749,1876],{"class":1671},[1665,3751,2490],{"class":2173},[1665,3753,2527],{"class":1675},[1665,3755,2979],{"class":2173},[1665,3757,2527],{"class":1675},[1665,3759,2584],{"class":2173},[1665,3761,3762,3764,3767,3769,3771,3773,3775,3777,3779,3781,3783,3785,3788,3790,3792,3794,3796],{"class":1667,"line":2317},[1665,3763,2482],{"class":2173},[1665,3765,3766],{"class":2473},"SimpleBasket",[1665,3768,2522],{"class":2521},[1665,3770,2490],{"class":2173},[1665,3772,2527],{"class":1675},[1665,3774,3734],{"class":2173},[1665,3776,3737],{"class":1685},[1665,3778,3740],{"class":2521},[1665,3780,3743],{"class":1685},[1665,3782,2527],{"class":1675},[1665,3784,2555],{"class":2173},[1665,3786,3787],{"class":1671},"products",[1665,3789,2490],{"class":2173},[1665,3791,2527],{"class":1675},[1665,3793,3787],{"class":2173},[1665,3795,2527],{"class":1675},[1665,3797,2584],{"class":2173},[1665,3799,3800,3802,3804],{"class":1667,"line":2329},[1665,3801,2713],{"class":2173},[1665,3803,2474],{"class":2473},[1665,3805,2477],{"class":2173},[17,3807,3808,3809,3811,3812,3817,3818,884],{},"After calling our components in ",[21,3810,2439],{},", we obtain the appearance in our visualization. If there are any differences or missing parts in your view, you can check ",[54,3813,3816],{"href":3814,"rel":3815},"https://github.com/Eralpozcan/TF.js-with-Vue3",[58],"TF.js-with-Vue3"," for the repository. Alternatively, you can download it directly to your computer. Or, if you prefer, you can try ",[54,3819,3822],{"href":3820,"rel":3821},"https://tf-js-with-vue3.vercel.app/",[58],"TF.js with Vue3 on Vercel",[17,3824,3825],{},[36,3826],{"alt":3827,"src":3828},"TensorFlow.js Preview","https://cdn-images-1.medium.com/max/5708/1*CbMt2ztPsdXle7IR5bQU4A.png",[17,3830,3831,3832,3835,3836,3838],{},"Now that we have completed all these stages, let’s move on to testing our project. As an example, I chose one of the images that appear when searching for ",[21,3833,3834],{},"“French Loaf”"," on Google because it is available within the ",[21,3837,1560],{}," labels. We have also defined its classification in our Mockup Data.",[17,3840,3841],{},[36,3842],{"alt":3843,"src":3844},"TensorFlow.js Recognition","https://cdn-images-1.medium.com/max/5708/1*WACbtVHDdnE6UbNdvnEnlQ.png",[17,3846,3847,3848,3851],{},"After selecting and uploading our image, we press the “",[121,3849,3850],{},"Classify-Recognize","” button. We then display the top 3 predictions with high probabilities and automatically add the item to our basket.",[1817,3853],{"src":3854,"width":1820,"height":1820,"style":365,"frameBorder":1821,"className":3855,"allowFullScreen":807},"https://giphy.com/embed/8c3LWBENZHRnP6ixOc",[1823],[17,3857,3858],{},[36,3859],{"alt":3860,"src":3861},"Tensorflow.js Results","https://cdn-images-1.medium.com/max/5708/1*1uyzTdpJOtoDpOMAflEzOw.png",[17,3863,3864,3865,3867],{},"As we can see, we implemented a simple Object Recognition and Add to Cart scenario using ",[21,3866,1556],{}," in the project. Through this, we explored how we can easily integrate artificial intelligence and tools into our projects or daily scenarios.",[17,3869,3870,3871,3873],{},"In this article, I tried to explain the usage and installation of ",[21,3872,1556],{}," with examples of how it can be beneficial in a simple scenario.",[17,3875,3876,3877,3881,3882,3885,3886,3889],{},"After reading my ",[54,3878,201],{"href":3879,"rel":3880},"https://medium.com/how-to-use/how-to-use-object-recognition-with-tensorflow-js-and-vue-3-57dac4a53494",[58]," post, feel free to reach out to me on ",[54,3883,750],{"href":748,"rel":3884},[58]," if you have any questions or suggestions.For my other accounts, you can visit ",[54,3887,756],{"href":754,"rel":3888},[58],"🤖",[17,3891,1514],{},[3893,3894,3895],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":365,"searchDepth":779,"depth":779,"links":3897},[3898,3899,3903,3904,3905,3906,3907],{"id":1594,"depth":782,"text":1597},{"id":1634,"depth":779,"text":1635,"children":3900},[3901],{"id":1734,"depth":782,"text":3902},"📌 Optional Installation",{"id":1814,"depth":779,"text":1815},{"id":1884,"depth":779,"text":1885},{"id":1992,"depth":779,"text":1993},{"id":2134,"depth":779,"text":2135},{"id":2406,"depth":779,"text":2407,"children":3908},[3909,3910],{"id":2450,"depth":782,"text":2453},{"id":2723,"depth":782,"text":2726},"2024-06-31","In recent years, artificial intelligence and its products have become increasingly active and are starting to take their place in our lives, with their numbers steadily rising. We all have the question in mind of how we can use this in our daily lives. In this article, we will create a simple application together using TensorFlow.js, where we will use ImageNet classes and the MobileNet-v2 model to recognize and add an object/item to the cart. This way, we will implement a scenario similar to the basic working principle of Amazon Go. Let’s get started 🚀",{"card_description":3914,"cover":3915,"language":3916,"links":3917},"Artificial intelligence is becoming more integrated into daily life, prompting practical use cases. This article shows how to build a simple app with TensorFlow.js and the MobileNet-v2 model to recognize objects and add them to a cart, mimicking Amazon Go. Let's get started 🚀","/assets/images/blog/tensorflowjs.webp","en",[3918,3919],{"medium":3879},{"devto":3920},"https://dev.to/eralpozcan/how-to-use-object-recognition-with-tensorflowjs-and-vue-3-3glb","/blog/how-to-use-object-recognition-with-tensorflowjs-and-vue-3","18",{"title":1545,"description":3912},{"loc":3925,"lastmod":3911,"changefreq":813,"priority":814},"http://eralpozcan.dev/blog/how-to-use-object-recognition-with-tensorflow-js-and-vue-3","blog/how-to-use-object-recognition-with-tensorflowjs-and-vue-3",[1556,3928,3929,3930,3931,3932,3933],"Vue.js","Machine Learning","AI","Object Recognition","JavaScript","MobileNet","xz22HpXVv6Cf09Jxn9Jr3z4r5FPDo6h8bq3XO1mbiPE",{"id":3936,"title":3937,"body":3938,"date":4723,"description":3945,"extension":797,"head":798,"image":798,"meta":4724,"navigation":807,"ogImage":4726,"path":4731,"readingTime":4732,"robots":798,"schemaOrg":798,"seo":4733,"sitemap":4734,"stem":4736,"tags":4737,"__hash__":4741},"blog/blog/how-to-use-sentry-with-vue-3.md","How to Use Sentry with Vue 3?",{"type":9,"value":3939,"toc":4715},[3940,3943,3946,3952,3958,3964,3967,3974,4012,4022,4026,4029,4039,4046,4052,4058,4064,4074,4080,4086,4105,4111,4137,4195,4209,4212,4218,4224,4232,4235,4289,4295,4301,4308,4314,4321,4331,4337,4348,4351,4356,4376,4381,4391,4401,4408,4413,4420,4430,4435,4443,4448,4463,4468,4475,4480,4485,4653,4661,4672,4683,4691,4697,4709,4712],[12,3941,3937],{"id":3942},"how-to-use-sentry-with-vue-3",[17,3944,3945],{},"Don’t we often encounter errors and find it difficult to identify them? One of the error and performance monitoring tools is Sentry. In this article, I will explain how to set up Sentry and make improvements with performance monitoring. Are you ready? Let’s get started! 🚀",[889,3947,3949],{"id":3948},"what-is-sentry",[21,3950,3951],{},"What is Sentry?",[17,3953,3954],{},[36,3955],{"alt":3956,"src":3957},"Sentry","https://cdn-images-1.medium.com/max/2000/1*KPMnUpwtjAJ_97NZO50Lew.png",[17,3959,3960,3961,3963],{},"If we need to provide a general description, ",[21,3962,3956],{}," is an error tracking and reporting platform for many of our applications, and we can even add that it's a performance reporting platform.",[17,3965,3966],{},"Sentry allows developers to monitor application errors in real-time, receive and analyze error reports, and quickly diagnose issues.",[17,3968,3969,3970,3973],{},"The ",[21,3971,3972],{},"key features"," of Sentry include:",[177,3975,3976,3982,3988,3994,4000],{},[51,3977,3978,3981],{},[21,3979,3980],{},"Error Tracking",": Sentry tracks and captures errors in applications. It can detect various types of errors such as exceptions, error messages, errors in the user interface, and more.",[51,3983,3984,3987],{},[21,3985,3986],{},"Real-time Monitoring",": Sentry monitors application errors in real-time and sends notifications promptly. This allows developers to quickly notice mistakes and take action.",[51,3989,3990,3993],{},[21,3991,3992],{},"Error Reporting",": Sentry reports errors in detail. Error reports provide crucial information about when, where, and under what conditions the error occurred. This helps developers diagnose and fix errors.",[51,3995,3996,3999],{},[21,3997,3998],{},"Integrations",": Sentry supports many popular programming languages and various platforms. This allows it to integrate with different types of applications and systems.",[51,4001,4002,4005,4006,4011],{},[21,4003,4004],{},"Performance Monitoring",": Sentry can monitor the performance of applications and detect performance issues. With performance monitoring features, developers can optimize the performance of their applications and enhance the user experience. ",[121,4007,4008],{},[21,4009,4010],{},"We’ll even provide an example in this regard"," 😉",[17,4013,4014],{},[121,4015,4016,4017],{},"Additionally, in addition to the basic explanation provided here, I recommend reading Onur Dayıbaş’s Medium article titled ",[54,4018,4021],{"href":4019,"rel":4020},"https://medium.com/frontend-development-with-js/sentrydeki-baz%C4%B1-kavramlar-project-env-release-ve-sourcemap-2a041395c43b",[58],"Some Concepts in Sentry",[889,4023,4025],{"id":4024},"installation","Installation",[17,4027,4028],{},"Firstly, I will support the steps we will take here with visuals. Sentry itself will also provide us with sufficient assistance in this regard.",[17,4030,4031,4032,4038],{},"📌 Go to ",[21,4033,4034],{},[54,4035,3956],{"href":4036,"rel":4037},"https://sentry.io/",[58],"’s website and create an account if you don’t have one, or log in if you already have an account.",[17,4040,4041,4042,4045],{},"📌 If you’re logging in for the first time, you’ll be prompted to create an organization. One of the main reasons for this is to enable collaboration with your team members. In this example, I’ll skip this step by creating an organization named “",[121,4043,4044],{},"Example","”.",[17,4047,4048],{},[36,4049],{"alt":4050,"src":4051},"Create Sentry Organization","https://cdn-images-1.medium.com/max/2000/1*4f-HuN-NdMT71Tk04eEAeg.jpeg",[17,4053,4054,4055,884],{},"📌 We are presented with a screen where we can choose the platform we want to set up. Here, we select ",[21,4056,4057],{},"Vue",[17,4059,4060],{},[36,4061],{"alt":4062,"src":4063},"Choose Platform","https://cdn-images-1.medium.com/max/3338/1*LrfmXgglYv3nRt3MrQrMng.jpeg",[17,4065,4066,4067,4070,4071,331],{},"📌 Here, we select the alert frequency. We can adjust this setting later, but for now, we select the option “",[121,4068,4069],{},"Alert me on every new issue.","” Then, we proceed to the next step, where we create our project and choose our team. If you don’t have a team, by default, it will use the name of your organization as the team. If you want to create a different team, you can click on the “+” sign to create one. Finally, we click on “",[121,4072,4073],{},"Create Project.",[17,4075,4076],{},[36,4077],{"alt":4078,"src":4079},"Create Project with alert frequency","https://cdn-images-1.medium.com/max/3380/1*-L3H4uW2SZgSvkJNrl817w.jpeg",[17,4081,4082,4083,4085],{},"📌 Here, ",[21,4084,3956],{}," provides us with instructions. It automatically adjusts settings based on three main scenarios. Some important points to understand are as follows:",[177,4087,4088,4094,4099],{},[51,4089,4090,4093],{},[21,4091,4092],{},"Error Monitoring",": This is our error monitoring setting. It is selected by default, and we cannot disable it because that’s our primary goal 😉",[51,4095,4096,4098],{},[21,4097,4004],{},": Here, we measure the performance of our page load. If we don’t want this option, we can remove it.",[51,4100,4101,4104],{},[21,4102,4103],{},"Session Replay",": This is actually one of the features we love. It provides a small video snippet showing how errors occurred. However, it is not recommended to collect these data at high rates. It’s sufficient to enable it only for errors.",[17,4106,4107],{},[36,4108],{"alt":4109,"src":4110},"Install Configure","https://cdn-images-1.medium.com/max/3318/1*70xw3bqMfOfL130UIlSdDw.jpeg",[17,4112,4113,4114,4116,4117,4119,4120,4122,4123,4126,4127,4129,4130,3609,4133,4136],{},"Let’s move on to the installation process. As shown in the screenshot above, we install the ",[21,4115,3956],{}," package in our project using either “",[121,4118,1672],{},"” or “",[121,4121,1703],{},"” depending on our preference. Then, we directly copy the Vue3 sample code and paste it into our “",[121,4124,4125],{},"main.js","” file. Of course, you may have a different “",[121,4128,4125],{},"” file in your project. The important point here is to include the portion starting with ",[363,4131,4132],{},"Sentry.init({])",[121,4134,4135],{},"Don’t forget to import it","). The key settings and their meanings in this configuration are as follows:",[48,4138,4139,4145,4151,4164,4174,4187],{},[51,4140,4141,4144],{},[21,4142,4143],{},"App",": It is used to specify the application object, which is the application we created with createApp or the application we want to monitor.",[51,4146,4147,4150],{},[21,4148,4149],{},"dns:"," The address of the Sentry server where error reports will be sent. I recommend keeping this address in a secure manner, such as using a .env file. Exposing this address can lead to potential security issues.",[51,4152,4153,4156,4157,1745,4160,4163],{},[21,4154,4155],{},"integrations",": It is used to configure Sentry integrations. In this example, ",[363,4158,4159],{},"Sentry.BrowserTracing",[363,4161,4162],{},"Sentry.Replayintegrations"," are used.",[51,4165,4166,4169,4170,4173],{},[21,4167,4168],{},"tracesSampleRate",": Performance monitoring sample rate. It is expressed as a percentage, and in this example, it is set to ",[21,4171,4172],{},"100%"," It is recommended to lower this rate in real production environments.",[51,4175,4176,4179,4180,4183,4184,4186],{},[21,4177,4178],{},"replaysSessionSampleRate",": Session replay sample rate. It is expressed as a percentage, and in this example, it is set to ",[21,4181,4182],{},"10%",". During development, it can be set ",[21,4185,4172],{}," for better analysis, while in production, a lower sampling rate can be used.",[51,4188,4189,4192,4193],{},[21,4190,4191],{},"replaysOnErrorSampleRate",": Sample rate for sessions with errors. If you are not already sampling sessions, you can set the sampling rate for sessions with errors to ",[21,4194,4172],{},[17,4196,4197,4198,4205,4206,884],{},"For more advanced configuration options that are not shown in the screenshot, you can refer to the ",[54,4199,4202],{"href":4200,"rel":4201},"https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/?original_referrer=https%3A%2F%2Fvueschool.io%2F&utm_campaign=evergreen-vue-school-course-2022&utm_medium=partner&utm_source=vueschool",[58],[121,4203,4204],{},"Sentry Basic Options"," in the documentation to make detailed adjustments. Essentially, we have completed the basic installation process here. Now, let’s see how we can capture our ",[21,4207,4208],{},"first error",[889,4210,593],{"id":4211},"issues",[17,4213,4214,4215,4217],{},"After completing the installations, ",[21,4216,3956],{}," automatically redirects us to a page like the one below and expects us to send our errors. In fact, we will see or track all the errors here.",[17,4219,4220],{},[36,4221],{"alt":4222,"src":4223},"Sentry Issues Page","https://cdn-images-1.medium.com/max/3786/1*Kn4dZSqzZFClgWi6WZ7rew.jpeg",[733,4225,4226],{},[17,4227,4228,4229],{},"How can we send this error or different data to Sentry? ",[121,4230,4231],{},"🤔",[17,4233,4234],{},"👩💻 We are creating a simple button and function.",[356,4236,4240],{"className":4237,"code":4238,"language":4239,"meta":365,"style":365},"language-js shiki shiki-themes github-light github-dark"," \u003Cbutton @click=\"sendSentryData\">Click me\u003C/button>\n\n function sendSentryData() {\n Sentry.captureMessage('Button clicked');\n }\n","js",[363,4241,4242,4255,4259,4269,4285],{"__ignoreMap":365},[1665,4243,4244,4246,4248,4252],{"class":1667,"line":1668},[1665,4245,2482],{"class":2173},[1665,4247,2654],{"class":2473},[1665,4249,4251],{"class":4250},"s7hpK"," @click=\"sendSentryData\">Click",[1665,4253,4254],{"class":4250}," me\u003C/button>\n",[1665,4256,4257],{"class":1667,"line":779},[1665,4258,3568],{"emptyLinePlaceholder":807},[1665,4260,4261,4264,4267],{"class":1667,"line":782},[1665,4262,4263],{"class":1671}," function",[1665,4265,4266],{"class":4250}," sendSentryData()",[1665,4268,3622],{"class":2173},[1665,4270,4271,4274,4277,4279,4282],{"class":1667,"line":1718},[1665,4272,4273],{"class":2173}," Sentry.",[1665,4275,4276],{"class":1671},"captureMessage",[1665,4278,3198],{"class":2173},[1665,4280,4281],{"class":1675},"'Button clicked'",[1665,4283,4284],{"class":2173},");\n",[1665,4286,4287],{"class":1667,"line":1724},[1665,4288,2342],{"class":2173},[17,4290,4291,4292,4294],{},"If you haven’t imported and initialized ",[21,4293,3956],{}," when creating this function, you will receive the error shown in the image below.",[17,4296,4297],{},[36,4298],{"alt":4299,"src":4300},"Sentry ReferenceError","https://cdn-images-1.medium.com/max/2524/1*vemyluI6ZEEpZ0vCFi1TVA.jpeg",[17,4302,4303],{},[36,4304],{"src":4305,"loading":4306,"alt":4307},"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcWpxbTN3b3Z5aXdiMjBraWNnb3N4OXphYzRmNjF0anZwcHR5eG4xbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/JqDeI2yjpSRgdh35oe/giphy.gif","lazy","Ta daa Friends Gif",[17,4309,4310],{},[36,4311],{"alt":4312,"src":4313},"Show Reference Error in Issues","https://cdn-images-1.medium.com/max/3800/1*4BK7hzeNWYzqCm0sEHqTyQ.jpeg",[733,4315,4316],{},[17,4317,4318],{},[21,4319,4320],{},"We encountered our first error! So how did this happen?",[17,4322,4323,4324,4326,4327,4330],{},"Because we encountered a reference error at its core, and since our ",[21,4325,4191],{}," value is set to 100%, Sentry detected it and sent it to us directly. By clicking on its content, we can learn more about the occurrence of the error or get detailed information. However, to keep it brief, I won’t go into that here. We received the error because we hadn’t defined Sentry. To resolve this, we add the code ",[363,4328,4329],{},"import * as Sentry from '@sentry/vue' "," to our script and click the button again. 🖱️",[17,4332,4333],{},[36,4334],{"alt":4335,"src":4336},"Issueses","https://cdn-images-1.medium.com/max/3340/1*GnbJRVuMPRMBh2cLLlznxw.jpeg",[17,4338,4339,4340,4343,4344,4347],{},"As you can see, we can also view the message we sent. One important aspect here is that we can see how many times this error occurred and how many users experienced it. The “",[121,4341,4342],{},"Events","” count shows how many times the error occurred, while the “",[121,4345,4346],{},"Users","” count indicates how many different users encountered this issue. By clicking into the error, we can access more detailed information. Essentially, we have successfully performed a basic error and data reporting process. Now, let’s move on to performance analysis.",[889,4349,4004],{"id":4350},"performance-monitoring",[17,4352,4353],{},[36,4354],{"src":4355,"loading":4306},"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNzhibDhtZXYyNjh5ampvY2x4ZjRlYnM1ZG1qMnIydmMyOXZ0M20yNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/rM0wxzvwsv5g4/giphy.gif",[17,4357,4358,4359,4361,4362,4364,4365,1745,4368,4371,4372,4375],{},"As you know, one of the important aspects for all of us is the page loading speed, in other words, the performance of our project. We mentioned that with ",[21,4360,3956],{},", it is possible to analyze this performance. If we selected the Performance Monitoring option during the installation process, we actually gain some speed in the setup phase. When we return to our “",[121,4363,4125],{},"” file, we will see thee ",[21,4366,4367],{},"BrowserTracing",[21,4369,4370],{},"tranceSampleRate"," values. In BrowserTracing, the adjustments we make involve entering the addresses of our domains. “",[121,4373,4374],{},"localhost","” is set as the default. Additionally, we need to add the address of the deployed application.",[17,4377,4378],{},[36,4379],{"alt":365,"src":4380},"https://cdn-images-1.medium.com/max/2074/1*iAxm524BfUalKzVQgyP5Bg.jpeg",[17,4382,4383,4384,4390],{},"I have added the example “",[54,4385,4388],{"href":4386,"rel":4387},"https://moviepal.vercel.app",[58],[121,4389,4386],{},"“ as you mentioned. This way, I will be able to measure its performance even in the deployed state.",[17,4392,4393,4394,4396,4397,4400],{},"Another value we have is ",[21,4395,4370],{},", and it is recommended to lower this value in production environments. However, if you are doing local development, it is recommended to set this value to ",[21,4398,4399],{},"1.0",". This way, you will be able to analyze all page reloads.",[733,4402,4403],{},[17,4404,4405],{},[21,4406,4407],{},"How will performance monitoring be beneficial for us? Let’s see it in practice.",[17,4409,4410],{},[36,4411],{"loading":4306,"src":4412},"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExODB2d2didDNqYzh0cWl5YWd2ZTFncG1zaW0ycW9ia3VqaXhrY21qeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2IudUHdI075HL02Pkk/giphy.gif",[17,4414,4415,4416,4419],{},"In fact, while working on this project, I was monitoring the performance metrics. And then I realized that the page loading was taking longer due to the images. I was using ",[21,4417,4418],{},"UseImage"," for this purpose, thinking it would be effective, but it doesn’t seem to be the case.",[17,4421,4422,4423],{},"📌 I have shared the development examples I made here on ",[54,4424,4427],{"href":4425,"rel":4426},"https://gist.github.com/Eralpozcan/ae1f7d40b16b8420d4ab3f0ac6b6b430",[58],[21,4428,4429],{},"Gist",[17,4431,4432],{},[36,4433],{"alt":365,"src":4434},"https://cdn-images-1.medium.com/max/3346/1*YbGalxlbV7SLVzmxpncoZg.jpeg",[17,4436,4437,4438,4442],{},"📌 The first thing I did here was to remove ",[54,4439,4418],{"href":4440,"rel":4441},"https://vueuse.org/core/useImage/",[58]," and use a regular Img tag to observe the situation.",[17,4444,4445],{},[36,4446],{"alt":365,"src":4447},"https://cdn-images-1.medium.com/max/3326/1*FIKgAMgISoZUcwaMtBuhYQ.jpeg",[17,4449,4450,4451,4454,4455,4458,4459,4462],{},"📌 As you can see, there is some improvement in our metrics. Although the ",[121,4452,4453],{},"CLS"," value has increased, other parameters show a decrease of over ",[21,4456,4457],{},"50%",". Next, I enable the lazy loading feature of Swiper and the lazy attribute of the img tag. This leads to a significant decrease in our ",[121,4460,4461],{},"TTFB"," value.",[17,4464,4465],{},[36,4466],{"alt":365,"src":4467},"https://cdn-images-1.medium.com/max/3312/1*3UqIPltOhomjiLorbHV-dg.jpeg",[17,4469,4470,4471,4474],{},"📌 Then, as observed in the images, I notice that ",[121,4472,4473],{},"CSS"," files are being repeatedly imported and loaded within the components. I address this by globally importing them into the root directory of our project. This way, there will be no need to load them repeatedly on this page.",[17,4476,4477],{},[36,4478],{"alt":365,"src":4479},"https://cdn-images-1.medium.com/max/3320/1*4PBTiuyqpEBY7mV_yjWsMQ.jpeg",[733,4481,4482],{},[17,4483,4484],{},"You can find a table below that shows the processes we do in a more comparable way.👇",[4486,4487,4488,4519],"table",{},[4489,4490,4491],"thead",{},[4492,4493,4494,4498,4501,4504,4506,4509,4512,4515,4517],"tr",{},[4495,4496,4497],"th",{},"Process",[4495,4499,4500],{},"Swiper CSS Imported",[4495,4502,4503],{},"Event Duration",[4495,4505,4453],{},[4495,4507,4508],{},"FCP",[4495,4510,4511],{},"FP",[4495,4513,4514],{},"LCP",[4495,4516,4461],{},[4495,4518,4429],{},[4520,4521,4522,4556,4588,4620],"tbody",{},[4492,4523,4524,4530,4533,4536,4539,4542,4544,4547,4550],{},[4525,4526,4527],"td",{},[21,4528,4529],{},"Swiper with UseImage",[4525,4531,4532],{},"Yes",[4525,4534,4535],{},"2.93s",[4525,4537,4538],{},"0.226",[4525,4540,4541],{},"733.4ms",[4525,4543,4541],{},[4525,4545,4546],{},"1.207s",[4525,4548,4549],{},"80.20ms",[4525,4551,4552],{},[54,4553,4529],{"href":4554,"rel":4555},"https://gist.github.com/Eralpozcan/ae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper1useimage-vue",[58],[4492,4557,4558,4563,4565,4568,4571,4574,4576,4579,4582],{},[4525,4559,4560],{},[21,4561,4562],{},"Swiper with Img Tag",[4525,4564,4532],{},[4525,4566,4567],{},"2.67s",[4525,4569,4570],{},"0.392",[4525,4572,4573],{},"383.4ms",[4525,4575,4573],{},[4525,4577,4578],{},"1.157s",[4525,4580,4581],{},"35.60ms",[4525,4583,4584],{},[54,4585,4562],{"href":4586,"rel":4587},"https://gist.github.com/Eralpozcan/ae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper2img-vue",[58],[4492,4589,4590,4595,4597,4600,4603,4606,4608,4611,4614],{},[4525,4591,4592],{},[21,4593,4594],{},"Swiper with Img and Lazy",[4525,4596,4532],{},[4525,4598,4599],{},"2.06s",[4525,4601,4602],{},"0.253",[4525,4604,4605],{},"391ms",[4525,4607,4605],{},[4525,4609,4610],{},"791.5ms",[4525,4612,4613],{},"18.60ms",[4525,4615,4616],{},[54,4617,4594],{"href":4618,"rel":4619},"https://gist.github.com/Eralpozcan/ae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper3imglazy-vue",[58],[4492,4621,4622,4626,4629,4632,4635,4638,4640,4643,4646],{},[4525,4623,4624],{},[21,4625,4594],{},[4525,4627,4628],{},"No",[4525,4630,4631],{},"1.78s",[4525,4633,4634],{},"0.218",[4525,4636,4637],{},"312.9ms",[4525,4639,4637],{},[4525,4641,4642],{},"693.7ms",[4525,4644,4645],{},"8ms",[4525,4647,4648],{},[54,4649,4652],{"href":4650,"rel":4651},"https://gist.github.com/Eralpozcan/ae1f7d40b16b8420d4ab3f0ac6b6b430#file-swiper4imglazycss-vue",[58],"Swiper with Img and Lazy without CSS",[17,4654,4655],{},[121,4656,4657,4660],{},[21,4658,4659],{},"Swiper CSS Imported:"," Indicates whether the Swiper CSS is being reloaded within the page. If the value is “No”, it means that it has been imported into the project’s root directory as well.",[733,4662,4663],{},[17,4664,4665,4666,4671],{},"If you feel that your knowledge about abbreviations and metrics is not sufficient, Google ",[54,4667,4670],{"href":4668,"rel":4669},"https://web.dev/metrics/",[58],"web.dev"," can be helpful for you.",[17,4673,4674,4675,4677,4678,4680,4681,884],{},"As has seen, we created a simple example using ",[21,4676,3956],{},"’s ",[121,4679,4004],{}," tool and optimized our code. Of course, there are different optimization methods available, but here we made some basic improvements and significantly increased our page loading speed through ",[21,4682,3956],{},[733,4684,4685],{},[889,4686,4688,884],{"id":4687},"with-these-optimizations-we-were-able-to-increase-our-page-loading-speed-by-approximately-60",[21,4689,4690],{},"With these optimizations, we were able to increase our page loading speed by approximately 60%",[17,4692,4693,4694,4696],{},"In this article, I have tried to explain the usage and installation of ",[21,4695,3956],{}," and how it can be beneficial to us by providing examples.",[17,4698,3876,4699,4703,4704,4708],{},[54,4700,201],{"href":4701,"rel":4702},"https://medium.com/@eralpozcan/how-to-use-sentry-with-vue-3-a8495d482672",[58]," post, feel free to reach out to me on my ",[54,4705,4707],{"href":748,"rel":4706},[58],"Linkedin "," account if you have any questions or suggestions.",[17,4710,4711],{},"See you in my next article! 📩",[3893,4713,4714],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":365,"searchDepth":779,"depth":779,"links":4716},[4717,4718,4719,4720,4721],{"id":3948,"depth":779,"text":3951},{"id":4024,"depth":779,"text":4025},{"id":4211,"depth":779,"text":593},{"id":4350,"depth":779,"text":4004},{"id":4687,"depth":779,"text":4722},"With these optimizations, we were able to increase our page loading speed by approximately 60%.","2023-06-26",{"card_description":4725,"cover":4726,"language":1527,"links":4727},"Don't we often encounter errors and find it difficult to identify them? One of the error and performance monitoring tools is Sentry. In this article, I will explain how to set up Sentry and make improvements with performance monitoring. Are you ready? Let's get started! 🚀","/assets/images/blog/sentry.webp",[4728,4729],{"medium":4701},{"devto":4730},"https://dev.to/eralpozcan/how-to-use-sentry-with-vue-3-2bi2","/blog/how-to-use-sentry-with-vue-3","9",{"title":3937,"description":3945},{"loc":4735,"lastmod":4723,"changefreq":813,"priority":814},"http://eralpozcan.dev/blog/how-to-use-sentry-with-vue-3","blog/how-to-use-sentry-with-vue-3",[3956,3928,4092,4738,4739,3932,4740],"Performance","Debugging","Frontend","7FzixvKZKkoAmg01TL66wuPQeqXTWw0l_MWLtTuu9Cc",{"id":4743,"title":4744,"body":4745,"date":5247,"description":5248,"extension":797,"head":798,"image":798,"meta":5249,"navigation":807,"ogImage":798,"path":5252,"readingTime":5253,"robots":798,"schemaOrg":798,"seo":5254,"sitemap":5255,"stem":5256,"tags":5257,"__hash__":5261},"blog/blog/nuxt-content-ile-blog-olusturma.md","Nuxt Content ile Modern Blog Oluşturma",{"type":9,"value":4746,"toc":5238},[4747,4750,4753,4757,4760,4792,4796,4799,4813,4820,4874,4878,4885,4944,4948,4955,5193,5197,5200,5204,5227,5230,5235],[12,4748,4744],{"id":4749},"nuxt-content-ile-modern-blog-oluşturma",[17,4751,4752],{},"Nuxt Content, Nuxt.js ekosisteminin güçlü bir parçası olarak, markdown dosyalarını kullanarak kolayca blog ve dokümantasyon siteleri oluşturmanıza olanak tanır. Bu yazıda, Nuxt Content ile nasıl modern bir blog oluşturabileceğinizi adım adım göstereceğim.",[889,4754,4756],{"id":4755},"neden-nuxt-content","Neden Nuxt Content?",[17,4758,4759],{},"Nuxt Content'in sunduğu avantajlar:",[48,4761,4762,4768,4774,4780,4786],{},[51,4763,4764,4767],{},[21,4765,4766],{},"Markdown Desteği",": Yazılarınızı markdown formatında yazabilirsiniz",[51,4769,4770,4773],{},[21,4771,4772],{},"Vue Bileşenleri",": Markdown içinde Vue bileşenlerini kullanabilirsiniz",[51,4775,4776,4779],{},[21,4777,4778],{},"Otomatik Routing",": Dosya yapısına göre otomatik route oluşturur",[51,4781,4782,4785],{},[21,4783,4784],{},"SEO Optimizasyonu",": Built-in SEO özellikleri",[51,4787,4788,4791],{},[21,4789,4790],{},"Syntax Highlighting",": Kod blokları için otomatik syntax highlighting",[889,4793,4795],{"id":4794},"kurulum","Kurulum",[17,4797,4798],{},"Öncelikle Nuxt Content'i projenize ekleyin:",[356,4800,4802],{"className":1659,"code":4801,"language":1661,"meta":365,"style":365},"npm install @nuxt/content\n",[363,4803,4804],{"__ignoreMap":365},[1665,4805,4806,4808,4810],{"class":1667,"line":1668},[1665,4807,1672],{"class":1671},[1665,4809,1795],{"class":1675},[1665,4811,4812],{"class":1675}," @nuxt/content\n",[17,4814,4815,4816,4819],{},"Sonra ",[363,4817,4818],{},"nuxt.config.ts"," dosyanızda modülü aktifleştirin:",[356,4821,4825],{"className":4822,"code":4823,"language":4824,"meta":365,"style":365},"language-typescript shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n modules: [\n '@nuxt/content'\n ],\n content: {\n // Content konfigürasyonu\n }\n})\n","typescript",[363,4826,4827,4840,4845,4850,4855,4860,4865,4869],{"__ignoreMap":365},[1665,4828,4829,4832,4835,4838],{"class":1667,"line":1668},[1665,4830,4831],{"class":2521},"export",[1665,4833,4834],{"class":2521}," default",[1665,4836,4837],{"class":1671}," defineNuxtConfig",[1665,4839,3054],{"class":2173},[1665,4841,4842],{"class":1667,"line":779},[1665,4843,4844],{"class":2173}," modules: [\n",[1665,4846,4847],{"class":1667,"line":782},[1665,4848,4849],{"class":1675}," '@nuxt/content'\n",[1665,4851,4852],{"class":1667,"line":1718},[1665,4853,4854],{"class":2173}," ],\n",[1665,4856,4857],{"class":1667,"line":1724},[1665,4858,4859],{"class":2173}," content: {\n",[1665,4861,4862],{"class":1667,"line":1925},[1665,4863,4864],{"class":1697}," // Content konfigürasyonu\n",[1665,4866,4867],{"class":1667,"line":2034},[1665,4868,2342],{"class":2173},[1665,4870,4871],{"class":1667,"line":2040},[1665,4872,4873],{"class":2173},"})\n",[889,4875,4877],{"id":4876},"i̇çerik-oluşturma","İçerik Oluşturma",[17,4879,4880,4881,4884],{},"Blog yazılarınızı ",[363,4882,4883],{},"content/blog/"," klasörü altında oluşturun:",[356,4886,4890],{"className":4887,"code":4888,"language":4889,"meta":365,"style":365},"language-markdown shiki shiki-themes github-light github-dark","---\ntitle: 'Yazı Başlığı'\ndescription: 'Yazı açıklaması'\ndate: '2024-01-15'\nauthor: 'Yazar Adı'\ntags: ['tag1', 'tag2']\n---\n\n# Yazı İçeriği\n\nBuraya yazınızın içeriğini yazabilirsiniz...\n","markdown",[363,4891,4892,4897,4902,4907,4912,4917,4922,4926,4930,4935,4939],{"__ignoreMap":365},[1665,4893,4894],{"class":1667,"line":1668},[1665,4895,4896],{},"---\n",[1665,4898,4899],{"class":1667,"line":779},[1665,4900,4901],{},"title: 'Yazı Başlığı'\n",[1665,4903,4904],{"class":1667,"line":782},[1665,4905,4906],{},"description: 'Yazı açıklaması'\n",[1665,4908,4909],{"class":1667,"line":1718},[1665,4910,4911],{},"date: '2024-01-15'\n",[1665,4913,4914],{"class":1667,"line":1724},[1665,4915,4916],{},"author: 'Yazar Adı'\n",[1665,4918,4919],{"class":1667,"line":1925},[1665,4920,4921],{},"tags: ['tag1', 'tag2']\n",[1665,4923,4924],{"class":1667,"line":2034},[1665,4925,4896],{},[1665,4927,4928],{"class":1667,"line":2040},[1665,4929,3568],{"emptyLinePlaceholder":807},[1665,4931,4932],{"class":1667,"line":2046},[1665,4933,4934],{},"# Yazı İçeriği\n",[1665,4936,4937],{"class":1667,"line":2052},[1665,4938,3568],{"emptyLinePlaceholder":807},[1665,4940,4941],{"class":1667,"line":2058},[1665,4942,4943],{},"Buraya yazınızın içeriğini yazabilirsiniz...\n",[889,4945,4947],{"id":4946},"sayfa-oluşturma","Sayfa Oluşturma",[17,4949,4950,4951,4954],{},"Blog listesi için ",[363,4952,4953],{},"pages/blog/index.vue",":",[356,4956,4958],{"className":2461,"code":4957,"language":2463,"meta":365,"style":365},"\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Blog\u003C/h1>\n \u003Carticle v-for=\"article in articles\" :key=\"article._path\">\n \u003CNuxtLink :to=\"article._path\">\n \u003Ch2>{{ article.title }}\u003C/h2>\n \u003Cp>{{ article.description }}\u003C/p>\n \u003C/NuxtLink>\n \u003C/article>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nconst { data: articles } = await queryContent('/blog')\n .sort({ date: -1 })\n .find()\n\u003C/script>\n",[363,4959,4960,4968,4976,4989,5027,5049,5062,5075,5083,5091,5099,5107,5111,5121,5155,5175,5185],{"__ignoreMap":365},[1665,4961,4962,4964,4966],{"class":1667,"line":1668},[1665,4963,2470],{"class":2173},[1665,4965,2474],{"class":2473},[1665,4967,2477],{"class":2173},[1665,4969,4970,4972,4974],{"class":1667,"line":779},[1665,4971,2482],{"class":2173},[1665,4973,1599],{"class":2473},[1665,4975,2477],{"class":2173},[1665,4977,4978,4980,4982,4985,4987],{"class":1667,"line":782},[1665,4979,2500],{"class":2173},[1665,4981,12],{"class":2473},[1665,4983,4984],{"class":2173},">Blog\u003C/",[1665,4986,12],{"class":2473},[1665,4988,2477],{"class":2173},[1665,4990,4991,4993,4996,4998,5000,5002,5005,5007,5010,5012,5014,5016,5018,5020,5023,5025],{"class":1667,"line":1718},[1665,4992,2500],{"class":2173},[1665,4994,4995],{"class":2473},"article",[1665,4997,3132],{"class":2521},[1665,4999,2490],{"class":2173},[1665,5001,2527],{"class":1675},[1665,5003,5004],{"class":2173},"article ",[1665,5006,3142],{"class":2521},[1665,5008,5009],{"class":2173}," articles",[1665,5011,2527],{"class":1675},[1665,5013,2555],{"class":2173},[1665,5015,3152],{"class":1671},[1665,5017,2490],{"class":2173},[1665,5019,2527],{"class":1675},[1665,5021,5022],{"class":2173},"article._path",[1665,5024,2527],{"class":1675},[1665,5026,2477],{"class":2173},[1665,5028,5029,5031,5034,5036,5039,5041,5043,5045,5047],{"class":1667,"line":1724},[1665,5030,2516],{"class":2173},[1665,5032,5033],{"class":2473},"NuxtLink",[1665,5035,2555],{"class":2173},[1665,5037,5038],{"class":1671},"to",[1665,5040,2490],{"class":2173},[1665,5042,2527],{"class":1675},[1665,5044,5022],{"class":2173},[1665,5046,2527],{"class":1675},[1665,5048,2477],{"class":2173},[1665,5050,5051,5053,5055,5058,5060],{"class":1667,"line":1925},[1665,5052,3175],{"class":2173},[1665,5054,889],{"class":2473},[1665,5056,5057],{"class":2173},">{{ article.title }}\u003C/",[1665,5059,889],{"class":2473},[1665,5061,2477],{"class":2173},[1665,5063,5064,5066,5068,5071,5073],{"class":1667,"line":2034},[1665,5065,3175],{"class":2173},[1665,5067,17],{"class":2473},[1665,5069,5070],{"class":2173},">{{ article.description }}\u003C/",[1665,5072,17],{"class":2473},[1665,5074,2477],{"class":2173},[1665,5076,5077,5079,5081],{"class":1667,"line":2040},[1665,5078,3209],{"class":2173},[1665,5080,5033],{"class":2473},[1665,5082,2477],{"class":2173},[1665,5084,5085,5087,5089],{"class":1667,"line":2046},[1665,5086,2589],{"class":2173},[1665,5088,4995],{"class":2473},[1665,5090,2477],{"class":2173},[1665,5092,5093,5095,5097],{"class":1667,"line":2052},[1665,5094,2704],{"class":2173},[1665,5096,1599],{"class":2473},[1665,5098,2477],{"class":2173},[1665,5100,5101,5103,5105],{"class":1667,"line":2058},[1665,5102,2713],{"class":2173},[1665,5104,2474],{"class":2473},[1665,5106,2477],{"class":2173},[1665,5108,5109],{"class":1667,"line":2064},[1665,5110,3568],{"emptyLinePlaceholder":807},[1665,5112,5113,5115,5117,5119],{"class":1667,"line":2070},[1665,5114,2470],{"class":2173},[1665,5116,3041],{"class":2473},[1665,5118,3044],{"class":1671},[1665,5120,2477],{"class":2173},[1665,5122,5123,5125,5128,5131,5133,5136,5139,5141,5144,5147,5149,5152],{"class":1667,"line":2076},[1665,5124,3573],{"class":2521},[1665,5126,5127],{"class":2173}," { ",[1665,5129,5130],{"class":3612},"data",[1665,5132,2187],{"class":2173},[1665,5134,5135],{"class":1685},"articles",[1665,5137,5138],{"class":2173}," } ",[1665,5140,2490],{"class":2521},[1665,5142,5143],{"class":2521}," await",[1665,5145,5146],{"class":1671}," queryContent",[1665,5148,3198],{"class":2173},[1665,5150,5151],{"class":1675},"'/blog'",[1665,5153,5154],{"class":2173},")\n",[1665,5156,5157,5160,5163,5166,5169,5172],{"class":1667,"line":2082},[1665,5158,5159],{"class":2173}," .",[1665,5161,5162],{"class":1671},"sort",[1665,5164,5165],{"class":2173},"({ date: ",[1665,5167,5168],{"class":2521},"-",[1665,5170,5171],{"class":1685},"1",[1665,5173,5174],{"class":2173}," })\n",[1665,5176,5177,5179,5182],{"class":1667,"line":2088},[1665,5178,5159],{"class":2173},[1665,5180,5181],{"class":1671},"find",[1665,5183,5184],{"class":2173},"()\n",[1665,5186,5187,5189,5191],{"class":1667,"line":2094},[1665,5188,2713],{"class":2173},[1665,5190,3041],{"class":2473},[1665,5192,2477],{"class":2173},[889,5194,5196],{"id":5195},"sonuç","Sonuç",[17,5198,5199],{},"Nuxt Content ile blog oluşturmak oldukça basit ve güçlü. Markdown'ın basitliği ile Vue.js'in gücünü birleştirerek harika bloglar oluşturabilirsiniz.",[40,5201,5203],{"id":5202},"faydalı-kaynaklar","Faydalı Kaynaklar",[48,5205,5206,5213,5220],{},[51,5207,5208],{},[54,5209,5212],{"href":5210,"rel":5211},"https://content.nuxtjs.org/",[58],"Nuxt Content Dokümantasyonu",[51,5214,5215],{},[54,5216,5219],{"href":5217,"rel":5218},"https://www.markdownguide.org/",[58],"Markdown Rehberi",[51,5221,5222],{},[54,5223,5226],{"href":5224,"rel":5225},"https://vuejs.org/",[58],"Vue.js Dokümantasyonu",[5228,5229],"hr",{},[17,5231,5232],{},[121,5233,5234],{},"Bu yazı Nuxt Content kullanılarak oluşturulmuştur.",[3893,5236,5237],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":365,"searchDepth":779,"depth":779,"links":5239},[5240,5241,5242,5243,5244],{"id":4755,"depth":779,"text":4756},{"id":4794,"depth":779,"text":4795},{"id":4876,"depth":779,"text":4877},{"id":4946,"depth":779,"text":4947},{"id":5195,"depth":779,"text":5196,"children":5245},[5246],{"id":5202,"depth":782,"text":5203},"2024-01-15","Nuxt Content kullanarak nasıl modern ve SEO dostu bir blog oluşturabileceğinizi öğrenin",{"author":5250,"cover":5251},"Eralp Özcan","/assets/images/blog/nuxt-content-cover.svg","/blog/nuxt-content-ile-blog-olusturma","8",{"title":4744,"description":5248},{"loc":5252},"blog/nuxt-content-ile-blog-olusturma",[5258,3928,5259,5260],"Nuxt.js","Blog","JAMstack","3X7RTbUeHy8j3nNYGQeUV8N3dU7XyF9TsA9lghljRak",{"id":5263,"title":5264,"body":5265,"date":7585,"description":7586,"extension":797,"head":798,"image":798,"meta":7587,"navigation":807,"ogImage":798,"path":7589,"readingTime":7590,"robots":798,"schemaOrg":798,"seo":7591,"sitemap":7592,"stem":7593,"tags":7594,"__hash__":7596},"blog/blog/tailwindcss-daisyui-ile-hizli-ui-gelistirme.md","TailwindCSS ve DaisyUI ile Hızlı UI Geliştirme",{"type":9,"value":5266,"toc":7552},[5267,5270,5273,5277,5280,5284,5315,5319,5322,5326,5367,5371,5375,5411,5415,5431,5437,5528,5532,5536,5815,5819,6033,6037,6247,6251,6254,6258,6474,6478,6526,6530,6534,6696,6700,7395,7399,7403,7406,7447,7451,7473,7477,7506,7508,7511,7513,7543,7545,7550],[12,5268,5264],{"id":5269},"tailwindcss-ve-daisyui-ile-hızlı-ui-geliştirme",[17,5271,5272],{},"Modern web geliştirmede hız ve kalite arasındaki dengeyi kurmak her zaman zor olmuştur. TailwindCSS ve DaisyUI kombinasyonu, bu soruna mükemmel bir çözüm sunuyor. Bu yazıda, bu güçlü ikilinin nasıl kullanılacağını ve neden tercih edilmesi gerektiğini ele alacağız.",[889,5274,5276],{"id":5275},"tailwindcss-nedir","TailwindCSS Nedir?",[17,5278,5279],{},"TailwindCSS, utility-first yaklaşımı benimseyen bir CSS framework'üdür. Geleneksel CSS framework'lerinden farklı olarak, önceden tanımlanmış bileşenler yerine küçük utility class'ları sunar.",[40,5281,5283],{"id":5282},"tailwindcssin-avantajları","TailwindCSS'in Avantajları",[48,5285,5286,5292,5298,5303,5309],{},[51,5287,5288,5291],{},[21,5289,5290],{},"Utility-First",": Her CSS özelliği için ayrı class'lar",[51,5293,5294,5297],{},[21,5295,5296],{},"Customizable",": Tamamen özelleştirilebilir design system",[51,5299,5300,5302],{},[21,5301,4738],{},": Kullanılmayan CSS'leri otomatik temizler",[51,5304,5305,5308],{},[21,5306,5307],{},"Responsive",": Mobile-first responsive design",[51,5310,5311,5314],{},[21,5312,5313],{},"Developer Experience",": Harika IntelliSense desteği",[889,5316,5318],{"id":5317},"daisyui-nedir","DaisyUI Nedir?",[17,5320,5321],{},"DaisyUI, TailwindCSS üzerine inşa edilmiş bir component library'sidir. TailwindCSS'in utility class'larını kullanarak önceden tasarlanmış bileşenler sunar.",[40,5323,5325],{"id":5324},"daisyuinin-avantajları","DaisyUI'nin Avantajları",[48,5327,5328,5343,5349,5355,5361],{},[51,5329,5330,2187,5333,552,5336,552,5339,5342],{},[21,5331,5332],{},"Semantic Class Names",[363,5334,5335],{},"btn",[363,5337,5338],{},"card",[363,5340,5341],{},"modal"," gibi anlamlı class'lar",[51,5344,5345,5348],{},[21,5346,5347],{},"Theme Support",": 30+ hazır tema",[51,5350,5351,5354],{},[21,5352,5353],{},"TailwindCSS Uyumlu",": Mevcut TailwindCSS class'larıyla birlikte kullanılabilir",[51,5356,5357,5360],{},[21,5358,5359],{},"Accessibility",": ARIA standartlarına uygun",[51,5362,5363,5366],{},[21,5364,5365],{},"Lightweight",": Sadece 2KB CSS",[889,5368,5370],{"id":5369},"kurulum-ve-konfigürasyon","Kurulum ve Konfigürasyon",[40,5372,5374],{"id":5373},"tailwindcss-kurulumu","TailwindCSS Kurulumu",[356,5376,5378],{"className":1659,"code":5377,"language":1661,"meta":365,"style":365},"npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n",[363,5379,5380,5398],{"__ignoreMap":365},[1665,5381,5382,5384,5386,5389,5392,5395],{"class":1667,"line":1668},[1665,5383,1672],{"class":1671},[1665,5385,1795],{"class":1675},[1665,5387,5388],{"class":1685}," -D",[1665,5390,5391],{"class":1675}," tailwindcss",[1665,5393,5394],{"class":1675}," postcss",[1665,5396,5397],{"class":1675}," autoprefixer\n",[1665,5399,5400,5403,5405,5408],{"class":1667,"line":779},[1665,5401,5402],{"class":1671},"npx",[1665,5404,5391],{"class":1675},[1665,5406,5407],{"class":1675}," init",[1665,5409,5410],{"class":1685}," -p\n",[40,5412,5414],{"id":5413},"daisyui-ekleme","DaisyUI Ekleme",[356,5416,5418],{"className":1659,"code":5417,"language":1661,"meta":365,"style":365},"npm install -D daisyui@latest\n",[363,5419,5420],{"__ignoreMap":365},[1665,5421,5422,5424,5426,5428],{"class":1667,"line":1668},[1665,5423,1672],{"class":1671},[1665,5425,1795],{"class":1675},[1665,5427,5388],{"class":1685},[1665,5429,5430],{"class":1675}," daisyui@latest\n",[17,5432,5433,5436],{},[363,5434,5435],{},"tailwind.config.js"," dosyanızı güncelleyin:",[356,5438,5440],{"className":1836,"code":5439,"language":1838,"meta":365,"style":365},"module.exports = {\n content: [\n \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n ],\n theme: {\n extend: {},\n },\n plugins: [require(\"daisyui\")],\n daisyui: {\n themes: [\"light\", \"dark\", \"cupcake\", \"corporate\"],\n darkTheme: \"dark\",\n base: true,\n styled: true,\n utils: true,\n },\n}\n",[363,5441,5442,5447,5452,5457,5462,5467,5471,5476,5481,5485,5490,5495,5500,5505,5510,5515,5520,5524],{"__ignoreMap":365},[1665,5443,5444],{"class":1667,"line":1668},[1665,5445,5446],{},"module.exports = {\n",[1665,5448,5449],{"class":1667,"line":779},[1665,5450,5451],{}," content: [\n",[1665,5453,5454],{"class":1667,"line":782},[1665,5455,5456],{}," \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n",[1665,5458,5459],{"class":1667,"line":1718},[1665,5460,5461],{}," \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n",[1665,5463,5464],{"class":1667,"line":1724},[1665,5465,5466],{}," \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n",[1665,5468,5469],{"class":1667,"line":1925},[1665,5470,4854],{},[1665,5472,5473],{"class":1667,"line":2034},[1665,5474,5475],{}," theme: {\n",[1665,5477,5478],{"class":1667,"line":2040},[1665,5479,5480],{}," extend: {},\n",[1665,5482,5483],{"class":1667,"line":2046},[1665,5484,2220],{},[1665,5486,5487],{"class":1667,"line":2052},[1665,5488,5489],{}," plugins: [require(\"daisyui\")],\n",[1665,5491,5492],{"class":1667,"line":2058},[1665,5493,5494],{}," daisyui: {\n",[1665,5496,5497],{"class":1667,"line":2064},[1665,5498,5499],{}," themes: [\"light\", \"dark\", \"cupcake\", \"corporate\"],\n",[1665,5501,5502],{"class":1667,"line":2070},[1665,5503,5504],{}," darkTheme: \"dark\",\n",[1665,5506,5507],{"class":1667,"line":2076},[1665,5508,5509],{}," base: true,\n",[1665,5511,5512],{"class":1667,"line":2082},[1665,5513,5514],{}," styled: true,\n",[1665,5516,5517],{"class":1667,"line":2088},[1665,5518,5519],{}," utils: true,\n",[1665,5521,5522],{"class":1667,"line":2094},[1665,5523,2220],{},[1665,5525,5526],{"class":1667,"line":2305},[1665,5527,1928],{},[889,5529,5531],{"id":5530},"temel-bileşenler","Temel Bileşenler",[40,5533,5535],{"id":5534},"button-bileşeni","Button Bileşeni",[356,5537,5541],{"className":5538,"code":5539,"language":5540,"meta":365,"style":365},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Temel button -->\n\u003Cbutton class=\"btn\">Button\u003C/button>\n\n\u003C!-- Farklı varyantlar -->\n\u003Cbutton class=\"btn btn-primary\">Primary\u003C/button>\n\u003Cbutton class=\"btn btn-secondary\">Secondary\u003C/button>\n\u003Cbutton class=\"btn btn-accent\">Accent\u003C/button>\n\n\u003C!-- Boyutlar -->\n\u003Cbutton class=\"btn btn-xs\">Extra Small\u003C/button>\n\u003Cbutton class=\"btn btn-sm\">Small\u003C/button>\n\u003Cbutton class=\"btn btn-md\">Medium\u003C/button>\n\u003Cbutton class=\"btn btn-lg\">Large\u003C/button>\n\n\u003C!-- Durumlar -->\n\u003Cbutton class=\"btn btn-outline\">Outline\u003C/button>\n\u003Cbutton class=\"btn btn-ghost\">Ghost\u003C/button>\n\u003Cbutton class=\"btn btn-link\">Link\u003C/button>\n\u003Cbutton class=\"btn btn-disabled\">Disabled\u003C/button>\n","html",[363,5542,5543,5548,5568,5572,5577,5597,5617,5637,5641,5646,5666,5686,5706,5726,5730,5735,5755,5775,5795],{"__ignoreMap":365},[1665,5544,5545],{"class":1667,"line":1668},[1665,5546,5547],{"class":1697},"\u003C!-- Temel button -->\n",[1665,5549,5550,5552,5554,5556,5558,5561,5564,5566],{"class":1667,"line":779},[1665,5551,2470],{"class":2173},[1665,5553,2654],{"class":2473},[1665,5555,2487],{"class":1671},[1665,5557,2490],{"class":2173},[1665,5559,5560],{"class":1675},"\"btn\"",[1665,5562,5563],{"class":2173},">Button\u003C/",[1665,5565,2654],{"class":2473},[1665,5567,2477],{"class":2173},[1665,5569,5570],{"class":1667,"line":782},[1665,5571,3568],{"emptyLinePlaceholder":807},[1665,5573,5574],{"class":1667,"line":1718},[1665,5575,5576],{"class":1697},"\u003C!-- Farklı varyantlar -->\n",[1665,5578,5579,5581,5583,5585,5587,5590,5593,5595],{"class":1667,"line":1724},[1665,5580,2470],{"class":2173},[1665,5582,2654],{"class":2473},[1665,5584,2487],{"class":1671},[1665,5586,2490],{"class":2173},[1665,5588,5589],{"class":1675},"\"btn btn-primary\"",[1665,5591,5592],{"class":2173},">Primary\u003C/",[1665,5594,2654],{"class":2473},[1665,5596,2477],{"class":2173},[1665,5598,5599,5601,5603,5605,5607,5610,5613,5615],{"class":1667,"line":1925},[1665,5600,2470],{"class":2173},[1665,5602,2654],{"class":2473},[1665,5604,2487],{"class":1671},[1665,5606,2490],{"class":2173},[1665,5608,5609],{"class":1675},"\"btn btn-secondary\"",[1665,5611,5612],{"class":2173},">Secondary\u003C/",[1665,5614,2654],{"class":2473},[1665,5616,2477],{"class":2173},[1665,5618,5619,5621,5623,5625,5627,5630,5633,5635],{"class":1667,"line":2034},[1665,5620,2470],{"class":2173},[1665,5622,2654],{"class":2473},[1665,5624,2487],{"class":1671},[1665,5626,2490],{"class":2173},[1665,5628,5629],{"class":1675},"\"btn btn-accent\"",[1665,5631,5632],{"class":2173},">Accent\u003C/",[1665,5634,2654],{"class":2473},[1665,5636,2477],{"class":2173},[1665,5638,5639],{"class":1667,"line":2040},[1665,5640,3568],{"emptyLinePlaceholder":807},[1665,5642,5643],{"class":1667,"line":2046},[1665,5644,5645],{"class":1697},"\u003C!-- Boyutlar -->\n",[1665,5647,5648,5650,5652,5654,5656,5659,5662,5664],{"class":1667,"line":2052},[1665,5649,2470],{"class":2173},[1665,5651,2654],{"class":2473},[1665,5653,2487],{"class":1671},[1665,5655,2490],{"class":2173},[1665,5657,5658],{"class":1675},"\"btn btn-xs\"",[1665,5660,5661],{"class":2173},">Extra Small\u003C/",[1665,5663,2654],{"class":2473},[1665,5665,2477],{"class":2173},[1665,5667,5668,5670,5672,5674,5676,5679,5682,5684],{"class":1667,"line":2058},[1665,5669,2470],{"class":2173},[1665,5671,2654],{"class":2473},[1665,5673,2487],{"class":1671},[1665,5675,2490],{"class":2173},[1665,5677,5678],{"class":1675},"\"btn btn-sm\"",[1665,5680,5681],{"class":2173},">Small\u003C/",[1665,5683,2654],{"class":2473},[1665,5685,2477],{"class":2173},[1665,5687,5688,5690,5692,5694,5696,5699,5702,5704],{"class":1667,"line":2064},[1665,5689,2470],{"class":2173},[1665,5691,2654],{"class":2473},[1665,5693,2487],{"class":1671},[1665,5695,2490],{"class":2173},[1665,5697,5698],{"class":1675},"\"btn btn-md\"",[1665,5700,5701],{"class":2173},">Medium\u003C/",[1665,5703,2654],{"class":2473},[1665,5705,2477],{"class":2173},[1665,5707,5708,5710,5712,5714,5716,5719,5722,5724],{"class":1667,"line":2070},[1665,5709,2470],{"class":2173},[1665,5711,2654],{"class":2473},[1665,5713,2487],{"class":1671},[1665,5715,2490],{"class":2173},[1665,5717,5718],{"class":1675},"\"btn btn-lg\"",[1665,5720,5721],{"class":2173},">Large\u003C/",[1665,5723,2654],{"class":2473},[1665,5725,2477],{"class":2173},[1665,5727,5728],{"class":1667,"line":2076},[1665,5729,3568],{"emptyLinePlaceholder":807},[1665,5731,5732],{"class":1667,"line":2082},[1665,5733,5734],{"class":1697},"\u003C!-- Durumlar -->\n",[1665,5736,5737,5739,5741,5743,5745,5748,5751,5753],{"class":1667,"line":2088},[1665,5738,2470],{"class":2173},[1665,5740,2654],{"class":2473},[1665,5742,2487],{"class":1671},[1665,5744,2490],{"class":2173},[1665,5746,5747],{"class":1675},"\"btn btn-outline\"",[1665,5749,5750],{"class":2173},">Outline\u003C/",[1665,5752,2654],{"class":2473},[1665,5754,2477],{"class":2173},[1665,5756,5757,5759,5761,5763,5765,5768,5771,5773],{"class":1667,"line":2094},[1665,5758,2470],{"class":2173},[1665,5760,2654],{"class":2473},[1665,5762,2487],{"class":1671},[1665,5764,2490],{"class":2173},[1665,5766,5767],{"class":1675},"\"btn btn-ghost\"",[1665,5769,5770],{"class":2173},">Ghost\u003C/",[1665,5772,2654],{"class":2473},[1665,5774,2477],{"class":2173},[1665,5776,5777,5779,5781,5783,5785,5788,5791,5793],{"class":1667,"line":2305},[1665,5778,2470],{"class":2173},[1665,5780,2654],{"class":2473},[1665,5782,2487],{"class":1671},[1665,5784,2490],{"class":2173},[1665,5786,5787],{"class":1675},"\"btn btn-link\"",[1665,5789,5790],{"class":2173},">Link\u003C/",[1665,5792,2654],{"class":2473},[1665,5794,2477],{"class":2173},[1665,5796,5797,5799,5801,5803,5805,5808,5811,5813],{"class":1667,"line":2317},[1665,5798,2470],{"class":2173},[1665,5800,2654],{"class":2473},[1665,5802,2487],{"class":1671},[1665,5804,2490],{"class":2173},[1665,5806,5807],{"class":1675},"\"btn btn-disabled\"",[1665,5809,5810],{"class":2173},">Disabled\u003C/",[1665,5812,2654],{"class":2473},[1665,5814,2477],{"class":2173},[40,5816,5818],{"id":5817},"card-bileşeni","Card Bileşeni",[356,5820,5822],{"className":5538,"code":5821,"language":5540,"meta":365,"style":365},"\u003Cdiv class=\"card w-96 bg-base-100 shadow-xl\">\n \u003Cfigure>\n \u003Cimg src=\"/image.jpg\" alt=\"Shoes\" />\n \u003C/figure>\n \u003Cdiv class=\"card-body\">\n \u003Ch2 class=\"card-title\">\n Shoes!\n \u003Cdiv class=\"badge badge-secondary\">NEW\u003C/div>\n \u003C/h2>\n \u003Cp>If a dog chews shoes whose shoes does he choose?\u003C/p>\n \u003Cdiv class=\"card-actions justify-end\">\n \u003Cdiv class=\"badge badge-outline\">Fashion\u003C/div>\n \u003Cdiv class=\"badge badge-outline\">Products\u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/div>\n",[363,5823,5824,5839,5848,5871,5879,5894,5909,5914,5934,5942,5955,5970,5990,6009,6017,6025],{"__ignoreMap":365},[1665,5825,5826,5828,5830,5832,5834,5837],{"class":1667,"line":1668},[1665,5827,2470],{"class":2173},[1665,5829,1599],{"class":2473},[1665,5831,2487],{"class":1671},[1665,5833,2490],{"class":2173},[1665,5835,5836],{"class":1675},"\"card w-96 bg-base-100 shadow-xl\"",[1665,5838,2477],{"class":2173},[1665,5840,5841,5843,5846],{"class":1667,"line":779},[1665,5842,2482],{"class":2173},[1665,5844,5845],{"class":2473},"figure",[1665,5847,2477],{"class":2173},[1665,5849,5850,5852,5854,5857,5859,5862,5864,5866,5869],{"class":1667,"line":782},[1665,5851,2500],{"class":2173},[1665,5853,36],{"class":2473},[1665,5855,5856],{"class":1671}," src",[1665,5858,2490],{"class":2173},[1665,5860,5861],{"class":1675},"\"/image.jpg\"",[1665,5863,2569],{"class":1671},[1665,5865,2490],{"class":2173},[1665,5867,5868],{"class":1675},"\"Shoes\"",[1665,5870,2584],{"class":2173},[1665,5872,5873,5875,5877],{"class":1667,"line":1718},[1665,5874,2704],{"class":2173},[1665,5876,5845],{"class":2473},[1665,5878,2477],{"class":2173},[1665,5880,5881,5883,5885,5887,5889,5892],{"class":1667,"line":1724},[1665,5882,2482],{"class":2173},[1665,5884,1599],{"class":2473},[1665,5886,2487],{"class":1671},[1665,5888,2490],{"class":2173},[1665,5890,5891],{"class":1675},"\"card-body\"",[1665,5893,2477],{"class":2173},[1665,5895,5896,5898,5900,5902,5904,5907],{"class":1667,"line":1925},[1665,5897,2500],{"class":2173},[1665,5899,889],{"class":2473},[1665,5901,2487],{"class":1671},[1665,5903,2490],{"class":2173},[1665,5905,5906],{"class":1675},"\"card-title\"",[1665,5908,2477],{"class":2173},[1665,5910,5911],{"class":1667,"line":2034},[1665,5912,5913],{"class":2173}," Shoes!\n",[1665,5915,5916,5918,5920,5922,5924,5927,5930,5932],{"class":1667,"line":2040},[1665,5917,2516],{"class":2173},[1665,5919,1599],{"class":2473},[1665,5921,2487],{"class":1671},[1665,5923,2490],{"class":2173},[1665,5925,5926],{"class":1675},"\"badge badge-secondary\"",[1665,5928,5929],{"class":2173},">NEW\u003C/",[1665,5931,1599],{"class":2473},[1665,5933,2477],{"class":2173},[1665,5935,5936,5938,5940],{"class":1667,"line":2046},[1665,5937,2589],{"class":2173},[1665,5939,889],{"class":2473},[1665,5941,2477],{"class":2173},[1665,5943,5944,5946,5948,5951,5953],{"class":1667,"line":2052},[1665,5945,2500],{"class":2173},[1665,5947,17],{"class":2473},[1665,5949,5950],{"class":2173},">If a dog chews shoes whose shoes does he choose?\u003C/",[1665,5952,17],{"class":2473},[1665,5954,2477],{"class":2173},[1665,5956,5957,5959,5961,5963,5965,5968],{"class":1667,"line":2058},[1665,5958,2500],{"class":2173},[1665,5960,1599],{"class":2473},[1665,5962,2487],{"class":1671},[1665,5964,2490],{"class":2173},[1665,5966,5967],{"class":1675},"\"card-actions justify-end\"",[1665,5969,2477],{"class":2173},[1665,5971,5972,5974,5976,5978,5980,5983,5986,5988],{"class":1667,"line":2064},[1665,5973,2516],{"class":2173},[1665,5975,1599],{"class":2473},[1665,5977,2487],{"class":1671},[1665,5979,2490],{"class":2173},[1665,5981,5982],{"class":1675},"\"badge badge-outline\"",[1665,5984,5985],{"class":2173},">Fashion\u003C/",[1665,5987,1599],{"class":2473},[1665,5989,2477],{"class":2173},[1665,5991,5992,5994,5996,5998,6000,6002,6005,6007],{"class":1667,"line":2070},[1665,5993,2516],{"class":2173},[1665,5995,1599],{"class":2473},[1665,5997,2487],{"class":1671},[1665,5999,2490],{"class":2173},[1665,6001,5982],{"class":1675},[1665,6003,6004],{"class":2173},">Products\u003C/",[1665,6006,1599],{"class":2473},[1665,6008,2477],{"class":2173},[1665,6010,6011,6013,6015],{"class":1667,"line":2076},[1665,6012,2589],{"class":2173},[1665,6014,1599],{"class":2473},[1665,6016,2477],{"class":2173},[1665,6018,6019,6021,6023],{"class":1667,"line":2082},[1665,6020,2704],{"class":2173},[1665,6022,1599],{"class":2473},[1665,6024,2477],{"class":2173},[1665,6026,6027,6029,6031],{"class":1667,"line":2088},[1665,6028,2713],{"class":2173},[1665,6030,1599],{"class":2473},[1665,6032,2477],{"class":2173},[40,6034,6036],{"id":6035},"modal-bileşeni","Modal Bileşeni",[356,6038,6040],{"className":5538,"code":6039,"language":5540,"meta":365,"style":365},"\u003C!-- Modal trigger -->\n\u003Clabel for=\"my-modal\" class=\"btn\">Open Modal\u003C/label>\n\n\u003C!-- Modal -->\n\u003Cinput type=\"checkbox\" id=\"my-modal\" class=\"modal-toggle\" />\n\u003Cdiv class=\"modal\">\n \u003Cdiv class=\"modal-box\">\n \u003Ch3 class=\"font-bold text-lg\">Congratulations!\u003C/h3>\n \u003Cp class=\"py-4\">You've been selected for a chance to get one year of subscription to use Wikipedia for free!\u003C/p>\n \u003Cdiv class=\"modal-action\">\n \u003Clabel for=\"my-modal\" class=\"btn\">Yay!\u003C/label>\n \u003C/div>\n \u003C/div>\n\u003C/div>\n",[363,6041,6042,6047,6075,6079,6084,6113,6128,6143,6163,6183,6198,6223,6231,6239],{"__ignoreMap":365},[1665,6043,6044],{"class":1667,"line":1668},[1665,6045,6046],{"class":1697},"\u003C!-- Modal trigger -->\n",[1665,6048,6049,6051,6054,6057,6059,6062,6064,6066,6068,6071,6073],{"class":1667,"line":779},[1665,6050,2470],{"class":2173},[1665,6052,6053],{"class":2473},"label",[1665,6055,6056],{"class":1671}," for",[1665,6058,2490],{"class":2173},[1665,6060,6061],{"class":1675},"\"my-modal\"",[1665,6063,2487],{"class":1671},[1665,6065,2490],{"class":2173},[1665,6067,5560],{"class":1675},[1665,6069,6070],{"class":2173},">Open Modal\u003C/",[1665,6072,6053],{"class":2473},[1665,6074,2477],{"class":2173},[1665,6076,6077],{"class":1667,"line":782},[1665,6078,3568],{"emptyLinePlaceholder":807},[1665,6080,6081],{"class":1667,"line":1718},[1665,6082,6083],{"class":1697},"\u003C!-- Modal -->\n",[1665,6085,6086,6088,6090,6092,6094,6097,6100,6102,6104,6106,6108,6111],{"class":1667,"line":1724},[1665,6087,2470],{"class":2173},[1665,6089,2600],{"class":2473},[1665,6091,2603],{"class":1671},[1665,6093,2490],{"class":2173},[1665,6095,6096],{"class":1675},"\"checkbox\"",[1665,6098,6099],{"class":1671}," id",[1665,6101,2490],{"class":2173},[1665,6103,6061],{"class":1675},[1665,6105,2487],{"class":1671},[1665,6107,2490],{"class":2173},[1665,6109,6110],{"class":1675},"\"modal-toggle\"",[1665,6112,2584],{"class":2173},[1665,6114,6115,6117,6119,6121,6123,6126],{"class":1667,"line":1925},[1665,6116,2470],{"class":2173},[1665,6118,1599],{"class":2473},[1665,6120,2487],{"class":1671},[1665,6122,2490],{"class":2173},[1665,6124,6125],{"class":1675},"\"modal\"",[1665,6127,2477],{"class":2173},[1665,6129,6130,6132,6134,6136,6138,6141],{"class":1667,"line":2034},[1665,6131,2482],{"class":2173},[1665,6133,1599],{"class":2473},[1665,6135,2487],{"class":1671},[1665,6137,2490],{"class":2173},[1665,6139,6140],{"class":1675},"\"modal-box\"",[1665,6142,2477],{"class":2173},[1665,6144,6145,6147,6149,6151,6153,6156,6159,6161],{"class":1667,"line":2040},[1665,6146,2500],{"class":2173},[1665,6148,40],{"class":2473},[1665,6150,2487],{"class":1671},[1665,6152,2490],{"class":2173},[1665,6154,6155],{"class":1675},"\"font-bold text-lg\"",[1665,6157,6158],{"class":2173},">Congratulations!\u003C/",[1665,6160,40],{"class":2473},[1665,6162,2477],{"class":2173},[1665,6164,6165,6167,6169,6171,6173,6176,6179,6181],{"class":1667,"line":2046},[1665,6166,2500],{"class":2173},[1665,6168,17],{"class":2473},[1665,6170,2487],{"class":1671},[1665,6172,2490],{"class":2173},[1665,6174,6175],{"class":1675},"\"py-4\"",[1665,6177,6178],{"class":2173},">You've been selected for a chance to get one year of subscription to use Wikipedia for free!\u003C/",[1665,6180,17],{"class":2473},[1665,6182,2477],{"class":2173},[1665,6184,6185,6187,6189,6191,6193,6196],{"class":1667,"line":2052},[1665,6186,2500],{"class":2173},[1665,6188,1599],{"class":2473},[1665,6190,2487],{"class":1671},[1665,6192,2490],{"class":2173},[1665,6194,6195],{"class":1675},"\"modal-action\"",[1665,6197,2477],{"class":2173},[1665,6199,6200,6202,6204,6206,6208,6210,6212,6214,6216,6219,6221],{"class":1667,"line":2058},[1665,6201,2516],{"class":2173},[1665,6203,6053],{"class":2473},[1665,6205,6056],{"class":1671},[1665,6207,2490],{"class":2173},[1665,6209,6061],{"class":1675},[1665,6211,2487],{"class":1671},[1665,6213,2490],{"class":2173},[1665,6215,5560],{"class":1675},[1665,6217,6218],{"class":2173},">Yay!\u003C/",[1665,6220,6053],{"class":2473},[1665,6222,2477],{"class":2173},[1665,6224,6225,6227,6229],{"class":1667,"line":2064},[1665,6226,2589],{"class":2173},[1665,6228,1599],{"class":2473},[1665,6230,2477],{"class":2173},[1665,6232,6233,6235,6237],{"class":1667,"line":2070},[1665,6234,2704],{"class":2173},[1665,6236,1599],{"class":2473},[1665,6238,2477],{"class":2173},[1665,6240,6241,6243,6245],{"class":1667,"line":2076},[1665,6242,2713],{"class":2173},[1665,6244,1599],{"class":2473},[1665,6246,2477],{"class":2173},[889,6248,6250],{"id":6249},"tema-sistemi","Tema Sistemi",[17,6252,6253],{},"DaisyUI'nin en güçlü özelliklerinden biri tema sistemidir:",[40,6255,6257],{"id":6256},"css-variables-ile-tema","CSS Variables ile Tema",[356,6259,6263],{"className":6260,"code":6261,"language":6262,"meta":365,"style":365},"language-css shiki shiki-themes github-light github-dark","[data-theme=\"mytheme\"] {\n --primary: #570df8;\n --primary-focus: #4506cb;\n --primary-content: #ffffff;\n --secondary: #f000b8;\n --secondary-focus: #bd0091;\n --secondary-content: #ffffff;\n --accent: #37cdbe;\n --accent-focus: #2aa79b;\n --accent-content: #ffffff;\n --neutral: #3d4451;\n --neutral-focus: #2a2e37;\n --neutral-content: #ffffff;\n --base-100: #ffffff;\n --base-200: #f9fafb;\n --base-300: #d1d5db;\n --base-content: #1f2937;\n}\n","css",[363,6264,6265,6281,6294,6306,6318,6330,6342,6353,6365,6377,6388,6400,6412,6423,6434,6446,6458,6470],{"__ignoreMap":365},[1665,6266,6267,6270,6273,6275,6278],{"class":1667,"line":1668},[1665,6268,6269],{"class":2173},"[",[1665,6271,6272],{"class":1671},"data-theme",[1665,6274,2490],{"class":2521},[1665,6276,6277],{"class":1675},"\"mytheme\"",[1665,6279,6280],{"class":2173},"] {\n",[1665,6282,6283,6286,6288,6291],{"class":1667,"line":779},[1665,6284,6285],{"class":3612}," --primary",[1665,6287,2187],{"class":2173},[1665,6289,6290],{"class":1685},"#570df8",[1665,6292,6293],{"class":2173},";\n",[1665,6295,6296,6299,6301,6304],{"class":1667,"line":782},[1665,6297,6298],{"class":3612}," --primary-focus",[1665,6300,2187],{"class":2173},[1665,6302,6303],{"class":1685},"#4506cb",[1665,6305,6293],{"class":2173},[1665,6307,6308,6311,6313,6316],{"class":1667,"line":1718},[1665,6309,6310],{"class":3612}," --primary-content",[1665,6312,2187],{"class":2173},[1665,6314,6315],{"class":1685},"#ffffff",[1665,6317,6293],{"class":2173},[1665,6319,6320,6323,6325,6328],{"class":1667,"line":1724},[1665,6321,6322],{"class":3612}," --secondary",[1665,6324,2187],{"class":2173},[1665,6326,6327],{"class":1685},"#f000b8",[1665,6329,6293],{"class":2173},[1665,6331,6332,6335,6337,6340],{"class":1667,"line":1925},[1665,6333,6334],{"class":3612}," --secondary-focus",[1665,6336,2187],{"class":2173},[1665,6338,6339],{"class":1685},"#bd0091",[1665,6341,6293],{"class":2173},[1665,6343,6344,6347,6349,6351],{"class":1667,"line":2034},[1665,6345,6346],{"class":3612}," --secondary-content",[1665,6348,2187],{"class":2173},[1665,6350,6315],{"class":1685},[1665,6352,6293],{"class":2173},[1665,6354,6355,6358,6360,6363],{"class":1667,"line":2040},[1665,6356,6357],{"class":3612}," --accent",[1665,6359,2187],{"class":2173},[1665,6361,6362],{"class":1685},"#37cdbe",[1665,6364,6293],{"class":2173},[1665,6366,6367,6370,6372,6375],{"class":1667,"line":2046},[1665,6368,6369],{"class":3612}," --accent-focus",[1665,6371,2187],{"class":2173},[1665,6373,6374],{"class":1685},"#2aa79b",[1665,6376,6293],{"class":2173},[1665,6378,6379,6382,6384,6386],{"class":1667,"line":2052},[1665,6380,6381],{"class":3612}," --accent-content",[1665,6383,2187],{"class":2173},[1665,6385,6315],{"class":1685},[1665,6387,6293],{"class":2173},[1665,6389,6390,6393,6395,6398],{"class":1667,"line":2058},[1665,6391,6392],{"class":3612}," --neutral",[1665,6394,2187],{"class":2173},[1665,6396,6397],{"class":1685},"#3d4451",[1665,6399,6293],{"class":2173},[1665,6401,6402,6405,6407,6410],{"class":1667,"line":2064},[1665,6403,6404],{"class":3612}," --neutral-focus",[1665,6406,2187],{"class":2173},[1665,6408,6409],{"class":1685},"#2a2e37",[1665,6411,6293],{"class":2173},[1665,6413,6414,6417,6419,6421],{"class":1667,"line":2070},[1665,6415,6416],{"class":3612}," --neutral-content",[1665,6418,2187],{"class":2173},[1665,6420,6315],{"class":1685},[1665,6422,6293],{"class":2173},[1665,6424,6425,6428,6430,6432],{"class":1667,"line":2076},[1665,6426,6427],{"class":3612}," --base-100",[1665,6429,2187],{"class":2173},[1665,6431,6315],{"class":1685},[1665,6433,6293],{"class":2173},[1665,6435,6436,6439,6441,6444],{"class":1667,"line":2082},[1665,6437,6438],{"class":3612}," --base-200",[1665,6440,2187],{"class":2173},[1665,6442,6443],{"class":1685},"#f9fafb",[1665,6445,6293],{"class":2173},[1665,6447,6448,6451,6453,6456],{"class":1667,"line":2088},[1665,6449,6450],{"class":3612}," --base-300",[1665,6452,2187],{"class":2173},[1665,6454,6455],{"class":1685},"#d1d5db",[1665,6457,6293],{"class":2173},[1665,6459,6460,6463,6465,6468],{"class":1667,"line":2094},[1665,6461,6462],{"class":3612}," --base-content",[1665,6464,2187],{"class":2173},[1665,6466,6467],{"class":1685},"#1f2937",[1665,6469,6293],{"class":2173},[1665,6471,6472],{"class":1667,"line":2305},[1665,6473,1928],{"class":2173},[40,6475,6477],{"id":6476},"javascript-ile-tema-değiştirme","JavaScript ile Tema Değiştirme",[356,6479,6481],{"className":1836,"code":6480,"language":1838,"meta":365,"style":365},"// Tema değiştirme fonksiyonu\nfunction changeTheme(theme) {\n document.documentElement.setAttribute('data-theme', theme)\n localStorage.setItem('theme', theme)\n}\n\n// Sayfa yüklendiğinde tema ayarlama\nconst savedTheme = localStorage.getItem('theme') || 'light'\nchangeTheme(savedTheme)\n",[363,6482,6483,6488,6493,6498,6503,6507,6511,6516,6521],{"__ignoreMap":365},[1665,6484,6485],{"class":1667,"line":1668},[1665,6486,6487],{},"// Tema değiştirme fonksiyonu\n",[1665,6489,6490],{"class":1667,"line":779},[1665,6491,6492],{},"function changeTheme(theme) {\n",[1665,6494,6495],{"class":1667,"line":782},[1665,6496,6497],{}," document.documentElement.setAttribute('data-theme', theme)\n",[1665,6499,6500],{"class":1667,"line":1718},[1665,6501,6502],{}," localStorage.setItem('theme', theme)\n",[1665,6504,6505],{"class":1667,"line":1724},[1665,6506,1928],{},[1665,6508,6509],{"class":1667,"line":1925},[1665,6510,3568],{"emptyLinePlaceholder":807},[1665,6512,6513],{"class":1667,"line":2034},[1665,6514,6515],{},"// Sayfa yüklendiğinde tema ayarlama\n",[1665,6517,6518],{"class":1667,"line":2040},[1665,6519,6520],{},"const savedTheme = localStorage.getItem('theme') || 'light'\n",[1665,6522,6523],{"class":1667,"line":2046},[1665,6524,6525],{},"changeTheme(savedTheme)\n",[889,6527,6529],{"id":6528},"vuejs-ile-entegrasyon","Vue.js ile Entegrasyon",[40,6531,6533],{"id":6532},"composable-ile-tema-yönetimi","Composable ile Tema Yönetimi",[356,6535,6537],{"className":1836,"code":6536,"language":1838,"meta":365,"style":365},"// composables/useTheme.js\nimport { ref, onMounted } from 'vue'\n\nexport function useTheme() {\n const currentTheme = ref('light')\n const themes = [\n 'light', 'dark', 'cupcake', 'bumblebee', \n 'emerald', 'corporate', 'synthwave', 'retro'\n ]\n \n const setTheme = (theme) => {\n currentTheme.value = theme\n document.documentElement.setAttribute('data-theme', theme)\n localStorage.setItem('theme', theme)\n }\n \n const toggleTheme = () => {\n const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'\n setTheme(newTheme)\n }\n \n onMounted(() => {\n const savedTheme = localStorage.getItem('theme') || 'light'\n setTheme(savedTheme)\n })\n \n return {\n currentTheme,\n themes,\n setTheme,\n toggleTheme\n }\n}\n",[363,6538,6539,6544,6549,6553,6558,6563,6568,6573,6578,6583,6588,6593,6598,6603,6608,6612,6616,6621,6626,6631,6635,6639,6644,6649,6654,6659,6663,6668,6673,6678,6683,6688,6692],{"__ignoreMap":365},[1665,6540,6541],{"class":1667,"line":1668},[1665,6542,6543],{},"// composables/useTheme.js\n",[1665,6545,6546],{"class":1667,"line":779},[1665,6547,6548],{},"import { ref, onMounted } from 'vue'\n",[1665,6550,6551],{"class":1667,"line":782},[1665,6552,3568],{"emptyLinePlaceholder":807},[1665,6554,6555],{"class":1667,"line":1718},[1665,6556,6557],{},"export function useTheme() {\n",[1665,6559,6560],{"class":1667,"line":1724},[1665,6561,6562],{}," const currentTheme = ref('light')\n",[1665,6564,6565],{"class":1667,"line":1925},[1665,6566,6567],{}," const themes = [\n",[1665,6569,6570],{"class":1667,"line":2034},[1665,6571,6572],{}," 'light', 'dark', 'cupcake', 'bumblebee', \n",[1665,6574,6575],{"class":1667,"line":2040},[1665,6576,6577],{}," 'emerald', 'corporate', 'synthwave', 'retro'\n",[1665,6579,6580],{"class":1667,"line":2046},[1665,6581,6582],{}," ]\n",[1665,6584,6585],{"class":1667,"line":2052},[1665,6586,6587],{}," \n",[1665,6589,6590],{"class":1667,"line":2058},[1665,6591,6592],{}," const setTheme = (theme) => {\n",[1665,6594,6595],{"class":1667,"line":2064},[1665,6596,6597],{}," currentTheme.value = theme\n",[1665,6599,6600],{"class":1667,"line":2070},[1665,6601,6602],{}," document.documentElement.setAttribute('data-theme', theme)\n",[1665,6604,6605],{"class":1667,"line":2076},[1665,6606,6607],{}," localStorage.setItem('theme', theme)\n",[1665,6609,6610],{"class":1667,"line":2082},[1665,6611,2342],{},[1665,6613,6614],{"class":1667,"line":2088},[1665,6615,6587],{},[1665,6617,6618],{"class":1667,"line":2094},[1665,6619,6620],{}," const toggleTheme = () => {\n",[1665,6622,6623],{"class":1667,"line":2305},[1665,6624,6625],{}," const newTheme = currentTheme.value === 'light' ? 'dark' : 'light'\n",[1665,6627,6628],{"class":1667,"line":2317},[1665,6629,6630],{}," setTheme(newTheme)\n",[1665,6632,6633],{"class":1667,"line":2329},[1665,6634,2342],{},[1665,6636,6637],{"class":1667,"line":2339},[1665,6638,6587],{},[1665,6640,6641],{"class":1667,"line":2345},[1665,6642,6643],{}," onMounted(() => {\n",[1665,6645,6646],{"class":1667,"line":2852},[1665,6647,6648],{}," const savedTheme = localStorage.getItem('theme') || 'light'\n",[1665,6650,6651],{"class":1667,"line":2858},[1665,6652,6653],{}," setTheme(savedTheme)\n",[1665,6655,6656],{"class":1667,"line":2864},[1665,6657,6658],{}," })\n",[1665,6660,6661],{"class":1667,"line":2870},[1665,6662,6587],{},[1665,6664,6665],{"class":1667,"line":2876},[1665,6666,6667],{}," return {\n",[1665,6669,6670],{"class":1667,"line":2882},[1665,6671,6672],{}," currentTheme,\n",[1665,6674,6675],{"class":1667,"line":2888},[1665,6676,6677],{}," themes,\n",[1665,6679,6680],{"class":1667,"line":2893},[1665,6681,6682],{}," setTheme,\n",[1665,6684,6685],{"class":1667,"line":2899},[1665,6686,6687],{}," toggleTheme\n",[1665,6689,6690],{"class":1667,"line":2905},[1665,6691,2342],{},[1665,6693,6694],{"class":1667,"line":2911},[1665,6695,1928],{},[40,6697,6699],{"id":6698},"vue-bileşeni-örneği","Vue Bileşeni Örneği",[356,6701,6703],{"className":2461,"code":6702,"language":2463,"meta":365,"style":365},"\u003Ctemplate>\n \u003Cdiv class=\"navbar bg-base-100\">\n \u003Cdiv class=\"navbar-start\">\n \u003Cdiv class=\"dropdown\">\n \u003Clabel tabindex=\"0\" class=\"btn btn-ghost lg:hidden\">\n \u003Csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h8m-8 6h16\">\u003C/path>\n \u003C/svg>\n \u003C/label>\n \u003Cul tabindex=\"0\" class=\"menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52\">\n \u003Cli>\u003Ca>Item 1\u003C/a>\u003C/li>\n \u003Cli>\u003Ca>Item 2\u003C/a>\u003C/li>\n \u003Cli>\u003Ca>Item 3\u003C/a>\u003C/li>\n \u003C/ul>\n \u003C/div>\n \u003Ca class=\"btn btn-ghost normal-case text-xl\">daisyUI\u003C/a>\n \u003C/div>\n \u003Cdiv class=\"navbar-center hidden lg:flex\">\n \u003Cul class=\"menu menu-horizontal p-0\">\n \u003Cli>\u003Ca>Item 1\u003C/a>\u003C/li>\n \u003Cli>\u003Ca>Item 2\u003C/a>\u003C/li>\n \u003Cli>\u003Ca>Item 3\u003C/a>\u003C/li>\n \u003C/ul>\n \u003C/div>\n \u003Cdiv class=\"navbar-end\">\n \u003Cbutton @click=\"toggleTheme\" class=\"btn btn-ghost\">\n \u003Csvg v-if=\"currentTheme === 'light'\" class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n \u003Cpath d=\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\">\u003C/path>\n \u003C/svg>\n \u003Csvg v-else class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n \u003Cpath fill-rule=\"evenodd\" d=\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\" clip-rule=\"evenodd\">\u003C/path>\n \u003C/svg>\n \u003C/button>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { useTheme } from '@/composables/useTheme'\n\nconst { currentTheme, toggleTheme } = useTheme()\n\u003C/script>\n",[363,6704,6705,6713,6728,6743,6758,6781,6822,6868,6877,6886,6907,6929,6950,6971,6979,6987,7007,7015,7030,7045,7065,7085,7105,7113,7121,7136,7163,7205,7224,7232,7261,7295,7303,7311,7319,7327,7335,7339,7349,7361,7365,7387],{"__ignoreMap":365},[1665,6706,6707,6709,6711],{"class":1667,"line":1668},[1665,6708,2470],{"class":2173},[1665,6710,2474],{"class":2473},[1665,6712,2477],{"class":2173},[1665,6714,6715,6717,6719,6721,6723,6726],{"class":1667,"line":779},[1665,6716,2482],{"class":2173},[1665,6718,1599],{"class":2473},[1665,6720,2487],{"class":1671},[1665,6722,2490],{"class":2173},[1665,6724,6725],{"class":1675},"\"navbar bg-base-100\"",[1665,6727,2477],{"class":2173},[1665,6729,6730,6732,6734,6736,6738,6741],{"class":1667,"line":782},[1665,6731,2500],{"class":2173},[1665,6733,1599],{"class":2473},[1665,6735,2487],{"class":1671},[1665,6737,2490],{"class":2173},[1665,6739,6740],{"class":1675},"\"navbar-start\"",[1665,6742,2477],{"class":2173},[1665,6744,6745,6747,6749,6751,6753,6756],{"class":1667,"line":1718},[1665,6746,2516],{"class":2173},[1665,6748,1599],{"class":2473},[1665,6750,2487],{"class":1671},[1665,6752,2490],{"class":2173},[1665,6754,6755],{"class":1675},"\"dropdown\"",[1665,6757,2477],{"class":2173},[1665,6759,6760,6762,6764,6767,6769,6772,6774,6776,6779],{"class":1667,"line":1724},[1665,6761,3175],{"class":2173},[1665,6763,6053],{"class":2473},[1665,6765,6766],{"class":1671}," tabindex",[1665,6768,2490],{"class":2173},[1665,6770,6771],{"class":1675},"\"0\"",[1665,6773,2487],{"class":1671},[1665,6775,2490],{"class":2173},[1665,6777,6778],{"class":1675},"\"btn btn-ghost lg:hidden\"",[1665,6780,2477],{"class":2173},[1665,6782,6783,6786,6789,6791,6793,6796,6799,6801,6804,6807,6809,6812,6815,6817,6820],{"class":1667,"line":1925},[1665,6784,6785],{"class":2173}," \u003C",[1665,6787,6788],{"class":2473},"svg",[1665,6790,2487],{"class":1671},[1665,6792,2490],{"class":2173},[1665,6794,6795],{"class":1675},"\"w-5 h-5\"",[1665,6797,6798],{"class":1671}," fill",[1665,6800,2490],{"class":2173},[1665,6802,6803],{"class":1675},"\"none\"",[1665,6805,6806],{"class":1671}," stroke",[1665,6808,2490],{"class":2173},[1665,6810,6811],{"class":1675},"\"currentColor\"",[1665,6813,6814],{"class":1671}," viewBox",[1665,6816,2490],{"class":2173},[1665,6818,6819],{"class":1675},"\"0 0 24 24\"",[1665,6821,2477],{"class":2173},[1665,6823,6824,6827,6830,6833,6835,6838,6841,6843,6845,6848,6850,6853,6856,6858,6861,6864,6866],{"class":1667,"line":2034},[1665,6825,6826],{"class":2173}," \u003C",[1665,6828,6829],{"class":2473},"path",[1665,6831,6832],{"class":1671}," stroke-linecap",[1665,6834,2490],{"class":2173},[1665,6836,6837],{"class":1675},"\"round\"",[1665,6839,6840],{"class":1671}," stroke-linejoin",[1665,6842,2490],{"class":2173},[1665,6844,6837],{"class":1675},[1665,6846,6847],{"class":1671}," stroke-width",[1665,6849,2490],{"class":2173},[1665,6851,6852],{"class":1675},"\"2\"",[1665,6854,6855],{"class":1671}," d",[1665,6857,2490],{"class":2173},[1665,6859,6860],{"class":1675},"\"M4 6h16M4 12h8m-8 6h16\"",[1665,6862,6863],{"class":2173},">\u003C/",[1665,6865,6829],{"class":2473},[1665,6867,2477],{"class":2173},[1665,6869,6870,6873,6875],{"class":1667,"line":2040},[1665,6871,6872],{"class":2173}," \u003C/",[1665,6874,6788],{"class":2473},[1665,6876,2477],{"class":2173},[1665,6878,6879,6882,6884],{"class":1667,"line":2046},[1665,6880,6881],{"class":2173}," \u003C/",[1665,6883,6053],{"class":2473},[1665,6885,2477],{"class":2173},[1665,6887,6888,6890,6892,6894,6896,6898,6900,6902,6905],{"class":1667,"line":2052},[1665,6889,3175],{"class":2173},[1665,6891,48],{"class":2473},[1665,6893,6766],{"class":1671},[1665,6895,2490],{"class":2173},[1665,6897,6771],{"class":1675},[1665,6899,2487],{"class":1671},[1665,6901,2490],{"class":2173},[1665,6903,6904],{"class":1675},"\"menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52\"",[1665,6906,2477],{"class":2173},[1665,6908,6909,6911,6913,6916,6918,6921,6923,6925,6927],{"class":1667,"line":2058},[1665,6910,6785],{"class":2173},[1665,6912,51],{"class":2473},[1665,6914,6915],{"class":2173},">\u003C",[1665,6917,54],{"class":2473},[1665,6919,6920],{"class":2173},">Item 1\u003C/",[1665,6922,54],{"class":2473},[1665,6924,6863],{"class":2173},[1665,6926,51],{"class":2473},[1665,6928,2477],{"class":2173},[1665,6930,6931,6933,6935,6937,6939,6942,6944,6946,6948],{"class":1667,"line":2064},[1665,6932,6785],{"class":2173},[1665,6934,51],{"class":2473},[1665,6936,6915],{"class":2173},[1665,6938,54],{"class":2473},[1665,6940,6941],{"class":2173},">Item 2\u003C/",[1665,6943,54],{"class":2473},[1665,6945,6863],{"class":2173},[1665,6947,51],{"class":2473},[1665,6949,2477],{"class":2173},[1665,6951,6952,6954,6956,6958,6960,6963,6965,6967,6969],{"class":1667,"line":2070},[1665,6953,6785],{"class":2173},[1665,6955,51],{"class":2473},[1665,6957,6915],{"class":2173},[1665,6959,54],{"class":2473},[1665,6961,6962],{"class":2173},">Item 3\u003C/",[1665,6964,54],{"class":2473},[1665,6966,6863],{"class":2173},[1665,6968,51],{"class":2473},[1665,6970,2477],{"class":2173},[1665,6972,6973,6975,6977],{"class":1667,"line":2076},[1665,6974,6881],{"class":2173},[1665,6976,48],{"class":2473},[1665,6978,2477],{"class":2173},[1665,6980,6981,6983,6985],{"class":1667,"line":2082},[1665,6982,3209],{"class":2173},[1665,6984,1599],{"class":2473},[1665,6986,2477],{"class":2173},[1665,6988,6989,6991,6993,6995,6997,7000,7003,7005],{"class":1667,"line":2088},[1665,6990,2516],{"class":2173},[1665,6992,54],{"class":2473},[1665,6994,2487],{"class":1671},[1665,6996,2490],{"class":2173},[1665,6998,6999],{"class":1675},"\"btn btn-ghost normal-case text-xl\"",[1665,7001,7002],{"class":2173},">daisyUI\u003C/",[1665,7004,54],{"class":2473},[1665,7006,2477],{"class":2173},[1665,7008,7009,7011,7013],{"class":1667,"line":2094},[1665,7010,2589],{"class":2173},[1665,7012,1599],{"class":2473},[1665,7014,2477],{"class":2173},[1665,7016,7017,7019,7021,7023,7025,7028],{"class":1667,"line":2305},[1665,7018,2500],{"class":2173},[1665,7020,1599],{"class":2473},[1665,7022,2487],{"class":1671},[1665,7024,2490],{"class":2173},[1665,7026,7027],{"class":1675},"\"navbar-center hidden lg:flex\"",[1665,7029,2477],{"class":2173},[1665,7031,7032,7034,7036,7038,7040,7043],{"class":1667,"line":2317},[1665,7033,2516],{"class":2173},[1665,7035,48],{"class":2473},[1665,7037,2487],{"class":1671},[1665,7039,2490],{"class":2173},[1665,7041,7042],{"class":1675},"\"menu menu-horizontal p-0\"",[1665,7044,2477],{"class":2173},[1665,7046,7047,7049,7051,7053,7055,7057,7059,7061,7063],{"class":1667,"line":2329},[1665,7048,3175],{"class":2173},[1665,7050,51],{"class":2473},[1665,7052,6915],{"class":2173},[1665,7054,54],{"class":2473},[1665,7056,6920],{"class":2173},[1665,7058,54],{"class":2473},[1665,7060,6863],{"class":2173},[1665,7062,51],{"class":2473},[1665,7064,2477],{"class":2173},[1665,7066,7067,7069,7071,7073,7075,7077,7079,7081,7083],{"class":1667,"line":2339},[1665,7068,3175],{"class":2173},[1665,7070,51],{"class":2473},[1665,7072,6915],{"class":2173},[1665,7074,54],{"class":2473},[1665,7076,6941],{"class":2173},[1665,7078,54],{"class":2473},[1665,7080,6863],{"class":2173},[1665,7082,51],{"class":2473},[1665,7084,2477],{"class":2173},[1665,7086,7087,7089,7091,7093,7095,7097,7099,7101,7103],{"class":1667,"line":2345},[1665,7088,3175],{"class":2173},[1665,7090,51],{"class":2473},[1665,7092,6915],{"class":2173},[1665,7094,54],{"class":2473},[1665,7096,6962],{"class":2173},[1665,7098,54],{"class":2473},[1665,7100,6863],{"class":2173},[1665,7102,51],{"class":2473},[1665,7104,2477],{"class":2173},[1665,7106,7107,7109,7111],{"class":1667,"line":2852},[1665,7108,3209],{"class":2173},[1665,7110,48],{"class":2473},[1665,7112,2477],{"class":2173},[1665,7114,7115,7117,7119],{"class":1667,"line":2858},[1665,7116,2589],{"class":2173},[1665,7118,1599],{"class":2473},[1665,7120,2477],{"class":2173},[1665,7122,7123,7125,7127,7129,7131,7134],{"class":1667,"line":2864},[1665,7124,2500],{"class":2173},[1665,7126,1599],{"class":2473},[1665,7128,2487],{"class":1671},[1665,7130,2490],{"class":2173},[1665,7132,7133],{"class":1675},"\"navbar-end\"",[1665,7135,2477],{"class":2173},[1665,7137,7138,7140,7142,7144,7146,7148,7150,7153,7155,7157,7159,7161],{"class":1667,"line":2870},[1665,7139,2516],{"class":2173},[1665,7141,2654],{"class":2473},[1665,7143,2633],{"class":2173},[1665,7145,2666],{"class":1671},[1665,7147,2490],{"class":2173},[1665,7149,2527],{"class":1675},[1665,7151,7152],{"class":2173},"toggleTheme",[1665,7154,2527],{"class":1675},[1665,7156,2487],{"class":1671},[1665,7158,2490],{"class":2173},[1665,7160,5767],{"class":1675},[1665,7162,2477],{"class":2173},[1665,7164,7165,7167,7169,7171,7173,7175,7178,7181,7184,7186,7188,7190,7192,7194,7196,7198,7200,7203],{"class":1667,"line":2876},[1665,7166,3175],{"class":2173},[1665,7168,6788],{"class":2473},[1665,7170,2522],{"class":2521},[1665,7172,2490],{"class":2173},[1665,7174,2527],{"class":1675},[1665,7176,7177],{"class":2173},"currentTheme ",[1665,7179,7180],{"class":2521},"===",[1665,7182,7183],{"class":1675}," 'light'\"",[1665,7185,2487],{"class":1671},[1665,7187,2490],{"class":2173},[1665,7189,6795],{"class":1675},[1665,7191,6798],{"class":1671},[1665,7193,2490],{"class":2173},[1665,7195,6811],{"class":1675},[1665,7197,6814],{"class":1671},[1665,7199,2490],{"class":2173},[1665,7201,7202],{"class":1675},"\"0 0 20 20\"",[1665,7204,2477],{"class":2173},[1665,7206,7207,7209,7211,7213,7215,7218,7220,7222],{"class":1667,"line":2882},[1665,7208,6785],{"class":2173},[1665,7210,6829],{"class":2473},[1665,7212,6855],{"class":1671},[1665,7214,2490],{"class":2173},[1665,7216,7217],{"class":1675},"\"M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z\"",[1665,7219,6863],{"class":2173},[1665,7221,6829],{"class":2473},[1665,7223,2477],{"class":2173},[1665,7225,7226,7228,7230],{"class":1667,"line":2888},[1665,7227,6881],{"class":2173},[1665,7229,6788],{"class":2473},[1665,7231,2477],{"class":2173},[1665,7233,7234,7236,7238,7241,7243,7245,7247,7249,7251,7253,7255,7257,7259],{"class":1667,"line":2893},[1665,7235,3175],{"class":2173},[1665,7237,6788],{"class":2473},[1665,7239,7240],{"class":1671}," v-else",[1665,7242,2487],{"class":1671},[1665,7244,2490],{"class":2173},[1665,7246,6795],{"class":1675},[1665,7248,6798],{"class":1671},[1665,7250,2490],{"class":2173},[1665,7252,6811],{"class":1675},[1665,7254,6814],{"class":1671},[1665,7256,2490],{"class":2173},[1665,7258,7202],{"class":1675},[1665,7260,2477],{"class":2173},[1665,7262,7263,7265,7267,7270,7272,7275,7277,7279,7282,7285,7287,7289,7291,7293],{"class":1667,"line":2899},[1665,7264,6785],{"class":2173},[1665,7266,6829],{"class":2473},[1665,7268,7269],{"class":1671}," fill-rule",[1665,7271,2490],{"class":2173},[1665,7273,7274],{"class":1675},"\"evenodd\"",[1665,7276,6855],{"class":1671},[1665,7278,2490],{"class":2173},[1665,7280,7281],{"class":1675},"\"M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z\"",[1665,7283,7284],{"class":1671}," clip-rule",[1665,7286,2490],{"class":2173},[1665,7288,7274],{"class":1675},[1665,7290,6863],{"class":2173},[1665,7292,6829],{"class":2473},[1665,7294,2477],{"class":2173},[1665,7296,7297,7299,7301],{"class":1667,"line":2905},[1665,7298,6881],{"class":2173},[1665,7300,6788],{"class":2473},[1665,7302,2477],{"class":2173},[1665,7304,7305,7307,7309],{"class":1667,"line":2911},[1665,7306,3209],{"class":2173},[1665,7308,2654],{"class":2473},[1665,7310,2477],{"class":2173},[1665,7312,7313,7315,7317],{"class":1667,"line":2917},[1665,7314,2589],{"class":2173},[1665,7316,1599],{"class":2473},[1665,7318,2477],{"class":2173},[1665,7320,7321,7323,7325],{"class":1667,"line":2923},[1665,7322,2704],{"class":2173},[1665,7324,1599],{"class":2473},[1665,7326,2477],{"class":2173},[1665,7328,7329,7331,7333],{"class":1667,"line":2929},[1665,7330,2713],{"class":2173},[1665,7332,2474],{"class":2473},[1665,7334,2477],{"class":2173},[1665,7336,7337],{"class":1667,"line":2935},[1665,7338,3568],{"emptyLinePlaceholder":807},[1665,7340,7341,7343,7345,7347],{"class":1667,"line":2941},[1665,7342,2470],{"class":2173},[1665,7344,3041],{"class":2473},[1665,7346,3044],{"class":1671},[1665,7348,2477],{"class":2173},[1665,7350,7351,7353,7356,7358],{"class":1667,"line":2947},[1665,7352,3518],{"class":2521},[1665,7354,7355],{"class":2173}," { useTheme } ",[1665,7357,3524],{"class":2521},[1665,7359,7360],{"class":1675}," '@/composables/useTheme'\n",[1665,7362,7363],{"class":1667,"line":2953},[1665,7364,3568],{"emptyLinePlaceholder":807},[1665,7366,7367,7369,7371,7374,7376,7378,7380,7382,7385],{"class":1667,"line":2959},[1665,7368,3573],{"class":2521},[1665,7370,5127],{"class":2173},[1665,7372,7373],{"class":1685},"currentTheme",[1665,7375,552],{"class":2173},[1665,7377,7152],{"class":1685},[1665,7379,5138],{"class":2173},[1665,7381,2490],{"class":2521},[1665,7383,7384],{"class":1671}," useTheme",[1665,7386,5184],{"class":2173},[1665,7388,7389,7391,7393],{"class":1667,"line":2965},[1665,7390,2713],{"class":2173},[1665,7392,3041],{"class":2473},[1665,7394,2477],{"class":2173},[889,7396,7398],{"id":7397},"performance-optimizasyonu","Performance Optimizasyonu",[40,7400,7402],{"id":7401},"purgecss-ile-optimizasyon","PurgeCSS ile Optimizasyon",[17,7404,7405],{},"TailwindCSS otomatik olarak kullanılmayan CSS'leri temizler:",[356,7407,7409],{"className":1836,"code":7408,"language":1838,"meta":365,"style":365},"// tailwind.config.js\nmodule.exports = {\n content: [\n './pages/**/*.{js,ts,jsx,tsx}',\n './components/**/*.{js,ts,jsx,tsx}',\n ],\n // ...\n}\n",[363,7410,7411,7416,7420,7424,7429,7434,7438,7443],{"__ignoreMap":365},[1665,7412,7413],{"class":1667,"line":1668},[1665,7414,7415],{},"// tailwind.config.js\n",[1665,7417,7418],{"class":1667,"line":779},[1665,7419,5446],{},[1665,7421,7422],{"class":1667,"line":782},[1665,7423,5451],{},[1665,7425,7426],{"class":1667,"line":1718},[1665,7427,7428],{}," './pages/**/*.{js,ts,jsx,tsx}',\n",[1665,7430,7431],{"class":1667,"line":1724},[1665,7432,7433],{}," './components/**/*.{js,ts,jsx,tsx}',\n",[1665,7435,7436],{"class":1667,"line":1925},[1665,7437,4854],{},[1665,7439,7440],{"class":1667,"line":2034},[1665,7441,7442],{}," // ...\n",[1665,7444,7445],{"class":1667,"line":2040},[1665,7446,1928],{},[40,7448,7450],{"id":7449},"bundle-size-analizi","Bundle Size Analizi",[356,7452,7454],{"className":1659,"code":7453,"language":1661,"meta":365,"style":365},"# Bundle analyzer ile analiz\nnpm install --save-dev @next/bundle-analyzer\n",[363,7455,7456,7461],{"__ignoreMap":365},[1665,7457,7458],{"class":1667,"line":1668},[1665,7459,7460],{"class":1697},"# Bundle analyzer ile analiz\n",[1665,7462,7463,7465,7467,7470],{"class":1667,"line":779},[1665,7464,1672],{"class":1671},[1665,7466,1795],{"class":1675},[1665,7468,7469],{"class":1685}," --save-dev",[1665,7471,7472],{"class":1675}," @next/bundle-analyzer\n",[889,7474,7476],{"id":7475},"best-practices","Best Practices",[177,7478,7479,7484,7490,7496,7501],{},[51,7480,7481,7483],{},[21,7482,5332],{},": DaisyUI class'larını TailwindCSS utility'leri ile kombine edin",[51,7485,7486,7489],{},[21,7487,7488],{},"Component Abstraction",": Tekrar eden UI pattern'leri için Vue bileşenleri oluşturun",[51,7491,7492,7495],{},[21,7493,7494],{},"Theme Consistency",": Tutarlı bir design system için tema değişkenlerini kullanın",[51,7497,7498,7500],{},[21,7499,4738],{},": Sadece ihtiyacınız olan bileşenleri import edin",[51,7502,7503,7505],{},[21,7504,5359],{},": ARIA attribute'larını unutmayın",[889,7507,5196],{"id":5195},[17,7509,7510],{},"TailwindCSS ve DaisyUI kombinasyonu, hızlı ve kaliteli UI geliştirme için mükemmel bir çözüm sunar. Utility-first yaklaşımın esnekliği ile hazır bileşenlerin hızını birleştirerek, hem developer experience'ı hem de end-user experience'ı optimize eder.",[40,7512,5203],{"id":5202},[48,7514,7515,7522,7529,7536],{},[51,7516,7517],{},[54,7518,7521],{"href":7519,"rel":7520},"https://tailwindcss.com/docs",[58],"TailwindCSS Dokümantasyonu",[51,7523,7524],{},[54,7525,7528],{"href":7526,"rel":7527},"https://daisyui.com/",[58],"DaisyUI Dokümantasyonu",[51,7530,7531],{},[54,7532,7535],{"href":7533,"rel":7534},"https://play.tailwindcss.com/",[58],"TailwindCSS Playground",[51,7537,7538],{},[54,7539,7542],{"href":7540,"rel":7541},"https://daisyui.com/themes/",[58],"DaisyUI Themes",[5228,7544],{},[17,7546,7547],{},[121,7548,7549],{},"Bu yazıda TailwindCSS ve DaisyUI'nin güçlü kombinasyonunu ele aldık. Kendi projelerinizde deneyerek bu teknolojilerin avantajlarını keşfedebilirsiniz.",[3893,7551,3895],{},{"title":365,"searchDepth":779,"depth":779,"links":7553},[7554,7557,7560,7564,7569,7573,7577,7581,7582],{"id":5275,"depth":779,"text":5276,"children":7555},[7556],{"id":5282,"depth":782,"text":5283},{"id":5317,"depth":779,"text":5318,"children":7558},[7559],{"id":5324,"depth":782,"text":5325},{"id":5369,"depth":779,"text":5370,"children":7561},[7562,7563],{"id":5373,"depth":782,"text":5374},{"id":5413,"depth":782,"text":5414},{"id":5530,"depth":779,"text":5531,"children":7565},[7566,7567,7568],{"id":5534,"depth":782,"text":5535},{"id":5817,"depth":782,"text":5818},{"id":6035,"depth":782,"text":6036},{"id":6249,"depth":779,"text":6250,"children":7570},[7571,7572],{"id":6256,"depth":782,"text":6257},{"id":6476,"depth":782,"text":6477},{"id":6528,"depth":779,"text":6529,"children":7574},[7575,7576],{"id":6532,"depth":782,"text":6533},{"id":6698,"depth":782,"text":6699},{"id":7397,"depth":779,"text":7398,"children":7578},[7579,7580],{"id":7401,"depth":782,"text":7402},{"id":7449,"depth":782,"text":7450},{"id":7475,"depth":779,"text":7476},{"id":5195,"depth":779,"text":5196,"children":7583},[7584],{"id":5202,"depth":782,"text":5203},"2024-01-05","TailwindCSS ve DaisyUI kombinasyonu ile nasıl hızlı ve güzel arayüzler geliştirebileceğinizi öğrenin",{"author":5250,"cover":7588},"/assets/images/blog/tailwind-daisyui-cover.svg","/blog/tailwindcss-daisyui-ile-hizli-ui-gelistirme","10",{"title":5264,"description":7586},{"loc":7589},"blog/tailwindcss-daisyui-ile-hizli-ui-gelistirme",[1744,1748,4473,7595,4740],"UI/UX","DjNarbBizfXy9-hUJ6WdhIZ8eqpDdixCfjBt0DmmEto",{"id":7598,"title":7599,"body":7600,"date":3911,"description":9626,"extension":797,"head":798,"image":798,"meta":9627,"navigation":807,"ogImage":3915,"path":9631,"readingTime":3922,"robots":798,"schemaOrg":798,"seo":9632,"sitemap":9633,"stem":9635,"tags":9636,"__hash__":9639},"blog/blog/tensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır.md","TensorFlow.js ve Vue 3 ile Nesne Tanımlama Nasıl Yapılır?",{"type":9,"value":7601,"toc":9613},[7602,7605,7621,7626,7631,7635,7657,7671,7677,7695,7745,7752,7761,7773,7776,7787,7811,7815,7818,7826,7846,7855,7859,7865,7893,7917,7922,7952,7956,7959,8047,8053,8079,8083,8086,8108,8264,8267,8284,8312,8316,8322,8326,8334,8338,8342,8345,8348,8354,8357,8569,8572,8578,8581,8584,8787,8838,8841,8847,9034,9037,9043,9257,9260,9266,9536,9551,9556,9563,9568,9574,9577,9582,9588,9594,9608,9611],[12,7603,7599],{"id":7604},"tensorflowjs-ve-vue-3-ile-nesne-tanımlama-nasıl-yapılır",[17,7606,7607,7608,7610,7611,7613,7614,7616,7617,7620],{},"Son yıllarda çok aktif olarak yapay zeka ve bunun ürünleri hayatımızda yer etmeye başladı ve giderek bunların da sayısı artıyor. Hepimizin aklında bunu nasıl hayatımda kullanabilirim sorusu mevcut, bu yazıda sizlerle beraber ",[21,7609,1556],{}," ile ",[21,7612,1560],{}," sınıflarını ve ",[21,7615,1564],{}," modelini kullanarak basit bir obje/nesne tanıyan ve bunu sepete ekleyen bir uygulama yapacağız. Böylelikle ",[54,7618,1570],{"href":1568,"rel":7619},[58],"’nun temel çalışma prensibinde bir senaryosunu da gerçekleştirmiş olacağız. Hadi başlayalım 🚀",[17,7622,7623],{},[36,7624],{"alt":1576,"src":7625},"https://cdn-images-1.medium.com/max/12000/0*fdwKAdftxesGC5SP",[17,7627,7628],{},[21,7629,7630],{},"TensorFlow Nedir? TensorFlow.js Nedir?",[1599,7632,7633,1606],{"align":1601},[36,7634],{"src":1604,"alt":1605},[17,7636,7637,7639,7640,7642,7643,7645,7646,552,7649,7652,7653,7656],{},[21,7638,1611],{},", Google tarafından geliştirilen ve açık kaynaklı bir makine öğrenimi ve derin öğrenme kütüphanesidir. Geniş bir topluluk tarafından desteklenen ",[21,7641,1611],{},", özellikle yapay zeka uygulamaları ve büyük ölçekli veri işleme projeleri için kullanılan güçlü bir araçtır. Hem araştırma hem de endüstriyel projelerde yaygın olarak kullanılan ",[21,7644,1611],{},", esnek ve modüler bir yapısıyla öne çıkar, farklı cihazlarda ",[121,7647,7648],{},"bilgisayarlar",[121,7650,7651],{},"mobil cihazlar",",",[121,7654,7655],{},"IoT"," cihazlarında kullanım imkanı sunar.",[17,7658,7659,7661,7662,7664,7665,7670],{},[21,7660,1556],{}," ise ",[21,7663,1611],{},"’un JavaScript sürümüdür ve tarayıcı üzerinde makine öğrenimi modellerinin eğitilmesi ve çalıştırılmasını sağlar. Bu sayede web uygulamalarında, ",[121,7666,7667],{},[21,7668,7669],{},"tarayıcı tabanlı yapay zeka"," projelerinde kullanılabilecek bir araçtır.",[40,7672,7674],{"id":7673},"kurulumlar",[21,7675,7676],{},"Kurulumlar",[17,7678,7679,7680,7682,7683,7685,7686,7688,7689,7691,7692,7694],{},"Öncelikli olarak ",[21,7681,1641],{}," projemizi oluşturalım. 🧐 Bunun için ister ",[121,7684,1645],{}," yada ",[121,7687,1649],{}," kullanabilirsiniz. Ben burada ",[121,7690,1649],{}," kurulumunu tercih edeceğim ancak diğer araçlarında kurulumunu basitleştirmek için ",[121,7693,1645],{}," tercih edebilirsiniz.",[356,7696,7697],{"className":1659,"code":1660,"language":1661,"meta":365,"style":365},[363,7698,7699,7715,7719,7733,7737],{"__ignoreMap":365},[1665,7700,7701,7703,7705,7707,7709,7711,7713],{"class":1667,"line":1668},[1665,7702,1672],{"class":1671},[1665,7704,1676],{"class":1675},[1665,7706,1679],{"class":1675},[1665,7708,1682],{"class":1675},[1665,7710,1686],{"class":1685},[1665,7712,1689],{"class":1685},[1665,7714,1692],{"class":1675},[1665,7716,7717],{"class":1667,"line":779},[1665,7718,1698],{"class":1697},[1665,7720,7721,7723,7725,7727,7729,7731],{"class":1667,"line":782},[1665,7722,1703],{"class":1671},[1665,7724,1676],{"class":1675},[1665,7726,1708],{"class":1675},[1665,7728,1711],{"class":1675},[1665,7730,1689],{"class":1685},[1665,7732,1692],{"class":1675},[1665,7734,7735],{"class":1667,"line":1718},[1665,7736,1721],{"class":1697},[1665,7738,7739,7741,7743],{"class":1667,"line":1724},[1665,7740,1672],{"class":1671},[1665,7742,1676],{"class":1675},[1665,7744,1731],{"class":1675},[40,7746,7748,7749],{"id":7747},"opsiyonel-yükleme","📌",[21,7750,7751],{},"Opsiyonel Yükleme",[17,7753,7754,7755,594,7757,7760],{},"UI yada CSS kütüphanesi kullanmak istiyorsanız bu aşamada kurulumunu yapmanızı öneririm. Bu örnek projede ",[121,7756,1744],{},[121,7758,7759],{},"DaiysiUI"," kullandım eğer sizde aynı yapıdan ilerlemek isterseniz ;",[48,7762,7763,7768],{},[51,7764,7765],{},[54,7766,1758],{"href":1756,"rel":7767},[58],[51,7769,7770],{},[54,7771,1765],{"href":1763,"rel":7772},[58],[17,7774,7775],{},"sayfalarını ziyaret edebilirsiniz.",[17,7777,7778,7779,7783,7784,7786],{},"Kurulumlarımızı tamamladıktan sonra sonra dosya dizinine gidip, npm install ve npm run dev yaparak boş projemizi bir çalıştırıyoruz. Eğer herhangi bir sorun yada hata almadıysanız ",[54,7780,7782],{"href":1781,"rel":7781},[58],"TensorFlow.js Kurulum"," adresine giderek projemize ",[21,7785,1556],{},"'i ekliyoruz.",[356,7788,7789],{"className":1659,"code":1786,"language":1661,"meta":365,"style":365},[363,7790,7791,7799,7803],{"__ignoreMap":365},[1665,7792,7793,7795,7797],{"class":1667,"line":1668},[1665,7794,1672],{"class":1671},[1665,7796,1795],{"class":1675},[1665,7798,1798],{"class":1675},[1665,7800,7801],{"class":1667,"line":779},[1665,7802,1698],{"class":1697},[1665,7804,7805,7807,7809],{"class":1667,"line":782},[1665,7806,1703],{"class":1671},[1665,7808,1809],{"class":1675},[1665,7810,1798],{"class":1675},[889,7812,7814],{"id":7813},"peki-tensorflowjsi-nasıl-kullanacağız","📌 Peki TensorFlow.js’i nasıl kullanacağız?",[1817,7816],{"src":1819,"width":1820,"height":1820,"style":365,"frameBorder":1821,"className":7817,"allowFullScreen":807},[1823],[17,7819,7820,7822,7823,7825],{},[21,7821,1556],{},"’i kullanmak için bir utils klasörünün altında ",[21,7824,1832],{}," adında bir dosya oluşturuyoruz. Dosyamızın içine ;",[356,7827,7828],{"className":1836,"code":1837,"language":1838,"meta":365,"style":365},[363,7829,7830,7834,7838,7842],{"__ignoreMap":365},[1665,7831,7832],{"class":1667,"line":1668},[1665,7833,1845],{},[1665,7835,7836],{"class":1667,"line":779},[1665,7837,1850],{},[1665,7839,7840],{"class":1667,"line":782},[1665,7841,1855],{},[1665,7843,7844],{"class":1667,"line":1718},[1665,7845,1860],{},[17,7847,7848,7849,7851,7852,7854],{},"Burada ",[21,7850,1556],{},"’i “",[121,7853,1869],{},"” takmadıyla import ettik. Ve daha sonrasında kullanılacak olan model, labels ve düzenlenmiş etiketleri içerecek labelsArray’i tanımladık.",[889,7856,7858],{"id":7857},"model-ve-etiketlerin-yüklenmesi","📌 Model ve Etiketlerin Yüklenmesi",[17,7860,7861,7862,7864],{},"Bu tanımlamaları yaptıktan sonra ",[21,7863,1891],{}," adında bir fonksiyon oluşturuyoruz. Burada modelimizi ve labels(etiketler)’ı projeye yükleyeceğiz.",[356,7866,7867],{"className":1836,"code":1895,"language":1838,"meta":365,"style":365},[363,7868,7869,7873,7877,7881,7885,7889],{"__ignoreMap":365},[1665,7870,7871],{"class":1667,"line":1668},[1665,7872,1902],{},[1665,7874,7875],{"class":1667,"line":779},[1665,7876,1907],{},[1665,7878,7879],{"class":1667,"line":782},[1665,7880,1912],{},[1665,7882,7883],{"class":1667,"line":1718},[1665,7884,1917],{},[1665,7886,7887],{"class":1667,"line":1724},[1665,7888,1922],{},[1665,7890,7891],{"class":1667,"line":1925},[1665,7892,1928],{},[177,7894,7895,7905,7911],{},[51,7896,7897,7898,7900,7901,7904],{},"İlk olarak modelimizi ",[21,7899,1936],{}," ile birlikte ",[54,7902,1942],{"href":1940,"rel":7903},[58]," üzerinden modelimizi yüklüyoruz.",[51,7906,7907,7908,7910],{},"Bu aşamada ise ",[21,7909,1560],{}," verisinin etiketlerini çekiyoruz ve bunu bir text formatına çeviriyoruz.",[51,7912,7913,7914,7916],{},"Son olarak ise bu text olarak aldığımız veriyi bir diziye dönüştürüp ",[21,7915,1880],{}," değişkenine atıyoruz.",[17,7918,7919],{},[21,7920,7921],{},"Fonksiyon Açıklamaları",[48,7923,7924,7931,7936,7942,7947],{},[51,7925,7926,2187,7928,7930],{},[21,7927,1936],{},[21,7929,1556],{}," model yükleme işlevidir. Belirtilen URL'den modeli yükler.",[51,7932,7933,7935],{},[21,7934,1970],{},": Belirtilen URL'den veri çeker.",[51,7937,7938,7941],{},[21,7939,7940],{},"labels.split('\\n')",": Etiketleri yeni satırlara göre böler ve bir diziye dönüştürür.",[51,7943,7944,7946],{},[21,7945,1982],{},": Dizi içindeki her etiketin başındaki ve sonundaki boşlukları temizler.",[51,7948,7949,7951],{},[21,7950,1988],{},": Boş etiketleri filtreler.",[889,7953,7955],{"id":7954},"görüntü-sınıflandırma-fonksiyonu","📌Görüntü Sınıflandırma Fonksiyonu",[17,7957,7958],{},"Şimdi, yüklenmiş modeli kullanarak bir görüntüyü sınıflandırmak için aşağıdaki fonksiyonu oluşturuyoruz:",[356,7960,7962],{"className":1836,"code":7961,"language":1838,"meta":365,"style":365},"async function classifyImage(image) {\n // 1. Giriş Görüntüsünü Tensor'a Dönüştürme ve Ön İşleme\n const imgTensor = tf.browser.fromPixels(image) // Görüntüyü Tensor'a dönüştürme\n .resizeNearestNeighbor([128, 128]) // Görüntüyü 128x128 boyutuna yeniden boyutlandırma\n .toFloat() // Tensor değerlerini ondalık sayıya dönüştürme\n .div(tf.scalar(255)) // Normalizasyon: [0, 255] aralığındaki piksel değerlerini [0, 1] aralığına ölçekleme\n .expandDims(); // Tensor boyutunu genişletme\n// 2. Model ile Görüntüyü Sınıflandırma\n const predictions = await model.predict(imgTensor); // Modeli kullanarak sınıflandırma yapma\n // 3. En Yüksek Olasılıklı Sınıfları Belirleme ve Sıralama\n const topPredictions = Array.from(predictions.dataSync()) // Tensor'dan JavaScript dizisine dönüştürme\n .map((probability, index) => ({ probability, label: labelsArray[index]})) // Her sınıf için olasılığı ve etiketi eşleştirme\n .sort((a, b) => b.probability - a.probability) // Olasılığa göre sıralama\n .slice(0, 3); // En yüksek üç olasılıklı sınıfları seçme\n // 4. Sonuçları Döndürme\n return topPredictions; // En yüksek olasılıklı sınıfları içeren diziyi döndürme\n}\n",[363,7963,7964,7968,7973,7978,7983,7988,7993,7998,8003,8008,8013,8018,8023,8028,8033,8038,8043],{"__ignoreMap":365},[1665,7965,7966],{"class":1667,"line":1668},[1665,7967,2006],{},[1665,7969,7970],{"class":1667,"line":779},[1665,7971,7972],{}," // 1. Giriş Görüntüsünü Tensor'a Dönüştürme ve Ön İşleme\n",[1665,7974,7975],{"class":1667,"line":782},[1665,7976,7977],{}," const imgTensor = tf.browser.fromPixels(image) // Görüntüyü Tensor'a dönüştürme\n",[1665,7979,7980],{"class":1667,"line":1718},[1665,7981,7982],{}," .resizeNearestNeighbor([128, 128]) // Görüntüyü 128x128 boyutuna yeniden boyutlandırma\n",[1665,7984,7985],{"class":1667,"line":1724},[1665,7986,7987],{}," .toFloat() // Tensor değerlerini ondalık sayıya dönüştürme\n",[1665,7989,7990],{"class":1667,"line":1925},[1665,7991,7992],{}," .div(tf.scalar(255)) // Normalizasyon: [0, 255] aralığındaki piksel değerlerini [0, 1] aralığına ölçekleme\n",[1665,7994,7995],{"class":1667,"line":2034},[1665,7996,7997],{}," .expandDims(); // Tensor boyutunu genişletme\n",[1665,7999,8000],{"class":1667,"line":2040},[1665,8001,8002],{},"// 2. Model ile Görüntüyü Sınıflandırma\n",[1665,8004,8005],{"class":1667,"line":2046},[1665,8006,8007],{}," const predictions = await model.predict(imgTensor); // Modeli kullanarak sınıflandırma yapma\n",[1665,8009,8010],{"class":1667,"line":2052},[1665,8011,8012],{}," // 3. En Yüksek Olasılıklı Sınıfları Belirleme ve Sıralama\n",[1665,8014,8015],{"class":1667,"line":2058},[1665,8016,8017],{}," const topPredictions = Array.from(predictions.dataSync()) // Tensor'dan JavaScript dizisine dönüştürme\n",[1665,8019,8020],{"class":1667,"line":2064},[1665,8021,8022],{}," .map((probability, index) => ({ probability, label: labelsArray[index]})) // Her sınıf için olasılığı ve etiketi eşleştirme\n",[1665,8024,8025],{"class":1667,"line":2070},[1665,8026,8027],{}," .sort((a, b) => b.probability - a.probability) // Olasılığa göre sıralama\n",[1665,8029,8030],{"class":1667,"line":2076},[1665,8031,8032],{}," .slice(0, 3); // En yüksek üç olasılıklı sınıfları seçme\n",[1665,8034,8035],{"class":1667,"line":2082},[1665,8036,8037],{}," // 4. Sonuçları Döndürme\n",[1665,8039,8040],{"class":1667,"line":2088},[1665,8041,8042],{}," return topPredictions; // En yüksek olasılıklı sınıfları içeren diziyi döndürme\n",[1665,8044,8045],{"class":1667,"line":2094},[1665,8046,1928],{},[17,8048,8049,8050,8052],{},"Bu fonksiyon, bir görüntüyü alır, ",[21,8051,1556],{}," kullanarak tensor formatına çevirir ve gerekli ön işleme adımlarını uygular. Ardından, modeli kullanarak görüntüyü sınıflandırır ve en yüksek olasılıklı üç sınıfı içeren bir dizi döndürür.",[177,8054,8055,8063,8066,8073,8076],{},[51,8056,8057,8059,8060,8062],{},[21,8058,2109],{},": Giriş olarak alınan görüntüyü ",[21,8061,1556],{},"'in tensor formatına çevirir.",[51,8064,8065],{},"Tensor üzerinde bazı ön işlemleri yapar. Görüntüyü 128x128 boyutuna yeniden boyutlandırır, piksel değerlerini normalleştirir ve tensor boyutunu genişletir.",[51,8067,8068,2187,8070,8072],{},[21,8069,2121],{},[21,8071,1556],{}," modelini kullanarak, ön işlenmiş görüntüyü sınıflandırma yapar ve olasılıklı sonuçları içeren bir tensor elde eder.",[51,8074,8075],{},"Elde edilen sonuçları bir JavaScript dizisine dönüştürür, her sınıfın olasılığını ve etiketini eşleştirir, olasılığa göre sıralar ve en yüksek üç olasılıklı sınıfları seçer.",[51,8077,8078],{},"Son olarak fonksiyon, en yüksek olasılıklı üç sınıfın etiketini ve olasılıklarını içeren bir dizi döndürür. Bu dizi, sınıflandırma sonuçlarını temsil eder.",[889,8080,8082],{"id":8081},"mockup-data-oluşturma","📌Mockup Data Oluşturma",[17,8084,8085],{},"Projede bir sepet senaryomuz olduğu için haliyle sınıflandırdığımız öğelerin Database’den çekmemiz gerekiyor ancak bağımlığın artmaması için mockup verimizi bir JSON dosyamızın içinden okuyup gerekli bilgilerini döneceğiz.",[48,8087,8088,8097],{},[51,8089,8090,8091,8093,8094,8096],{},"İlk olarak ",[21,8092,2146],{}," adında bir klasör oluşturuyoruz ",[21,8095,2150],{}," dizinimizin altına.",[51,8098,8099,8100,8102,8103,8107],{},"Daha sonra services klasörümüzün altına ",[21,8101,2157],{}," adında bir dosya oluşturup içini açıyoruz. Burada örnek olarak ",[121,8104,8105],{},[21,8106,1560],{}," etiketlerinde bulunan 4 adet veri ekledim bunu isterseniz arttırabilirsiniz.",[356,8109,8110],{"className":2164,"code":2165,"language":2166,"meta":365,"style":365},[363,8111,8112,8116,8120,8130,8140,8148,8152,8156,8166,8176,8184,8188,8192,8202,8212,8220,8224,8228,8238,8248,8256,8260],{"__ignoreMap":365},[1665,8113,8114],{"class":1667,"line":1668},[1665,8115,2174],{"class":2173},[1665,8117,8118],{"class":1667,"line":779},[1665,8119,2179],{"class":2173},[1665,8121,8122,8124,8126,8128],{"class":1667,"line":782},[1665,8123,2184],{"class":1685},[1665,8125,2187],{"class":2173},[1665,8127,2190],{"class":1675},[1665,8129,2193],{"class":2173},[1665,8131,8132,8134,8136,8138],{"class":1667,"line":1718},[1665,8133,2198],{"class":1685},[1665,8135,2187],{"class":2173},[1665,8137,2203],{"class":1675},[1665,8139,2193],{"class":2173},[1665,8141,8142,8144,8146],{"class":1667,"line":1724},[1665,8143,2210],{"class":1685},[1665,8145,2187],{"class":2173},[1665,8147,2215],{"class":1685},[1665,8149,8150],{"class":1667,"line":1925},[1665,8151,2220],{"class":2173},[1665,8153,8154],{"class":1667,"line":2034},[1665,8155,2179],{"class":2173},[1665,8157,8158,8160,8162,8164],{"class":1667,"line":2040},[1665,8159,2184],{"class":1685},[1665,8161,2187],{"class":2173},[1665,8163,2233],{"class":1675},[1665,8165,2193],{"class":2173},[1665,8167,8168,8170,8172,8174],{"class":1667,"line":2046},[1665,8169,2198],{"class":1685},[1665,8171,2187],{"class":2173},[1665,8173,2244],{"class":1675},[1665,8175,2193],{"class":2173},[1665,8177,8178,8180,8182],{"class":1667,"line":2052},[1665,8179,2210],{"class":1685},[1665,8181,2187],{"class":2173},[1665,8183,2255],{"class":1685},[1665,8185,8186],{"class":1667,"line":2058},[1665,8187,2220],{"class":2173},[1665,8189,8190],{"class":1667,"line":2064},[1665,8191,2179],{"class":2173},[1665,8193,8194,8196,8198,8200],{"class":1667,"line":2070},[1665,8195,2184],{"class":1685},[1665,8197,2187],{"class":2173},[1665,8199,2272],{"class":1675},[1665,8201,2193],{"class":2173},[1665,8203,8204,8206,8208,8210],{"class":1667,"line":2076},[1665,8205,2198],{"class":1685},[1665,8207,2187],{"class":2173},[1665,8209,2283],{"class":1675},[1665,8211,2193],{"class":2173},[1665,8213,8214,8216,8218],{"class":1667,"line":2082},[1665,8215,2210],{"class":1685},[1665,8217,2187],{"class":2173},[1665,8219,2294],{"class":1685},[1665,8221,8222],{"class":1667,"line":2088},[1665,8223,2220],{"class":2173},[1665,8225,8226],{"class":1667,"line":2094},[1665,8227,2179],{"class":2173},[1665,8229,8230,8232,8234,8236],{"class":1667,"line":2305},[1665,8231,2184],{"class":1685},[1665,8233,2187],{"class":2173},[1665,8235,2312],{"class":1675},[1665,8237,2193],{"class":2173},[1665,8239,8240,8242,8244,8246],{"class":1667,"line":2317},[1665,8241,2198],{"class":1685},[1665,8243,2187],{"class":2173},[1665,8245,2324],{"class":1675},[1665,8247,2193],{"class":2173},[1665,8249,8250,8252,8254],{"class":1667,"line":2329},[1665,8251,2210],{"class":1685},[1665,8253,2187],{"class":2173},[1665,8255,2336],{"class":1685},[1665,8257,8258],{"class":1667,"line":2339},[1665,8259,2342],{"class":2173},[1665,8261,8262],{"class":1667,"line":2345},[1665,8263,2348],{"class":2173},[17,8265,8266],{},"Bu aşamayı tamamladıktan sonra verilerimizi okuyup içerisinden sınıflandırmamızın sonucuna göre ürün bilgisini dönmesi için basit kod yapımızı oluşturacağız.",[48,8268,8269,8278],{},[51,8270,8271,8273,8274,8277],{},[21,8272,2359],{}," adında bir dosya oluşturuyoruz. Ve bunu içerisine az önce oluşturduğumuz verilerimizi ",[21,8275,8276],{},"import mockupData from './data.json","’ ile ekliyoruz.",[51,8279,8280,8281,8283],{},"Buradaki verilerimiz de aslında bir basit arama yapacağımız için ",[21,8282,2369],{}," adında bir fonksiyon oluşturuyoruz",[356,8285,8286],{"className":1836,"code":2372,"language":1838,"meta":365,"style":365},[363,8287,8288,8292,8296,8300,8304,8308],{"__ignoreMap":365},[1665,8289,8290],{"class":1667,"line":1668},[1665,8291,2379],{},[1665,8293,8294],{"class":1667,"line":779},[1665,8295,2384],{},[1665,8297,8298],{"class":1667,"line":782},[1665,8299,2389],{},[1665,8301,8302],{"class":1667,"line":1718},[1665,8303,2394],{},[1665,8305,8306],{"class":1667,"line":1724},[1665,8307,1928],{},[1665,8309,8310],{"class":1667,"line":1925},[1665,8311,2403],{},[889,8313,8315],{"id":8314},"vuejs-tensorflow-görüntü-sınıflandırma","📌 Vue.js TensorFlow Görüntü Sınıflandırma",[17,8317,8318,8319,8321],{},"Yazının önceki aşamalarında ",[21,8320,1556],{}," ve gereksinim hazırlıklarını yaptık. Şimdi daha kolay kısmına Front End (Ön Uç) kısmına geçiyoruz. 3 tane ana component oluşturacağız. İsterseniz tek olarakta yapabilirsiniz.",[17,8323,8324],{},[21,8325,2418],{},[48,8327,8328,8330,8332],{},[51,8329,2423],{},[51,8331,2426],{},[51,8333,2429],{},[17,8335,8336],{},[21,8337,2434],{},[48,8339,8340],{},[51,8341,2439],{},[17,8343,8344],{},"Öncelikli olarak ImageUpload.vue isminde bir component oluşturuyoruz.",[17,8346,8347],{},"İçerisine temel olarak işlevleri yerine getirebilecek bir tasarım oluşturuyoruz. Bu kısma ekstra olarak detay yada işlev eklemekte özgürüz. İsterseniz alt komponentlere de parçalayabilir daha efektif kod yazabilirsiniz 😛",[40,8349,8351],{"id":8350},"tasarım",[21,8352,8353],{},"Tasarım",[1817,8355],{"src":2456,"width":1820,"height":2457,"style":365,"frameBorder":1821,"className":8356,"allowFullScreen":807},[1823],[356,8358,8359],{"className":2461,"code":2462,"language":2463,"meta":365,"style":365},[363,8360,8361,8369,8383,8397,8425,8457,8465,8509,8553,8561],{"__ignoreMap":365},[1665,8362,8363,8365,8367],{"class":1667,"line":1668},[1665,8364,2470],{"class":2173},[1665,8366,2474],{"class":2473},[1665,8368,2477],{"class":2173},[1665,8370,8371,8373,8375,8377,8379,8381],{"class":1667,"line":779},[1665,8372,2482],{"class":2173},[1665,8374,1599],{"class":2473},[1665,8376,2487],{"class":1671},[1665,8378,2490],{"class":2173},[1665,8380,2493],{"class":1675},[1665,8382,2477],{"class":2173},[1665,8384,8385,8387,8389,8391,8393,8395],{"class":1667,"line":782},[1665,8386,2500],{"class":2173},[1665,8388,1599],{"class":2473},[1665,8390,2487],{"class":1671},[1665,8392,2490],{"class":2173},[1665,8394,2509],{"class":1675},[1665,8396,2477],{"class":2173},[1665,8398,8399,8401,8403,8405,8407,8409,8411,8413,8415,8417,8419,8421,8423],{"class":1667,"line":1718},[1665,8400,2516],{"class":2173},[1665,8402,1665],{"class":2473},[1665,8404,2522],{"class":2521},[1665,8406,2490],{"class":2173},[1665,8408,2527],{"class":1675},[1665,8410,2530],{"class":2173},[1665,8412,2527],{"class":1675},[1665,8414,2487],{"class":1671},[1665,8416,2490],{"class":2173},[1665,8418,2539],{"class":1675},[1665,8420,2542],{"class":2173},[1665,8422,1665],{"class":2473},[1665,8424,2477],{"class":2173},[1665,8426,8427,8429,8431,8433,8435,8437,8439,8441,8443,8445,8447,8449,8451,8453,8455],{"class":1667,"line":1724},[1665,8428,2516],{"class":2173},[1665,8430,36],{"class":2473},[1665,8432,2555],{"class":2173},[1665,8434,2150],{"class":1671},[1665,8436,2490],{"class":2173},[1665,8438,2527],{"class":1675},[1665,8440,2564],{"class":2173},[1665,8442,2527],{"class":1675},[1665,8444,2569],{"class":1671},[1665,8446,2490],{"class":2173},[1665,8448,2574],{"class":1675},[1665,8450,2487],{"class":1671},[1665,8452,2490],{"class":2173},[1665,8454,2581],{"class":1675},[1665,8456,2584],{"class":2173},[1665,8458,8459,8461,8463],{"class":1667,"line":1925},[1665,8460,2589],{"class":2173},[1665,8462,1599],{"class":2473},[1665,8464,2477],{"class":2173},[1665,8466,8467,8469,8471,8473,8475,8477,8479,8481,8483,8485,8487,8489,8491,8493,8495,8497,8499,8501,8503,8505,8507],{"class":1667,"line":2034},[1665,8468,2500],{"class":2173},[1665,8470,2600],{"class":2473},[1665,8472,2603],{"class":1671},[1665,8474,2490],{"class":2173},[1665,8476,2608],{"class":1675},[1665,8478,2611],{"class":1671},[1665,8480,2490],{"class":2173},[1665,8482,2616],{"class":1675},[1665,8484,2487],{"class":1671},[1665,8486,2490],{"class":2173},[1665,8488,2623],{"class":1675},[1665,8490,2569],{"class":1671},[1665,8492,2490],{"class":2173},[1665,8494,2630],{"class":1675},[1665,8496,2633],{"class":2173},[1665,8498,2636],{"class":1671},[1665,8500,2490],{"class":2173},[1665,8502,2527],{"class":1675},[1665,8504,2643],{"class":2173},[1665,8506,2527],{"class":1675},[1665,8508,2584],{"class":2173},[1665,8510,8511,8513,8515,8517,8519,8521,8523,8525,8527,8529,8531,8533,8535,8537,8539,8541,8543,8545,8547,8549,8551],{"class":1667,"line":2040},[1665,8512,2500],{"class":2173},[1665,8514,2654],{"class":2473},[1665,8516,2487],{"class":1671},[1665,8518,2490],{"class":2173},[1665,8520,2661],{"class":1675},[1665,8522,2633],{"class":2173},[1665,8524,2666],{"class":1671},[1665,8526,2490],{"class":2173},[1665,8528,2527],{"class":1675},[1665,8530,2673],{"class":2173},[1665,8532,2527],{"class":1675},[1665,8534,2555],{"class":2173},[1665,8536,2680],{"class":1671},[1665,8538,2490],{"class":2173},[1665,8540,2527],{"class":1675},[1665,8542,2687],{"class":2521},[1665,8544,2690],{"class":2173},[1665,8546,2527],{"class":1675},[1665,8548,2695],{"class":2173},[1665,8550,2654],{"class":2473},[1665,8552,2477],{"class":2173},[1665,8554,8555,8557,8559],{"class":1667,"line":2046},[1665,8556,2704],{"class":2173},[1665,8558,1599],{"class":2473},[1665,8560,2477],{"class":2173},[1665,8562,8563,8565,8567],{"class":1667,"line":2052},[1665,8564,2713],{"class":2173},[1665,8566,2474],{"class":2473},[1665,8568,2477],{"class":2173},[17,8570,8571],{},"Burada dışarıdan bir görsel alacağız. Ve bunu bir buton aracılıyla sınıflandırmasını tetikleyeceğiz.",[40,8573,8575],{"id":8574},"fonksiyonlar",[21,8576,8577],{},"Fonksiyonlar",[1817,8579],{"src":2729,"width":1820,"height":2730,"frameBorder":1821,"className":8580,"allowFullScreen":807},[1823],[17,8582,8583],{},"Bu aşamada tek tek kodu açıklamanın yazıyı uzatacağını düşündüğümden tüm kod kısmını sizlerle paylaşıp işlevlerini açıklayacağım.",[356,8585,8587],{"className":1836,"code":8586,"language":1838,"meta":365,"style":365},"import { ref, computed } from 'vue';\n// tensorflowImageClassifier modülünden classifyImage ve loadModel fonksiyonlarını içeri aktarır\nimport { classifyImage, loadModel } from '@/utils/tensorflowImageClassifier';\n// Görüntü sınıflandırma sonuçlarını tutan reaktif bir dizi oluşturur\nconst classificationResults = ref([]);\n// Görüntü önizleme URL'sini tutan reaktif bir değişken oluşturur, başlangıçta placeholder bir URL ile ayarlanır\nconst previewImage = ref(\"\u003Chttps://placehold.co/600x600>\");\n// Görüntünün yüklenme durumunu takip eden reaktif bir boolean değişken oluşturur\nconst loadingImage = ref(false);\n// Vue.js'in defineEmits fonksiyonu ile bileşen içinde kullanılacak özel olayları tanımlar\nconst emit = defineEmits(['getResult', 'getProducts']);\n// Kullanıcının bir görüntü seçip seçmediğini kontrol eden hesaplanmış bir özellik oluşturur\nconst isImageSelected = computed(() => previewImage.value !== \"\u003Chttps://placehold.co/600x600>\");\n// Kullanıcının bir dosya seçtiğinde tetiklenecek olan olay işleyicisi fonksiyonu\nconst handleImageUpload = (event) => {\n const file = event.target.files[0]; // Seçilen dosyayı alır\n const image = new Image(); // Yeni bir HTML görüntü öğesi oluşturur\n const reader = new FileReader(); // Dosya okuma işlemleri için bir FileReader oluşturur\n// Dosya okuma işlemi başladığında\n reader.onloadstart = () => {\n previewImage.value = previewImage; // Önizleme görüntüsünü ayarlar (bu satırın doğru bir işlevi yok gibi görünüyor)\n loadingImage.value = true; // Görüntü yüklenme durumunu true olarak ayarlar\n };\n // Dosya okuma işlemi tamamlandığında\n reader.onloadend = () => {\n loadingImage.value = false; // Görüntü yüklenme durumunu false olarak ayarlar\n image.src = reader.result; // Görüntü öğesinin kaynağını okunan veriyle ayarlar\n previewImage.value = reader.result; // Önizleme görüntüsünü okunan veriyle ayarlar\n };\n // Dosyayı base64 formatına dönüştürerek okuma işlemini başlatır\n reader.readAsDataURL(file);\n};\n// Görüntü sınıflandırma işlemini başlatan olay işleyicisi fonksiyonu\nconst processImage = async () => {\n if (previewImage.value) { // Eğer bir önizleme görüntüsü mevcutsa\n const image = new Image(); // Yeni bir HTML görüntü öğesi oluşturur\n image.src = previewImage.value; // Görüntü öğesinin kaynağını önizleme görüntüsü URL'si ile ayarlar\n await loadModel(); // TensorFlow modelini yükler\n classificationResults.value = await classifyImage(image); // Görüntüyü sınıflandırır ve sonuçları classificationResults'a atar\n emit('getResult', classificationResults.value); // 'getResult' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n emit('getProducts', classificationResults.value); // 'getProducts' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n }\n};\n",[363,8588,8589,8593,8598,8602,8607,8611,8616,8620,8625,8629,8634,8638,8643,8647,8652,8656,8661,8666,8671,8676,8680,8685,8690,8694,8699,8703,8708,8713,8718,8722,8727,8731,8735,8740,8744,8749,8754,8759,8764,8769,8774,8779,8783],{"__ignoreMap":365},[1665,8590,8591],{"class":1667,"line":1668},[1665,8592,2744],{},[1665,8594,8595],{"class":1667,"line":779},[1665,8596,8597],{},"// tensorflowImageClassifier modülünden classifyImage ve loadModel fonksiyonlarını içeri aktarır\n",[1665,8599,8600],{"class":1667,"line":782},[1665,8601,2754],{},[1665,8603,8604],{"class":1667,"line":1718},[1665,8605,8606],{},"// Görüntü sınıflandırma sonuçlarını tutan reaktif bir dizi oluşturur\n",[1665,8608,8609],{"class":1667,"line":1724},[1665,8610,2764],{},[1665,8612,8613],{"class":1667,"line":1925},[1665,8614,8615],{},"// Görüntü önizleme URL'sini tutan reaktif bir değişken oluşturur, başlangıçta placeholder bir URL ile ayarlanır\n",[1665,8617,8618],{"class":1667,"line":2034},[1665,8619,2774],{},[1665,8621,8622],{"class":1667,"line":2040},[1665,8623,8624],{},"// Görüntünün yüklenme durumunu takip eden reaktif bir boolean değişken oluşturur\n",[1665,8626,8627],{"class":1667,"line":2046},[1665,8628,2784],{},[1665,8630,8631],{"class":1667,"line":2052},[1665,8632,8633],{},"// Vue.js'in defineEmits fonksiyonu ile bileşen içinde kullanılacak özel olayları tanımlar\n",[1665,8635,8636],{"class":1667,"line":2058},[1665,8637,2794],{},[1665,8639,8640],{"class":1667,"line":2064},[1665,8641,8642],{},"// Kullanıcının bir görüntü seçip seçmediğini kontrol eden hesaplanmış bir özellik oluşturur\n",[1665,8644,8645],{"class":1667,"line":2070},[1665,8646,2804],{},[1665,8648,8649],{"class":1667,"line":2076},[1665,8650,8651],{},"// Kullanıcının bir dosya seçtiğinde tetiklenecek olan olay işleyicisi fonksiyonu\n",[1665,8653,8654],{"class":1667,"line":2082},[1665,8655,2814],{},[1665,8657,8658],{"class":1667,"line":2088},[1665,8659,8660],{}," const file = event.target.files[0]; // Seçilen dosyayı alır\n",[1665,8662,8663],{"class":1667,"line":2094},[1665,8664,8665],{}," const image = new Image(); // Yeni bir HTML görüntü öğesi oluşturur\n",[1665,8667,8668],{"class":1667,"line":2305},[1665,8669,8670],{}," const reader = new FileReader(); // Dosya okuma işlemleri için bir FileReader oluşturur\n",[1665,8672,8673],{"class":1667,"line":2317},[1665,8674,8675],{},"// Dosya okuma işlemi başladığında\n",[1665,8677,8678],{"class":1667,"line":2329},[1665,8679,2839],{},[1665,8681,8682],{"class":1667,"line":2339},[1665,8683,8684],{}," previewImage.value = previewImage; // Önizleme görüntüsünü ayarlar (bu satırın doğru bir işlevi yok gibi görünüyor)\n",[1665,8686,8687],{"class":1667,"line":2345},[1665,8688,8689],{}," loadingImage.value = true; // Görüntü yüklenme durumunu true olarak ayarlar\n",[1665,8691,8692],{"class":1667,"line":2852},[1665,8693,2855],{},[1665,8695,8696],{"class":1667,"line":2858},[1665,8697,8698],{}," // Dosya okuma işlemi tamamlandığında\n",[1665,8700,8701],{"class":1667,"line":2864},[1665,8702,2867],{},[1665,8704,8705],{"class":1667,"line":2870},[1665,8706,8707],{}," loadingImage.value = false; // Görüntü yüklenme durumunu false olarak ayarlar\n",[1665,8709,8710],{"class":1667,"line":2876},[1665,8711,8712],{}," image.src = reader.result; // Görüntü öğesinin kaynağını okunan veriyle ayarlar\n",[1665,8714,8715],{"class":1667,"line":2882},[1665,8716,8717],{}," previewImage.value = reader.result; // Önizleme görüntüsünü okunan veriyle ayarlar\n",[1665,8719,8720],{"class":1667,"line":2888},[1665,8721,2855],{},[1665,8723,8724],{"class":1667,"line":2893},[1665,8725,8726],{}," // Dosyayı base64 formatına dönüştürerek okuma işlemini başlatır\n",[1665,8728,8729],{"class":1667,"line":2899},[1665,8730,2902],{},[1665,8732,8733],{"class":1667,"line":2905},[1665,8734,2908],{},[1665,8736,8737],{"class":1667,"line":2911},[1665,8738,8739],{},"// Görüntü sınıflandırma işlemini başlatan olay işleyicisi fonksiyonu\n",[1665,8741,8742],{"class":1667,"line":2917},[1665,8743,2920],{},[1665,8745,8746],{"class":1667,"line":2923},[1665,8747,8748],{}," if (previewImage.value) { // Eğer bir önizleme görüntüsü mevcutsa\n",[1665,8750,8751],{"class":1667,"line":2929},[1665,8752,8753],{}," const image = new Image(); // Yeni bir HTML görüntü öğesi oluşturur\n",[1665,8755,8756],{"class":1667,"line":2935},[1665,8757,8758],{}," image.src = previewImage.value; // Görüntü öğesinin kaynağını önizleme görüntüsü URL'si ile ayarlar\n",[1665,8760,8761],{"class":1667,"line":2941},[1665,8762,8763],{}," await loadModel(); // TensorFlow modelini yükler\n",[1665,8765,8766],{"class":1667,"line":2947},[1665,8767,8768],{}," classificationResults.value = await classifyImage(image); // Görüntüyü sınıflandırır ve sonuçları classificationResults'a atar\n",[1665,8770,8771],{"class":1667,"line":2953},[1665,8772,8773],{}," emit('getResult', classificationResults.value); // 'getResult' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n",[1665,8775,8776],{"class":1667,"line":2959},[1665,8777,8778],{}," emit('getProducts', classificationResults.value); // 'getProducts' olayını tetikler ve sonuçları üst düzey bileşenlere iletir\n",[1665,8780,8781],{"class":1667,"line":2965},[1665,8782,2342],{},[1665,8784,8785],{"class":1667,"line":2970},[1665,8786,2908],{},[48,8788,8789,8794,8799,8807,8815,8820],{},[51,8790,8791,8793],{},[21,8792,2979],{},": Görüntü sınıflandırma sonuçlarımızı tutan bir dizi.",[51,8795,8796,8798],{},[21,8797,2564],{},": Kullanıcının yüklediği veya seçtiği görüntünün önizleme URL'sini tutan bir dize. Başlangıçta, placeholder bir URL ile başlıyor.",[51,8800,8801,8803,8804,8806],{},[21,8802,2530],{},": Görüntünün yüklenme durumunu tutan bir boolean değeri. Başlangıçta ",[21,8805,2993],{}," olarak ayarlı daha sonra bunu fonksiyon içerisinde durumunu güncelliyoruz.",[51,8808,8809,8811,8812,8814],{},[21,8810,2690],{},", kullanıcının bir görüntü seçip seçmediğini kontrol eden ve bu duruma göre \"",[121,8813,3002],{},"\" butonunun etkin veya etkisiz olmasına karar verecek olan computed fonksiyonumuz. Burada preview URL’sinden farklı bir durum oluşuyorsa durumunu kontrol ediyoruz.",[51,8816,8817,8819],{},[21,8818,2643],{},": Bu fonksiyon, kullanıcının bir dosya seçtiğinde tetiklenir. Seçilen dosyanın içeriğini okur ve önizleme için kullanılabilecek bir görüntüye dönüştürür. Ayrıca, yükleme işlemi sırasında bir yükleniyor öğesini de loadingImage değerini true yaptığımız için gösterir.",[51,8821,8822,8824,8825,8827,8828,8831,8832,8834,8835,8837],{},[21,8823,2673],{},": Bu fonksiyon, sınıflandırma işlemini başlatır. Eğer önizleme için bir görüntü mevcutsa, önceden yüklenmiş bir modeli yükler ve sınıflandırma sonuçlarını ",[21,8826,2979],{}," değişkenine atar. Ayrıca, ",[21,8829,8830],{},"emit"," “",[121,8833,3019],{},"” ve “",[121,8836,3022],{},"” ile sonuçları bir üst View’e iletiyoruz. Burada getProducts bilgisini bir üst katmanda mockup datamız içinden ürünümüzü bulmak için kullanacağız.",[17,8839,8840],{},"Son olarak sonuçları göstereceğimiz ve sepet componentimizi de oluşturuyoruz.",[17,8842,8843],{},[121,8844,8845],{},[21,8846,2426],{},[356,8848,8850],{"className":2461,"code":8849,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\ndefineProps({\n labels: Array\n});\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"bg-white-800 dark:bg-gray-800 p-4 my-2 rounded shadow-md\">\n \u003Ch2 class=\"text-2xl text-slate-600 dark:text-slate-400 font-bold mb-4\">Classification Result\u003C/h2>\n \u003Cul>\n \u003Cli v-for=\"(result, index) in labels\" :key=\"index\" class=\"mb-2 p-2 border rounded\">\n \u003Cspan class=\"font-semibold text-slate-600 dark:text-slate-400\">{{ result.label }}\u003C/span> - {{ (result.probability).toFixed(2) }}\n \u003C/li>\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n",[363,8851,8852,8862,8868,8872,8876,8884,8888,8896,8910,8928,8936,8976,9002,9010,9018,9026],{"__ignoreMap":365},[1665,8853,8854,8856,8858,8860],{"class":1667,"line":1668},[1665,8855,2470],{"class":2173},[1665,8857,3041],{"class":2473},[1665,8859,3044],{"class":1671},[1665,8861,2477],{"class":2173},[1665,8863,8864,8866],{"class":1667,"line":779},[1665,8865,3051],{"class":1671},[1665,8867,3054],{"class":2173},[1665,8869,8870],{"class":1667,"line":782},[1665,8871,3059],{"class":2173},[1665,8873,8874],{"class":1667,"line":1718},[1665,8875,3064],{"class":2173},[1665,8877,8878,8880,8882],{"class":1667,"line":1724},[1665,8879,2713],{"class":2173},[1665,8881,3041],{"class":2473},[1665,8883,2477],{"class":2173},[1665,8885,8886],{"class":1667,"line":1925},[1665,8887,3568],{"emptyLinePlaceholder":807},[1665,8889,8890,8892,8894],{"class":1667,"line":2034},[1665,8891,2470],{"class":2173},[1665,8893,2474],{"class":2473},[1665,8895,2477],{"class":2173},[1665,8897,8898,8900,8902,8904,8906,8908],{"class":1667,"line":2040},[1665,8899,2482],{"class":2173},[1665,8901,1599],{"class":2473},[1665,8903,2487],{"class":1671},[1665,8905,2490],{"class":2173},[1665,8907,3093],{"class":1675},[1665,8909,2477],{"class":2173},[1665,8911,8912,8914,8916,8918,8920,8922,8924,8926],{"class":1667,"line":2046},[1665,8913,2500],{"class":2173},[1665,8915,889],{"class":2473},[1665,8917,2487],{"class":1671},[1665,8919,2490],{"class":2173},[1665,8921,3108],{"class":1675},[1665,8923,3111],{"class":2173},[1665,8925,889],{"class":2473},[1665,8927,2477],{"class":2173},[1665,8929,8930,8932,8934],{"class":1667,"line":2052},[1665,8931,2500],{"class":2173},[1665,8933,48],{"class":2473},[1665,8935,2477],{"class":2173},[1665,8937,8938,8940,8942,8944,8946,8948,8950,8952,8954,8956,8958,8960,8962,8964,8966,8968,8970,8972,8974],{"class":1667,"line":2058},[1665,8939,2516],{"class":2173},[1665,8941,51],{"class":2473},[1665,8943,3132],{"class":2521},[1665,8945,2490],{"class":2173},[1665,8947,2527],{"class":1675},[1665,8949,3139],{"class":2173},[1665,8951,3142],{"class":2521},[1665,8953,3145],{"class":2173},[1665,8955,2527],{"class":1675},[1665,8957,2555],{"class":2173},[1665,8959,3152],{"class":1671},[1665,8961,2490],{"class":2173},[1665,8963,2527],{"class":1675},[1665,8965,3159],{"class":2173},[1665,8967,2527],{"class":1675},[1665,8969,2487],{"class":1671},[1665,8971,2490],{"class":2173},[1665,8973,3168],{"class":1675},[1665,8975,2477],{"class":2173},[1665,8977,8978,8980,8982,8984,8986,8988,8990,8992,8994,8996,8998,9000],{"class":1667,"line":2064},[1665,8979,3175],{"class":2173},[1665,8981,1665],{"class":2473},[1665,8983,2487],{"class":1671},[1665,8985,2490],{"class":2173},[1665,8987,3184],{"class":1675},[1665,8989,3187],{"class":2173},[1665,8991,1665],{"class":2473},[1665,8993,3192],{"class":2173},[1665,8995,3195],{"class":1671},[1665,8997,3198],{"class":2173},[1665,8999,3201],{"class":1685},[1665,9001,3204],{"class":2173},[1665,9003,9004,9006,9008],{"class":1667,"line":2070},[1665,9005,3209],{"class":2173},[1665,9007,51],{"class":2473},[1665,9009,2477],{"class":2173},[1665,9011,9012,9014,9016],{"class":1667,"line":2076},[1665,9013,2589],{"class":2173},[1665,9015,48],{"class":2473},[1665,9017,2477],{"class":2173},[1665,9019,9020,9022,9024],{"class":1667,"line":2082},[1665,9021,2704],{"class":2173},[1665,9023,1599],{"class":2473},[1665,9025,2477],{"class":2173},[1665,9027,9028,9030,9032],{"class":1667,"line":2088},[1665,9029,2713],{"class":2173},[1665,9031,2474],{"class":2473},[1665,9033,2477],{"class":2173},[17,9035,9036],{},"Componentimiz de yüksek oranlı 3 ihtimallerimizi ekrana göstereceğiz. Burada 3 tane olmasının sebebi classifyImage fonksiyonumuzda slice(0,3) ile en yüksek 3 değeri alıyor olmamızdan kaynaklı. Örnek olarak, slice(0,5) olsaydı en yüksek ilk 5 ihtimali görecektik.",[17,9038,9039],{},[121,9040,9041],{},[21,9042,2429],{},[356,9044,9045],{"className":2461,"code":3261,"language":2463,"meta":365,"style":365},[363,9046,9047,9057,9063,9067,9071,9079,9087,9101,9119,9159,9167,9185,9193,9207,9225,9233,9241,9249],{"__ignoreMap":365},[1665,9048,9049,9051,9053,9055],{"class":1667,"line":1668},[1665,9050,2470],{"class":2173},[1665,9052,3041],{"class":2473},[1665,9054,3044],{"class":1671},[1665,9056,2477],{"class":2173},[1665,9058,9059,9061],{"class":1667,"line":779},[1665,9060,3051],{"class":1671},[1665,9062,3054],{"class":2173},[1665,9064,9065],{"class":1667,"line":782},[1665,9066,3284],{"class":2173},[1665,9068,9069],{"class":1667,"line":1718},[1665,9070,3064],{"class":2173},[1665,9072,9073,9075,9077],{"class":1667,"line":1724},[1665,9074,2713],{"class":2173},[1665,9076,3041],{"class":2473},[1665,9078,2477],{"class":2173},[1665,9080,9081,9083,9085],{"class":1667,"line":1925},[1665,9082,2470],{"class":2173},[1665,9084,2474],{"class":2473},[1665,9086,2477],{"class":2173},[1665,9088,9089,9091,9093,9095,9097,9099],{"class":1667,"line":2034},[1665,9090,2482],{"class":2173},[1665,9092,1599],{"class":2473},[1665,9094,2487],{"class":1671},[1665,9096,2490],{"class":2173},[1665,9098,3317],{"class":1675},[1665,9100,2477],{"class":2173},[1665,9102,9103,9105,9107,9109,9111,9113,9115,9117],{"class":1667,"line":2040},[1665,9104,2500],{"class":2173},[1665,9106,889],{"class":2473},[1665,9108,2487],{"class":1671},[1665,9110,2490],{"class":2173},[1665,9112,3332],{"class":1675},[1665,9114,3335],{"class":2173},[1665,9116,889],{"class":2473},[1665,9118,2477],{"class":2173},[1665,9120,9121,9123,9125,9127,9129,9131,9133,9135,9137,9139,9141,9143,9145,9147,9149,9151,9153,9155,9157],{"class":1667,"line":2046},[1665,9122,2500],{"class":2173},[1665,9124,1599],{"class":2473},[1665,9126,2487],{"class":1671},[1665,9128,2490],{"class":2173},[1665,9130,3352],{"class":1675},[1665,9132,3132],{"class":2521},[1665,9134,2490],{"class":2173},[1665,9136,2527],{"class":1675},[1665,9138,3361],{"class":2173},[1665,9140,3142],{"class":2521},[1665,9142,3366],{"class":2173},[1665,9144,2527],{"class":1675},[1665,9146,2555],{"class":2173},[1665,9148,3152],{"class":1671},[1665,9150,2490],{"class":2173},[1665,9152,2527],{"class":1675},[1665,9154,3379],{"class":2173},[1665,9156,2527],{"class":1675},[1665,9158,2477],{"class":2173},[1665,9160,9161,9163,9165],{"class":1667,"line":2052},[1665,9162,2516],{"class":2173},[1665,9164,1599],{"class":2473},[1665,9166,2477],{"class":2173},[1665,9168,9169,9171,9173,9175,9177,9179,9181,9183],{"class":1667,"line":2058},[1665,9170,3175],{"class":2173},[1665,9172,40],{"class":2473},[1665,9174,2487],{"class":1671},[1665,9176,2490],{"class":2173},[1665,9178,3404],{"class":1675},[1665,9180,3407],{"class":2173},[1665,9182,40],{"class":2473},[1665,9184,2477],{"class":2173},[1665,9186,9187,9189,9191],{"class":1667,"line":2064},[1665,9188,3209],{"class":2173},[1665,9190,1599],{"class":2473},[1665,9192,2477],{"class":2173},[1665,9194,9195,9197,9199,9201,9203,9205],{"class":1667,"line":2070},[1665,9196,2516],{"class":2173},[1665,9198,1599],{"class":2473},[1665,9200,2487],{"class":1671},[1665,9202,2490],{"class":2173},[1665,9204,3432],{"class":1675},[1665,9206,2477],{"class":2173},[1665,9208,9209,9211,9213,9215,9217,9219,9221,9223],{"class":1667,"line":2076},[1665,9210,3175],{"class":2173},[1665,9212,1665],{"class":2473},[1665,9214,2487],{"class":1671},[1665,9216,2490],{"class":2173},[1665,9218,3447],{"class":1675},[1665,9220,3450],{"class":2173},[1665,9222,1665],{"class":2473},[1665,9224,2477],{"class":2173},[1665,9226,9227,9229,9231],{"class":1667,"line":2082},[1665,9228,3209],{"class":2173},[1665,9230,1599],{"class":2473},[1665,9232,2477],{"class":2173},[1665,9234,9235,9237,9239],{"class":1667,"line":2088},[1665,9236,2589],{"class":2173},[1665,9238,1599],{"class":2473},[1665,9240,2477],{"class":2173},[1665,9242,9243,9245,9247],{"class":1667,"line":2094},[1665,9244,2704],{"class":2173},[1665,9246,1599],{"class":2473},[1665,9248,2477],{"class":2173},[1665,9250,9251,9253,9255],{"class":1667,"line":2305},[1665,9252,2713],{"class":2173},[1665,9254,2474],{"class":2473},[1665,9256,2477],{"class":2173},[17,9258,9259],{},"Bu componentimiz de ise temel senaryomuzun çıkış noktası olan ürünü bulduktan sonra ve bunu sepete eklediğimiz senaryoyu içeriyor. Burada bir üst katmanımız olan HomeView.vue katmanında ürünü bulup bu componentimize bilgilerini gönderip gösterimini yapıyoruz.",[17,9261,9262],{},[121,9263,9264],{},[21,9265,2439],{},[356,9267,9268],{"className":2461,"code":3501,"language":2463,"meta":365,"style":365},[363,9269,9270,9280,9290,9300,9310,9320,9324,9336,9348,9366,9374,9378,9396,9404,9408,9416,9424,9456,9492,9528],{"__ignoreMap":365},[1665,9271,9272,9274,9276,9278],{"class":1667,"line":1668},[1665,9273,2470],{"class":2173},[1665,9275,3041],{"class":2473},[1665,9277,3044],{"class":1671},[1665,9279,2477],{"class":2173},[1665,9281,9282,9284,9286,9288],{"class":1667,"line":779},[1665,9283,3518],{"class":2521},[1665,9285,3521],{"class":2173},[1665,9287,3524],{"class":2521},[1665,9289,3527],{"class":1675},[1665,9291,9292,9294,9296,9298],{"class":1667,"line":782},[1665,9293,3518],{"class":2521},[1665,9295,3534],{"class":2173},[1665,9297,3524],{"class":2521},[1665,9299,3539],{"class":1675},[1665,9301,9302,9304,9306,9308],{"class":1667,"line":1718},[1665,9303,3518],{"class":2521},[1665,9305,3546],{"class":2173},[1665,9307,3524],{"class":2521},[1665,9309,3551],{"class":1675},[1665,9311,9312,9314,9316,9318],{"class":1667,"line":1724},[1665,9313,3518],{"class":2521},[1665,9315,3558],{"class":2173},[1665,9317,3524],{"class":2521},[1665,9319,3563],{"class":1675},[1665,9321,9322],{"class":1667,"line":1925},[1665,9323,3568],{"emptyLinePlaceholder":807},[1665,9325,9326,9328,9330,9332,9334],{"class":1667,"line":2034},[1665,9327,3573],{"class":2521},[1665,9329,3576],{"class":1685},[1665,9331,3579],{"class":2521},[1665,9333,3582],{"class":1671},[1665,9335,3585],{"class":2173},[1665,9337,9338,9340,9342,9344,9346],{"class":1667,"line":2040},[1665,9339,3573],{"class":2521},[1665,9341,3366],{"class":1685},[1665,9343,3579],{"class":2521},[1665,9345,3582],{"class":1671},[1665,9347,3585],{"class":2173},[1665,9349,9350,9352,9354,9356,9358,9360,9362,9364],{"class":1667,"line":2046},[1665,9351,3573],{"class":2521},[1665,9353,3604],{"class":1671},[1665,9355,3579],{"class":2521},[1665,9357,3609],{"class":2173},[1665,9359,3613],{"class":3612},[1665,9361,3616],{"class":2173},[1665,9363,3619],{"class":2521},[1665,9365,3622],{"class":2173},[1665,9367,9368,9370,9372],{"class":1667,"line":2052},[1665,9369,3627],{"class":2173},[1665,9371,2490],{"class":2521},[1665,9373,3632],{"class":2173},[1665,9375,9376],{"class":1667,"line":2058},[1665,9377,1928],{"class":2173},[1665,9379,9380,9382,9384,9386,9388,9390,9392,9394],{"class":1667,"line":2064},[1665,9381,3573],{"class":2521},[1665,9383,3643],{"class":1671},[1665,9385,3579],{"class":2521},[1665,9387,3609],{"class":2173},[1665,9389,3613],{"class":3612},[1665,9391,3616],{"class":2173},[1665,9393,3619],{"class":2521},[1665,9395,3622],{"class":2173},[1665,9397,9398,9400,9402],{"class":1667,"line":2070},[1665,9399,3660],{"class":2173},[1665,9401,2490],{"class":2521},[1665,9403,3665],{"class":2173},[1665,9405,9406],{"class":1667,"line":2076},[1665,9407,2908],{"class":2173},[1665,9409,9410,9412,9414],{"class":1667,"line":2082},[1665,9411,2713],{"class":2173},[1665,9413,3041],{"class":2473},[1665,9415,2477],{"class":2173},[1665,9417,9418,9420,9422],{"class":1667,"line":2088},[1665,9419,2470],{"class":2173},[1665,9421,2474],{"class":2473},[1665,9423,2477],{"class":2173},[1665,9425,9426,9428,9430,9432,9434,9436,9438,9440,9442,9444,9446,9448,9450,9452,9454],{"class":1667,"line":2094},[1665,9427,2482],{"class":2173},[1665,9429,3692],{"class":2473},[1665,9431,2633],{"class":2173},[1665,9433,3019],{"class":1671},[1665,9435,2490],{"class":2173},[1665,9437,2527],{"class":1675},[1665,9439,3019],{"class":2173},[1665,9441,2527],{"class":1675},[1665,9443,2633],{"class":2173},[1665,9445,3022],{"class":1671},[1665,9447,2490],{"class":2173},[1665,9449,2527],{"class":1675},[1665,9451,3022],{"class":2173},[1665,9453,2527],{"class":1675},[1665,9455,2584],{"class":2173},[1665,9457,9458,9460,9462,9464,9466,9468,9470,9472,9474,9476,9478,9480,9482,9484,9486,9488,9490],{"class":1667,"line":2305},[1665,9459,2482],{"class":2173},[1665,9461,3725],{"class":2473},[1665,9463,2522],{"class":2521},[1665,9465,2490],{"class":2173},[1665,9467,2527],{"class":1675},[1665,9469,3734],{"class":2173},[1665,9471,3737],{"class":1685},[1665,9473,3740],{"class":2521},[1665,9475,3743],{"class":1685},[1665,9477,2527],{"class":1675},[1665,9479,2555],{"class":2173},[1665,9481,1876],{"class":1671},[1665,9483,2490],{"class":2173},[1665,9485,2527],{"class":1675},[1665,9487,2979],{"class":2173},[1665,9489,2527],{"class":1675},[1665,9491,2584],{"class":2173},[1665,9493,9494,9496,9498,9500,9502,9504,9506,9508,9510,9512,9514,9516,9518,9520,9522,9524,9526],{"class":1667,"line":2317},[1665,9495,2482],{"class":2173},[1665,9497,3766],{"class":2473},[1665,9499,2522],{"class":2521},[1665,9501,2490],{"class":2173},[1665,9503,2527],{"class":1675},[1665,9505,3734],{"class":2173},[1665,9507,3737],{"class":1685},[1665,9509,3740],{"class":2521},[1665,9511,3743],{"class":1685},[1665,9513,2527],{"class":1675},[1665,9515,2555],{"class":2173},[1665,9517,3787],{"class":1671},[1665,9519,2490],{"class":2173},[1665,9521,2527],{"class":1675},[1665,9523,3787],{"class":2173},[1665,9525,2527],{"class":1675},[1665,9527,2584],{"class":2173},[1665,9529,9530,9532,9534],{"class":1667,"line":2329},[1665,9531,2713],{"class":2173},[1665,9533,2474],{"class":2473},[1665,9535,2477],{"class":2173},[17,9537,9538,9539,9541,9542,9545,9546,9550],{},"Ve componentlerimizi ",[21,9540,2439],{},"’de çağırdıktan sonra görselimizde ki görünümü elde ediyoruz. Eğer ki görünümünüz de farkılıklar yada eksik anlatılmış yerler var ise ",[54,9543,3816],{"href":3814,"rel":9544},[58]," repo üzerinden kontrol edebilir. Yada direkt olarak repoyu bilgisayarınıza indirebilirsiniz. Veya isterseniz ",[54,9547,9549],{"href":3820,"rel":9548},[58],"TF.js with Vue3 Vercel"," üzerinden deneyebilirsiniz.",[17,9552,9553],{},[36,9554],{"alt":9555,"src":3828},"TensorFlow.js Sayfa Gösterimi",[17,9557,9558,9559,9562],{},"Tüm bu aşamaları tamamladığımıza göre gelelim projemizi test etmeye. Ben örnek olarak Google’a “",[121,9560,9561],{},"French Loaf","” yazarak çıkan görsellerinden birisini tercih ettim çünkü ImageNet etiketlerinin içerisinde mevcut. Ve Mockup Datamız içerisinde tanımlamasını yaptık.",[17,9564,9565],{},[36,9566],{"alt":9567,"src":3844},"TensorFlow.js Sınıflandıma",[17,9569,9570,9571,9573],{},"Resmimizi seçip yükledikten sonra “",[121,9572,3850],{},"” butonumuza basıyoruz. Ve yüksek oranlı ilk 3 tahminimizi gösteriyoruz ve sepetimize ürünü otomatik olarak ekliyoruz.",[1817,9575],{"src":3854,"width":1820,"height":1820,"style":365,"frameBorder":1821,"className":9576,"allowFullScreen":807},[1823],[17,9578,9579],{},[36,9580],{"alt":9581,"src":3861},"TensorFlow.js Sonuçlar",[17,9583,9584,9585,9587],{},"Gördüğümüz üzere projede ",[21,9586,1556],{}," kullanarak basit bir Nesne Tanımlama ve Sepete ekleme senaryosunu gerçekleştirdik. Ve bu sayede aslında nasıl basit bir şekilde yapay zeka ve araçlarını projelerimize yada günlük senaryolarımıza nasıl ekleyebileceğimizi görmüş olduk.",[17,9589,9590,9591,9593],{},"Bu yazımda ",[21,9592,1556],{}," kullanımı, kurulumunun basit bir senaryo ile nasıl faydalı olacağına dair örnekler yaparak sizlere anlatmaya çalıştım.",[17,9595,9596,9600,9601,9604,9605,3889],{},[54,9597,201],{"href":9598,"rel":9599},"https://medium.com/@eralpozcan/tensorflow-js-ve-vue-3-ile-nesne-s%C4%B1n%C4%B1fland%C4%B1rma-nas%C4%B1l-yap%C4%B1l%C4%B1r-999cdcdce9d9",[58]," yazımı okuduktan sonra ",[54,9602,750],{"href":748,"rel":9603},[58]," hesabımdan sorularınız yada önerileriniz var ise ulaşabilirsiniz. Diğer hesaplarım için ise ",[54,9606,756],{"href":754,"rel":9607},[58],[17,9609,9610],{},"Bir sonraki yazımda görüşmek üzere 📩",[3893,9612,3895],{},{"title":365,"searchDepth":779,"depth":779,"links":9614},[9615,9616,9618,9619,9620,9621,9622],{"id":7673,"depth":782,"text":7676},{"id":7747,"depth":782,"text":9617},"📌Opsiyonel Yükleme",{"id":7813,"depth":779,"text":7814},{"id":7857,"depth":779,"text":7858},{"id":7954,"depth":779,"text":7955},{"id":8081,"depth":779,"text":8082},{"id":8314,"depth":779,"text":8315,"children":9623},[9624,9625],{"id":8350,"depth":782,"text":8353},{"id":8574,"depth":782,"text":8577},"Son yıllarda çok aktif olarak yapay zeka ve bunun ürünleri hayatımızda yer etmeye başladı ve giderek bunların da sayısı artıyor. Hepimizin aklında bunu nasıl hayatımda kullanabilirim sorusu mevcut, bu yazıda sizlerle beraber TensorFlow.js ile ImageNet sınıflarını ve MobileNet-v2 modelini kullanarak basit bir obje/nesne tanıyan ve bunu sepete ekleyen bir uygulama yapacağız. Böylelikle Amazon Go’nun temel çalışma prensibinde bir senaryosunu da gerçekleştirmiş olacağız. Hadi başlayalım 🚀",{"card_description":9628,"cover":3915,"language":4492,"links":9629},"Yapay zeka günlük hayatımıza giderek daha fazla entegre oluyor ve pratik kullanım alanları ortaya çıkıyor. Bu yazıda, TensorFlow.js ve MobileNet-v2 modeli kullanarak nesneleri tanıyan ve sepete ekleyen basit bir uygulama nasıl yapılacağını göstereceğim. Amazon Go'yu taklit eden bir deneyim yaşayalım. Başlıyoruz! 🚀",[9630],{"medium":9598},"/blog/tensorflow-js-ve-vue-3-ile-nesne-siniflandirma-nasil-yapilir",{"title":7599,"description":9626},{"loc":9634,"lastmod":3911,"changefreq":813,"priority":814},"http://eralpozcan.dev/blog/tensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır","blog/tensorflow-js-ve-vue-3-ile-nesne-sınıflandırma-nasıl-yapılır",[1556,3928,9637,3930,9638,3932,3933],"Makine Öğrenmesi","Nesne Tanıma","luwRmCCl_3CkYnzKIOb4n_rwELNyDIBL6LpiXDe767M",{"id":9641,"title":9642,"body":9643,"date":11476,"description":11477,"extension":797,"head":798,"image":798,"meta":11478,"navigation":807,"ogImage":798,"path":11480,"readingTime":11481,"robots":798,"schemaOrg":798,"seo":11482,"sitemap":11483,"stem":11484,"tags":11485,"__hash__":11487},"blog/blog/vue-js-composition-api-rehberi.md","Vue.js Composition API: Kapsamlı Rehber",{"type":9,"value":9644,"toc":11456},[9645,9648,9651,9655,9658,9662,9688,9692,9696,9703,9914,9918,9925,10079,10083,10087,10093,10136,10142,10194,10198,10203,10245,10250,10310,10314,10321,10404,10408,10411,10494,10497,10572,10576,11378,11380,11416,11418,11421,11423,11446,11448,11453],[12,9646,9642],{"id":9647},"vuejs-composition-api-kapsamlı-rehber",[17,9649,9650],{},"Vue 3 ile birlikte gelen Composition API, Vue.js'de component logic'i organize etmenin yeni ve güçlü bir yolunu sunuyor. Bu yazıda Composition API'nin temellerinden ileri seviye kullanımına kadar her şeyi ele alacağız.",[889,9652,9654],{"id":9653},"composition-api-nedir","Composition API Nedir?",[17,9656,9657],{},"Composition API, Vue bileşenlerinde mantığı organize etmek için function-based bir yaklaşım sunar. Options API'ye alternatif olarak geliştirilmiş ve özellikle büyük projelerde kod tekrarını azaltır ve mantığı daha iyi organize etmeyi sağlar.",[40,9659,9661],{"id":9660},"temel-avantajları","Temel Avantajları",[48,9663,9664,9670,9676,9682],{},[51,9665,9666,9669],{},[21,9667,9668],{},"Daha İyi Logic Reuse",": Mantığı farklı bileşenler arasında kolayca paylaşabilirsiniz",[51,9671,9672,9675],{},[21,9673,9674],{},"TypeScript Desteği",": Daha iyi tip güvenliği",[51,9677,9678,9681],{},[21,9679,9680],{},"Daha Esnek Organizasyon",": İlgili mantığı bir arada tutabilirsiniz",[51,9683,9684,9687],{},[21,9685,9686],{},"Tree-shaking",": Kullanılmayan kodları otomatik olarak temizler",[889,9689,9691],{"id":9690},"temel-kullanım","Temel Kullanım",[40,9693,9695],{"id":9694},"setup-fonksiyonu","setup() Fonksiyonu",[17,9697,9698,9699,9702],{},"Composition API'nin kalbi ",[363,9700,9701],{},"setup()"," fonksiyonudur:",[356,9704,9706],{"className":2461,"code":9705,"language":2463,"meta":365,"style":365},"\u003Ctemplate>\n \u003Cdiv>\n \u003Cp>{{ count }}\u003C/p>\n \u003Cbutton @click=\"increment\">Artır\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nimport { ref } from 'vue'\n\nexport default {\n setup() {\n const count = ref(0)\n \n const increment = () => {\n count.value++\n }\n \n return {\n count,\n increment\n }\n }\n}\n\u003C/script>\n",[363,9707,9708,9716,9724,9737,9763,9771,9779,9783,9791,9801,9805,9813,9821,9839,9844,9860,9868,9873,9877,9884,9889,9894,9898,9902,9906],{"__ignoreMap":365},[1665,9709,9710,9712,9714],{"class":1667,"line":1668},[1665,9711,2470],{"class":2173},[1665,9713,2474],{"class":2473},[1665,9715,2477],{"class":2173},[1665,9717,9718,9720,9722],{"class":1667,"line":779},[1665,9719,2482],{"class":2173},[1665,9721,1599],{"class":2473},[1665,9723,2477],{"class":2173},[1665,9725,9726,9728,9730,9733,9735],{"class":1667,"line":782},[1665,9727,2500],{"class":2173},[1665,9729,17],{"class":2473},[1665,9731,9732],{"class":2173},">{{ count }}\u003C/",[1665,9734,17],{"class":2473},[1665,9736,2477],{"class":2173},[1665,9738,9739,9741,9743,9745,9747,9749,9751,9754,9756,9759,9761],{"class":1667,"line":1718},[1665,9740,2500],{"class":2173},[1665,9742,2654],{"class":2473},[1665,9744,2633],{"class":2173},[1665,9746,2666],{"class":1671},[1665,9748,2490],{"class":2173},[1665,9750,2527],{"class":1675},[1665,9752,9753],{"class":2173},"increment",[1665,9755,2527],{"class":1675},[1665,9757,9758],{"class":2173},">Artır\u003C/",[1665,9760,2654],{"class":2473},[1665,9762,2477],{"class":2173},[1665,9764,9765,9767,9769],{"class":1667,"line":1724},[1665,9766,2704],{"class":2173},[1665,9768,1599],{"class":2473},[1665,9770,2477],{"class":2173},[1665,9772,9773,9775,9777],{"class":1667,"line":1925},[1665,9774,2713],{"class":2173},[1665,9776,2474],{"class":2473},[1665,9778,2477],{"class":2173},[1665,9780,9781],{"class":1667,"line":2034},[1665,9782,3568],{"emptyLinePlaceholder":807},[1665,9784,9785,9787,9789],{"class":1667,"line":2040},[1665,9786,2470],{"class":2173},[1665,9788,3041],{"class":2473},[1665,9790,2477],{"class":2173},[1665,9792,9793,9795,9797,9799],{"class":1667,"line":2046},[1665,9794,3518],{"class":2521},[1665,9796,3521],{"class":2173},[1665,9798,3524],{"class":2521},[1665,9800,3527],{"class":1675},[1665,9802,9803],{"class":1667,"line":2052},[1665,9804,3568],{"emptyLinePlaceholder":807},[1665,9806,9807,9809,9811],{"class":1667,"line":2058},[1665,9808,4831],{"class":2521},[1665,9810,4834],{"class":2521},[1665,9812,3622],{"class":2173},[1665,9814,9815,9818],{"class":1667,"line":2064},[1665,9816,9817],{"class":1671}," setup",[1665,9819,9820],{"class":2173},"() {\n",[1665,9822,9823,9826,9829,9831,9833,9835,9837],{"class":1667,"line":2070},[1665,9824,9825],{"class":2521}," const",[1665,9827,9828],{"class":1685}," count",[1665,9830,3579],{"class":2521},[1665,9832,3582],{"class":1671},[1665,9834,3198],{"class":2173},[1665,9836,1821],{"class":1685},[1665,9838,5154],{"class":2173},[1665,9840,9841],{"class":1667,"line":2076},[1665,9842,9843],{"class":2173}," \n",[1665,9845,9846,9848,9851,9853,9856,9858],{"class":1667,"line":2082},[1665,9847,9825],{"class":2521},[1665,9849,9850],{"class":1671}," increment",[1665,9852,3579],{"class":2521},[1665,9854,9855],{"class":2173}," () ",[1665,9857,3619],{"class":2521},[1665,9859,3622],{"class":2173},[1665,9861,9862,9865],{"class":1667,"line":2088},[1665,9863,9864],{"class":2173}," count.value",[1665,9866,9867],{"class":2521},"++\n",[1665,9869,9870],{"class":1667,"line":2094},[1665,9871,9872],{"class":2173}," }\n",[1665,9874,9875],{"class":1667,"line":2305},[1665,9876,9843],{"class":2173},[1665,9878,9879,9882],{"class":1667,"line":2317},[1665,9880,9881],{"class":2521}," return",[1665,9883,3622],{"class":2173},[1665,9885,9886],{"class":1667,"line":2329},[1665,9887,9888],{"class":2173}," count,\n",[1665,9890,9891],{"class":1667,"line":2339},[1665,9892,9893],{"class":2173}," increment\n",[1665,9895,9896],{"class":1667,"line":2345},[1665,9897,9872],{"class":2173},[1665,9899,9900],{"class":1667,"line":2852},[1665,9901,2342],{"class":2173},[1665,9903,9904],{"class":1667,"line":2858},[1665,9905,1928],{"class":2173},[1665,9907,9908,9910,9912],{"class":1667,"line":2864},[1665,9909,2713],{"class":2173},[1665,9911,3041],{"class":2473},[1665,9913,2477],{"class":2173},[40,9915,9917],{"id":9916},"script-setup-syntax","Script Setup Syntax",[17,9919,9920,9921,9924],{},"Daha kısa syntax için ",[363,9922,9923],{},"\u003Cscript setup>"," kullanabilirsiniz:",[356,9926,9928],{"className":2461,"code":9927,"language":2463,"meta":365,"style":365},"\u003Ctemplate>\n \u003Cdiv>\n \u003Cp>{{ count }}\u003C/p>\n \u003Cbutton @click=\"increment\">Artır\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nconst increment = () => {\n count.value++\n}\n\u003C/script>\n",[363,9929,9930,9938,9946,9958,9982,9990,9998,10002,10012,10022,10026,10042,10046,10060,10067,10071],{"__ignoreMap":365},[1665,9931,9932,9934,9936],{"class":1667,"line":1668},[1665,9933,2470],{"class":2173},[1665,9935,2474],{"class":2473},[1665,9937,2477],{"class":2173},[1665,9939,9940,9942,9944],{"class":1667,"line":779},[1665,9941,2482],{"class":2173},[1665,9943,1599],{"class":2473},[1665,9945,2477],{"class":2173},[1665,9947,9948,9950,9952,9954,9956],{"class":1667,"line":782},[1665,9949,2500],{"class":2173},[1665,9951,17],{"class":2473},[1665,9953,9732],{"class":2173},[1665,9955,17],{"class":2473},[1665,9957,2477],{"class":2173},[1665,9959,9960,9962,9964,9966,9968,9970,9972,9974,9976,9978,9980],{"class":1667,"line":1718},[1665,9961,2500],{"class":2173},[1665,9963,2654],{"class":2473},[1665,9965,2633],{"class":2173},[1665,9967,2666],{"class":1671},[1665,9969,2490],{"class":2173},[1665,9971,2527],{"class":1675},[1665,9973,9753],{"class":2173},[1665,9975,2527],{"class":1675},[1665,9977,9758],{"class":2173},[1665,9979,2654],{"class":2473},[1665,9981,2477],{"class":2173},[1665,9983,9984,9986,9988],{"class":1667,"line":1724},[1665,9985,2704],{"class":2173},[1665,9987,1599],{"class":2473},[1665,9989,2477],{"class":2173},[1665,9991,9992,9994,9996],{"class":1667,"line":1925},[1665,9993,2713],{"class":2173},[1665,9995,2474],{"class":2473},[1665,9997,2477],{"class":2173},[1665,9999,10000],{"class":1667,"line":2034},[1665,10001,3568],{"emptyLinePlaceholder":807},[1665,10003,10004,10006,10008,10010],{"class":1667,"line":2040},[1665,10005,2470],{"class":2173},[1665,10007,3041],{"class":2473},[1665,10009,3044],{"class":1671},[1665,10011,2477],{"class":2173},[1665,10013,10014,10016,10018,10020],{"class":1667,"line":2046},[1665,10015,3518],{"class":2521},[1665,10017,3521],{"class":2173},[1665,10019,3524],{"class":2521},[1665,10021,3527],{"class":1675},[1665,10023,10024],{"class":1667,"line":2052},[1665,10025,3568],{"emptyLinePlaceholder":807},[1665,10027,10028,10030,10032,10034,10036,10038,10040],{"class":1667,"line":2058},[1665,10029,3573],{"class":2521},[1665,10031,9828],{"class":1685},[1665,10033,3579],{"class":2521},[1665,10035,3582],{"class":1671},[1665,10037,3198],{"class":2173},[1665,10039,1821],{"class":1685},[1665,10041,5154],{"class":2173},[1665,10043,10044],{"class":1667,"line":2064},[1665,10045,3568],{"emptyLinePlaceholder":807},[1665,10047,10048,10050,10052,10054,10056,10058],{"class":1667,"line":2070},[1665,10049,3573],{"class":2521},[1665,10051,9850],{"class":1671},[1665,10053,3579],{"class":2521},[1665,10055,9855],{"class":2173},[1665,10057,3619],{"class":2521},[1665,10059,3622],{"class":2173},[1665,10061,10062,10065],{"class":1667,"line":2076},[1665,10063,10064],{"class":2173}," count.value",[1665,10066,9867],{"class":2521},[1665,10068,10069],{"class":1667,"line":2082},[1665,10070,1928],{"class":2173},[1665,10072,10073,10075,10077],{"class":1667,"line":2088},[1665,10074,2713],{"class":2173},[1665,10076,3041],{"class":2473},[1665,10078,2477],{"class":2173},[889,10080,10082],{"id":10081},"reactivity-fundamentals","Reactivity Fundamentals",[40,10084,10086],{"id":10085},"ref-vs-reactive","ref() vs reactive()",[17,10088,10089,10092],{},[21,10090,10091],{},"ref()"," - Primitive değerler için:",[356,10094,10096],{"className":1836,"code":10095,"language":1838,"meta":365,"style":365},"import { ref } from 'vue'\n\nconst count = ref(0)\nconst message = ref('Merhaba')\n\n// Değere erişim\nconsole.log(count.value) // 0\ncount.value = 1\n",[363,10097,10098,10103,10107,10112,10117,10121,10126,10131],{"__ignoreMap":365},[1665,10099,10100],{"class":1667,"line":1668},[1665,10101,10102],{},"import { ref } from 'vue'\n",[1665,10104,10105],{"class":1667,"line":779},[1665,10106,3568],{"emptyLinePlaceholder":807},[1665,10108,10109],{"class":1667,"line":782},[1665,10110,10111],{},"const count = ref(0)\n",[1665,10113,10114],{"class":1667,"line":1718},[1665,10115,10116],{},"const message = ref('Merhaba')\n",[1665,10118,10119],{"class":1667,"line":1724},[1665,10120,3568],{"emptyLinePlaceholder":807},[1665,10122,10123],{"class":1667,"line":1925},[1665,10124,10125],{},"// Değere erişim\n",[1665,10127,10128],{"class":1667,"line":2034},[1665,10129,10130],{},"console.log(count.value) // 0\n",[1665,10132,10133],{"class":1667,"line":2040},[1665,10134,10135],{},"count.value = 1\n",[17,10137,10138,10141],{},[21,10139,10140],{},"reactive()"," - Objeler için:",[356,10143,10145],{"className":1836,"code":10144,"language":1838,"meta":365,"style":365},"import { reactive } from 'vue'\n\nconst state = reactive({\n count: 0,\n message: 'Merhaba'\n})\n\n// Doğrudan erişim\nconsole.log(state.count) // 0\nstate.count = 1\n",[363,10146,10147,10152,10156,10161,10166,10171,10175,10179,10184,10189],{"__ignoreMap":365},[1665,10148,10149],{"class":1667,"line":1668},[1665,10150,10151],{},"import { reactive } from 'vue'\n",[1665,10153,10154],{"class":1667,"line":779},[1665,10155,3568],{"emptyLinePlaceholder":807},[1665,10157,10158],{"class":1667,"line":782},[1665,10159,10160],{},"const state = reactive({\n",[1665,10162,10163],{"class":1667,"line":1718},[1665,10164,10165],{}," count: 0,\n",[1665,10167,10168],{"class":1667,"line":1724},[1665,10169,10170],{}," message: 'Merhaba'\n",[1665,10172,10173],{"class":1667,"line":1925},[1665,10174,4873],{},[1665,10176,10177],{"class":1667,"line":2034},[1665,10178,3568],{"emptyLinePlaceholder":807},[1665,10180,10181],{"class":1667,"line":2040},[1665,10182,10183],{},"// Doğrudan erişim\n",[1665,10185,10186],{"class":1667,"line":2046},[1665,10187,10188],{},"console.log(state.count) // 0\n",[1665,10190,10191],{"class":1667,"line":2052},[1665,10192,10193],{},"state.count = 1\n",[40,10195,10197],{"id":10196},"computed-ve-watch","computed() ve watch()",[17,10199,10200],{},[21,10201,10202],{},"Computed Properties:",[356,10204,10206],{"className":1836,"code":10205,"language":1838,"meta":365,"style":365},"import { ref, computed } from 'vue'\n\nconst firstName = ref('Eralp')\nconst lastName = ref('Özcan')\n\nconst fullName = computed(() => {\n return `${firstName.value} ${lastName.value}`\n})\n",[363,10207,10208,10213,10217,10222,10227,10231,10236,10241],{"__ignoreMap":365},[1665,10209,10210],{"class":1667,"line":1668},[1665,10211,10212],{},"import { ref, computed } from 'vue'\n",[1665,10214,10215],{"class":1667,"line":779},[1665,10216,3568],{"emptyLinePlaceholder":807},[1665,10218,10219],{"class":1667,"line":782},[1665,10220,10221],{},"const firstName = ref('Eralp')\n",[1665,10223,10224],{"class":1667,"line":1718},[1665,10225,10226],{},"const lastName = ref('Özcan')\n",[1665,10228,10229],{"class":1667,"line":1724},[1665,10230,3568],{"emptyLinePlaceholder":807},[1665,10232,10233],{"class":1667,"line":1925},[1665,10234,10235],{},"const fullName = computed(() => {\n",[1665,10237,10238],{"class":1667,"line":2034},[1665,10239,10240],{}," return `${firstName.value} ${lastName.value}`\n",[1665,10242,10243],{"class":1667,"line":2040},[1665,10244,4873],{},[17,10246,10247],{},[21,10248,10249],{},"Watchers:",[356,10251,10253],{"className":1836,"code":10252,"language":1838,"meta":365,"style":365},"import { ref, watch } from 'vue'\n\nconst count = ref(0)\n\nwatch(count, (newValue, oldValue) => {\n console.log(`Count changed from ${oldValue} to ${newValue}`)\n})\n\n// Immediate watch\nwatch(count, (newValue) => {\n console.log('Count:', newValue)\n}, { immediate: true })\n",[363,10254,10255,10260,10264,10268,10272,10277,10282,10286,10290,10295,10300,10305],{"__ignoreMap":365},[1665,10256,10257],{"class":1667,"line":1668},[1665,10258,10259],{},"import { ref, watch } from 'vue'\n",[1665,10261,10262],{"class":1667,"line":779},[1665,10263,3568],{"emptyLinePlaceholder":807},[1665,10265,10266],{"class":1667,"line":782},[1665,10267,10111],{},[1665,10269,10270],{"class":1667,"line":1718},[1665,10271,3568],{"emptyLinePlaceholder":807},[1665,10273,10274],{"class":1667,"line":1724},[1665,10275,10276],{},"watch(count, (newValue, oldValue) => {\n",[1665,10278,10279],{"class":1667,"line":1925},[1665,10280,10281],{}," console.log(`Count changed from ${oldValue} to ${newValue}`)\n",[1665,10283,10284],{"class":1667,"line":2034},[1665,10285,4873],{},[1665,10287,10288],{"class":1667,"line":2040},[1665,10289,3568],{"emptyLinePlaceholder":807},[1665,10291,10292],{"class":1667,"line":2046},[1665,10293,10294],{},"// Immediate watch\n",[1665,10296,10297],{"class":1667,"line":2052},[1665,10298,10299],{},"watch(count, (newValue) => {\n",[1665,10301,10302],{"class":1667,"line":2058},[1665,10303,10304],{}," console.log('Count:', newValue)\n",[1665,10306,10307],{"class":1667,"line":2064},[1665,10308,10309],{},"}, { immediate: true })\n",[889,10311,10313],{"id":10312},"lifecycle-hooks","Lifecycle Hooks",[17,10315,10316,10317,10320],{},"Composition API'de lifecycle hook'ları ",[363,10318,10319],{},"on"," prefix'i ile kullanılır:",[356,10322,10324],{"className":1836,"code":10323,"language":1838,"meta":365,"style":365},"import { onMounted, onUpdated, onUnmounted } from 'vue'\n\nexport default {\n setup() {\n onMounted(() => {\n console.log('Component mounted')\n })\n \n onUpdated(() => {\n console.log('Component updated')\n })\n \n onUnmounted(() => {\n console.log('Component unmounted')\n })\n }\n}\n",[363,10325,10326,10331,10335,10340,10345,10350,10355,10360,10364,10369,10374,10378,10382,10387,10392,10396,10400],{"__ignoreMap":365},[1665,10327,10328],{"class":1667,"line":1668},[1665,10329,10330],{},"import { onMounted, onUpdated, onUnmounted } from 'vue'\n",[1665,10332,10333],{"class":1667,"line":779},[1665,10334,3568],{"emptyLinePlaceholder":807},[1665,10336,10337],{"class":1667,"line":782},[1665,10338,10339],{},"export default {\n",[1665,10341,10342],{"class":1667,"line":1718},[1665,10343,10344],{}," setup() {\n",[1665,10346,10347],{"class":1667,"line":1724},[1665,10348,10349],{}," onMounted(() => {\n",[1665,10351,10352],{"class":1667,"line":1925},[1665,10353,10354],{}," console.log('Component mounted')\n",[1665,10356,10357],{"class":1667,"line":2034},[1665,10358,10359],{}," })\n",[1665,10361,10362],{"class":1667,"line":2040},[1665,10363,9843],{},[1665,10365,10366],{"class":1667,"line":2046},[1665,10367,10368],{}," onUpdated(() => {\n",[1665,10370,10371],{"class":1667,"line":2052},[1665,10372,10373],{}," console.log('Component updated')\n",[1665,10375,10376],{"class":1667,"line":2058},[1665,10377,10359],{},[1665,10379,10380],{"class":1667,"line":2064},[1665,10381,9843],{},[1665,10383,10384],{"class":1667,"line":2070},[1665,10385,10386],{}," onUnmounted(() => {\n",[1665,10388,10389],{"class":1667,"line":2076},[1665,10390,10391],{}," console.log('Component unmounted')\n",[1665,10393,10394],{"class":1667,"line":2082},[1665,10395,10359],{},[1665,10397,10398],{"class":1667,"line":2088},[1665,10399,2342],{},[1665,10401,10402],{"class":1667,"line":2094},[1665,10403,1928],{},[889,10405,10407],{"id":10406},"composables-logic-reuse","Composables - Logic Reuse",[17,10409,10410],{},"Composables, mantığı farklı bileşenler arasında paylaşmanın harika bir yoludur:",[356,10412,10414],{"className":1836,"code":10413,"language":1838,"meta":365,"style":365},"// composables/useCounter.js\nimport { ref } from 'vue'\n\nexport function useCounter(initialValue = 0) {\n const count = ref(initialValue)\n \n const increment = () => count.value++\n const decrement = () => count.value--\n const reset = () => count.value = initialValue\n \n return {\n count,\n increment,\n decrement,\n reset\n }\n}\n",[363,10415,10416,10421,10425,10429,10434,10439,10443,10448,10453,10458,10462,10466,10471,10476,10481,10486,10490],{"__ignoreMap":365},[1665,10417,10418],{"class":1667,"line":1668},[1665,10419,10420],{},"// composables/useCounter.js\n",[1665,10422,10423],{"class":1667,"line":779},[1665,10424,10102],{},[1665,10426,10427],{"class":1667,"line":782},[1665,10428,3568],{"emptyLinePlaceholder":807},[1665,10430,10431],{"class":1667,"line":1718},[1665,10432,10433],{},"export function useCounter(initialValue = 0) {\n",[1665,10435,10436],{"class":1667,"line":1724},[1665,10437,10438],{}," const count = ref(initialValue)\n",[1665,10440,10441],{"class":1667,"line":1925},[1665,10442,6587],{},[1665,10444,10445],{"class":1667,"line":2034},[1665,10446,10447],{}," const increment = () => count.value++\n",[1665,10449,10450],{"class":1667,"line":2040},[1665,10451,10452],{}," const decrement = () => count.value--\n",[1665,10454,10455],{"class":1667,"line":2046},[1665,10456,10457],{}," const reset = () => count.value = initialValue\n",[1665,10459,10460],{"class":1667,"line":2052},[1665,10461,6587],{},[1665,10463,10464],{"class":1667,"line":2058},[1665,10465,6667],{},[1665,10467,10468],{"class":1667,"line":2064},[1665,10469,10470],{}," count,\n",[1665,10472,10473],{"class":1667,"line":2070},[1665,10474,10475],{}," increment,\n",[1665,10477,10478],{"class":1667,"line":2076},[1665,10479,10480],{}," decrement,\n",[1665,10482,10483],{"class":1667,"line":2082},[1665,10484,10485],{}," reset\n",[1665,10487,10488],{"class":1667,"line":2088},[1665,10489,2342],{},[1665,10491,10492],{"class":1667,"line":2094},[1665,10493,1928],{},[17,10495,10496],{},"Kullanımı:",[356,10498,10500],{"className":2461,"code":10499,"language":2463,"meta":365,"style":365},"\u003Cscript setup>\nimport { useCounter } from '@/composables/useCounter'\n\nconst { count, increment, decrement, reset } = useCounter(10)\n\u003C/script>\n",[363,10501,10502,10512,10524,10528,10564],{"__ignoreMap":365},[1665,10503,10504,10506,10508,10510],{"class":1667,"line":1668},[1665,10505,2470],{"class":2173},[1665,10507,3041],{"class":2473},[1665,10509,3044],{"class":1671},[1665,10511,2477],{"class":2173},[1665,10513,10514,10516,10519,10521],{"class":1667,"line":779},[1665,10515,3518],{"class":2521},[1665,10517,10518],{"class":2173}," { useCounter } ",[1665,10520,3524],{"class":2521},[1665,10522,10523],{"class":1675}," '@/composables/useCounter'\n",[1665,10525,10526],{"class":1667,"line":782},[1665,10527,3568],{"emptyLinePlaceholder":807},[1665,10529,10530,10532,10534,10537,10539,10541,10543,10546,10548,10551,10553,10555,10558,10560,10562],{"class":1667,"line":1718},[1665,10531,3573],{"class":2521},[1665,10533,5127],{"class":2173},[1665,10535,10536],{"class":1685},"count",[1665,10538,552],{"class":2173},[1665,10540,9753],{"class":1685},[1665,10542,552],{"class":2173},[1665,10544,10545],{"class":1685},"decrement",[1665,10547,552],{"class":2173},[1665,10549,10550],{"class":1685},"reset",[1665,10552,5138],{"class":2173},[1665,10554,2490],{"class":2521},[1665,10556,10557],{"class":1671}," useCounter",[1665,10559,3198],{"class":2173},[1665,10561,7590],{"class":1685},[1665,10563,5154],{"class":2173},[1665,10565,10566,10568,10570],{"class":1667,"line":1724},[1665,10567,2713],{"class":2173},[1665,10569,3041],{"class":2473},[1665,10571,2477],{"class":2173},[889,10573,10575],{"id":10574},"gerçek-dünya-örneği-todo-app","Gerçek Dünya Örneği: Todo App",[356,10577,10579],{"className":2461,"code":10578,"language":2463,"meta":365,"style":365},"\u003Ctemplate>\n \u003Cdiv class=\"todo-app\">\n \u003Cinput \n v-model=\"newTodo\" \n @keyup.enter=\"addTodo\"\n placeholder=\"Yeni todo ekle...\"\n >\n \n \u003Cul>\n \u003Cli \n v-for=\"todo in filteredTodos\" \n :key=\"todo.id\"\n :class=\"{ completed: todo.completed }\"\n >\n \u003Cinput \n type=\"checkbox\" \n v-model=\"todo.completed\"\n >\n \u003Cspan>{{ todo.text }}\u003C/span>\n \u003Cbutton @click=\"removeTodo(todo.id)\">Sil\u003C/button>\n \u003C/li>\n \u003C/ul>\n \n \u003Cdiv class=\"filters\">\n \u003Cbutton \n v-for=\"filter in filters\" \n :key=\"filter\"\n @click=\"currentFilter = filter\"\n :class=\"{ active: currentFilter === filter }\"\n >\n {{ filter }}\n \u003C/button>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst newTodo = ref('')\nconst todos = ref([])\nconst currentFilter = ref('All')\nconst filters = ['All', 'Active', 'Completed']\n\nconst addTodo = () => {\n if (newTodo.value.trim()) {\n todos.value.push({\n id: Date.now(),\n text: newTodo.value,\n completed: false\n })\n newTodo.value = ''\n }\n}\n\nconst removeTodo = (id) => {\n todos.value = todos.value.filter(todo => todo.id !== id)\n}\n\nconst filteredTodos = computed(() => {\n switch (currentFilter.value) {\n case 'Active':\n return todos.value.filter(todo => !todo.completed)\n case 'Completed':\n return todos.value.filter(todo => todo.completed)\n default:\n return todos.value\n }\n})\n\u003C/script>\n",[363,10580,10581,10589,10604,10612,10628,10651,10661,10666,10670,10678,10686,10707,10723,10739,10744,10752,10763,10777,10782,10795,10824,10832,10840,10844,10859,10867,10887,10902,10923,10943,10947,10952,10960,10968,10976,10984,10988,10998,11009,11013,11031,11044,11062,11087,11092,11108,11123,11134,11146,11152,11161,11166,11177,11182,11187,11192,11213,11243,11248,11253,11272,11281,11293,11315,11325,11343,11351,11359,11364,11369],{"__ignoreMap":365},[1665,10582,10583,10585,10587],{"class":1667,"line":1668},[1665,10584,2470],{"class":2173},[1665,10586,2474],{"class":2473},[1665,10588,2477],{"class":2173},[1665,10590,10591,10593,10595,10597,10599,10602],{"class":1667,"line":779},[1665,10592,2482],{"class":2173},[1665,10594,1599],{"class":2473},[1665,10596,2487],{"class":1671},[1665,10598,2490],{"class":2173},[1665,10600,10601],{"class":1675},"\"todo-app\"",[1665,10603,2477],{"class":2173},[1665,10605,10606,10608,10610],{"class":1667,"line":782},[1665,10607,2500],{"class":2173},[1665,10609,2600],{"class":2473},[1665,10611,1606],{"class":2173},[1665,10613,10614,10617,10619,10621,10624,10626],{"class":1667,"line":1718},[1665,10615,10616],{"class":1671}," v-model",[1665,10618,2490],{"class":2173},[1665,10620,2527],{"class":1675},[1665,10622,10623],{"class":2173},"newTodo",[1665,10625,2527],{"class":1675},[1665,10627,1606],{"class":2173},[1665,10629,10630,10633,10636,10638,10641,10643,10645,10648],{"class":1667,"line":1724},[1665,10631,10632],{"class":2173}," @",[1665,10634,10635],{"class":1671},"keyup",[1665,10637,884],{"class":2173},[1665,10639,10640],{"class":1671},"enter",[1665,10642,2490],{"class":2173},[1665,10644,2527],{"class":1675},[1665,10646,10647],{"class":2173},"addTodo",[1665,10649,10650],{"class":1675},"\"\n",[1665,10652,10653,10656,10658],{"class":1667,"line":1925},[1665,10654,10655],{"class":1671}," placeholder",[1665,10657,2490],{"class":2173},[1665,10659,10660],{"class":1675},"\"Yeni todo ekle...\"\n",[1665,10662,10663],{"class":1667,"line":2034},[1665,10664,10665],{"class":2173}," >\n",[1665,10667,10668],{"class":1667,"line":2040},[1665,10669,9843],{"class":2173},[1665,10671,10672,10674,10676],{"class":1667,"line":2046},[1665,10673,2500],{"class":2173},[1665,10675,48],{"class":2473},[1665,10677,2477],{"class":2173},[1665,10679,10680,10682,10684],{"class":1667,"line":2052},[1665,10681,2516],{"class":2173},[1665,10683,51],{"class":2473},[1665,10685,1606],{"class":2173},[1665,10687,10688,10691,10693,10695,10698,10700,10703,10705],{"class":1667,"line":2058},[1665,10689,10690],{"class":2521}," v-for",[1665,10692,2490],{"class":2173},[1665,10694,2527],{"class":1675},[1665,10696,10697],{"class":2173},"todo ",[1665,10699,3142],{"class":2521},[1665,10701,10702],{"class":2173}," filteredTodos",[1665,10704,2527],{"class":1675},[1665,10706,1606],{"class":2173},[1665,10708,10709,10712,10714,10716,10718,10721],{"class":1667,"line":2064},[1665,10710,10711],{"class":2173}," :",[1665,10713,3152],{"class":1671},[1665,10715,2490],{"class":2173},[1665,10717,2527],{"class":1675},[1665,10719,10720],{"class":2173},"todo.id",[1665,10722,10650],{"class":1675},[1665,10724,10725,10727,10730,10732,10734,10737],{"class":1667,"line":2070},[1665,10726,10711],{"class":2173},[1665,10728,10729],{"class":1671},"class",[1665,10731,2490],{"class":2173},[1665,10733,2527],{"class":1675},[1665,10735,10736],{"class":2173},"{ completed: todo.completed }",[1665,10738,10650],{"class":1675},[1665,10740,10741],{"class":1667,"line":2076},[1665,10742,10743],{"class":2173}," >\n",[1665,10745,10746,10748,10750],{"class":1667,"line":2082},[1665,10747,3175],{"class":2173},[1665,10749,2600],{"class":2473},[1665,10751,1606],{"class":2173},[1665,10753,10754,10757,10759,10761],{"class":1667,"line":2088},[1665,10755,10756],{"class":1671}," type",[1665,10758,2490],{"class":2173},[1665,10760,6096],{"class":1675},[1665,10762,1606],{"class":2173},[1665,10764,10765,10768,10770,10772,10775],{"class":1667,"line":2094},[1665,10766,10767],{"class":1671}," v-model",[1665,10769,2490],{"class":2173},[1665,10771,2527],{"class":1675},[1665,10773,10774],{"class":2173},"todo.completed",[1665,10776,10650],{"class":1675},[1665,10778,10779],{"class":1667,"line":2305},[1665,10780,10781],{"class":2173}," >\n",[1665,10783,10784,10786,10788,10791,10793],{"class":1667,"line":2317},[1665,10785,3175],{"class":2173},[1665,10787,1665],{"class":2473},[1665,10789,10790],{"class":2173},">{{ todo.text }}\u003C/",[1665,10792,1665],{"class":2473},[1665,10794,2477],{"class":2173},[1665,10796,10797,10799,10801,10803,10805,10807,10809,10812,10815,10817,10820,10822],{"class":1667,"line":2329},[1665,10798,3175],{"class":2173},[1665,10800,2654],{"class":2473},[1665,10802,2633],{"class":2173},[1665,10804,2666],{"class":1671},[1665,10806,2490],{"class":2173},[1665,10808,2527],{"class":1675},[1665,10810,10811],{"class":1671},"removeTodo",[1665,10813,10814],{"class":2173},"(todo.id)",[1665,10816,2527],{"class":1675},[1665,10818,10819],{"class":2173},">Sil\u003C/",[1665,10821,2654],{"class":2473},[1665,10823,2477],{"class":2173},[1665,10825,10826,10828,10830],{"class":1667,"line":2339},[1665,10827,3209],{"class":2173},[1665,10829,51],{"class":2473},[1665,10831,2477],{"class":2173},[1665,10833,10834,10836,10838],{"class":1667,"line":2345},[1665,10835,2589],{"class":2173},[1665,10837,48],{"class":2473},[1665,10839,2477],{"class":2173},[1665,10841,10842],{"class":1667,"line":2852},[1665,10843,9843],{"class":2173},[1665,10845,10846,10848,10850,10852,10854,10857],{"class":1667,"line":2858},[1665,10847,2500],{"class":2173},[1665,10849,1599],{"class":2473},[1665,10851,2487],{"class":1671},[1665,10853,2490],{"class":2173},[1665,10855,10856],{"class":1675},"\"filters\"",[1665,10858,2477],{"class":2173},[1665,10860,10861,10863,10865],{"class":1667,"line":2864},[1665,10862,2516],{"class":2173},[1665,10864,2654],{"class":2473},[1665,10866,1606],{"class":2173},[1665,10868,10869,10871,10873,10875,10878,10880,10883,10885],{"class":1667,"line":2870},[1665,10870,10690],{"class":2521},[1665,10872,2490],{"class":2173},[1665,10874,2527],{"class":1675},[1665,10876,10877],{"class":2173},"filter ",[1665,10879,3142],{"class":2521},[1665,10881,10882],{"class":2173}," filters",[1665,10884,2527],{"class":1675},[1665,10886,1606],{"class":2173},[1665,10888,10889,10891,10893,10895,10897,10900],{"class":1667,"line":2876},[1665,10890,10711],{"class":2173},[1665,10892,3152],{"class":1671},[1665,10894,2490],{"class":2173},[1665,10896,2527],{"class":1675},[1665,10898,10899],{"class":2173},"filter",[1665,10901,10650],{"class":1675},[1665,10903,10904,10907,10909,10911,10913,10916,10918,10921],{"class":1667,"line":2882},[1665,10905,10906],{"class":2173}," @",[1665,10908,2666],{"class":1671},[1665,10910,2490],{"class":2173},[1665,10912,2527],{"class":1675},[1665,10914,10915],{"class":2173},"currentFilter ",[1665,10917,2490],{"class":2521},[1665,10919,10920],{"class":2173}," filter",[1665,10922,10650],{"class":1675},[1665,10924,10925,10927,10929,10931,10933,10936,10938,10941],{"class":1667,"line":2888},[1665,10926,10711],{"class":2173},[1665,10928,10729],{"class":1671},[1665,10930,2490],{"class":2173},[1665,10932,2527],{"class":1675},[1665,10934,10935],{"class":2173},"{ active: currentFilter ",[1665,10937,7180],{"class":2521},[1665,10939,10940],{"class":2173}," filter }",[1665,10942,10650],{"class":1675},[1665,10944,10945],{"class":1667,"line":2893},[1665,10946,10743],{"class":2173},[1665,10948,10949],{"class":1667,"line":2899},[1665,10950,10951],{"class":2173}," {{ filter }}\n",[1665,10953,10954,10956,10958],{"class":1667,"line":2905},[1665,10955,3209],{"class":2173},[1665,10957,2654],{"class":2473},[1665,10959,2477],{"class":2173},[1665,10961,10962,10964,10966],{"class":1667,"line":2911},[1665,10963,2589],{"class":2173},[1665,10965,1599],{"class":2473},[1665,10967,2477],{"class":2173},[1665,10969,10970,10972,10974],{"class":1667,"line":2917},[1665,10971,2704],{"class":2173},[1665,10973,1599],{"class":2473},[1665,10975,2477],{"class":2173},[1665,10977,10978,10980,10982],{"class":1667,"line":2923},[1665,10979,2713],{"class":2173},[1665,10981,2474],{"class":2473},[1665,10983,2477],{"class":2173},[1665,10985,10986],{"class":1667,"line":2929},[1665,10987,3568],{"emptyLinePlaceholder":807},[1665,10989,10990,10992,10994,10996],{"class":1667,"line":2935},[1665,10991,2470],{"class":2173},[1665,10993,3041],{"class":2473},[1665,10995,3044],{"class":1671},[1665,10997,2477],{"class":2173},[1665,10999,11000,11002,11005,11007],{"class":1667,"line":2941},[1665,11001,3518],{"class":2521},[1665,11003,11004],{"class":2173}," { ref, computed } ",[1665,11006,3524],{"class":2521},[1665,11008,3527],{"class":1675},[1665,11010,11011],{"class":1667,"line":2947},[1665,11012,3568],{"emptyLinePlaceholder":807},[1665,11014,11015,11017,11020,11022,11024,11026,11029],{"class":1667,"line":2953},[1665,11016,3573],{"class":2521},[1665,11018,11019],{"class":1685}," newTodo",[1665,11021,3579],{"class":2521},[1665,11023,3582],{"class":1671},[1665,11025,3198],{"class":2173},[1665,11027,11028],{"class":1675},"''",[1665,11030,5154],{"class":2173},[1665,11032,11033,11035,11038,11040,11042],{"class":1667,"line":2959},[1665,11034,3573],{"class":2521},[1665,11036,11037],{"class":1685}," todos",[1665,11039,3579],{"class":2521},[1665,11041,3582],{"class":1671},[1665,11043,3585],{"class":2173},[1665,11045,11046,11048,11051,11053,11055,11057,11060],{"class":1667,"line":2965},[1665,11047,3573],{"class":2521},[1665,11049,11050],{"class":1685}," currentFilter",[1665,11052,3579],{"class":2521},[1665,11054,3582],{"class":1671},[1665,11056,3198],{"class":2173},[1665,11058,11059],{"class":1675},"'All'",[1665,11061,5154],{"class":2173},[1665,11063,11064,11066,11068,11070,11073,11075,11077,11080,11082,11085],{"class":1667,"line":2970},[1665,11065,3573],{"class":2521},[1665,11067,10882],{"class":1685},[1665,11069,3579],{"class":2521},[1665,11071,11072],{"class":2173}," [",[1665,11074,11059],{"class":1675},[1665,11076,552],{"class":2173},[1665,11078,11079],{"class":1675},"'Active'",[1665,11081,552],{"class":2173},[1665,11083,11084],{"class":1675},"'Completed'",[1665,11086,2348],{"class":2173},[1665,11088,11090],{"class":1667,"line":11089},44,[1665,11091,3568],{"emptyLinePlaceholder":807},[1665,11093,11095,11097,11100,11102,11104,11106],{"class":1667,"line":11094},45,[1665,11096,3573],{"class":2521},[1665,11098,11099],{"class":1671}," addTodo",[1665,11101,3579],{"class":2521},[1665,11103,9855],{"class":2173},[1665,11105,3619],{"class":2521},[1665,11107,3622],{"class":2173},[1665,11109,11111,11114,11117,11120],{"class":1667,"line":11110},46,[1665,11112,11113],{"class":2521}," if",[1665,11115,11116],{"class":2173}," (newTodo.value.",[1665,11118,11119],{"class":1671},"trim",[1665,11121,11122],{"class":2173},"()) {\n",[1665,11124,11126,11129,11132],{"class":1667,"line":11125},47,[1665,11127,11128],{"class":2173}," todos.value.",[1665,11130,11131],{"class":1671},"push",[1665,11133,3054],{"class":2173},[1665,11135,11137,11140,11143],{"class":1667,"line":11136},48,[1665,11138,11139],{"class":2173}," id: Date.",[1665,11141,11142],{"class":1671},"now",[1665,11144,11145],{"class":2173},"(),\n",[1665,11147,11149],{"class":1667,"line":11148},49,[1665,11150,11151],{"class":2173}," text: newTodo.value,\n",[1665,11153,11155,11158],{"class":1667,"line":11154},50,[1665,11156,11157],{"class":2173}," completed: ",[1665,11159,11160],{"class":1685},"false\n",[1665,11162,11164],{"class":1667,"line":11163},51,[1665,11165,10359],{"class":2173},[1665,11167,11169,11172,11174],{"class":1667,"line":11168},52,[1665,11170,11171],{"class":2173}," newTodo.value ",[1665,11173,2490],{"class":2521},[1665,11175,11176],{"class":1675}," ''\n",[1665,11178,11180],{"class":1667,"line":11179},53,[1665,11181,2342],{"class":2173},[1665,11183,11185],{"class":1667,"line":11184},54,[1665,11186,1928],{"class":2173},[1665,11188,11190],{"class":1667,"line":11189},55,[1665,11191,3568],{"emptyLinePlaceholder":807},[1665,11193,11195,11197,11200,11202,11204,11207,11209,11211],{"class":1667,"line":11194},56,[1665,11196,3573],{"class":2521},[1665,11198,11199],{"class":1671}," removeTodo",[1665,11201,3579],{"class":2521},[1665,11203,3609],{"class":2173},[1665,11205,11206],{"class":3612},"id",[1665,11208,3616],{"class":2173},[1665,11210,3619],{"class":2521},[1665,11212,3622],{"class":2173},[1665,11214,11216,11219,11221,11224,11226,11228,11231,11234,11237,11240],{"class":1667,"line":11215},57,[1665,11217,11218],{"class":2173}," todos.value ",[1665,11220,2490],{"class":2521},[1665,11222,11223],{"class":2173}," todos.value.",[1665,11225,10899],{"class":1671},[1665,11227,3198],{"class":2173},[1665,11229,11230],{"class":3612},"todo",[1665,11232,11233],{"class":2521}," =>",[1665,11235,11236],{"class":2173}," todo.id ",[1665,11238,11239],{"class":2521},"!==",[1665,11241,11242],{"class":2173}," id)\n",[1665,11244,11246],{"class":1667,"line":11245},58,[1665,11247,1928],{"class":2173},[1665,11249,11251],{"class":1667,"line":11250},59,[1665,11252,3568],{"emptyLinePlaceholder":807},[1665,11254,11256,11258,11260,11262,11265,11268,11270],{"class":1667,"line":11255},60,[1665,11257,3573],{"class":2521},[1665,11259,10702],{"class":1685},[1665,11261,3579],{"class":2521},[1665,11263,11264],{"class":1671}," computed",[1665,11266,11267],{"class":2173},"(() ",[1665,11269,3619],{"class":2521},[1665,11271,3622],{"class":2173},[1665,11273,11275,11278],{"class":1667,"line":11274},61,[1665,11276,11277],{"class":2521}," switch",[1665,11279,11280],{"class":2173}," (currentFilter.value) {\n",[1665,11282,11284,11287,11290],{"class":1667,"line":11283},62,[1665,11285,11286],{"class":2521}," case",[1665,11288,11289],{"class":1675}," 'Active'",[1665,11291,11292],{"class":2173},":\n",[1665,11294,11296,11299,11301,11303,11305,11307,11309,11312],{"class":1667,"line":11295},63,[1665,11297,11298],{"class":2521}," return",[1665,11300,11223],{"class":2173},[1665,11302,10899],{"class":1671},[1665,11304,3198],{"class":2173},[1665,11306,11230],{"class":3612},[1665,11308,11233],{"class":2521},[1665,11310,11311],{"class":2521}," !",[1665,11313,11314],{"class":2173},"todo.completed)\n",[1665,11316,11318,11320,11323],{"class":1667,"line":11317},64,[1665,11319,11286],{"class":2521},[1665,11321,11322],{"class":1675}," 'Completed'",[1665,11324,11292],{"class":2173},[1665,11326,11328,11330,11332,11334,11336,11338,11340],{"class":1667,"line":11327},65,[1665,11329,11298],{"class":2521},[1665,11331,11223],{"class":2173},[1665,11333,10899],{"class":1671},[1665,11335,3198],{"class":2173},[1665,11337,11230],{"class":3612},[1665,11339,11233],{"class":2521},[1665,11341,11342],{"class":2173}," todo.completed)\n",[1665,11344,11346,11349],{"class":1667,"line":11345},66,[1665,11347,11348],{"class":2521}," default",[1665,11350,11292],{"class":2173},[1665,11352,11354,11356],{"class":1667,"line":11353},67,[1665,11355,11298],{"class":2521},[1665,11357,11358],{"class":2173}," todos.value\n",[1665,11360,11362],{"class":1667,"line":11361},68,[1665,11363,2342],{"class":2173},[1665,11365,11367],{"class":1667,"line":11366},69,[1665,11368,4873],{"class":2173},[1665,11370,11372,11374,11376],{"class":1667,"line":11371},70,[1665,11373,2713],{"class":2173},[1665,11375,3041],{"class":2473},[1665,11377,2477],{"class":2173},[889,11379,7476],{"id":7475},[177,11381,11382,11388,11394,11400,11406],{},[51,11383,11384,11387],{},[21,11385,11386],{},"Mantığı Gruplandırın",": İlgili state ve fonksiyonları bir arada tutun",[51,11389,11390,11393],{},[21,11391,11392],{},"Composables Kullanın",": Tekrar eden mantığı composable'lara çıkarın",[51,11395,11396,11399],{},[21,11397,11398],{},"TypeScript Kullanın",": Daha iyi developer experience için",[51,11401,11402,11405],{},[21,11403,11404],{},"Destructuring",": Return edilen değerleri destructure edin",[51,11407,11408,11411,11412,11415],{},[21,11409,11410],{},"Naming Convention",": Composable'lar için ",[363,11413,11414],{},"use"," prefix'i kullanın",[889,11417,5196],{"id":5195},[17,11419,11420],{},"Composition API, Vue.js'de component logic'i organize etmenin güçlü ve esnek bir yolunu sunar. Özellikle büyük projelerde kod tekrarını azaltır ve maintainability'yi artırır.",[40,11422,5203],{"id":5202},[48,11424,11425,11432,11439],{},[51,11426,11427],{},[54,11428,11431],{"href":11429,"rel":11430},"https://vuejs.org/guide/extras/composition-api-faq.html",[58],"Vue 3 Composition API Dokümantasyonu",[51,11433,11434],{},[54,11435,11438],{"href":11436,"rel":11437},"https://vueuse.org/",[58],"VueUse - Composition Utilities",[51,11440,11441],{},[54,11442,11445],{"href":11443,"rel":11444},"https://v3-migration.vuejs.org/",[58],"Vue 3 Migration Guide",[5228,11447],{},[17,11449,11450],{},[121,11451,11452],{},"Bu yazıda Composition API'nin temellerini ve pratik kullanımını ele aldık. Sorularınız için benimle iletişime geçebilirsiniz.",[3893,11454,11455],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":365,"searchDepth":779,"depth":779,"links":11457},[11458,11461,11465,11469,11470,11471,11472,11473],{"id":9653,"depth":779,"text":9654,"children":11459},[11460],{"id":9660,"depth":782,"text":9661},{"id":9690,"depth":779,"text":9691,"children":11462},[11463,11464],{"id":9694,"depth":782,"text":9695},{"id":9916,"depth":782,"text":9917},{"id":10081,"depth":779,"text":10082,"children":11466},[11467,11468],{"id":10085,"depth":782,"text":10086},{"id":10196,"depth":782,"text":10197},{"id":10312,"depth":779,"text":10313},{"id":10406,"depth":779,"text":10407},{"id":10574,"depth":779,"text":10575},{"id":7475,"depth":779,"text":7476},{"id":5195,"depth":779,"text":5196,"children":11474},[11475],{"id":5202,"depth":782,"text":5203},"2024-01-10","Vue 3 ile gelen Composition API özelliklerini detaylı olarak inceleyelim ve nasıl kullanacağımızı öğrenelim",{"author":5250,"cover":11479},"/assets/images/blog/vue-composition-api-cover.svg","/blog/vue-js-composition-api-rehberi","12",{"title":9642,"description":11477},{"loc":11480},"blog/vue-js-composition-api-rehberi",[3928,11486,3932,4740],"Composition API","0J2DEQv4bSaM96vsVcSmf2XnZ1nk9P6UQXjmD9bYfWc",{"id":11489,"title":11490,"body":11491,"date":4723,"description":11498,"extension":797,"head":798,"image":798,"meta":12149,"navigation":807,"ogImage":4726,"path":12153,"readingTime":4732,"robots":798,"schemaOrg":798,"seo":12154,"sitemap":12155,"stem":12157,"tags":12158,"__hash__":12160},"blog/blog/vue3-ile-sentry-nasil-kullanilir.md","Vue3 ile Sentry Nasıl Kullanılır?",{"type":9,"value":11492,"toc":12142},[11493,11496,11499,11505,11509,11515,11518,11525,11562,11572,11576,11579,11587,11593,11597,11603,11607,11622,11626,11632,11649,11653,11679,11731,11746,11750,11756,11760,11767,11770,11794,11800,11804,11808,11812,11819,11828,11832,11841,11845,11849,11868,11872,11881,11894,11901,11905,11911,11920,11924,11931,11935,11948,11952,11958,11962,11967,12087,12094,12103,12112,12120,12127,12137,12139],[12,11494,11490],{"id":11495},"vue3-ile-sentry-nasıl-kullanılır",[17,11497,11498],{},"Sıklıkla hatalar ile karşılaşıyoruz ve bunları bulmak bir o kadar da zor olmuyor mu? Hata ve Performans İzleme araçlarından bir tanesi de Sentry. Bu yazıda, Sentry’nin nasıl kurulacağını ve performans izlemesiyle nasıl iyileştirmeler yapabileceğimizi anlatacağım. Hazırsan başlıyoruz! 🚀",[889,11500,11502],{"id":11501},"sentry-nedir",[21,11503,11504],{},"Sentry Nedir?",[17,11506,11507],{},[36,11508],{"alt":3956,"src":3957},[17,11510,11511,11512,11514],{},"Aslında genel bir tanımlama yapmak gerekirse; ",[21,11513,3956],{}," bir çok uygulamamız için bir hata izleme ve hata raporlama platformu, hatta buna performans raporlaması platformu olduğunu da ekleyebiliriz.",[17,11516,11517],{},"Sentry, geliştiricilere, gerçek zamanlı olarak uygulama hatalarını izlemelerini, hata raporlarını alıp analiz etmelerini ve sorunları hızla teşhis etmelerini sağlar.",[17,11519,11520,11521,11524],{},"Sentry’nin ",[21,11522,11523],{},"temel özellikleri"," arasında aşağıdakiler bulunur:",[177,11526,11527,11533,11539,11545,11551],{},[51,11528,11529,11532],{},[21,11530,11531],{},"Hata İzleme",": Sentry, uygulamalardaki hataları izler ve yakalar. İstisnalar, hata mesajleri, kullanıcı arayüzündeki hatalar gibi çeşitli hata türlerini tespit edebilir.",[51,11534,11535,11538],{},[21,11536,11537],{},"Gerçek Zamanlı İzleme",": Sentry, uygulamalardaki hataları gerçek zamanlı olarak izler ve hızlı bir şekilde bildirim gönderir. Bu sayede geliştiriciler, hataları anında fark edebilir ve müdahale edebilir.",[51,11540,11541,11544],{},[21,11542,11543],{},"Hata Raporlama",": Sentry, hataları ayrıntılı bir şekilde raporlar. Hata raporları, hatanın ne zaman, nerede ve hangi koşullar altında meydana geldiğine dair önemli bilgiler içerir. Bu, geliştiricilerin hataları teşhis etmelerine ve düzeltmelerine yardımcı olur.",[51,11546,11547,11550],{},[21,11548,11549],{},"Entegrasyonlar",": Sentry, birçok popüler programlama dilini ve çeşitli platformları destekler. Bu sayede farklı türdeki uygulamalar ve sistemlerle entegre çalışabilir.",[51,11552,11553,11556,11557,4011],{},[21,11554,11555],{},"Performans İzleme",": Sentry, uygulamaların performansını izleyebilir ve yavaşlık sorunlarını tespit edebilir. Performans izleme özellikleri sayesinde geliştiriciler, uygulamalarının performansını optimize edebilir ve kullanıcı deneyimini artırabilir. ",[121,11558,11559],{},[21,11560,11561],{},"Bu konuda da bir örnek yapmış olacağız",[17,11563,11564],{},[121,11565,11566,11567,11571],{},"Ayrıca burada ki temel anlatıma ek olarak Onur Dayıbaş’ın ",[54,11568,11570],{"href":4019,"rel":11569},[58],"Sentry’deki Bazı Kavramlar"," medium yazısını da okumanızı tavsiye ediyorum.",[889,11573,11575],{"id":11574},"kurulum-installation","Kurulum (Installation)",[17,11577,11578],{},"Öncelikle burada yapacağımız işlemleri görseller ile destekleyeceğim. Zaten Sentry yeterince bu konuda bize yardımcı oluyor olacak.",[17,11580,1735,11581,11586],{},[21,11582,11583],{},[54,11584,3956],{"href":4036,"rel":11585},[58],"’nin sitesine gidip hesap oluşturuyor veya hesabımız var ise giriş yapıyoruz.",[17,11588,11589,11590,11592],{},"📌 Eğer ilk defa giriş yapıyorsanız sizden bir organizasyon oluşturmanızı istiyor. Bunun temel sebeplerinden birisi diğer takım arkadaşlarınız ile de birlikte çalışabilmeniz için istiyor. Bu örnekte “",[121,11591,4044],{},"” yaparak bu aşamayı geçiyorum.",[17,11594,11595],{},[36,11596],{"alt":4050,"src":4051},[17,11598,11599,11600,11602],{},"📌 Kurmak istediğimiz platformu seçeceğimiz ekran karşılıyor bizi. Burada ",[21,11601,4057],{},"’yü seçiyoruz.",[17,11604,11605],{},[36,11606],{"alt":4062,"src":4063},[17,11608,11609,11610,11613,11614,11617,11618,11621],{},"📌 Burada alarm (",[121,11611,11612],{},"alert",") sıklığını seçiyoruz. Daha sonra bu alanı ayarlamamız mümkün şimdilik “",[121,11615,11616],{},"Alert me on every new issue","” seçeneğini seçip bir sonraki aşamamız olan proje adımızı oluşturup ve takımımızı seçiyoruz. Bir takım yok ise varsayılan olarak organizasyonuzun adın da bir takım geliyor. Farklı bir takım kurmak isterseniz “+” ya tıklayıp yaratabilirsiniz. “",[121,11619,11620],{},"Create Project","” diyoruz.",[17,11623,11624],{},[36,11625],{"alt":4078,"src":4079},[17,11627,11628,11629,11631],{},"📌 Burada bizim için yönergeleri ",[21,11630,3956],{}," veriyor. Burada 3 temel duruma göre otomatik ayarlamaları bizim için yapıyor. Anlamak için önemli noktalar ise şöyle;",[177,11633,11634,11639,11644],{},[51,11635,11636,11638],{},[21,11637,4092],{},": Hata izleme ayarımız. Bu ayar varsayılan olarak seçili geliyor ve kapatamıyoruz. Çünkü temel amacımız zaten o 😉",[51,11640,11641,11643],{},[21,11642,4004],{},": Burada sayfa yüklemelerimizin perfomansını ölçüyoruz. İstemiyorsak buradan bu seçeneği kaldırıyoruz.",[51,11645,11646,11648],{},[21,11647,4103],{},": Burası da aslında çok sevdiğimiz yerlerden birisi hataların nasıl karşılaşıldığını ufak bir video kesiti ile görebildiğimiz bir video sunuyor. Ancak tabi ki çok yüksek oranlarda bu verileri toplamanız önerilmiyor. Sadece hatalar için yapmanız yeterli diyebilirim.",[17,11650,11651],{},[36,11652],{"alt":4109,"src":4110},[17,11654,11655,11656,11658,11659,11661,11662,11664,11665,11667,11668,11670,11671,11674,11675,11678],{},"Gelelim kurulum aşamasına, aslında yukarıda görselde gösterdiği gibi “",[121,11657,1672],{},"” yada “",[121,11660,1703],{},"” kullanımıza göre projemize ",[21,11663,3956],{}," paketimizi kuruyoruz. Daha sonrasında Vue3 örnek kodunu direkt kopyalayıp. “",[121,11666,4125],{},"” dosyamıza yapıştırıyoruz. Burası için tabi ki sizin için farklı bir “",[121,11669,4125],{},"” dosyanız olabilir. Burada önemli noktalar ",[363,11672,11673],{}," Sentry.init({])"," ile başlayan yeri almamız yeterli (",[121,11676,11677],{},"Tabi ki import etmeyi unutmayın","). Buradaki ayarlamaların önemli noktaları ve anlamları ise şöyle;",[48,11680,11681,11686,11691,11702,11711,11723],{},[51,11682,11683,11685],{},[21,11684,4143],{},": Uygulama nesnemiz yani createApp ile oluşturduğumuz veya izlemek istediğimiz uygulamayı belirtmek için kullanılır.",[51,11687,11688,11690],{},[21,11689,4149],{}," Hata raportlarının gönderileceği Sentry sunucusunun adresi. Bu adresi .env gibi bir şekilde tutmanızı öneriyorum. Kötü amaçlı farklı veriler görüp sorun yaşayabilirsiniz.",[51,11692,11693,11695,11696,594,11698,11701],{},[21,11694,4155],{},": Sentry entegrasyonlarını yapılandırmak için kullanılır. Bu örnekte, ",[363,11697,4159],{},[363,11699,11700],{},"Sentry.Replay"," entegrasyonları kullanılır.",[51,11703,11704,11706,11707,11710],{},[21,11705,4168],{},": Performans izleme örneklem oranı. Yüzde cinsinden ifade edilir ve bu örnekte ",[21,11708,11709],{},"%100"," olarak ayarlanmıştır. Gerçek üretim ortamlarında düşürülmesi önerilir.",[51,11712,11713,11715,11716,11719,11720,11722],{},[21,11714,4178],{},": Oturum kaydı örneklem oranı. Yüzde cinsinden ifade edilir ve bu örnekte ",[21,11717,11718],{},"%10"," olarak ayarlanmıştır. Geliştirme aşamasında ",[21,11721,11709],{}," olarak ayarlanıp, üretim ortamında daha düşük bir oranda örnekleme yapılabilir.",[51,11724,11725,11727,11728,11730],{},[21,11726,4191],{},": Hata oluşan oturumların örnekleme oranı. Eğer zaten oturum örnekleme yapmıyorsanız, hata içeren oturumların örnekleme oranını ",[21,11729,11709],{}," olarak ayarlayabilirsiniz.",[17,11732,11733,11734,11739,11740,11745],{},"Görselde gözükmeyen ancak daha detaylı ayarlamalar yapmak istiyorsanız. ",[54,11735,11737],{"href":4200,"rel":11736},[58],[121,11738,4204],{},"’a tıklayarak detaylı farklı ayarlamalar yapmanızda mümkün. Temel kurulum işlemlerini aslında burada tamamlamış olduk. Şimdi artık ",[121,11741,11742],{},[21,11743,11744],{},"ilk hatamızı"," nasıl alacağımıza bakalım.",[889,11747,11749],{"id":11748},"hatalar-issues","Hatalar (Issues)",[17,11751,11752,11753,11755],{},"Kurulumları tamamladıktan sonra ",[21,11754,3956],{}," bizi otomatik olarak aşağıdaki gibi bir sayfaya yönlendiriyor ve bizden hatalarımızı göndermemizi bekliyor. Aslında tüm hataları burada göreceğiz yada izleyeceğiz.",[17,11757,11758],{},[36,11759],{"alt":4222,"src":4223},[733,11761,11762],{},[17,11763,11764,11765],{},"Peki bu hatayı yada farklı dataları nasıl buraya göndereceğiz?",[121,11766,4231],{},[17,11768,11769],{},"👩💻 Basit bir button ve fonksiyon oluşturuyoruz.",[356,11771,11773],{"className":1836,"code":11772,"language":1838,"meta":365,"style":365},"\u003Cbutton @click=\"sendSentryData\">Click me\u003C/button>\nfunction sendSentryData() {\n Sentry.captureMessage('Button clicked');\n}\n",[363,11774,11775,11780,11785,11790],{"__ignoreMap":365},[1665,11776,11777],{"class":1667,"line":1668},[1665,11778,11779],{},"\u003Cbutton @click=\"sendSentryData\">Click me\u003C/button>\n",[1665,11781,11782],{"class":1667,"line":779},[1665,11783,11784],{},"function sendSentryData() {\n",[1665,11786,11787],{"class":1667,"line":782},[1665,11788,11789],{}," Sentry.captureMessage('Button clicked');\n",[1665,11791,11792],{"class":1667,"line":1718},[1665,11793,1928],{},[17,11795,11796,11797,11799],{},"Eğer bu fonksiyonu oluşturduğumuzda ",[21,11798,3956],{},"’yi import etmemiş ve tanımlamamışsanız. Aşağıda ki görselde ki hatayı alacaksınız.",[17,11801,11802],{},[36,11803],{"alt":4299,"src":4300},[17,11805,11806],{},[36,11807],{"src":4305,"loading":4306,"alt":4307},[17,11809,11810],{},[36,11811],{"alt":4312,"src":4313},[733,11813,11814],{},[17,11815,11816],{},[21,11817,11818],{},"İlk hatamızı aldık!! Peki bu nasıl oldu?",[17,11820,11821,11822,11824,11825,11827],{},"Çünkü en temelinde bir referans hatası aldığımız ve ",[21,11823,4191],{}," değerimiz %100 olduğu için Sentry bunu algılayarak bize direkt olarak gönderdi. İçeriğine tıklayarak hata’nın oluşumunun tekrarını yada detaylı bilgileri öğrenebiliriz, konuyu fazla uzatacağını düşündüğüm için buraya girmiyorum. Hatamız Sentry’yi tanımlamadığımız için almıştık. Bunun için ",[363,11826,4329],{}," kodunu ekleyerek tanımlamamızı yapıyoruz. Ve butonumuza tekrar tıklıyoruz. 🖱️",[17,11829,11830],{},[36,11831],{"alt":4335,"src":4336},[17,11833,11834,11835,11837,11838,11840],{},"Gördüğünüz üzere göndermiş olduğumuz mesajı da görebiliyoruz. Burada ki önemli noktalardan birisi de bu hataya kaç kez kaç kişinin yaşadığını görebiliyor oluşumuz. ",[121,11836,4342],{}," sayısı bu hatanın kaç kez yaşandığını, ",[121,11839,4346],{},"’da ise kaç farklı kullanıcının bu durumu yaşadığını görüyoruz. Burada hataların içerisine girerek detaylı bilgiler öğrenmemiz mümkün. Temel anlamda basit bir hata ve veri gönderme işlemini gerçekleştirmiş olduk. Sıra Performans analizini görmekte.",[889,11842,11844],{"id":11843},"performans-i̇zleme-performance-monitoring","Performans İzleme (Performance Monitoring)",[17,11846,11847],{},[36,11848],{"src":4355,"loading":4306},[17,11850,11851,11852,11856,11857,11859,11860,594,11862,11864,11865,11867],{},"Bildiğin üzere hepimiz için önemli olan şeylerden birisi de sayfa yükleme hızlarımız yani projemizin gösterdiği performans. ",[121,11853,11854],{},[21,11855,3956],{}," ile bunu analiz etmemizin mümkün olduğundan bahsetmiştik. Kurulum aşamasında Performance Monitoring seçeneğini seçtiysek aslında kurulum aşamasında biraz hız kazanıyoruz. “",[121,11858,4125],{},"” dosyamıza geri döndüğümüzde ",[21,11861,4367],{},[21,11863,4370],{}," değerlerini göreceğiz. BrowserTracing’ de yapacağımız ayarlamalar aslında domainimizin adreslerini girmek. ",[121,11866,4374],{}," varsayılan olarak geliyor. Bunun yanında deploy ettiğimiz adresi de eklememiz gerekiyor.",[17,11869,11870],{},[36,11871],{"alt":365,"src":4380},[17,11873,11874,11875,11880],{},"Ben örnekleride yapacağım olan “",[54,11876,11878],{"href":4386,"rel":11877},[58],[121,11879,4386],{},"”ı ekledim. Böylece deploy edilmiş halde de performansını ölçüyor olacağım.",[17,11882,11883,11884,11886,11887,11890,11891,11893],{},"Bir diğer değerimiz ise ",[21,11885,4370],{}," bu değerin prod. ortamlarında ",[121,11888,11889],{},"düşürülmesini"," öneriyorlar. Tabi ki bir local geliştirme yapıyorsanız bu değerin ",[21,11892,4399],{}," olması öneriliyor. Böylece tüm sayfa yenilemelerinizi analiz etmiş olacaksınız.",[733,11895,11896],{},[17,11897,11898],{},[21,11899,11900],{},"Peki bu Perfomance ne işimize yarayacak? Gelin uygulamalı olarak görelim.",[17,11902,11903],{},[36,11904],{"loading":4306,"src":4412},[17,11906,11907,11908,11910],{},"Aslında bu projede geliştirmeler yaparken performans eğrilerini kontrol ediyordum. Ve sonra aslında sayfanın yüklenmesinin resimlerden ötürü uzun sürdüğünü fark ettim. Bu konu hakkında ",[21,11909,4418],{},"’ı kullanıyordum efektif olacağını düşünüyordum ancak öyle olmamış gözüküyor.",[17,11912,11913,11914,11919],{},"📌 Buradaki yaptığım geliştirme örneklerini ",[54,11915,11917],{"href":4425,"rel":11916},[58],[21,11918,4429],{}," üzerinden paylaştım.",[17,11921,11922],{},[36,11923],{"alt":365,"src":4434},[17,11925,11926,11927,11930],{},"📌 Burada ilk yaptığım işlem ",[54,11928,4418],{"href":4440,"rel":11929},[58],"’ı kaldırıp düz Img tagı kullanarak durumu izledim.",[17,11932,11933],{},[36,11934],{"alt":365,"src":4447},[17,11936,11937,11938,11940,11941,11944,11945,11947],{},"📌 Görüldüğü üzere değerlerimizde biraz bir düzelme oluyor ",[121,11939,4453],{}," değeri yükselmiş olsa da diğer parametrelerde ",[21,11942,11943],{},"%50","’yi geçen bir düşme söz konusu. Daha sonra Swiper’ın lazy ve img tag’ının lazy özelliklerini kullanıma açıyorum. Ve ",[121,11946,4461],{}," değerimizde ciddi bir düşme söz konusu oluyor.",[17,11949,11950],{},[36,11951],{"alt":365,"src":4467},[17,11953,11954,11955,11957],{},"📌 Daha sonra yine görsellerde gördüğümüz gibi ",[121,11956,4473],{},"’lerin component içerisinde tekrar tekrar import edilip yüklendiğini fark ediyorum. Ve bunu projemizin ana dizinine global olarak import ediyorum. Böylelikle bu sayfada tekrar tekrar yüklenmesine gerek kalmayacak.",[17,11959,11960],{},[36,11961],{"alt":365,"src":4479},[733,11963,11964],{},[17,11965,11966],{},"Yaptığımız süreçlerin daha karşılaştırılabilir bir şekilde gösterildiği bir tabloyu aşağıda bulabilirsiniz.👇",[4486,11968,11969,11991],{},[4489,11970,11971],{},[4492,11972,11973,11975,11977,11979,11981,11983,11985,11987,11989],{},[4495,11974,4497],{},[4495,11976,4500],{},[4495,11978,4503],{},[4495,11980,4453],{},[4495,11982,4508],{},[4495,11984,4511],{},[4495,11986,4514],{},[4495,11988,4461],{},[4495,11990,4429],{},[4520,11992,11993,12016,12039,12063],{},[4492,11994,11995,11997,11999,12001,12003,12005,12007,12009,12011],{},[4525,11996,4529],{},[4525,11998,4532],{},[4525,12000,4535],{},[4525,12002,4538],{},[4525,12004,4541],{},[4525,12006,4541],{},[4525,12008,4546],{},[4525,12010,4549],{},[4525,12012,12013],{},[54,12014,4529],{"href":4554,"rel":12015},[58],[4492,12017,12018,12020,12022,12024,12026,12028,12030,12032,12034],{},[4525,12019,4562],{},[4525,12021,4532],{},[4525,12023,4567],{},[4525,12025,4570],{},[4525,12027,4573],{},[4525,12029,4573],{},[4525,12031,4578],{},[4525,12033,4581],{},[4525,12035,12036],{},[54,12037,4562],{"href":4586,"rel":12038},[58],[4492,12040,12041,12043,12045,12047,12050,12052,12054,12056,12058],{},[4525,12042,4594],{},[4525,12044,4532],{},[4525,12046,4599],{},[4525,12048,12049],{},"0.253ms",[4525,12051,4605],{},[4525,12053,4605],{},[4525,12055,4610],{},[4525,12057,4613],{},[4525,12059,12060],{},[54,12061,4594],{"href":4618,"rel":12062},[58],[4492,12064,12065,12067,12069,12071,12074,12076,12078,12080,12082],{},[4525,12066,4594],{},[4525,12068,4628],{},[4525,12070,4631],{},[4525,12072,12073],{},"0.218ms",[4525,12075,4637],{},[4525,12077,4637],{},[4525,12079,4642],{},[4525,12081,4645],{},[4525,12083,12084],{},[54,12085,4652],{"href":4650,"rel":12086},[58],[17,12088,12089],{},[121,12090,12091,12093],{},[21,12092,4659],{}," Swiper CSS’lerinin sayfa içerisinde tekrar çağırılıp çağrılmadığını gösterir. Eğer değer “No” ise projenin ana dizinin de çağırılmıştır.",[733,12095,12096],{},[17,12097,12098,12099,12102],{},"Kısaltmalar ve metrikler hakkında bilginizin yeterli olmadığını düşünüyorsanız. Google ",[54,12100,4670],{"href":4668,"rel":12101},[58]," sizin için faydalı olabilir.",[17,12104,12105,12106,12108,12109,12111],{},"Görüldüğü üzere, ",[21,12107,3956],{},"’nin sağladığı Performans İzleme aracını kullanarak basit bir örnek oluşturduk ve kodumuzu daha optimize hale getirdik. Elbette farklı optimizasyon yöntemleri bulunmaktadır, ancak burada yaptığımız bazı basit düzeltmeler ve ",[21,12110,3956],{}," aracılığıyla sayfa yükleme hızımızı önemli ölçüde artırdık.",[733,12113,12114],{},[889,12115,12117],{"id":12116},"bu-iyileştirmelerle-sayfa-yükleme-hızımızı-yaklaşık-olarak-60-oranında-artırmış-olduk",[21,12118,12119],{},"Bu iyileştirmelerle sayfa yükleme hızımızı yaklaşık olarak %60 oranında artırmış olduk.",[17,12121,9590,12122,12126],{},[121,12123,12124],{},[21,12125,3956],{},"’nin kullanımı ve kurulumunun nasıl yapılacağına bize nasıl faydalı olacağına dair örnekler yaparak sizlere anlatmaya çalıştım.",[17,12128,12129,9600,12133,12136],{},[54,12130,201],{"href":12131,"rel":12132},"https://medium.com/@eralpozcan/vue3-ile-sentry-nasil-kullanilir-6e56dc18623d",[58],[54,12134,4707],{"href":748,"rel":12135},[58],"hesabımdan sorularınız yada önerileriniz var ise ulaşabilirsiniz.",[17,12138,9610],{},[3893,12140,12141],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":365,"searchDepth":779,"depth":779,"links":12143},[12144,12145,12146,12147,12148],{"id":11501,"depth":779,"text":11504},{"id":11574,"depth":779,"text":11575},{"id":11748,"depth":779,"text":11749},{"id":11843,"depth":779,"text":11844},{"id":12116,"depth":779,"text":12119},{"card_description":12150,"cover":4726,"language":801,"links":12151},"Sıklıkla hatalar ile karşılaşıyoruz ve bunları bulmak bir o kadar da zor olmuyor mu? Hata ve Performans İzleme araçlarından bir tanesi de Sentry. Bu yazıda, Sentry'nin nasıl kurulacağını ve performans izlemesiyle nasıl iyileştirmeler yapabileceğimizi anlatacağım. Hazırsan başlıyoruz! 🚀",[12152],{"medium":12131},"/blog/vue3-ile-sentry-nasil-kullanilir",{"title":11490,"description":11498},{"loc":12156,"lastmod":4723,"changefreq":813,"priority":814},"http://eralpozcan.dev/blog/vue3-ile-sentry-nasil-kullanilir","blog/vue3-ile-sentry-nasil-kullanilir",[3956,3928,11531,12159,4739,3932,4740],"Performans","C__OtQjkO7o46lL5ZNBfa4yAyScv_m67FwUyuxZqeGE",["Reactive",12162],{"$snuxt-i18n-meta":12163,"$snuxt-seo-utils:routeRules":12164,"$ssite-config":12165},{},{"head":-1,"seoMeta":-1},{"_priority":12166,"currentLocale":4492,"defaultLocale":4492,"env":12171,"name":12172,"url":12173},{"name":12167,"env":12168,"url":12169,"defaultLocale":12170,"currentLocale":12170},-5,-15,0,-2,"production","eralpozcandev","https://eralpozcan.dev",["Set"],["ShallowReactive",12176],{"blog-posts":-1},"/en/blog"]