Where Can You Find Me?

• Email: mark@int3c.com
• Personal Blog: www.markwk.com
• Linkedin: linkedin.com/in/markwkoester
• Github: markwk
• Professional Portfolio: Int3c.com/portfolio
• Twitter: @markwkoester

Available for Hire:

Builder for Web and Mobile, Dev, CTO, Technology Consultant

Slides:

https://rawgit.com/markwk/building-photostats.io-presentation/master/index.html

475

or 1.3 photos per day

estimated number of photos that was taken by every smart phone user in 2017.

Outline

• INTRO: Self-Tracking & Quantified Self
• What is Photo Metadata?
• IDEA: An App to Aggregate and Track My Photo Metadata
• What is React Native?
• DEMO: Initial Prototype using CameraAPI
• UI / Theming with Native Base
• Data Models
• Pro's and Con's of React Native
• What I've Learned?

I'm a digital documentarist.

I am Mark Koester. I'm a tech entrepreneur, a web developer (mostly), a writer and...

... and an obsessive tracker!

Quantified Self: What is it?

Measuring or documenting something about your self such that it gains meaning.

Opportunities in the Tracking and Data Space

• Deriving insight and meaning from existing data
• Enabling and tracking new data points.

A Data Point to Track and Find Insight

What is Photo Metadata?

Image metadata is text information pertaining to an image file that is embedded into the file or contained in a separate file that is associated with it.

Image metadata includes details relevant to the image itself as well as information about its production. This data is generated by the device capturing the image (i.e. the camera).

Metadata puts photos in context.

Examples of Metadata on Photos

• Locational (gps, altitude, etc.)
• Date & Time (creation, modification)
• Camera Type
• EXIF Data about focus, aperture, etc.

PhotoStats.io

Photo Data Tracking App

The photos on your mobile phone are one of the richest collections of data you have on yourself. If you regularly take photos with your phone (which most of us do), then your phone is collecting data on you.

"Weekend Project":

Initial Feature List

1. Access Photo Library on Phone
2. Extract Meta Data, like gps, EXIF, etc.
3. Export the data (CSV or JSON)

• React Native is a framework to build native mobile apps using React and Javascript.
• With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". It's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps.
• React and React Native are maintained by Facebook, Instagram and a community of developers.

How Does React Native Work (vs. React)?

React's Rendering Lifecycle

• React renders to and manipulates the browser’s DOM.
• React Native is not rendering web-based views.
• In contrast, React Native invokes Objective-C APIs to render to iOS components, or Java APIs to render to Android components.

React Native Views

Getting Started...

"Weekend Project":

Initial Feature List

1. Access Photo Library on Phone
2. Extract Meta Data, like gps, EXIF, etc.
3. Export the data (CSV or JSON)

Demo: Code Structure

index.ios.js

//index.ios.js for  start ios project
import { AppRegistry } from 'react-native';
import app from './app';

AppRegistry.registerComponent('rncameraroll', app);

Key API: CameraRoll

CameraRoll provides access to the local camera roll / gallery.

Key Method: getPhotos()

app.js

import React from 'react';
import { StackNavigator } from 'react-navigation'

import ImageBrowser from './ImageBrowser'
import ImageList from './ImageList'

const Navigation = StackNavigator({
    ImageList: { screen: ImageList },
    ImageBrowser: { screen: ImageBrowser },
});

function setup() {
    return Navigation;
}

export default setup;

ImageList.js

//imagelist.js for date  list of photo on phone.

import React from 'react'

import {     //import component
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
    Button,
    CameraRoll,
    Image,
    Dimensions,
    ScrollView,
    ActivityIndicator,
    Platform
} from 'react-native'

import App from './app'
import Utils from './utils'

const { width, height } = Dimensions.get('window')

ImageList.js

export default class ImageList extends React.Component {

    static navigationOptions = {
        title: 'Gallery',
    };

    constructor(props) {
        super(props);

        this.state = {
            dates: [],
            photos: [],
            loading: true
        }
    }

