Hot File

How to Creating a Mobile Application with Reapp

View: 353    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Android   Fields: Other

10 point/1 review File has been tested

Reapp is a platform to create mobile apps. It provides a UI kit of components, optimized and customizable for creating mobile apps.

Introduction

Reapp is a platform to create mobile apps. It provides a UI kit of components, optimized and customizable for creating mobile apps.

In this tutorial, you’ll learn how to create a mobile app using Reapp. The app will help a user save different locations, making use of the Google Maps API. It will use Firebase as a back end to save data.

Source code for this tutorial is available on GitHub.

Getting Started

Start by installing reapp and create a project called ReactApp.

npm install -g reapp
reapp new ReactApp

Open the project directory, run reapp and the app should be running at http://localhost:3010.

cd ReactApp && reapp run

Here is the resulting project structure.

ReactApp Project Structure

Inside the project directory is the app folder which contains the app.js file. The app.js file defines different routes for the application. The components folder contains the different components rendered when requesting a particular route.

Creating Views

Start by removing the sub.jsx file from the components/home folder. Open home.jsx and remove the existing code to start from scratch and understand how things work. You’ll create a react class calledHome to render the component.

import { Reapp, React, View} from 'reapp-kit';

var Home = React.createClass({
  render: function() {
    return (
      <h1>Welcome to Reapp!!</h1>
    );
  }
});

export default Reapp(Home);

The render function returns the view to be displayed. Next update the routes in the app.js file.

import './theme';
import { router, route } from 'reapp-kit';

router(require,
  route('home', '/')
);

Save the changes and restart the server. Open http://localhost:3010 in your browser and you should see the default view. I recommend enabling device emulation in chrome developer tools to view the app as a mobile app.

Emulated device

Next you’ll integrate Google Maps into the view. Add a header for the app by modifying home.jsx to return a view inside the render function.

<View title="Where Am I">

</View>

Create a new map component to display Google maps by adding a google maps API reference to theassets/web/index.html page.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

In home.jsx, create a new React component which will display the Google Map.

var MapView = React.createClass({

    render: function() {
        return (
            <div id="map"><span>Map Would be Here !!</span></div>
        );
    }
});

Add the MapView component to the home view.

<View title="Where Am I">
    <MapView />
</View>

Add the following style to assets/web/index.html.

<style>
#map {
  width: 100%;
  height: 400px;
  margin: 0px;
  padding: 0px;
}
</style>

Save changes and restart the server. You should see the text “Map Would be here !!” on your app screen.

Adding Google Maps

You have seen how to nest react components, so next you’ll remove the span inside the MapView render function and replace it with the actual map. Once the component has mounted it will create the Google Map and render it in the #map div.

You’ll write the Google Maps code in the componentWillMount lifecycle method. Inside the MapViewcomponent add the componentWillMount method.

componentDidMount: function() {
    // Code will be here
},

Inside componentDidMount define a default map location, map options and create the map.

var sitepoint = new google.maps.LatLng(-37.805723, 144.985360);

var mapOptions = {
        zoom: 3,
        center: sitepoint
    },
    map = new google.maps.Map(ReactDOM.findDOMNode(this), mapOptions);

   this.setState({
       map: map
   });

To use ReactDOM.findDOMNode you will need to require react-dom, so add this after the openingimport statement.

var ReactDOM = require('react-dom')

In this code, ReactDOM.findDOMNode gets a reference to the component’s DOM node element andsetState triggers UI updates. Save the changes and restart the server. If all is well, you should be able to view the map.

Map view displays

Now to add a marker to the Google Map. You’ll set several options to the marker such as animation anddraggable.

marker = new google.maps.Marker({
     map:map,
     draggable:true,
     animation: google.maps.Animation.DROP,
     position: sitepoint
});

Here is the full MapView component:

var MapView = React.createClass({

    componentDidMount: function() {

      var sitepoint = new google.maps.LatLng(-37.805723, 144.985360);

      var mapOptions = {
              zoom: 3,
              center: sitepoint
          },
          map = new google.maps.Map(ReactDOM.findDOMNode(this), mapOptions);
          marker = new google.maps.Marker({
           map:map,
           draggable:true,
           animation: google.maps.Animation.DROP,
           position: sitepoint
      });

      this.setState({
        map: map
      });
    },

    render: function() {
        return (
            <div id="map"><span>Map Would be Here !!</span></div>
        );
    }
});

