Display image in Thunkable Application using Firebase

How to display image in Thunkable Application using Firebase.

हेलो दोस्तों आप अगर Thunkable का use करते हो तो आपको पता होगा की एप्लीकेशन क्रिएट करते वक़्त हमे इस बात का भी ख्याल रखना होता है की जो एप्लीकेशन हम डेवेलोप कर रहे हैं वो ज़्यादा साइज का ना हो जाए क्यों की ज़्यादा साइज की एप्लीकेशन में हैंग होने की प्रॉब्लम बढ़ जाती है और इससे हमारे एप्लीकेशन users को irritation feel होने लगती है और ऐसे कंडीशन में वो एप्प को unistall भी कर देते हैं जिससे हम एक कीमती यूजर खो देते हैं. दोस्तों अक्सर एंड्राइड एप्प डेवेलोप करते वक़्त हम ये पते हैं की हमारा एप्प में साइज बढ़ती है वो फोटोज की वजह से होती है. अगर हम सारे फोटोज रिमूव करके देखे तो हमारा एप्प काफी काम साइज का हो जाता है और हैंगिंग प्रॉब्लम ख़तम हो जाती .
तो इसका solution क्या है तो इसका solution है Firebase .

 Firebase क्या है ?

अगर साधारण शब्दों में कहें तो ये एक गूगल का ही प्रोडक्ट है जो mainly स्टोरेज के काम में आता है . इसमें बहुत सारे feature फ्री में उपयोग कर सकते हैं बिना किसी परेशानी के इसी में एक फीचर है इमेज स्टोरेज की . इसके और फीचर्स हम आने वाले पोस्ट्स में जानेंगे . आज हम बात करेंगे की कैसे हम फ़िरेबाज़ में इमेज अपलोड कर के उसे अपने एंड्राइड एप्प में शो करेंगे और अगर हम चाहे तो उस इमेज को बदल भी सकते हैं अपनी इच्छा अनुसार l

तो चलिए अब हम जानते हैं मेथड की कैसे हम इमेज को Firebase से फेच कर के अपने Thunkable के एप्प में शो कराएंगे .

STEP 1

सबसे पहले आपको
firebase की वेबसाइट में gmail अकाउंट का उसे करके लॉगिन करना होगा
https://console.firebase.google.com/
जब आप लॉगिन करेंगे तो आपको + Add Project दिखाई देगा आपको इस्पे क्लिक कर लेना है फिर इसके बाद आपको प्रोजेक्ट का नाम , देश का नाम डालना है इसके बाद create project पर क्लिक कर लेना है
इसमें कुछ सेकण्ड्स का टाइम लगेगा फिर आपको Continue पर क्लिक कर लेना है.
अब आपका Project Start हो जाएगा

STEP 2

अब आप यहाँ पे आपको लेफ्ट साइड में टॉप में Setting का Icon दिख रहा होगा इसमें आपको क्लिक करना है जब आप यहाँ पर क्लिक करोगे तो एक Dialogue box open होगा इसमें Project Setting पर क्लिक कर ले इसके बाद एक कुछ सेकण्ड्स के प्रोसेस के बाद विंडो ओपन होगी यहाँ सबसे ज़रूरी Web API key आपको मिलेगी यहाँ , ये सबसे इम्पोर्टेन्ट key है जो हमे कॉपी कर के Thunkable में इस्तेमाल करना है .
मैं आपको बताता जाऊं के Firebase से thunkable में connectivity बनाने के लिए हमे 2 Factors चाहिए जिन्हे हम कॉपी कर के Firebase से Thunkable में पेस्ट कर देते हैं.

  1. Web API Key
  2. Storage Bucket

Web API key आपको project Setting के अंदर मिल जाएगा l

How to display image in Thunkable Application using Firebase.

STEP 3

Storage Bucket कहाँ से generate करे ?

अब आपको left साइड में Storage दिखाई दे रहा होगा आपको वहां क्लिक कर के Open कर लेना इसके बाद Get Started पे क्लिक कर लेना है
gs://myappl-4e11e.appspot.com
आपको Get Started पे क्लिक करने के बाद FILES के अंदर ऊपर दिखाए गए लिंक के जैसा लिंक आपको अपने स्क्रीन पर भी दिखेगा इसमें आपको इस बात का ध्यान रखना है की इसमें gs:// छोड़ के बाकी सब कॉपी कर लेना है myappl-4e11e.appspot.com इसे thunkable में Storage Bucket में पेस्ट कर लें .

अब आपको एक काम और करना है आपको RULES में जाए और वहां निचे दिखाए गए सेक्शन की तरह चेंज करे

service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
Note: {bucket} =
myappl-4e11e.appspot.com Replace कर ले इस  Storage bucket के साथ,

Note: अब आपको दूसरा क्या चेंज करना है . यहाँ आपको null की जगह true डालना है l

इसके बाद ये सारे changes करके आपको PUBLISH कर देना है इसके बाद RULES PUBLISHED का आपको messege आएगा .

अब आप FILES के अंदर में जो इमेज एप्लीकेशन में शो करना है उसे अपलोड कर ले . यहाँ दो बातों का ध्यान रखना है पहली ये की इमेज का नाम छोटा रखे अपनी ज़रूरत के अनुसार और दूसरी ये की इमेज का साइज काम रखे ताकि इमेज जल्दी से लोड हो एप्प के अंदर.

ये सारी सेटिंग पूरी करने के बाद आपको सावधानी से API KEY और Storage Bucket, Thunkable में पेस्ट कर देना ध्यान रहे एक भी स्पेलिंग मिस्टेक नहीं होनी चाहिए.

STEP 4

Thunkable ओपन कर लीजिए यहाँ अगर आपने firebase का extension import कर लेना है .जब import हो जाए तो उसे drag कर के main screen में ले आएंगे फिर उसे select कर लेंगे. अब उसमे API KEY और Storage Bucket के कॉपी किए डाटा को पेस्ट कर ले और Design Section में और इमेज की साइज की width और height सेट कर ले ,अपनी ज़रूरत के अनुसार इमेज ले ले.

अब बारी है BLOCK WRITING की जो सबसे ज़्यादा ज़रूरी है इसमें निचे दिखाए गए method को फॉलो करे

 

अब आपका एप्लीकेशन रेडी है इसे एक्सपोर्ट कर के टेस्ट कर ले l

How to display image in Thunkable Application using Firebase.

 

 

 

 

Display image in Thunkable Application using Firebase
Rate this post

2 Comments

  1. Ashish Uttekar September 2, 2018
    • wasim akram September 2, 2018

Leave a Reply

%d bloggers like this: