Understanding Android App Development Basics

 
Using Native Functions
 
7th Nov 2019
 
What is an app?
 
The Android OS is a multi-user
Linux system
Each app has its own user
OS sets permissions for all files
in an app such that only the
app's user can access them
Every app runs its own process
Every process runs in its own VM
Principle of least privilege
 
App components
 
Activities
Control user interface with the app
Services
Run background processes
Receivers
Hooks to the system that enable user notifications
Providers
Manage app data that requires persistent storage
Android speciality: any app component can activate any other app
component
 
Requiring other components
 
All existing app components needed for your app are declared in the
AndroidManifest.xml file
 
<manifest ... >
    <uses-feature android:name="android.hardware.camera.any"
                  android:required="true" />
    <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="19" />
    ...
</manifest>
 
Permissions
 
Permissions preserve the privacy of each app, as well as the device
owner
Apps must ask for permission before accessing device native
functionalities
Send SMS
Read contact list
Access camera
Access sensors
Activate Bluetooth
 
Requesting permissions
 
Added to AndroidManifest.xml using <uses-permission /> tag
Example
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.someapp">
    <uses-permission android:name="android.permission.SEND_SMS"/>
    <application ...>
        ...
    </application>
</manifest>
 
Permission approval
 
Normal
Permissions are granted automatically by system
Signature
Permissions are granted automatically by system if the app trying to use the
permission is signed by the same certificate as the app that defines the
permission
Dangerous
App must prompt the user for permission
Used to ask for permissions at install-time
Since SDK 23, ask for permissions at run-time
 
Native functions
 
Two prominent activities
Camera
Geolocation
We discuss sample apps for both
All instructions for RN version 0.60+
Less prominent activities
Bluetooth
Environment sensors
Temperature, humidity,
Motion sensors
Accelerometer, gyroscope, step counting, rotation
Position sensors
Geomagnetic sensor, accelerometer
 
An RN app to take photos
 
A few different ways
I am just going to show you one that I found easy
RNCamera
Existing RN component library for working with the camera
Supports photos, videos, face detection and barcode scanning out of the box
Setup
Init a react native project, then from within the project directory
npm install react-native-camera –save
react-native link react-native-camera
 
Some more tweaking
 
Add the following permissions to 
/android/app/src/main/AndroidManifest.xml
 
 
 
 
Add the bolded line to 
/android/app/build.gradle
 
       <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
defaultConfig {
    applicationId "com.nativeproject"
    minSdkVersion rootProject.ext.minSdkVersion
    MissingDimensionStrategy 'react-native-camera', 'general'
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
}
 
Accessing the camera
 
Run 
react-native run-android 
to install the dependencies defined in
the previous slide
Modify App.js by importing RNCamera as a component
Import { RNCamera } from 'reactive-native-camera'
Modify the 
render 
function to include the new component
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={styles.camera}
        >
        </RNCamera>
 
Add 
camera
 to the styles
container, setting flex to 1
if you want full-screen
 
Saving a clicked photo
 
Add a camera button to the app
Define the onPress handler function for this button as
 
 
 
 
 
Import { CameraRoll } from 'react-native'
Use CameraRoll.saveToCameraRoll(data.uri) to save to device
takePicture = async() => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri); // URI to saved photo in app cache
    }
  };
 
Click to add text
 
https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md
 
An app to find yourself on a map
 
Need to show a map
Need to show where you are right now on the map
No surprises
react-native-maps
react-native-geolocation-service
In general, the RN community is very active right now, so you can find
third-party libraries for almost anything you might imagine doing
 
Showing a map
 
Get an API key for the Android SDK 
here
Or use the OSM 
clone
 of the RNM module
From within your RN project folder
npm install react-native-maps –save
react-native link react-native-maps
Make sure playServicesVersion and androidMapsUtilsVersion are
added to the project root build.gradle file
Add Android API key to the AndroidManifest.xml file
<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>
</application>
 
Showing a map
 
I am primarily, but not exclusively, borrowing from 
this
 tutorial
From within App.js
Import MapView from 'react-native-maps'
Change the 
render 
function to return a MapView element
<MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
 
Updating location on the map
onRegionChange(region) {
  this.setState({ region });
}
render() {
  return (
    <MapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
    />
  );
}
 
Geolocation
 
To enable geolocation, change the Android Manifest
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
The default RN geolocation API on Android is glitchy
Prefer to use react-native-geolocation-service
npm install react-native-geolocation-service
Import Geolocation from 'react-native-geolocation-service' from
within App.js
 
Getting current location
componentDidMount() {
    // Instead of navigator.geolocation, just use Geolocation.
    if (hasLocationPermission) {
        Geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
            },
            (error) => {
                console.log(error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
        );
    }
}
 
Geolocating on a map
 
Define app state to include position, which includes lat and long
Add a marker in MapView dropped at this position
 
 
Done!
 
<MapView.Marker coordinate= {{this.position}}, title = {"Here I am"} />
 
Javascript app assignment (updated)
 
Must demo by 13th November
Project credit assignment
Read and write to a database (10%)
Secure login management (15%)
Database should be secured (10%)
Should protect against XSS attacks
Perform at least two front-end view manipulations without pulling from the
server (15%)
Mobile front-end (15%)
Native mobile function use (10%)
Project complexity and implementation competence (25%)
Slide Note
Embed
Share

Android apps operate within a secure, multi-user environment with each app having its own user identity and permissions. Components like Activities, Services, Receivers, and Providers handle various aspects of app functionality. Permissions safeguard user privacy by controlling access. Developers must declare required components in the manifest file and request permissions appropriately. Automatic permission approval mechanisms ensure secure app operations.


Uploaded on Aug 14, 2024 | 1 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. Using Native Functions 7th Nov 2019

  2. What is an app? The Android OS is a multi-user Linux system Each app has its own user OS sets permissions for all files in an app such that only the app's user can access them Every app runs its own process Every process runs in its own VM Principle of least privilege

  3. App components Activities Control user interface with the app Services Run background processes Receivers Hooks to the system that enable user notifications Providers Manage app data that requires persistent storage Android speciality: any app component can activate any other app component

  4. Requiring other components All existing app components needed for your app are declared in the AndroidManifest.xml file <manifest ... > <uses-feature android:name="android.hardware.camera.any" android:required="true" /> <uses-sdk android:minSdkVersion="7" android:targetSdkVersion="19" /> ... </manifest>

  5. Permissions Permissions preserve the privacy of each app, as well as the device owner Apps must ask for permission before accessing device native functionalities Send SMS Read contact list Access camera Access sensors Activate Bluetooth

  6. Requesting permissions Added to AndroidManifest.xml using <uses-permission /> tag Example <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.someapp"> <uses-permission android:name="android.permission.SEND_SMS"/> <application ...> ... </application> </manifest>

  7. Permission approval Normal Permissions are granted automatically by system Signature Permissions are granted automatically by system if the app trying to use the permission is signed by the same certificate as the app that defines the permission Dangerous App must prompt the user for permission Used to ask for permissions at install-time Since SDK 23, ask for permissions at run-time

  8. Native functions Two prominent activities Camera Geolocation We discuss sample apps for both All instructions for RN version 0.60+ Less prominent activities Bluetooth Environment sensors Temperature, humidity, Motion sensors Accelerometer, gyroscope, step counting, rotation Position sensors Geomagnetic sensor, accelerometer

  9. An RN app to take photos A few different ways I am just going to show you one that I found easy RNCamera Existing RN component library for working with the camera Supports photos, videos, face detection and barcode scanning out of the box Setup Init a react native project, then from within the project directory npm install react-native-camera save react-native link react-native-camera

  10. Some more tweaking Add the following permissions to /android/app/src/main/AndroidManifest.xml <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> Add the bolded line to /android/app/build.gradle defaultConfig { applicationId "com.nativeproject" minSdkVersion rootProject.ext.minSdkVersion MissingDimensionStrategy 'react-native-camera', 'general' targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" }

  11. Accessing the camera Run react-native run-android to install the dependencies defined in the previous slide Modify App.js by importing RNCamera as a component Import { RNCamera } from 'reactive-native-camera' Modify the render function to include the new component <RNCamera ref={ref => { this.camera = ref; }} style={styles.camera} > </RNCamera> Add camera to the styles container, setting flex to 1 if you want full-screen

  12. Saving a clicked photo Add a camera button to the app Define the onPress handler function for this button as takePicture = async() => { if (this.camera) { const options = { quality: 0.5, base64: true }; const data = await this.camera.takePictureAsync(options); console.log(data.uri); // URI to saved photo in app cache } }; Click to add text Import { CameraRoll } from 'react-native' Use CameraRoll.saveToCameraRoll(data.uri) to save to device https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

  13. An app to find yourself on a map Need to show a map Need to show where you are right now on the map No surprises react-native-maps react-native-geolocation-service In general, the RN community is very active right now, so you can find third-party libraries for almost anything you might imagine doing

  14. Showing a map Get an API key for the Android SDK here Or use the OSM clone of the RNM module From within your RN project folder npm install react-native-maps save react-native link react-native-maps Make sure playServicesVersion and androidMapsUtilsVersion are added to the project root build.gradle file Add Android API key to the AndroidManifest.xml file <application> <!-- You will only need to add this meta-data tag, but make sure it's a child of application --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="Your Google maps API Key Here"/> </application>

  15. Showing a map I am primarily, but not exclusively, borrowing from this tutorial From within App.js Import MapView from 'react-native-maps' Change the render function to return a MapView element <MapView initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} />

  16. Updating location on the map onRegionChange(region) { this.setState({ region }); } render() { return ( <MapView region={this.state.region} onRegionChange={this.onRegionChange} /> ); }

  17. Geolocation To enable geolocation, change the Android Manifest <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> The default RN geolocation API on Android is glitchy Prefer to use react-native-geolocation-service npm install react-native-geolocation-service Import Geolocation from 'react-native-geolocation-service' from within App.js

  18. Getting current location componentDidMount() { // Instead of navigator.geolocation, just use Geolocation. if (hasLocationPermission) { Geolocation.getCurrentPosition( (position) => { console.log(position); }, (error) => { console.log(error.code, error.message); }, { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 } ); } }

  19. Geolocating on a map Define app state to include position, which includes lat and long Add a marker in MapView dropped at this position <MapView.Marker coordinate= {{this.position}}, title = {"Here I am"} /> Done!

  20. Javascript app assignment (updated) Must demo by 13th November Project credit assignment Read and write to a database (10%) Secure login management (15%) Database should be secured (10%) Should protect against XSS attacks Perform at least two front-end view manipulations without pulling from the server (15%) Mobile front-end (15%) Native mobile function use (10%) Project complexity and implementation competence (25%)

More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#