Save changes, restart the server and you should have a map with a marker.

Map with marker

Adding Position Info

When the user drags the marker the position info should show. To implement this, add the required HTML in the Home component. Change the render function code to look like this:

render: function() {
    return (
      <View title="Where Am I">

        <MapView />

        <div style={{width:100 + '%',height:100 + 'px',margin: 0 + ' auto',padding:10 + 'px'}} id="infoPanel">

            <div>
              <span><b>Position:</b></span>
              <span  id="info"></span>
            </div>

            <div>
              <span><b>Address:</b></span>
              <span  id="address"></span>
            </div>

        </div>
      </View>
    );
  }

Next you need to hard-code the default position (latitude and longitude) and address. Add this line after initializing the sitepoint variable in the componentDidMount method:

document.getElementById('info').innerHTML = '-37.805723, 144.985360';

To display the address you’ll use the Google Maps Geocoder.

geocoder.geocode({
    latLng: marker.getPosition()
}, function(responses) {
    if (responses && responses.length > 0) {
        document.getElementById('address').innerHTML = responses[0].formatted_address;
    }
});

Here is the current MapView component:

var MapView = React.createClass({

    componentDidMount: function() {

      var geocoder = new google.maps.Geocoder();
      var sitepoint = new google.maps.LatLng(-37.805723, 144.985360);

      document.getElementById('info').innerHTML = '-37.805723, 144.985360';



      var mapOptions = {
              zoom: 3,
              center: sitepoint
          },
          map = new google.maps.Map(ReactDOM.findDOMNode(this), mapOptions),
          marker = new google.maps.Marker({
           map:map,
           draggable:true,
           animation: google.maps.Animation.DROP,
           position: sitepoint
      });

      geocoder.geocode({
        latLng: marker.getPosition()
      }, function(responses) {
        if (responses && responses.length > 0) {
            document.getElementById('address').innerHTML = responses[0].formatted_address;
        }
      });

      this.setState({
        map: map
      });
    },

    render: function() {
        return (
            <div id="map"><span>Map Would be Here !!</span></div>
        );
    }
});

Save the changes, restart the server and you should have the default position and address displayed in the app.

Current App screenshot

Now add a dragend event listener to update the position and address once the marker is dragged. Inside the dragend callback function the marker position and address are fetched and the address andinfo elements updated with the values.

google.maps.event.addListener(marker, 'dragend', function(e) {

    var obj = marker.getPosition();
    document.getElementById('info').innerHTML = e.latLng;

    map.panTo(marker.getPosition());

    geocoder.geocode({
        latLng: obj
    }, function(responses) {

        if (responses && responses.length > 0) {
            document.getElementById('address').innerHTML = responses[0].formatted_address;
        }

    });
});

Save the changes and restart the server. Now when dragging the marker, the info updates when dragging ends.

Save Information to Firebase

Next add a button to save the coordinates to Firebase. First add reapp-ui to the project.

npm install reapp-ui@0.12.47

Import the button component into Home.jsx.

import Button from 'reapp-ui/components/Button';

Add the button to the Home component, at the bottom of the <View> component. On tapping the Savebutton a function will save the coordinates to Firebase.

<Button onTap={this.savePosition}>Save </Button>

Register for a free account with Firebase to use the service in this app. Once registered you should have a Firebase URL to use, here is my Firebase URL:

https://blistering-heat-2473.firebaseio.com

Login to your firebase account and click on the plus icon on the Firebase URL displayed in your dashboard to create a URL such as:

https://blistering-heat-2473.firebaseio.com/Position

And use this URL to save the location information.

Include a reference to Firebase in the assets/web/index.html page.

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>

Next, define the savePosition function in the Home component, called when tapping the save button.

savePosition: function() {
    var wishRef = new Firebase('https://blistering-heat-2473.firebaseio.com/Position');
    var pos = document.getElementById('info').innerHTML;

    var address = document.getElementById('address').innerHTML;
    wishRef.push({
        'Position': pos,
        'Address': address
    });
},

This creates a Firebase object using the Firebase URL and pushes the data to Firebase using the push API function.

