Giter Site home page Giter Site logo

rzwiefel / ddf-mobile Goto Github PK

View Code? Open in Web Editor NEW

This project forked from csecapstone485organization/ddf-mobile

0.0 1.0 0.0 394 KB

React Native mobile application for Distributed Data Framework (DDF).

JavaScript 95.50% Python 0.99% Java 0.84% Objective-C 2.67%

ddf-mobile's Introduction

Setup

Step through React Native installation before starting. https://facebook.github.io/react-native/docs/getting-started.html

git clone https://github.com/csecapstone485organization/ddf-mobile.git
cd ddf-mobile
npm install    # install dependencies
react-native link    # link libraries: https://facebook.github.io/react-native/docs/linking-libraries-ios.html

Either react-native run-ios or react-native run-android to launch packager and run app.

To load map on Android, you'll need to add API key, below.

Adding an API key to Android

Create the file android/app/src/main/res/values/api_key.xml with the following text:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="google_maps_api_key" type="string">YOUR API KEY HERE</item>
</resources>

File Structure

File structure

  • store - Configure any middleware for your Redux store, which will contain application state.
  • Core
    • App.js - initialize application with store and routing
    • scenes.js - Directory of scenes used by router
  • actions - List of actions that can be triggered from application. Returns object containing the payload (data input form action) and the type of action. Async calls will be found in here.
  • reducers - Takes in actions, updates store state. Pure functions - knowing the input, you'll always know what the new store state will be
  • scenes - high level components that link to the router. Contain one or more containers.
  • containers - data layer of component; assembles all specified actions, state information, and misc. paramaeters and makes them available to components as props
  • components - Pure UI elements. Blindly take in props from parent container and render them in desired manner.

Key Concepts

  • component pattern
    • scenes handle routing
    • containers handle data and state
    • component handles rendering
  • data flow
    • store contains state
    • actions are composed of user input and action type
    • reducer mediates between the two. It reads in state and an action and spits out a new state based on that action's effects on the state. It is a pure function

Unsigned certs

In order to allow RN to access DDF endpoints with self-signed certs, you'll need to make some edits to the React Native XCode project as stated here: http://stackoverflow.com/questions/36289125/react-native-fetch-from-https-server-with-self-signed-certificate

This will get it working on iOS but will still present problems with Android.

Known issues and notes

  • Static assets - Static assets must be loaded into XCode and Android Studio to be rendered dynamically on mobile. The URI is currently hardcoded to the resources/images folder.
  • Google Maps error - There appears to be an error coming from react-native-maps's fitToCoordinates API, where adding padding to how far the map zooms out to fit the coordinates may sometimes cause a crash on Android. Can either remove the padding option or open a ticket. This does not affect iOS.
  • Mock data - Application currently loads from the MockData file. There are several TODO statements in the pertinent component files that will all you to load from Actions (asynchronously) instead of MockData by uncommenting certain lines, however, since RN doesn't play well with DDF's unsigned certs, YMMV. There's an HTTP call in Actions that calls Reddit's API for test purposes. You can plug in the DDF endpoint there.

ddf-mobile's People

Contributors

drcopernicus avatar ltnguy16 avatar nao-de avatar nghillaz avatar rfezz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.