Unit -6
App Development
Building Apps using problem, solving techniques on any app development platform, Modeling,
incremental and iterative, reuse, modularization, algorithmic thinking, abstracting and modularizing,
decomposition, testing and debugging.
Activities: Sample App Developments for societal problems.
App Development:
App development is the process of designing, building, and deploying applications that solve
problems, perform tasks, or provide entertainment. Applications can be developed on various platforms
depending on the target users, devices, and development tools available. An app platform is the
environment or framework used to create and run apps.
App development platforms:
1. Android is an open-source mobile operating system developed by Google, and apps for it are
usually built using Java, Kotlin, or Flutter in Android Studio.
2. iOS is Apple’s mobile platform used for iPhones and iPads, and developers create apps for it
using Swift or Objective-C in Xcode.
3. Web platforms allow developers to create applications that run in browsers using technologies
like HTML, CSS, and JavaScript.
4. Cross-platform frameworks such as Flutter, React Native, and Ionic enable developers to build
apps that work on both Android and iOS from a single codebase.
5. No-code or low-code platforms like MIT App Inventor, Thunkable, and Kodular allow users to
build apps using visual drag-and-drop interfaces without writing traditional code.
Phases of App Development:
1. Problem Identification
Recognize a real-world problem or need that can be solved using technology.
Example: Managing daily expenses.
2. Requirement Analysis
List the features and functions your app should include.
Example: Add, view, and categorize expenses.
3. Design
Create a visual plan of the app using wireframes, flowcharts, or storyboards. Focus on user
interface (UI) and user experience (UX).
4. Development
Write the code or use drag-and-drop components to implement the design. Use modular and
reusable code blocks.
5. Testing
Check for errors, bugs, or usability issues. Ensure that all features work as intended.
6. Deployment
Publish the app to a store or make it accessible to users.
Example: Google Play Store, Apple App Store, or a website.
7. Maintenance
Update the app regularly based on user feedback or new requirements.
6.1 Building Apps using problem:
6.2 Problem solving techniques in app development platform:
App development is not just about coding it is about solving real-world problems efficiently using
technology. A successful app begins with identifying a problem and applying systematic problem-
solving techniques to design and implement a solution.
Steps in App Development through Problem Solving
Step 1: Problem Identification
Observe real-life issues faced by users.
Define the problem clearly.
Example: “Students forget assignment deadlines” → Problem: Lack of reminder system.
Step 2: Requirement Analysis
Understand what users need.
Identify key features and constraints.
Example: Notification system, task list, calendar sync.
Step 3: Modeling the Solution
Modeling involves creating a visual representation of how the app will function before starting
actual development. Developers use flowcharts, diagrams, storyboards, or wireframes to plan the app’s
logic and user interface. Modeling helps in identifying design flaws early and provides a clear roadmap
for implementation.
For example, a flowchart can show the sequence of screens and how users move from one screen to
another when performing tasks like logging in or submitting data.
Step 4: Incremental and Iterative Development
This approach focuses on building the app step by step instead of completing it all at once. In
incremental development, the app is divided into small parts (modules), and each part is developed and
tested individually. In iterative development, the app is continuously improved based on testing and user
feedback.
For instance, a developer might first build a simple version of a task management app with basic
features, then add notifications, data sync, and design updates in later versions.
Step 5: Reuse and Modularization
Reuse means using existing code components, libraries, or templates to reduce effort and
development time. Modularization means dividing the app into independent, manageable modules that
perform specific functions. This approach increases code efficiency, readability, and maintainability,
making it easier to update or fix issues in specific parts of the app.
For example, the same login module can be reused in multiple apps without writing new code.
Step 6: Algorithmic Thinking
Algorithmic thinking involves designing a step-by-step logical process to solve problems or
perform tasks within the app. It focuses on the sequence of actions needed to achieve a specific result.
This structured thinking ensures that the app performs accurately and efficiently.
For example, in an expense tracker app, an algorithm can be used to calculate total expenses, sort data by
category, or send reminders based on due dates.
Step 7: Abstracting and Decomposing
Abstraction means focusing only on the essential details of a problem while ignoring unnecessary
complexities. Decomposition is breaking down a large, complex problem into smaller and more
manageable sub-problems. For instance, when creating a food delivery app, the entire system can be
decomposed into modules such as user registration, restaurant listing, order placement, and payment.
This makes development more organized and simplifies debugging and testing.
Step 8: Testing and Debugging
After development, the app undergoes testing to check whether it meets all functional and
performance requirements. Testing helps in identifying errors, bugs, or usability issues that may affect
user experience. Debugging is the process of finding and fixing those errors to ensure smooth operation.
For example, developers may test how the app behaves under different condition are slow internet or low
battery and then debug issues accordingly. Thorough testing and debugging are crucial for delivering a
stable and reliable application.
MIT App Inventor
MIT App Inventor is a visual programming platform that allows users to create Android and iOS
apps easily using a drag-and-drop interface without writing traditional code. It was developed by MIT
(Massachusetts Institute of Technology) to help students and beginners learn programming and app
development through block-based coding.
Features
1. Block-based coding:
You build logic using colorful puzzle-like blocks instead of text code.
2. Designer and Blocks Editor:
o Designer View: Used to add components like buttons, labels, and images.
o Blocks View: Used to add logic and control flow.
3. Live Testing:
You can test your app instantly on your mobile using the MIT AI2 Companion app.
4. Component Library:
Includes UI components (Buttons, TextBoxes), sensors (Accelerometer, GPS), media (Camera,
Sound), and connectivity tools (Bluetooth, Web).
5. Cloud Storage:
Projects are saved online and can be accessed from any device.
MIT app inventor:
MIT App Inventor is a web-based visual programming environment developed by the
Massachusetts Institute of Technology (MIT) that allows users to create mobile applications for Android
and iOS devices using a simple drag-and-drop interface without needing advanced coding skills.
Uses:
1. Mobile App Development: Create fully functional Android and iOS apps easily.
2. Learning Programming: Helps beginners understand programming logic and event-driven
programming.
3. Educational Projects: Widely used in schools and colleges for teaching computational thinking.
4. Prototyping Apps: Quickly design and test app ideas visually.
5. STEM Learning: Encourages creativity, problem-solving, and innovation among students.
Steps to open MIT app inventor:
1. Go to App Inventor on the web [Link], and click the orange "Create" button
from the App Inventor website
Fig.6.1 MIT app inventor Home page
2. Use an existing gmail account to log in to [Link] or
To set up a brand new gmail account, go to [Link]/SignUp
Fig. 6.2 Account Creation
3. Click "Continue" to dismiss the splash screen
Fig. 6.3 Continue screen
4. Start a new project
Fig. 6.4 Starting a new project
5. Name the project
Fig. 6.5 Name of the Project
6. Designer view
Fig. 6.6 MIT Designer View
7. Add button
Our project needs a button. Click and hold on the word "Button" in the palette. Drag your mouse
over to the Viewer. Drop the button and a new button will appear on the Viewer.
Fig. 6.7 User Interface
8. Change the Text on the Button
Fig. 6.8 Properties panel
Connect App Inventor for live testing:
There are three ways to connect
1. MIT AI2 Companion App
2. Emulator
3. Connect Using USB
Option 1 : MIT AI2 Companion App
Fig. 6.9 MIT AI Comapanion
Step 1: Install the Companion App
1. On your Android or iPhone, open Google Play Store or Apple App Store.
2. Search for MIT AI2 Companion.
3. Install it.
Step 2: Open Your Project in MIT App Inventor
1. Go to 👉 [Link]
2. Click “Create Apps!” and sign in.
3. Open your project (e.g., ToDoReminderApp)
Fig. 6.10 Scan QR code to Connect
Step 3: Connect Your Phone
1. On the MIT App Inventor web interface, click the “Connect” menu at the top.
2. Choose AI Companion.
3. A QR code will appear on the screen
Step 4: Scan the QR Code
1. Open the MIT AI2 Companion App on your phone.
2. Tap “Scan QR code”.
3. Point your phone’s camera at the QR code on your computer screen.
Fig. 6.11 App in mobile
Option 2: Connect Using USB (if Wi-Fi is not available)
1. Install MIT App Inventor Setup Software on your computer.
Download from [Link]
2. Connect your phone to the computer using a USB cable.
3. Enable USB Debugging on your phone (under Developer Options).
4. In App Inventor, click Connect → USB.
Your app will open on your phone.
Option 3: Use an Emulator (if no phone available)
1. Download and install the AI2 Emulator from the same setup page.
2. In App Inventor, click Connect → Emulator.
3. Wait for it to load (may take a minute).
4. Test your app on the virtual phone
Activities: Sample App Developments for societal problems.
Activities 1 : Talking Tom in MIT app inventor
Step 1: Open MIT app inventor and start a new project Talking Tom
Step 2: Drag image from user interface then drop in screen1and change the properties
Step 3: Drag and drop button and change the name to Click here to speak from properties
Step 4: Drag and drop SpeechRecognitizer1 and TextToSpeech1
Step 5: Goto Block coding
Step 6: Open MIT app inventor in mobile and then connect -> AI companion in MIT
Step 7: Scan QR code. The output will displays
Activity 2 : BMI calculator App using MIT app inventor
Step 1: Open [Link]
Step 2: In Project -> start new project -> named as BMI calculator
Step 3: Add necessary components in screen1
[Link] Component Purpose
HorizontalArrangement To fix label and textbox
1 Label1 To display app title “Height”
2 Label2 To display app title “Weight”
3 TextBox1 To get height value
4 TextBox2 To get weight value
5 Button Calculate BMI value
Step 4: Designer components change the properties of components
Designer (components)
Add these to Screen1:
Height (TextBox1) — for height in cm
o Properties: Enabled = true, ReadOnly = false, Hint = Enter height in cm, NumbersOnly =
true (optional)
Weight (TextBox2) — for weight in kg
o Properties: Enabled = true, ReadOnly = false, Hint = Enter weight in kg, NumbersOnly =
true (optional)
Calculate (Button) — text Calculate
LabelResult (Label) — to show the BMI result and category
Image – to show the BMI imgage
Properties: picture -> upload BMI image
Step 5 : Blocks(logic)
Step 6: Open MIT app inventor in mobile and then connect -> AI companion in MIT
Step 7: Scan QR code. The output will displays