Save the changes and restart the server. Locate a position on the map and click save. Check firebase and the data should be saved.

Let’s add an alert to notify the user that the data has been saved. This wil use the modal component, so import modal into Home.jsx.

import Modal from 'reapp-ui/components/Modal';

Inside the Home View component’s render function, add the following modal code above <MapView />

{this.state.modal &&
          <Modal
            title="Coordinates Saved."
            onClose={() => this.setState({ modal: false })}>
          </Modal>
        }

This will be visible when the state.modal is true, so initialize state.modal to false when the app loads using the getInitialState method. Inside the Home component define the getInitialState.

getInitialState: function() {
    return {
      modal: false
    };
  }

Inside the savePosition method, after pushing the data to firebase, set the state.modal to true to show the modal.

this.setState({ modal: true });

Save the changes and restart the server. Once the app has loaded, click on the Save button to save the data and you should see the modal pop up.

Modal Popup

 

How to Creating a Mobile Application with Reapp

How to Creating a Mobile Application with Reapp Posted on 06-07-2016  Reapp is a platform to create mobile apps. It provides a UI kit of components, optimized and customizable for creating mobile apps. 10/10 353

Comment:

To comment you must be logged in members.

Files with category

  • How to Monetizing Apps with the Google AdMob SDK

    View: 433    Download: 0   Comment: 0   Author: none  

    How to Monetizing Apps with the Google AdMob SDK

    Category: Android
    Fields: Other

    4.75/2 review
    AdMob is a mobile advertising platform from Google that developers can use to generate revenue from apps through in-app advertising. AdMob provides different sets of ads like banner ads, interstitial ads, video ads, or native ads integrated with...

  • How to Securing Your Android Apps with the Fingerprint API

    View: 362    Download: 0   Comment: 0   Author: none  

    How to Securing Your Android Apps with the Fingerprint API

    Category: Android
    Fields: Other

    5/1 review
    Passwords have had their day, with software vendors and hardware manufacturers encouraging users to try other methods of securing their data. Fingerprint readers are becoming more common on Android devices since Marshmallow introduced a new...

  • Transfer Data between Activities with Android Parcelable with android

    View: 781    Download: 0   Comment: 0   Author: none  

    Transfer Data between Activities with Android Parcelable with android

    Category: Android
    Fields: Other

    0/0 review
    An Android app typically consists of more than one activity that need to pass data between each other. For example a primary activity with a list of elements and a corresponding secondary activity to show the details of these elements

  • Optimize Your Java Code with Android Butter Knife

    View: 525    Download: 0   Comment: 0   Author: none  

    Optimize Your Java Code with Android Butter Knife

    Category: Android
    Fields: Other

    1.5/3 review
    Creating code can sometimes be frustrating. Developers have to deal with redundant coding that is visually unattractive.

  • How to Use React Native to a Create a Face Recognition App

    View: 487    Download: 0   Comment: 0   Author: none  

    How to Use React Native to a Create a Face Recognition App

    Category: Android
    Fields: Other

    2.25/2 review
    nce you have signed up for an account, login and click on the search icon at the top of the screen and search for ‘cognitive services’. From the dropdown that shows, click on Cognitive Services accounts (preview) and you should see the following...

  • How to Authenticating Users via OAuth with Cordova and Ionic

    View: 246    Download: 0   Comment: 0   Author: none  

    How to Authenticating Users via OAuth with Cordova and Ionic

    Category: Android
    Fields: Other

    0/0 review
    You will need to install Cordova (I recommend SitePoint’s QuickTip) and the Ionic framework (again, I recommend SitePoint’s QuickTip)

  • Make Access Platform APIs with React Native Modules

    View: 22107    Download: 0   Comment: 0   Author: none  

    Make Access Platform APIs with React Native Modules

    Category: Android
    Fields: Other

    4.5/1 review
    SitePoint has a full guide for installing React Native available here. Once it’s installed, create a new project with the following command

  • Build Animating an Android Floating Action Button

    View: 484    Download: 0   Comment: 0   Author: none  

    Build Animating an Android Floating Action Button

    Category: Android
    Fields: Other

    4.5/1 review
    The Floating Action Button looks something like this in a layout file and will be auto generated if create an Android Studio project with a Blank Activity:

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd