Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    App Development Unit 1

    Uploaded by

    Udhaya Sankar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    App Development Unit 1

    Uploaded by

    Udhaya Sankar
    14 views32 pages

    Original Title

    App Development Unit 1 PPT

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    14 views32 pages

    App Development Unit 1

    Uploaded by

    Udhaya Sankar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 32

    Basics of Web and Mobile application development

     Basics of Web Development

    Frontend Development
    Backend Development
     Frontend Roadmap:

    Frontend may be HTML, CSS, JavaScript, BootStrap.

    Hyper Text Markup Language


    Cascading Style Sheets
    Bootstrap
    JavaScript
    Front End Road Map
     Backend may be PHP, Java , Python and Node.js

    PHP is a server-side scripting language


    Java is one of the programming languages
    Python is a programming language
    Node.js is an open source and cross-platform
    runtime environment for executing JavaScript
    code outside a browser.
    Basics of MobileApp Development
     Mobile apps are majorly developed for 3 Operating
    System.
    Android
    IOS
    Windows

     There are 3 different ways to develop Mobile apps:


    1 st Party Native App development
    Progressive web Application
    Cross-Platform Application
    Native App
     Native app refers to platforms such as
    Mac And Pc

    Example for Native App


    Photos
    Mail
    Contacts applications
    Native App Development

     Native app development is the process of creating


    mobile applications specific to a single platform.

     Examples are Google’s Android and Apple’s Ios.


     Flawless Performance
     Superior UI and UX
     Access to Device Features
     Better Store Support
     More Security
     Easy Testing
     Fewer Bugs
     Instant Updates
    Higher Development Costs
    More Development Time
    Need for Skilled Developers
    Require Constant Updates
    Lengthy Downloading Process
     Native App Development for Android

    Native app development for Android uses tools like


    Android SDK combined with Android Studio
    Firebase
    Android Jetpack
    Mockplus
    Command-line tools for Windows, Mac, and Linux.
     Native App Development for iOS

    The tools and resources that support the development


    mobile apps for iOS are

     iOS SDK integrated with Cocoa Touch UI


    framework
     XCode (official IDE)
     Swift Playgrounds
     TestFlight (for beta testing)
     A hybrid application is a software app that combines
    elements of both native and web applications.

     Working of Hybrid Apps:

    Developers build hybrid apps using web technologies


    such as JavaScript, CSS and HTML.
     Five hybrid mobile apps that is extremely
    popular among users across the globe:
     Example #1: Instagram

     Example #2: Uber

     Example #3: Gmail

     Example #4: Evernote

     Example #5: Twitter


     Hybrid apps cost less, take less time to create, and are easier to manage
    than native ones. Other significant benefits of hybrid app development
    include:
    Easier scalability .
    Single codebase to manage.
    Faster build time.
    Low cost of development.
     Hybrid app development has a few disadvantages as well: Offline
    availability.
    User experience.
    Lower performance.
    Availability of features.
    Errors. Hybrid software can come with hidden errors.
     Cross-platform mobile development is an approach to
    developing software applications that are compatible with
    multiple mobile operating systems (OSes) or platforms.

     Multiple frameworks could be used for cross-platform app


    development.

    Titanium
    React Native
    Xamarin
    Flutter
    Native Script
    Ionic
    Js
    PhoneGap(Cordova)
    Examples for cross-platform mobile applications

     Well-known examples of cross-platform mobile


    applications include:

     Instagram, Skype, Walmart, and Airbnb


    (React Native)

     Google Ads, My BMW App, eBay Motors, and


    the New York Times (Flutter)

     The World Bank, Fox Sports, Alaska Airlines,


    and BBC Good Food (Xamarin)
     Faster development
     Lower costs
     Wider audience
     Consistency between platforms
     Reusable code

     Lower performance
     Harder code design
     Long wait time for new features
     PWA is a web application like a mobile application that is
    stored directly on the mobile from the website.

     It creates an icon in the form of a website app, and that


    icon feels like a mobile application upon opening.

     develop that application for different platforms, such as


    iOS, Android, and Windows.
     Progressive: The term progressive means, a PWA
    application must work on any device and improve the
    performance of the user's mobile browser and design.
     Discoverable: A PWA is a website with some extra
    features. It can be searched via mobile searching
    applications like Google Chrome. App Store or Play Store
    is not required for this.
     Responsive: The UI of a progressive web app should fit
    the form factor and screen size of the device.
     App-like: A PWA application should look like a native
    application. Although the methods for creating, sharing,
    launching, and updating of the PWA are completely
    different from the original application.
     Connectivity: independent: It works even when
    connectivity is very low.
     Advantages of PWA

     PWA works like an app on mobile and looks very


    impressive.
     It does not need an update.
     It is easily saved in the device.
     It's immediately loads on your mobile.
     It saves money and time compared to creating applications
    separately for android, iOS, and other platforms.
     Post can be read even if there is no internet.
     Internet data is less used in it.
     PWA is cheaper than the other applications.
     Disadvantages of PWA

     It supports a limited mobile browser. It does not run on


    the safari, edge, and IE browser.
     iPhone users cannot establish connections securely in it.
     It makes maximum use of the battery of the device.
     It needs to be hosted on the server because it is a web app.
     It cannot be downloaded from popular app stores such as
    Google Play and Apple App Store.
     PWA does not provide the same level of support for all
    devices. For example, push notifications in PWA work on
    Android, but not on iOS.
     It supports limited hardware functionality
    Technical components of PWA

    Progressive Web Applications (PWA) has


    five components.

     Web App manifest

     Application shell

     Service worker

     Webpack

     Transport Layer Security (TLS)


     Web App manifest
    The web app manifest is the first component of the PWA. It is a
    simple JSON file that controls a user's application. Usually, it is
    named "manifest.json".
     Service Worker
    A service worker is a web worker. It is a JavaScript file that runs
    aside from the mobile browser.
     Application Shell
    The application shell is the third technical component of the PWA.
    It is specialized to split the static and dynamic content of the
    application.
     Webpack
    The webpack is the fourth component of the PWA. It is used to
    design the PWA front-end.
     Transport Layer Security (TLS)
    The transport layer security is the fifth component of the PWA.
    This component is a standard for all robust and secure data
    exchange between any two applications.
     Some popular examples of
    Progressive Web Apps

    AliExpress
    Flipkart
    Twitter Lite
    Instagram
    BookMyShow
    MakeMyTrip
    Responsive Web Design

     Responsive web design makes your web


    page look good on all devices.
     Responsive web design uses only HTML
    and CSS.
     Responsive web design is not a program
    or a JavaScript.
    Designing for the best experience for all users

     Web pages can be viewed using many different


    devices: desktops, tablets, and phones. Your web page
    should look good, and be easy to use, regardless of the
    device.
    Desktop Tablet Phone
     Viewport
    The viewport is the user's visible area of a web page.

     Setting the Viewport


     HTML5 introduced a method to let web designers take
    control over the viewport, through the <meta> tag.

     You should include the following <meta> viewport element


    in all your web pages:

     <meta name="viewport" content="width=device-width,


    initial-scale=1.0">

     This gives the browser instructions on how to control the


    page's dimensions and scaling.
    Without the viewport meta tag With the viewport meta tag

    You might also like