    componentDidMount() {
        this.getPhotos();
    }

ImageList.js

getPhotos = () => {      //function  getPhotos    get photo from phone
    CameraRoll.getPhotos({
        first: Platform.OS === 'android' ? 999 : -1,
        assetType: 'All',
        // groupTypes: 'All'
    })
        .then(r => {
            this.setState({ photos: r.edges });
            r.edges.forEach(data => {
                let dates = Utils.clone(this.state.dates);
                let newTimestamp = data.node.timestamp;
                let isDateExists = false;
                if (dates.length) {
                    for (i = 0; i < dates.length; i++) {
                        let date = dates[i];
                        if (Utils.isSameDate(new Date(date.timestamp * 1000), new Date(newTimestamp * 1000))) {
                            date.count++;
                            isDateExists = true;
                            break;
                        }
                    }
                }
                if (!isDateExists) {
                    dates.push({
                        timestamp: newTimestamp,
                        count: 1
                    })
                }
                this.setState({ dates: dates, loading: false });
            });
        });
};

Post-"Weekend Project":

Feature List

1. Access Photo Library on Phone
2. Extract Meta Data, like gps, EXIF, etc. => Library?
3. Export the data (CSV or JSON) => Data Model?
4. Better Structure
5. Improved UI and Design

Improved Starting Position: Native Base

https://nativebase.io

Cheating?

React Native "Theme"

Revised Code Structure

Screens to Start With

Library to Extract EXIF Data

Data Management, Storage and Models in React Native

Data Modeling in React Native

• /reducers/dateObject.js
• /reducers/imageObject.js

/reducers/imageObject.js

// This method will generate a object structure for the image Object.
import Utils from "./utils.js";
import Exif from "react-native-exif";
import { Platform } from "react-native";
import { Crashlytics } from "react-native-fabric";

const imageObject  = {
      fetchObject(imageData) {
            let cameraData = {
             timestamp: imageData.timestamp,
             groupName: imageData.group_name,
             type: imageData.type,
             location: imageData.location,
             fileName: imageData.image.filename,
             width: imageData.image.width,
             height: imageData.image.height,
             uri: imageData.image.uri,
             isDeleted: false,
             time: Utils.getStringTime(new Date(imageData.timestamp * 1000)),
             date: Utils.getStringFromDate(new Date(imageData.timestamp * 1000)),
            };

          // alert(Utils.isExifDataDisable)

          if(Utils.isExifDataDisable){
              return new Promise((resolve, reject) => {
                  resolve(cameraData);
              });
          }else{
//adding the exif data in the image data fetched from CameraRoll
            return new Promise((resolve, reject) => {
                  Exif.getExif(imageData.image.uri)
                      .then((data) =>{
                            cameraData =   { ...cameraData, exifData:data };
                            resolve(cameraData);

                      })
                      .catch((error) => {
                            alert(error + " file: " + imageData.image.uri);
                            Platform.OS === "android"
                            // Record a non-fatal JS error
                             ? Crashlytics.logException(error + " file: " + imageData.image.uri)
                             : Crashlytics.recordError(error + " file: " + imageData.image.uri)
                            // reject("Exif" + error);
                            resolve(cameraData);
                      });
            });
          }
      },

};
module.exports = imageObject;

/reducers/dateObject.js

// This method will generate a object structure for the date Object.
const dateObject  = {
    fetchObject(timeStamp,imagesArray,count) {
     return {
        timestamp: timeStamp,
        images: imagesArray,
        };
    }
};
module.exports = dateObject;

Data Storage in React Native

• Async Storage ("built-in" to React Native)
• SQLite
• Firebase
• Realm
• Backends like MongoDB, Couchbase
• Redux Persist

How I Manage Data:

No backend. Store locally. Model data for exporting and stats.

PhotoStats.io

PhotoStats.io

Exporting Data

library: react-native-fetch-blob

Lessons Learned about React Native

• React Native is a good entry point for web developers to get into mobile development.
• RN Apps perform quite well, no lag...
• React Native makes theming and style changes quite easy.
• Healthy community of code and libraries (see: JS.coach ) as well as tutorials and articles.
• Not all open source code is created equal so it's best to stick with react native's core APIs where possible.
• You can mix RN code and true "native" code.

Lessons? Next steps? Finding Insights from Photo Data?

Q&A: www.photostats.io

• Email: mark@int3c.com

• Personal Blog: www.markwk.com

• Linkedin: linkedin.com/in/markwkoester
• Github: markwk
• Professional Portfolio: Int3c.com/portfolio
• Twitter: @markwkoester

Available for Hire:

Builder for Web and Mobile, Dev, CTO, Technology Consultant