फ़ुलस्टैक मूवी के सुझाव देने वाला सिस्टम बनाना

1. शुरू करने से पहले

सुझाव देने वाले इंजन, मशीन लर्निंग का एक बहुत ही अहम ऐप्लिकेशन है. इसे सुझाव देने वाला सिस्टम भी कहा जाता है. यह फ़िल्मों या रेस्टोरेंट के सुझाव देने से लेकर, मज़ेदार वीडियो हाइलाइट करने तक का काम करता है. सुझाव देने वाले सिस्टम की मदद से, अपने उपयोगकर्ताओं को ज़्यादा से ज़्यादा संभावित कॉन्टेंट में से दिलचस्प कॉन्टेंट दिखाया जा सकता है. उदाहरण के लिए, Google Play Store पर इंस्टॉल करने के लिए लाखों ऐप्लिकेशन उपलब्ध हैं. वहीं, YouTube पर देखने के लिए अरबों वीडियो उपलब्ध हैं. साथ ही, हर दिन नए ऐप्लिकेशन और वीडियो जोड़े जाते हैं.

इस कोडलैब में, इन चीज़ों का इस्तेमाल करके फ़ुलस्टैक रेकमेंडर बनाने का तरीका जानें:

  • TensorFlow Recommenders का इस्तेमाल करके, फ़िल्मों के सुझाव देने के लिए, फ़ेच करने और रैंकिंग करने वाले मॉडल को ट्रेन करना
  • मॉडल को पेश करने के लिए TensorFlow Serving
  • सुझाई गई फ़िल्में दिखाने के लिए, क्रॉस-प्लैटफ़ॉर्म ऐप्लिकेशन बनाने के लिए Flutter

ज़रूरी शर्तें

  • Dart की मदद से Flutter डेवलपमेंट की बुनियादी जानकारी
  • TensorFlow के साथ मशीन लर्निंग की बुनियादी जानकारी, जैसे कि ट्रेनिंग बनाम डिप्लॉयमेंट
  • सुझाव देने वाले सिस्टम के बारे में बुनियादी जानकारी
  • Python, टर्मिनल, और Docker के बारे में बुनियादी जानकारी

आपको क्या सीखने को मिलेगा

  • TensorFlow Recommenders का इस्तेमाल करके, जानकारी इकट्ठा करने और रैंकिंग करने वाले मॉडल को ट्रेन करने का तरीका
  • TensorFlow Serving का इस्तेमाल करके, ट्रेनिंग दिए गए सुझाव देने वाले मॉडल को कैसे दिखाया जाए
  • सुझाए गए आइटम दिखाने के लिए, क्रॉस-प्लैटफ़ॉर्म Flutter ऐप्लिकेशन कैसे बनाएं

आपको किन चीज़ों की ज़रूरत होगी

2. Flutter डेवलपमेंट एनवायरमेंट सेट अप करना

Flutter डेवलपमेंट के लिए, आपको इस कोडलैब को पूरा करने के लिए दो सॉफ़्टवेयर की ज़रूरत होगी— Flutter SDK और एक एडिटर.

इनमें से किसी भी डिवाइस का इस्तेमाल करके, कोडलैब का फ़्रंटएंड चलाया जा सकता है:

  • iOS सिम्युलेटर (इसके लिए, Xcode टूल इंस्टॉल करना ज़रूरी है).
  • Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).
  • कोई ब्राउज़र (डीबग करने के लिए Chrome ज़रूरी है).
  • Windows, Linux या macOS के डेस्कटॉप ऐप्लिकेशन के तौर पर. आपको उसी प्लैटफ़ॉर्म पर डेवलपमेंट करना होगा जहां आपको ऐप्लिकेशन डिप्लॉय करना है. इसलिए, अगर आपको Windows डेस्कटॉप ऐप्लिकेशन डेवलप करना है, तो आपको Windows पर ही डेवलप करना होगा, ताकि सही बिल्ड चेन को ऐक्सेस किया जा सके. ऑपरेटिंग सिस्टम के हिसाब से कुछ ज़रूरी शर्तें होती हैं. इनके बारे में docs.flutter.dev/desktop पर पूरी जानकारी दी गई है.

बैकएंड के लिए, आपको इनकी ज़रूरत होगी:

  • Linux मशीन या Intel पर आधारित Mac.

3. सेट अप करें

इस कोडलैब के लिए कोड डाउनलोड करने के लिए:

  1. इस कोडलैब के लिए, GitHub रिपॉज़िटरी पर जाएं.
  2. इस कोडलैब के सभी कोड डाउनलोड करने के लिए, कोड > ज़िप फ़ाइल डाउनलोड करें पर क्लिक करें.

2cd45599f51fb8a2.png

  1. डाउनलोड की गई zip फ़ाइल को अनज़िप करें, ताकि आपको अपनी ज़रूरत के सभी संसाधनों के साथ codelabs-main रूट फ़ोल्डर मिल सके.

इस कोडलैब के लिए, आपको सिर्फ़ रिपॉज़िटरी में मौजूद tfrs-flutter/ सबडायरेक्ट्री में मौजूद फ़ाइलों की ज़रूरत होगी. इसमें कई फ़ोल्डर शामिल हैं:

  • step0 से step5 फ़ोल्डर में स्टार्टर कोड होता है. इस कोडलैब के हर चरण के लिए, आपको इस कोड का इस्तेमाल करना होता है.
  • finished फ़ोल्डर में, तैयार किए गए सैंपल ऐप्लिकेशन का पूरा कोड होता है.
  • हर फ़ोल्डर में एक backend सब-फ़ोल्डर होता है. इसमें सुझाव देने वाले इंजन का बैकएंड कोड शामिल होता है. साथ ही, इसमें एक frontend सब-फ़ोल्डर भी होता है. इसमें Flutter का फ़्रंटएंड कोड शामिल होता है

4. प्रोजेक्ट के लिए डिपेंडेंसी डाउनलोड करें

बैकएंड

हम अपना बैकएंड बनाने के लिए, Flask का इस्तेमाल करेंगे. अपना टर्मिनल खोलें और यह कमांड चलाएं:

pip install Flask flask-cors requests numpy

फ़्रंटएंड

  1. VS Code में, File > Open folder पर क्लिक करें. इसके बाद, पहले डाउनलोड किए गए सोर्स कोड से step0 फ़ोल्डर चुनें.
  2. step0/frontend/lib/main.dart फ़ाइल खोलें. अगर आपको VS Code का कोई ऐसा डायलॉग दिखता है जिसमें आपको स्टार्टर ऐप्लिकेशन के लिए ज़रूरी पैकेज डाउनलोड करने के लिए कहा गया है, तो Get packages पर क्लिक करें.
  3. अगर आपको यह डायलॉग नहीं दिखता है, तो अपना टर्मिनल खोलें. इसके बाद, step0/frontend फ़ोल्डर में flutter pub get कमांड चलाएं.

7ada07c300f166a6.png

5. सबसे पहले: स्टार्टर ऐप्लिकेशन चलाएं

  1. VS Code में step0/frontend/lib/main.dart फ़ाइल खोलें. पक्का करें कि Android Emulator या iOS Simulator सही तरीके से सेट अप हो और स्टेटस बार में दिखे.

उदाहरण के लिए, Android Emulator के साथ Pixel 5 का इस्तेमाल करने पर आपको यह दिखेगा:

9767649231898791.png

iOS सिम्युलेटर के साथ iPhone 13 का इस्तेमाल करने पर, आपको यह दिखेगा:

95529e3a682268b2.png

  1. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें.

ऐप्लिकेशन को चलाना और उसे एक्सप्लोर करना

ऐप्लिकेशन, आपके Android Emulator या iOS Simulator पर लॉन्च होना चाहिए. इसका यूज़र इंटरफ़ेस (यूआई) बहुत आसान है. इसमें एक टेक्स्ट फ़ील्ड होता है, जिसमें उपयोगकर्ता, उपयोगकर्ता आईडी के तौर पर टेक्स्ट टाइप कर सकता है. Flutter ऐप्लिकेशन, क्वेरी का अनुरोध बैकएंड को भेजेगा. बैकएंड, सुझाव देने वाले दो मॉडल चलाता है और फ़िल्मों के सुझावों की रैंक की गई सूची दिखाता है. जवाब मिलने के बाद, फ़्रंटएंड यूज़र इंटरफ़ेस (यूआई) में नतीजा दिखाएगा.

d21427db9587560f.png 73e8272a5ce8dfbc.png

अगर आपने अभी सुझाएं पर क्लिक किया, तो कुछ नहीं होगा. ऐसा इसलिए, क्योंकि ऐप्लिकेशन अभी बैकएंड से कम्यूनिकेट नहीं कर सकता.

6. पहला चरण: सुझाव देने वाले इंजन के लिए, डेटा वापस पाने और रैंकिंग करने वाले मॉडल बनाना

असल दुनिया में सुझाव देने वाले इंजन में अक्सर कई चरण शामिल होते हैं:

  1. जानकारी वापस पाने की प्रोसेस में, सभी संभावित उम्मीदवारों में से सैकड़ों उम्मीदवारों का शुरुआती सेट चुना जाता है. इस मॉडल का मुख्य मकसद, उन सभी उम्मीदवारों को हटाना है जिनमें उपयोगकर्ता की दिलचस्पी नहीं है. डेटा इकट्ठा करने वाले मॉडल को लाखों प्रॉडक्ट के साथ काम करना पड़ सकता है. इसलिए, यह ज़रूरी है कि यह मॉडल कम समय में ज़्यादा काम कर सके.
  2. रैंकिंग स्टेज में, जानकारी वापस पाने वाले मॉडल के आउटपुट लिए जाते हैं. इसके बाद, उन्हें बेहतर बनाया जाता है, ताकि सबसे अच्छे सुझावों को चुना जा सके. इसका काम, उन आइटम के सेट को कम करना है जिनमें उपयोगकर्ता की दिलचस्पी हो सकती है. इसके बाद, यह सैकड़ों की संख्या में संभावित उम्मीदवारों की एक छोटी सूची बनाता है.
  3. पोस्ट-रैंकिंग स्टेज से, विविधता, नयापन, और निष्पक्षता को बनाए रखने में मदद मिलती है. साथ ही, इससे उम्मीदवार आइटम को काम के सुझावों के सेट में फिर से व्यवस्थित किया जाता है.

70dfc0d7e989164f.png

इस कोडलैब के लिए, आपको लोकप्रिय MovieLens डेटासेट का इस्तेमाल करके, जानकारी वापस पाने वाले मॉडल और रैंकिंग मॉडल को ट्रेन करना होगा. Colab के ज़रिए, यहां दिया गया ट्रेनिंग कोड खोला जा सकता है. इसके बाद, दिए गए निर्देशों का पालन करें:

7. दूसरा चरण: सुझाव देने वाले इंजन का बैकएंड बनाना

अब आपने जानकारी पाने और रैंकिंग के मॉडल को ट्रेन कर लिया है. इसलिए, अब उन्हें डिप्लॉय किया जा सकता है और बैकएंड बनाया जा सकता है.

TensorFlow Serving शुरू करना

सुझाई गई फ़िल्मों की सूची जनरेट करने के लिए, आपको फ़िल्मों को वापस पाने और उन्हें रैंक करने वाले, दोनों मॉडल का इस्तेमाल करना होगा. इसलिए, TensorFlow Serving का इस्तेमाल करके, दोनों मॉडल को एक साथ डिप्लॉय करें.

  • अपने टर्मिनल में, कंप्यूटर पर मौजूद step2/backend फ़ोल्डर पर जाएं और Docker की मदद से TensorFlow Serving शुरू करें:
docker run -t --rm -p 8501:8501 -p 8500:8500 -v "$(pwd)/:/models/" tensorflow/serving --model_config_file=/models/models.config

Docker, TensorFlow Serving की इमेज को सबसे पहले अपने-आप डाउनलोड करता है. इसमें एक मिनट लगता है. इसके बाद, TensorFlow Serving शुरू हो जाना चाहिए. लॉग, इस कोड स्निपेट जैसा दिखना चाहिए:

2022-04-24 09:32:06.461702: I tensorflow_serving/model_servers/server_core.cc:465] Adding/updating models.
2022-04-24 09:32:06.461843: I tensorflow_serving/model_servers/server_core.cc:591]  (Re-)adding model: retrieval
2022-04-24 09:32:06.461907: I tensorflow_serving/model_servers/server_core.cc:591]  (Re-)adding model: ranking
2022-04-24 09:32:06.576920: I tensorflow_serving/core/basic_manager.cc:740] Successfully reserved resources to load servable {name: retrieval version: 123}
2022-04-24 09:32:06.576993: I tensorflow_serving/core/loader_harness.cc:66] Approving load for servable version {name: retrieval version: 123}
2022-04-24 09:32:06.577011: I tensorflow_serving/core/loader_harness.cc:74] Loading servable version {name: retrieval version: 123}
2022-04-24 09:32:06.577848: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:38] Reading SavedModel from: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.583809: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:90] Reading meta graph with tags { serve }
2022-04-24 09:32:06.583879: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:132] Reading SavedModel debug info (if present) from: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.584970: I external/org_tensorflow/tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations:  AVX2 FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
2022-04-24 09:32:06.629900: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-04-24 09:32:06.634662: I external/org_tensorflow/tensorflow/core/platform/profile_utils/cpu_utils.cc:114] CPU Frequency: 2800000000 Hz
2022-04-24 09:32:06.672534: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.673629: I tensorflow_serving/core/basic_manager.cc:740] Successfully reserved resources to load servable {name: ranking version: 123}
2022-04-24 09:32:06.673765: I tensorflow_serving/core/loader_harness.cc:66] Approving load for servable version {name: ranking version: 123}
2022-04-24 09:32:06.673786: I tensorflow_serving/core/loader_harness.cc:74] Loading servable version {name: ranking version: 123}
2022-04-24 09:32:06.674731: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:38] Reading SavedModel from: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.683557: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:90] Reading meta graph with tags { serve }
2022-04-24 09:32:06.683601: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:132] Reading SavedModel debug info (if present) from: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.688665: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 110815 microseconds.
2022-04-24 09:32:06.690019: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/retrieval/exported-retrieval/123/assets.extra/tf_serving_warmup_requests
2022-04-24 09:32:06.693025: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: retrieval version: 123}
2022-04-24 09:32:06.702594: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-04-24 09:32:06.745361: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.772363: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 97633 microseconds.
2022-04-24 09:32:06.774853: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/ranking/exported-ranking/123/assets.extra/tf_serving_warmup_requests
2022-04-24 09:32:06.777706: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: ranking version: 123}
2022-04-24 09:32:06.778969: I tensorflow_serving/model_servers/server_core.cc:486] Finished adding/updating models
2022-04-24 09:32:06.779030: I tensorflow_serving/model_servers/server.cc:367] Profiler service is enabled
2022-04-24 09:32:06.784217: I tensorflow_serving/model_servers/server.cc:393] Running gRPC ModelServer at 0.0.0.0:8500 ...
[warn] getaddrinfo: address family for nodename not supported
2022-04-24 09:32:06.785748: I tensorflow_serving/model_servers/server.cc:414] Exporting HTTP/REST API at:localhost:8501 ...
[evhttp_server.cc : 245] NET_LOG: Entering the event loop ...

नया एंडपॉइंट बनाना

TensorFlow Serving, एक के बाद एक कई मॉडल को ‘चेन' करने की सुविधा नहीं देता. इसलिए, आपको एक नई सेवा बनानी होगी, जो जानकारी वापस पाने और रैंकिंग करने वाले मॉडल को कनेक्ट करती हो.

  • step2/backend/recommendations.py फ़ाइल में मौजूद get_recommendations() फ़ंक्शन में यह कोड जोड़ें:
user_id = request.get_json()["user_id"]
retrieval_request = json.dumps({"instances": [user_id]})
retrieval_response = requests.post(RETRIEVAL_URL, data=retrieval_request)
movie_candidates = retrieval_response.json()["predictions"][0]["output_2"]

ranking_queries = [
    {"user_id": u, "movie_title": m}
    for (u, m) in zip([user_id] * NUM_OF_CANDIDATES, movie_candidates)
]
ranking_request = json.dumps({"instances": ranking_queries})
ranking_response = requests.post(RANKING_URL, data=ranking_request)
movies_scores = list(np.squeeze(ranking_response.json()["predictions"]))
ranked_movies = [
    m[1] for m in sorted(list(zip(movies_scores, movie_candidates)), reverse=True)
]

return make_response(jsonify({"movies": ranked_movies}), 200)

Flask सेवा शुरू करना

अब Flask सेवा शुरू की जा सकती है.

  • अपने टर्मिनल में, step2/backend/ फ़ोल्डर पर जाएं और यह कमांड चलाएं:
FLASK_APP=recommender.py FLASK_ENV=development flask run

Flask, http://localhost:5000/recommend पर एक नया एंडपॉइंट सेट अप करेगा. आपको लॉग इस तरह दिखेगा:

 * Serving Flask app 'recommender.py' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 705-382-264
127.0.0.1 - - [25/Apr/2022 19:44:47] "POST /recommend HTTP/1.1" 200 -

एंडपॉइंट पर एक सैंपल अनुरोध भेजकर यह पक्का किया जा सकता है कि वह आपकी उम्मीद के मुताबिक काम कर रहा है:

curl -X POST -H "Content-Type: application/json" -d '{"user_id":"42"}' http://localhost:5000/recommend

एंडपॉइंट, उपयोगकर्ता 42 के लिए सुझाई गई फ़िल्मों की सूची दिखाएगा:

{
  "movies": [
    "While You Were Sleeping (1995)",
    "Preacher's Wife, The (1996)",
    "Michael (1996)",
    "Lion King, The (1994)",
    "Father of the Bride Part II (1995)",
    "Sleepless in Seattle (1993)",
    "101 Dalmatians (1996)",
    "Bridges of Madison County, The (1995)",
    "Rudy (1993)",
    "Jack (1996)"
  ]
}

हो गया! आपने यूज़र आईडी के आधार पर फ़िल्में सुझाने के लिए, बैकएंड बना लिया है.

8. तीसरा चरण: Android और iOS के लिए Flutter ऐप्लिकेशन बनाना

बैकएंड तैयार है. अब Flutter ऐप्लिकेशन से, फ़िल्मों के सुझाव पाने के लिए अनुरोध भेजे जा सकते हैं.

फ़्रंटएंड ऐप्लिकेशन का इस्तेमाल करना बहुत आसान है. इसमें सिर्फ़ एक टेक्स्ट फ़ील्ड होता है, जो उपयोगकर्ता आईडी लेता है. साथ ही, अनुरोध को recommend() फ़ंक्शन में भेजता है. यह फ़ंक्शन, आपने अभी बनाया है. जवाब मिलने के बाद, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में, सुझाई गई फ़िल्मों को ListView में दिखाया जाता है.

  • step3/frontend/lib/main.dart फ़ाइल में मौजूद recommend() फ़ंक्शन में यह कोड जोड़ें:
final response = await http.post(
  Uri.parse('http://' + _server + ':5000/recommend'),
  headers: <String, String>{
    'Content-Type': 'application/json',
  },
  body: jsonEncode(<String, String>{
    'user_id': _userIDController.text,
  }),
);

जब ऐप्लिकेशन को बैकएंड से जवाब मिल जाता है, तब यूज़र इंटरफ़ेस (यूआई) को अपडेट किया जाता है. इससे, तय किए गए उपयोगकर्ता के लिए सुझाई गई फ़िल्मों की सूची दिखती है.

  • इस कोड को ऊपर दिए गए कोड के ठीक नीचे जोड़ें:
if (response.statusCode == 200) {
  return List<String>.from(jsonDecode(response.body)['movies']);
} else {
  throw Exception('Error response');
}

इसे चलाएं

  1. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  2. कोई यूज़र आईडी डालें (जैसे, 42) पर जाएं. इसके बाद, सुझाव दें को चुनें.

badb59d8b96959ae.png a0d2d4020aebfb0a.png

9. चौथा चरण: डेस्कटॉप प्लैटफ़ॉर्म पर Flutter ऐप्लिकेशन चलाना

Android और iOS के अलावा, Flutter डेस्कटॉप प्लैटफ़ॉर्म के साथ भी काम करता है. जैसे, Linux, Mac, और Windows.

Linux

  1. पक्का करें कि VSCode के स्टेटस बार में, टारगेट डिवाइस को 86cba523de82b4f9.png पर सेट किया गया हो.
  2. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  3. कोई यूज़र आईडी डालें (जैसे, 42) पर जाएं. इसके बाद, सुझाव दें को चुनें.

2665514231033f1.png

Mac

  1. Mac के लिए, आपको सही एनटाइटलमेंट सेट अप करने होंगे, क्योंकि ऐप्लिकेशन बैकएंड को एचटीटीपी अनुरोध भेजेगा. ज़्यादा जानकारी के लिए, कृपया एनटाइटलमेंट और ऐप्लिकेशन सैंडबॉक्स देखें.

इस कोड को step4/frontend/macOS/Runner/DebugProfile.entitlements और step4/frontend/macOS/Runner/Release.entitlements में जोड़ें:

<key>com.apple.security.network.client</key>
<true/>
  1. पक्का करें कि VSCode के स्टेटस बार में, टारगेट डिवाइस को eb4b0b5563824138.png पर सेट किया गया हो.
  2. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  3. कोई यूज़र आईडी डालें (जैसे, 42) पर जाएं. इसके बाद, सुझाव दें को चुनें.

860d523a7ac537e0.png

Windows

  1. पक्का करें कि VSCode के स्टेटस बार में, टारगेट डिवाइस को 9587be1bb375bc0f.png पर सेट किया गया हो.
  2. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  3. कोई यूज़र आईडी डालें (जैसे, 42) पर जाएं. इसके बाद, सुझाव दें को चुनें.

7d77c1e52a5927fc.png

10. पांचवां चरण: वेब प्लैटफ़ॉर्म पर Flutter ऐप्लिकेशन चलाना

Flutter ऐप्लिकेशन में वेब सपोर्ट जोड़ने का विकल्प भी होता है. डिफ़ॉल्ट रूप से, वेब प्लैटफ़ॉर्म को Flutter ऐप्लिकेशन के लिए अपने-आप चालू कर दिया जाता है. इसलिए, आपको सिर्फ़ इसे लॉन्च करना होता है.

  1. पक्का करें कि VSCode के स्टेटस बार में, टारगेट डिवाइस को 71db93efa928d15d.png पर सेट किया गया हो.
  2. a19a0c68bc4046e6.png डीबग करना शुरू करें पर क्लिक करें. इसके बाद, Chrome ब्राउज़र में ऐप्लिकेशन के लोड होने का इंतज़ार करें.
  3. कोई यूज़र आईडी डालें (जैसे, 42) पर जाएं. इसके बाद, सुझाव दें को चुनें.

9376e1e432c18bef.png

11. बधाई हो

आपने उपयोगकर्ताओं को फ़िल्मों के सुझाव देने के लिए, एक फ़ुलस्टैक ऐप्लिकेशन बनाया है!

हालांकि, यह ऐप्लिकेशन सिर्फ़ फ़िल्मों के सुझाव देता है, लेकिन आपने सुझाव देने वाले एक बेहतरीन इंजन को बनाने का पूरा वर्कफ़्लो सीख लिया है. साथ ही, आपने Flutter ऐप्लिकेशन में सुझावों का इस्तेमाल करने की स्किल में महारत हासिल कर ली है. आपने जो कुछ भी सीखा है उसे अन्य स्थितियों (जैसे, ई-कॉमर्स, खाना, और शॉर्ट वीडियो) में आसानी से लागू किया जा सकता है.

ज़्यादा जानें