फ्लटर, सर्वरलेस फ्रेमवर्क और अपस्टैश रेडिस के साथ फुल-स्टैक सर्वरलेस मोबाइल ऐप बनाएं - भाग 2

इस ट्यूटोरियल सीरीज के भाग 2 में आपका स्वागत है। पहले भाग में, हमने देखा कि अपस्टैश, सर्वरलेस फ्रेमवर्क और रेडिस का उपयोग करके REST API कैसे बनाया जाता है।

इस भाग में, हम अपने REST API एंडपॉइंट्स का उपभोग करने के लिए फ्लटर का उपयोग करके एक मोबाइल एप्लिकेशन बनाएंगे।

चलिए शुरू करते हैं 🙃

सबसे पहले, आपके कंप्यूटर पर फ्लटर इंस्टॉल और रनिंग होना चाहिए:

• फ्लटर

अपने IDE में एक नया फ्लटर प्रोजेक्ट बनाएं और इसे अपनी पसंद का नाम दें।

अपने फ्लटर प्रोजेक्ट के रूट डायरेक्टरी में pubspec.yaml फाइल खोलें और इन डिपेंडेंसीज को dev_dependencies के तहत जोड़ें:

timeago: ^3.1.0
shared_preferences: ^2.0.6
http: ^0.13.4

तो यह अंततः इस तरह दिखना चाहिए:

dev_dependencies:
  flutter_test:
    sdk: flutter
  timeago: ^3.1.0
  shared_preferences: ^2.0.6
  http: ^0.13.4

timeago लाइब्रेरी यूनिक्स टाइमस्टैम्प (1636824843) को मानव-पठनीय प्रारूप में परिवर्तित करती है जैसे एक मिनट पहले, 5 मिनट पहले आदि।

shared_preferences का उपयोग करके हम यूजर अकाउंट बनने के बाद उनके userId और अन्य मामूली विवरणों को ट्रैक करेंगे। फिर हम HTTP कॉल करने के लिए http लाइब्रेरी का उपयोग करेंगे।

यूजर बनाएं

हम जो पहली स्क्रीन बनाएंगे वह है यूजर बनाने की स्क्रीन, जो यूजर बनाने के एंडपॉइंट का उपभोग करेगी।

स्क्रीन ऐसी दिखती है:

बननी इमेज की चिंता न करें। इमेजव्यू के लिए बस एक प्लेसहोल्डर।

lib फोल्डर के अंदर account नाम का एक फोल्डर बनाएं और फिर account फोल्डर के अंदर create_profile_screen.dart नाम की एक नई फाइल बनाएं।

मेरी अंतिम lib फोल्डर स्ट्रक्चर ऐसी दिखती है:

एक नया यूजर बनाने के लिए, हमें चाहिए:

• प्रोफाइल पिक URL
• पहला नाम
• अंतिम नाम
• यूजरनेम
• एंडपॉइंट

आइए कोड देखें:

static const String CREATE_USER_PROFILE_URL = "https://5vafvrk8kj.execute-api.us-east-1.amazonaws.com/dev/user";
bool _loading = false;

Future<void> createUserProfile() async {
  setState(() {
    _loading = true;
  });
  print(usernameController.text);
  print(firstNameController.text);
  print(lastNameController.text);
  print(profilePicUrl);
  
  await http.post(Uri.parse(CREATE_USER_PROFILE_URL),
    body: convert.jsonEncode({
      'username': usernameController.text,
      "firstName": firstNameController.text,
      "lastName": lastNameController.text,
      "profilePic": profilePicUrl
    })).then((response) async {
      var jsonResponse = convert.jsonDecode(response.body) as Map<String, dynamic>;
      setState(() {
        _loading = false;
      });
      if (response.statusCode == 400) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          padding: EdgeInsets.all(10),
          backgroundColor: Colors.red,
          content: Text(jsonResponse['message'])
        ));
      } else if (response.statusCode == 200) {
        print('user id is :' + jsonResponse['userId']);
        await saveUserId(jsonResponse['userId']);
        Navigator.push(context, MaterialPageRoute(builder: (context) {
          return HomeScreen();
        }));
      }
    });
}

Future डार्ट में एक कोर क्लास है जो एसिंक्रोनस ऑपरेशन के साथ काम करने के लिए है। एक Future ऑब्जेक्ट एक संभावित मान या त्रुटि का प्रतिनिधित्व करता है जो भविष्य में किसी समय उपलब्ध होगा।

http.Response क्लास में एक सफल HTTP कॉल से प्राप्त डेटा होता है।

उपरोक्त कोड http post मेथड का उपयोग करके create user endpoint पर POST रिक्वेस्ट भेजता है, फिर रिस्पॉन्स की प्रतीक्षा करता है।

यदि रिस्पॉन्स स्टेटस कोड 200 है, तो रिक्वेस्ट सफल रही, हम बनाए गए UserId को शेयर्ड प्रेफरेंस में सेव करते हैं, और फिर होमस्क्रीन पर जाते हैं।

इस स्क्रीन के लिए पूरा सोर्स कोड यहां है: Create Profile Screen।

पोस्ट बनाएं

हमारे एंडपॉइंट्स में से एक ने यूजर को पोस्ट बनाने की अनुमति दी। स्क्रीन ऐसी दिखती है:

पोस्ट बनाने के लिए, एक यूजर को चाहिए:

• एक userId
• टेक्स्ट
• imageUrl

याद रखें कि, प्रदर्शन उद्देश्यों के लिए, हम एक रेडी-मेड imageUrl का उपयोग कर रहे हैं। एक वास्तविक ऐप में, आपको यूजर को अपनी इमेज चुनने, इसे सर्वर पर अपलोड करने, इमेज URL प्राप्त करने, और फिर पोस्ट बनाने के लिए इसका उपयोग करने की अनुमति देनी होगी।

CreatePost मेथड CreateUser मेथड के समान दिखता है।

Future<void> createPost(String userId) async {
  await http
    .post(Uri.parse(CREATE_USER_POST_URL),
      body: convert.jsonEncode({
        'userId': userId,
        "postText": postTextController.text,
        "postImage": _postPicUrl[i]
      }))
    .then((response) async {
      var jsonResponse = convert.jsonDecode(response.body) as Map<String, dynamic>;
      setState(() {
        _loading = false;
      });
      if (response.statusCode == 400) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          padding: EdgeInsets.all(10),
          backgroundColor: Colors.red,
          content: Text(jsonResponse['message'])
        ));
      } else if (response.statusCode == 200) {
        print('post id is :' + jsonResponse['id']);
        Navigator.of(context).pop();
      }
    });
}

सभी पोस्ट सूचीबद्ध करें

हमारे एप्लिकेशन पर होम स्क्रीन बनाए गए सभी पोस्ट की सूची प्रदर्शित करेगी।

कुछ ऐसा:

तनाव-मुक्त तरीके से सभी पोस्ट प्राप्त करने के लिए, हमें पहले एक कस्टम डार्ट ऑब्जेक्ट बनाने की आवश्यकता है जो एक सिंगल पोस्ट को दर्शाता है।

class Post {
  String? postText;
  String? userId;
  String? createdOn;
  String? id;
  String? postImage;
  PostAdmin? postAdmin;

  Post({this.postText, this.userId, this.createdOn, this.id, this.postImage, this.postAdmin});

  Post.fromJson(Map<String, dynamic> json) {
    postText = json['postText'];
    userId = json['userId'];
    createdOn = json['createdOn'];
    id = json['id'];
    postImage = json['postImage'];
    postAdmin = json['postAdmin'] != null ? PostAdmin.fromJson(json['postAdmin']) : null;
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['postText'] = this.postText;
    data['userId'] = this.userId;
    data['createdOn'] = this.createdOn;
    data['id'] = this.id;
    data['postImage'] = this.postImage;
    if (this.postAdmin != null) {
      data['postAdmin'] = this.postAdmin!.toJson();
    }
    return data;
  }
}

class PostAdmin {
  String? timestamp;
  String? userId;
  String? username;
  String? firstName;
  String? lastName;
  String? profilePic;

  PostAdmin({this.timestamp, this.userId, this.username, this.firstName, this.lastName, this.profilePic});

