1 of 25

Introduction to Mobile App Development

Presented by: Eng Noura Tarek

2 of 25

Table of contents

01

Introduction

02

Apps platforms

03

How apps are created

04

MIT APP Inventor

05

Simple app

3 of 25

About ME

Noura Tarek

Software Engineer

nourat536@gmail.com

4 of 25

Introduction

01

What is Mobile App?

5 of 25

What is a Mobile app?

A mobile app is a program that runs on smart phones or tablets to learn new things, play games, or have fun!

6 of 25

Fun Question

Can you name an App you use every day?

7 of 25

What is Mobile app Development

Mobile development is the process of creating apps.

Apps are made using:

  • Design (how the app looks)
  • Coding (telling the app what to do).

8 of 25

Apps Platfotms

02

9 of 25

Apps Platforms

Android is an operating system made by Google, but IOS operating system is made by Apple company.

10 of 25

How Apps are created

03

11 of 25

How are apps created?

👩‍💻To develop an app, the coding languages like Java, Swift, or Kotlin are used .

�🧩 But for beginners, we can use block-based coding, which is like solving a puzzle!

That’s why we will introduce Mit App Inventor which use colorful blocks for coding.

12 of 25

How Developers �see Application/ Design?

13 of 25

04

MIT App Inventor

14 of 25

What is an App inventor?

Block Editor

15 of 25

Why App Inventor?

No typing

Just drag and drop blocks.

Web- based

Works on any computer.

Easy Design

Arrange buttons and texts easily.

16 of 25

Mit App Inventor Interface

First,

Designer View

17 of 25

Mit App Inventor Interface

Second,

Blocks View

18 of 25

05

Let’s Start

Let’s build a simple app

19 of 25

The main Parts of App Inventor

Testing the program

Telling the app what to do

Designing the app screen

20 of 25

Your first app: Hello World!

From Designer view:

Add notifier on your screen

1

21 of 25

You first app: Hello World!

Add your code

From Blocks view:

Put on screen1 initialze block +show message dialog

2

22 of 25

Test the App

23 of 25

Test the App

1. Choose Ai companion from the connect menu

2. A unique app code appears in both QR and text form.

3. On your phone, Start the MIT A12 companion app

4. Enter the app code and click connect with code or click Scan the QR code to connect your phone

24 of 25

The Output

25 of 25

Thanks!

Do you have any questions?

Nourat536@gmail.com

+201147832612