Theory
📱🧩 6. Login App
🌟 What is this app about?
- Our app is the secret door to a clubhouse, and only members with the right password can get in!
- It has a cool username box and a secret password box that keeps your code hidden.
- With a big “Login” button, it’s like having your own secret knock to enter the club.
⚙️Components used in this app
TextBox
- 🖊️ The TextBox component in App Inventor is like a magic box where you can type in anything you want, like your name or a secret code!
- ⌨️ It’s like having a mini keyboard in your app where you can write down all your brilliant ideas.
- 🎨 You can make the words big or small, change their colour, and even make them look bold or super fancy!
- ✂️ If you make a mistake, no worries! You can erase it and type it again, just like with a pencil and eraser.
- 💌 Think of the TextBox like your digital notepad, ready to catch and keep all your thoughts!
PasswordTextbox
- 🔒 The PasswordTextbox in App Inventor is like a secret diary lock, keeping your secrets safe from nosy siblings!
- 🤫 When you type in it, it shows stars or dots instead of letters, so no one can peek at your password.
- 🗝️ You get to choose the secret key that opens the lock – that’s your password!
- 🎨 You can make the lock look cool by changing its colour and size, just like decorating your diary.
- 💫 Even if your best friend is watching, your password stays as secret as your hidden candy stash!
👩💻 Designing the App:
- 🖥️ Prepare Your Screen
- Start a new project in App Inventor and you’ll be on ‘Screen1’.
- Set ‘Screen1’s ‘Align Horizontal’ and ‘Align Vertical’ to ‘Center’ to make sure everything looks neat in the middle.
- 🚪 Set Up a Welcome Sign
- Drag a ‘Label’ to the top and call it “Login Screen”. Make it bold with size 20 font and a cool blue colour.
- 📛 Arrange Username Section
- Place a ‘Vertical Arrangement’ for structure, set its ‘Width’ to ’80 Percent’ of the screen for a cozy fit.
- Inside it, put a ‘HorizontalArrangement’ (we’ll call this HorizontalArrangement1) that holds a ‘Label’ saying “Username” and a ‘TextBox’ where you’ll type your name.
- 🔐 Arrange Password Section
- Below that, add another ‘HorizontalArrangement’ (HorizontalArrangement2) with a ‘Label’ for “Password” and a ‘PasswordTextBox’ that keeps what you type as secret.
- ✨ Add the Magic Button
- Under the password, place a ‘Button’ and set its text to “Login”. Make it bold and blue so it stands out.
- 🧪 Test the Secret Knock
- Time to test your app in the emulator or on your phone. Try typing in your secret code!
👩💻 Coding the App:
- 🕵️♂️ When you press the “Login” button, the app starts its detective work.
- 🔍 It looks closely at the Username box and the Password box to see if they match. It’s like checking if the key fits the lock!
- 🗝️ If the Username and Password are the same, it unlocks a secret message that says “LOGIN SUCCESSFUL”. That means you got the secret code right, and you’re in the club!
- 🚫 But if they don’t match, it pops up with “LOGIN FAILED”. Oops, that’s not the right key, so the treasure chest stays locked.
So, this little bit of code is like having a secret handshake to get into the clubhouse. If you know the handshake, you’re in! If not, try again next time! 🤝🚪
🚀 What Other Apps Can You Build?
- 🎮 A gaming app where you log in to see the top-secret game of the day.
- 📚 A book club app where members log in to get the latest mystery book pick.
- 🎨 An art portal app where young artists log in to share their secret masterpieces.
With these steps, you’re the boss of who gets into your app clubhouse! Keep it fun and keep it secret! 🕵️♂️🔐✨