  PostAdmin.fromJson(Map<String, dynamic> json) {
    timestamp = json['timestamp'];
    userId = json['userId'];
    username = json['username'];
    firstName = json['firstName'];
    lastName = json['lastName'];
    profilePic = json['profilePic'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['timestamp'] = this.timestamp;
    data['userId'] = this.userId;
    data['username'] = this.username;
    data['firstName'] = this.firstName;
    data['lastName'] = this.lastName;
    data['profilePic'] = this.profilePic;
    return data;
  }
}

फिर, हम http.Response को उस कस्टम डार्ट ऑब्जेक्ट में परिवर्तित करते हैं।

List<Post> parsePosts(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Post>((json) => Post.fromJson(json)).toList();
}

Future<List<Post>> fetchPosts(http.Client client) async {
  final response = await client.get(Uri.parse(GET_POSTS));
  return compute(parsePosts, response.body);
}

fetchPosts मेथड का रिटर्न टाइप Future<List<Post>> है।

यदि आप धीमे डिवाइस पर fetchPosts() फंक्शन चलाते हैं, तो आप देख सकते हैं कि ऐप थोड़ी देर के लिए फ्रीज हो जाता है क्योंकि यह JSON को पार्स और कन्वर्ट करता है। यह जैंक है, और आप इससे छुटकारा पाना चाहते हैं।

हम compute फंक्शन का उपयोग करके पार्सिंग और कन्वर्जन को बैकग्राउंड में ले जाकर जैंक को हटाते हैं।

compute(parsePosts, response.body);

compute() फंक्शन महंगे फंक्शन को बैकग्राउंड आइसोलेट में चलाता है और परिणाम वापस करता है।

होम स्क्रीन फाइल में, हम FutureBuilder विजेट का उपयोग करके आपके डेटाबेस से सभी पोस्ट को सूची के रूप में एसिंक्रोनस रूप से प्राप्त करेंगे।

हमें दो पैरामीटर प्रदान करने होंगे:

• वह Future जिसके साथ आप काम करना चाहते हैं। इस मामले में, fetchPosts() फंक्शन से वापस किया गया Future।
• एक बिल्डर फंक्शन जो फ्लटर को बताता है कि Future की स्थिति के आधार पर क्या रेंडर करना है: लोडिंग, सक्सेस, या एरर।

ध्यान दें कि snapshot.hasData केवल तभी true लौटाता है जब स्नैपशॉट में नॉन-नल डेटा मान होता है।

चूंकि fetchPosts केवल नॉन-नल मान वापस कर सकता है, फंक्शन को "404 Not Found" सर्वर रिस्पॉन्स के मामले में भी एक एक्सेप्शन फेंकना चाहिए। एक्सेप्शन फेंकने से snapshot.hasError true पर सेट हो जाता है जिसका उपयोग एरर मैसेज प्रदर्शित करने के लिए किया जा सकता है।

अन्यथा, स्पिनर प्रदर्शित किया जाएगा।

Expanded(child: FutureBuilder<List<Post>>(
  future: _posts,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      List<Post>? posts = snapshot.data;
      if (posts != null) {
        return ListView.builder(itemBuilder: (context, index) {
          return Card(
            child: Container(
              padding: EdgeInsets.all(10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(1000),
                    child: Image.network(
                      posts[index].postAdmin!.profilePic!,
                      fit: BoxFit.cover,
                      height: 40,
                      width: 40,
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.only(left: 10),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(posts[index].postAdmin!.username!, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                          Text(posts[index].postText!),
                          ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                              posts[index].postImage!,
                              fit: BoxFit.cover,
                              height: 150,
                              width: size.width,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        }, itemCount: posts.length);
      }
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    // डिफ़ॉल्ट रूप से, लोडिंग स्पिनर दिखाएं।
    return Container(
      height: 40,
      width: 40,
      child: Center(child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).colorScheme.secondary))),
    );
  },
))

initState मेथड में, हम fetchPosts को कॉल करते हैं:

late Future<List<Post>> _posts;
@override
void initState() {
  super.initState();
  _posts = fetchPosts(http.Client());
}

हम fetchPosts को build मेथड के बजाय initState में कॉल करते हैं क्योंकि फ्लटर हर बार build() मेथड को कॉल करता है जब उसे व्यू में कुछ भी बदलने की आवश्यकता होती है, और यह आश्चर्यजनक रूप से अक्सर होता है। बिल्ड() मेथड में फेच कॉल छोड़ने से API अनावश्यक कॉल से भर जाता है और आपका ऐप धीमा हो जाता है।

पूरा सोर्स कोड देखने के लिए स्वतंत्र महसूस करें।

इंटरफेस बनाने के लिए अभी भी कुछ एंडपॉइंट्स बाकी हैं, लेकिन एक अच्छे ट्यूटोरियल के बिना एक्सरसाइज क्या है 😂

निष्कर्ष

इस पोस्ट सीरीज में, हमने देखा कि अपस्टैश के साथ सर्वरलेस REST API कैसे बनाया जाता है, जबकि उन्हें मोबाइल एप्लिकेशन के माध्यम से उपभोग किया जाता है।

मुझे यह देखकर खुशी होगी कि आप आगे अपस्टैश के साथ क्या बनाते हैं, या आप इस ट्यूटोरियल को अपने उपयोग के मामले के अनुरूप कैसे बढ़ाते हैं।

यदि आपको यह लेख उपयोगी लगा, तो कृपया अपने सोशल मीडिया पेजों पर साझा करें।

प्रश्न हैं? एक टिप्पणी छोड़ें।

यदि आपको कोई त्रुटि मिली, तो आप जानते हैं कि क्या करना है। एक टिप्पणी छोड़ें और मैं ASAP इस पर काम करूंगा।

हैप्पी कोडिंग ✌🏿

संदर्भ

• अपस्टैश डॉक्स
• रेडिस
• फ्लटर
• इंटरनेट से डेटा लाना