EEI3269 - DaySchool_1.pptx

EEI3269/EEX3269 Introduction to Mobile Application Development Kasun Aratthanage [email protected] Centre for IT Education Services (CITES) Faculty of Engineering Technology The Open University of Sri Lanka Course Aim The aim of this...

EEI3269/EEX3269 Introduction to Mobile Application Development Kasun Aratthanage [email protected] Centre for IT Education Services (CITES) Faculty of Engineering Technology The Open University of Sri Lanka Course Aim The aim of this course is to impart knowledge of mobile application development platforms and constituents of a mobile application. This course is focused on UI/UX development of Mobile Applications. This course consists of 4 Units. Center for IT Education Services (CITES) General Course Information 2 credit course. At least 100 hours of study time. All students will be assigned groups and each group will have a Course Tutor who will be your facilitator to learn this course. Center for IT Education Services (CITES) Session Level Learning Outcomes Define the popular Mobile Application Platforms. Define and choose the right platform for your requirement. Define and get ready to build mobile applications. Center for IT Education Services (CITES)  In one word, what’s the first thing that comes to mind when you think of mobile apps?" https://www.menti.com/al2d91pw42gb Center for IT Education Services (CITES) UNIT 1 - Introduction to Mobile Applications What is Mobile Application? A mobile application, most commonly referred to as an app, is a type of application software designed to run on a mobile device, such as a smartphone or tablet computer. https ://www.techopedia.com/definition/2953/mobile-app Center for IT Education Services (CITES) lication-mobile-app Key Drivers for Mobile Applications Smartphone Penetration Technological Advancements User Expectations Business Digitization & E-commerce Growth Social Media and Communication Health and Fitness Trends Gaming Industry Expansion Monetization Opportunities Emerging Technologies Center for IT Education Services (CITES) Key Domain Areas of Mobile Apps Gaming Music & Entertainment Health & Fitness Social Networking Retail & E-commerce Travel & Hospitality Learning & Education https://www.grandviewresearch.com/industry-analysis/mobile-application-market Center for IT Education Services (CITES) Attributes of Mobile applications Ubiquity User friendliness Location awareness Minimalistic High Security Regular updates Offline work Personalization Analytics Social Media integration Center for IT Education Services (CITES) Key Challenges in Mobile App Development: What You Need to Know Center for IT Education Services (CITES) Types of Applications Standalone PC Applications A standalone application is an application that runs locally on the device and doesn’t require anything else to be functional. All the logic is built into the app, so it doesn’t need an internet connection nor any other services installed. Client server applications The client requests services from the server by calling functions in the server application. In a distributed computing environment, where the client program and the server program execute on different machines and possibly even on different platforms, the client and server communicate through a communications layer that is often called middleware. Center for IT Education Services (CITES) Types of Applications(Continue..) Web Based Applications Model-View-Controller (MVC) architecture an architectural pattern that separates an application into three main logical components Model View Controllers Center for IT Education Services (CITES) Web Based Applications - MVC Web Application Center for IT Education Services (CITES)  Web Based Applications - MVC Web Application Presentation layer (View layer): User experience components such as portlets, widgets, pages, User Interface (UI) modules, buttons, and forms are present in this layer. Business layer (Controller layer): This layer consists of business components which implement business logic and business rules. Data layer (model layer): This layer mainly consists of persistence handling components such as database access components, Data access objects (DAO), query components etc. Center for IT Education Services (CITES) Evolution of Mobile Based Application Center for IT Education Services (CITES) Content and Protocol in Mobility The main protocols used in mobile apps are as follows Wireless Application Protocol (WAP): It provides specifications and rules for wireless communication devices such as smart phones. WAP is optimized for low-memory , low-bandwidth mobile devices. Representational State Transfer (REST): This is not a protocol; it is an architectural style used in designing networked applications. Responsive mobile web applications communicate with server using light-weight REST service calls. Normally, JSON data is used in REST service for data exchange. Center for IT Education Services (CITES) Trends in Mobility Space HTML 5 based responsive apps 5G Technology Artificial Intelligence (AI) and Machine Learning (ML) Augmented Reality (AR) and Virtual Reality (VR) Internet of Things (IoT) Mobile Payments and Digital Wallets Wearable Technology Privacy and Security Enhancements Cross-Platform Development Cloud Integration Biometric Authentication Location based services Mobility as a service (MaaS) Center for IT Education Services (CITES)  Popular Mobile App Development Platforms Popular device platforms (iOS, Android) Cross-platform application development (React Native, Ionic, Xamarin) Center for IT Education Services (CITES) Android Android is an open-source mobile development platform that is based on Java and is maintained by Google. Zero/negligible development cost Open Source Multi-Platform Support Multi-Carrier Support Open Distribution Model Java and Kotlin using as programming language. Android development needs Android SDK, libraries, emulator and Android Studio IDE. Center for IT Education Services (CITES) iOS iOS is the Mobile OS for Apple devices. Apple iOS is the second-most popular mobile operating system. As of June 2021 Unix-derived operating system The development on iOS happens using objective C. iOS development includes iOS SDK (XCode), iOS Simulator, XCode IDE, and other frameworks for building iOS apps. Center for IT Education Services (CITES) React Native React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. React Native makes it easy to simultaneously develop for both Android and iOS. https://reactnative.dev/docs/getting-started Center for IT Education Services (CITES) Ionic Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. Officially, the Ionic framework has integration with Angular, but it also provides support for Vue.js and React.js, which are in development. https://www.javatpoint.com/what-is-ionic-framework Center for IT Education Services (CITES) Xamarin Xamarin provides a wide range of tools to the developer that can be used for the development of the cross-platform mobile application. It is a framework to develop a cross-platform mobile application using the C#. There are various frameworks, which offer the cross-platform app development. They use HTML and JavaScript. https://www.javatpoint.com/what-is-xamarin Center for IT Education Services (CITES) UNIT 2 - COMPONENTS OF A MOBILE APPLICATION Basic Parts of mobile applications Mobile App Architecture Types of Mobile applications Center for IT Education Services (CITES) Basic Parts of mobile applications Services Services are background processes that perform operations without directly interacting with the user interface. They can handle tasks such as fetching data from the internet, playing music, or sending notifications. Services allow the app to continue functioning even when it is not in the foreground. Example: In a music streaming app, a service might handle playing music in the background while the user navigates other apps. Center for IT Education Services (CITES) Basic Parts of mobile applications (cont..) Libraries Libraries are collections of pre-written code that developers can use to add functionality to their applications. They help speed up the development process by providing ready-made solutions for common tasks like networking, image loading, and data storage. Libraries are often third-party and can be integrated into the app’s codebase. Example: Retrofit (for handling network requests in Android), Alamofire (for networking in iOS). Center for IT Education Services (CITES) Basic Parts of mobile applications (cont..) Codebase The codebase is the collection of source code files that make up the application. It includes the logic, algorithms, and structures that define how the app functions. The codebase is written in programming languages specific to the platform, such as Swift for iOS, Kotlin for Android, or JavaScript for cross-platform apps. Example: The codebase of a messaging app might include files for managing user authentication, sending and receiving messages, and handling user data storage. Center for IT Education Services (CITES) Basic Parts of mobile applications (cont..) User Experience and Interface (UI/UX) The user experience (UX) and user interface (UI) encompass the design and interaction elements of the app. UX refers to the overall feel and usability of the app, while UI refers to the visual elements like buttons, menus, and icons. Together, they define how the user interacts with the app and how intuitive and pleasant that interaction is. Example: The sleek and intuitive design of the iOS Mail app, with its easy- to-navigate menus and visually appealing layout, enhances the user experience. Center for IT Education Services (CITES)  Mobile App Architecture obile App Architecture refers to the foundational structure and design pa at governs how the various components of a mobile application are orga d interact with each other. defines the blueprint for building and deploying a mobile app, ensuring t alable, maintainable, and efficient. Center for IT Education Services (CITES) Key Components of Mobile App Architecture Presentation Layer User Interface (UI): This layer is concerned with how the app looks and how users interact with it. It includes the design, layout, and navigation elements. User Experience (UX): Focuses on making the app intuitive and easy to use, ensuring a smooth flow of interaction for users. Business Logic Layer Business Components: This layer handles all the business logic of the app, processing user inputs, managing data, and executing operations. Workflow: Manages the flow of the app, ensuring that the business rules are applied correctly as users navigate through the app. Data Access Layer Data Utilities: Manages data transactions between the app and external data sources, such as databases, APIs, or other services. Service Agents: Facilitate communication with external services, ensuring that data is retrieved and sent securely and efficiently. Backend Services Layer Server-Side Logic: This includes the database, server-side scripting, and cloud storage, which are responsible for data storage, authentication, and other backend processes. APIs (Application Programming Interfaces): Enable communication between the mobile app and backend services, ensuring data is synchronized and accessible. Center for IT Education Services (CITES) Mobile App Architecture Center for IT Education Services (CITES) Different types of Mobile App Architecture Monolithic Architecture – Example Early Instagram All components are tightly integrated into a single codebase. Simple but can become complex and difficult to maintain as the app grows. Micro services Architecture – Example - Uber Breaks down the app into smaller, independent services or modules that can be developed, deployed, and scaled independently. MVVM (Model-View-ViewModel) - Example - Google’s Android Architecture Components Separates the development of the user interface from the business logic, making the code more manageable and testable. MVC (Model-View-Controller) – Example Apple's iOS Applications Divides Centerthe app into for IT Education three Services (CITES)interconnected components: Model Types of Mobile applications The main types of mobile apps are categorized based on their development approach and how they operate on different devices. Native mobile apps Cross-Platform Mobile Apps Hybrid apps Progressive Web Apps (PWAs) Web Apps Center for IT Education Services (CITES) Native mobile apps Native apps are developed specifically for a particular operating system (OS), such as Android or iOS. They are built using programming languages and tools native to that platform (e.g., Swift for iOS, Java/Kotlin for Android). Advantages: High performance, access to all device features, and optimized user experience. Examples: Instagram (iOS), Spotify (Android). Center for IT Education Services (CITES) Architecture of a native Mobile App Center for IT Education Services (CITES) Cross-Platform Mobile Apps These apps are developed using frameworks that allow a single codebase to be deployed across multiple platforms (e.g., Android, iOS). Popular frameworks include React Native, Flutter, and Xamarin. Advantages: Reduced development time and cost, consistent user experience across platforms. Examples: Facebook (React Native), Google Ads (Flutter). Center for IT Education Services (CITES) Architecture of Cross-Platform Mobile Apps Center for IT Education Services (CITES) Hybrid apps are essentially web apps that are wrapped in a native app shell, allowing them to be distributed through app stores. They are built using web technologies like HTML, CSS, and JavaScript but run within a native container. Advantages: Easier to develop and maintain, can access device features like native apps. Examples: Twitter, Uber Center for IT Education Services (CITES) Architecture of a hybrid Mobile App Center for IT Education Services (CITES) Progressive Web Apps (PWAs) PWAs are web applications that provide an app-like experience on mobile devices. They are accessed through a web browser but can be installed on the home screen, work offline, and send push notifications. Advantages: Platform-independent, no need for app store distribution, can work offline. Examples: Starbucks PWA, Pinterest PWA. Center for IT Education Services (CITES)  Architecture of a Progressive Web Apps (PWAs) Center for IT Education Services (CITES) Web Apps Web apps are responsive websites designed to function on any device with a web browser. They are not installed on the device and rely on an internet connection for most functionalities. Advantages: Platform-independent, easy to update and maintain. Examples: Amazon’s mobile website, Google Docs. Center for IT Education Services (CITES)  Architecture of a Mobile Web App Center for IT Education Services (CITES) Advantages and disadvantages of each platform References https://dzone.com/articles/native-vs-hybrid-vs-cross-platform-how- and-what-to Center for IT Education Services (CITES) UNIT 3 – Basics of Mobile Application Design Mobile Applications are more powerful than desktop applications in many ways. Highly personal Always on Always with us Usually connected Directly accessible Self-configurable Context awareness (Powerful sensors that can be detect location, movement, acceleration, orientation, proximity, environmental conditions) Center for IT Education Services (CITES) Principles of Mobile Application Design Should be mind focused Consistent design Follow the key guidelines Navigation models User inputs Gestures Orientation Communication Launching First impression Center for IT Education Services (CITES) Mobile Application Development Lifecycle Center for IT Education Services (CITES)  Questions? Center for IT Education Services (CITES)  Thank you PO Box 21, Nawala, Nugegoda, Sri Lanka Phone: +94 11 288 100 www.ou.ac.lk