Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 34 views

    L43 - Hybrid Mobile 3

    Uploaded by

    C-dawg
    This document discusses how to use native features and plugins in a hybrid mobile application built with Ionic. It provides examples of using plugins for file opening, geolocation, notifications, storage, networking, and more. Instructions are given for setting up the Android emulator and required environment variables to test and run the mobile app.

    Copyright:

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

    L43 - Hybrid Mobile 3

    Uploaded by

    C-dawg
    34 views20 pages
    This document discusses how to use native features and plugins in a hybrid mobile application built with Ionic. It provides examples of using plugins for file opening, geolocation, notifications, storage, networking, and more. Instructions are given for setting up the Android emulator and required environment variables to test and run the mobile app.

    Original Description:

    Lecture 3 on Hybrid Mobile Development

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses how to use native features and plugins in a hybrid mobile application built with Ionic. It provides examples of using plugins for file opening, geolocation, notifications, storage, networking, and more. Instructions are given for setting up the Android emulator and required environment variables to test and run the mobile app.

    Copyright:

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

    L43 - Hybrid Mobile 3

    Uploaded by

    C-dawg
    This document discusses how to use native features and plugins in a hybrid mobile application built with Ionic. It provides examples of using plugins for file opening, geolocation, notifications, storage, networking, and more. Instructions are given for setting up the Android emulator and required environment variables to test and run the mobile app.

    Copyright:

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

    Hybrid Mobile

    Native Operations

    COS216
    AVINASH SINGH
    DEPARTMENT OF COMPUTER SCIENCE
    UNIVERSITY OF PRETORIA
    Native API?

     Native? But you said its hybrid?


     Yes, you can still get native features with hybrid applications
     Ionic has Cordova and Capacitor for this
     This allows a developer to have native functionality (e.g. Open a file through your mobile file
    manager, open the camera, etc.)
     These native plugins allow much more features at a fraction of the trouble
    Native Plugins

     In order to use a plugin you need to install it, there are numerous plugins available that are
    community driven (https://ionicframework.com/docs/native/community)
     There are also enterprise versions which are paid for.
     In order to download a plugin and save it to your package.json file ensure you use the
    --save flag.
     For the remainder of the examples we will be using Cordova instead of Capacitor
     @Ionic/native plugins are wrappers around the Cordova plugins
     Always check what platforms are supported
     NB!!! Native plugins will need you to run an emulator for ios and android.
     You will need to set the Android environment variables and Java Environment
    Emulator: Environment Variables

     To get the emulator to work you need to define new environment variables:
    ✓ ANDROID_HOME = C:\Users\<user>\AppData\Local\Android\Sdk
    ✓ JAVA_HOME = C:\Program Files\Java\jdk1.8.X_XX

    I suggest you also set the Following Path variables (WARNING! DON’T MESS
    THIS UP OR YOU WILL DAMAGE YOUR SYSTEM):
    ✓ C:\Program Files\Java\jdk1.8.0_77\bin
    ✓ C:\Program Files\Gradle\gradle-6.4.1\bin
    ✓ C:\Users\<user>\AppData\Local\Android\Sdk\build-tools\29.0.2
    ✓ C:\Users\<user>\AppData\Local\Android\Sdk\platform-tools
    ✓ C:\Users\<user>\AppData\Local\Android\Sdk\tools
    ✓ C:\Users\<user>\AppData\Local\Android\Sdk\tools\bin

    https://docs.oracle.com/en/database/oracle/r-enterprise/1.5.1/oread/creating-and-modifying-
    environment-variables-on-windows.html#GUID-DD6F9982-60D5-48F6-8270-A27EC53807D0
    File Opener https://ionicframework.com/docs/native/file-opener
    File Opener https://ionicframework.com/docs/native/file-opener

    import { FileOpener } from '@ionic-native/file-opener/ngx';

    constructor(private fileOpener: FileOpener) { }

    this.fileOpener.open('path/to/file.pdf', 'application/pdf')
    .then(() => console.log('File is opened'))
    .catch(e => console.log('Error opening file', e));

    this.fileOpener.showOpenWithDialog('path/to/file.pdf', 'application/pdf')
    .then(() => console.log('File is opened'))
    .catch(e => console.log('Error opening file', e));
    Emulator

    To launch the ionic app, assuming you have the emulator installed run this command:
    -> ionic cordova run android
    Android Permissions

    this.androidPermissions
    .checkPermission(this.androidPermissions.PERMISSION.CAMERA)
    .then(
    (result) => console.log("Has permission?", result.hasPermission),
    (err) =>
    this.androidPermissions.requestPermission(
    this.androidPermissions.PERMISSION.CAMERA
    )
    );
    this.androidPermissions.requestPermissions([
    this.androidPermissions.PERMISSION.CAMERA,
    this.androidPermissions.PERMISSION.GET_ACCOUNTS,
    this.androidPermissions.PERMISSION.NETWORK,
    ]);
    https://ionicframework.com/docs/native/android-permissions
    Geolocation

    this.geolocation
    .getCurrentPosition()
    .then((resp) => {
    alert("Lat: " + JSON.stringify(resp.coords.latitude));
    alert("Lon: " + JSON.stringify(resp.coords.longitude));
    }).catch((error) => {
    alert("Error getting location " + JSON.stringify(error));
    });

    https://ionicframework.com/docs/native/geolocation
    Local Notifications

    this.localNotifications.schedule({
    text: "Scheduled COS216 Notification",
    trigger: { at: new Date(new Date().getTime() + 1200) },
    led: "FF0000",
    sound: "file://sound.mp3",
    icon: "http://example.com/icon.png",
    });

    https://ionicframework.com/docs/native/local-notifications
    File Chooser

    this.fileChooser.open().then((url) => {
    alert(JSON.stringify(url));
    this.filePath
    .resolveNativePath(url)
    .then((filePath) => {
    alert(filePath);
    })
    .catch((err) => alert(JSON.stringify(err)));
    })
    .catch((e) => {
    alert(JSON.stringify(e));
    });

    https://ionicframework.com/docs/native/file-chooser
    Native Storage

    this.nativeStorage.setItem("myitem", {
    property: "value",
    anotherProperty: "anotherValue",
    }).then(() => alert("Stored item!"),
    (error) => console.error("Error storing item", error)
    );

    this.nativeStorage.getItem("myitem").then(
    (data) => alert(JSON.stringify(data)),
    (error) => console.error(error)
    );

    https://ionicframework.com/docs/native/native-storage
    SQLite

    this.sqlite
    .create({
    name: "data.db",
    location: "default",
    })
    .then((db: SQLiteObject) => {
    db.executeSql("create table danceMoves(name VARCHAR(32))", [])
    .then(() => alert("Executed SQL"))
    .catch((e) => console.log(e));
    })
    .catch((e) => console.log(e));

    https://ionicframework.com/docs/native/sqlite
    Social Sharing

    this.socialSharing.shareViaEmail("This is a message
    from 216", "COS216 -
    Subject", ["recipient@example.org"])
    .then(() => {
    alert("Shared Successfully");
    })
    .catch(() => {
    // Error!
    });

    https://ionicframework.com/docs/native/social-sharing
    Networking

    // watch network for a connection


    let connectSubscription = this.network.onConnect().subscribe(() => {
    console.log('network connected!');
    // We just got a connection but we need to wait briefly
    // before we determine the connection type. Might need to wait.
    // prior to doing any api requests as well.
    setTimeout(() => {
    if (this.network.type === 'wifi') {
    console.log('we got a wifi connection, woohoo!');
    }
    }, 3000);
    });

    https://ionicframework.com/docs/native/network
    HTTP

    this.http
    .get("https://cs.up.ac.za", {}, {})
    .then((data) => {
    console.log(data.status);
    alert(JSON.stringify(data.data)); // data received by server
    console.log(data.headers);
    })
    .catch((error) => {
    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);
    });

    https://ionicframework.com/docs/native/http
    HTTP

    this.http
    .get("https://cs.up.ac.za", {}, {})
    .then((data) => {
    console.log(data.status);
    alert(JSON.stringify(data.data)); // data received by server
    console.log(data.headers);
    })
    .catch((error) => {
    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);
    });

    https://ionicframework.com/docs/native/http
    HTTP

    this.http
    .post("https://postman-echo.com/post",{ "id": 21, "name": "Jhon"},
    { "Content-Type": "applications/json" })
    .then((data) => {
    console.log(data.status);
    alert(JSON.stringify(data.data)); // data received by server
    this.image = data.data;
    console.log(data.headers);
    })
    .catch((error) => {
    console.log(error.status);
    console.log(error.error); // error message as string
    console.log(error.headers);
    });

    https://ionicframework.com/docs/native/http
    Ionic - Documentation

     https://ionicframework.com/docs/

    You might also like