Apna Pehla App Banayein: HelloCodi | High Tech 7

📱 Apna Pehla App Banayein: HelloCodi | High Tech 7

Aapne computer aur mobile setup kar liya hai, Designer aur Blocks Editor ka use seekh liya hai — ab time hai HelloCodi App banane ka. Aapke browser mein Designer ya Blocks Editor open hona chahiye, aur Android/iOS device ya emulator connected hona chahiye test karne ke liye. (Agar setup nahi kiya hai, toh pehle "Setup Instructions for App Inventor" follow karein.)

New Project start karne ke liye:

• Projects menu se Start New Project choose karein.

• Project ka naam rakhein: HelloCodi

---

🐝 HelloCodi: Tap the Bee, Hear the Buzz!

Ye ek simple aur fun app hai jo aap kuch hi minutes mein bana sakte ho. App mein ek button hoga jisme bee ki photo hogi, aur jab user button tap karega toh phone se bee ki buzzing sound sunai degi.

🔽 Zaroori Files Download karein:

• Bee Image: codi.jpg (Right-click karke “Save As” karein)

• Bee Sound: Bee-Sound.mp3 (Right-click karke “Save As” karein)

---

🎨 App Design Karna – Components Add Karna

Designer Window ke Left Side mein “Palette” hota hai — yeh app banane ke ingredients hote hain jaise Button, Label, Sound, Image, etc.

Step 1a: Button Component Add karna

• User Interface palette se Button drag karke screen par drop karein.

Step 1b: Button ke Image Property mein Bee photo lagayein

• Properties pane mein Image ke saamne "None…" likha hoga — uspe click karein → Upload File... → apna codi.jpg choose karein → Open → OK.

Step 2: Button ke upar likha text hataayein

• Button1 ke “Text” property mein jo “Text for Button1” likha hai, usse delete karke blank chhod dein.

Step 3: Label Component Add karna

• Label drag karke bee ke neeche screen mein drop karein.

• Label1 ke properties set karein:

  1. Text: “Touch the Bee”

  2. FontSize: 30

  3. BackgroundColor: Apni pasand se (e.g., Aqua)

  4. TextColor: Alag color choose karein jo clearly dikhe

---

🔊 Sound Add Karna

Step 4:

• Palette se Media drawer kholke Sound component drag karke screen par drop karein.

• Sound component “Non-visible” area mein appear karega.

• Sound1 ke Source property mein "None..." likha hoga — uspe click karein → Upload File... → apna Bee-Sound.mp3 upload karein → Select karein.

---

🧱 Programming with Blocks Editor

Ab tak aapne app ke components arrange kiye hain Designer mein. Ab chaliye behavior set karte hain Blocks Editor ke through.

Switch to Blocks Editor

• Top right corner mein Blocks button par click karein.

Step 1: Button Click Block

• Button1 drawer open karein → when Button1.Click block ko work area mein drag karein.

Step 2: Sound Play Block

• Sound1 drawer open karein → call Sound1.Play block ko drag karke “do” section mein fit karein.

Aapka final block code aise dikhna chahiye:

🧩 when Button1.Click → call Sound1.Play

Ab jab button click hoga, bee ki awaz bajegi! 🎉

---

📦 App Package Karna

Jab tak phone/emulator App Inventor se connected hai, app live chalta rahega. Lekin agar aap chahte ho ki bina connection ke bhi app chale, toh aapko app ko package (APK) karna padega.

Packaging ke liye:

• Top menu mein Build tab par click karein.

• Do options milenge:

1. App (provide QR code): QR code milega jisse app install kar sakte hain (sirf 2 ghante ke liye valid hota hai).

2. App (save to my computer): .apk file computer mein save hoti hai, jise manually install kiya ja sakta hai.

---

🔁 Review – Kya Seekha?

✔ Aapne seekha kaise components select karte hain aur unki properties set karte hain
✔ Media files (image, sound) kaise upload karte hain
✔ Blocks Editor mein behavior kaise define karte hain
✔ event handler blocks ka use
✔ App ko QR code ya APK ke through kaise share/install karte hain

---