I have been asked this at least once on every project i have worked on and so for the last time, i will create this and forward this url who ever asks, ha ha.. Feel free to add your view in comments. Cheers!

I will take a use case here since based on the app you build your need will be different. If you want to build spotify this is not your matrix ;0

Use Case: Building a service or utility app, cross platform with support for low end devices, targeted for country like India and Indonesia. User experience is important for the app as well as cost of building and maintaining. Client probably don’t have a development team and reached out to you for a solution.

You can find the matrix here:

https://github.com/kaushikdas0/native-react-native-cordova

The funny part ( * totally unintended and coincidental * ) if you sum up the points you will find that RN and HTML5 hybrid app scores the same, but then i would suggest choosing RN in that case because your overall app will be a better performing app when compared to the Hybrid app.

You can use the same matrix for any other use case. Just revalidate the points to support your use case. Until next time. Cheers!

An android app where i can login using Facebook and connect the login information with Firebase Authentication.

Step 1: Create and Run a basic React Native app.

(You can just follow this for Step 1: https://facebook.github.io/react-native/docs/getting-started.html#content )

Navigate to any folder where you want to create the project and use react native init.

Yarn ye! No world didnt changed for me… yet!!

For this tutorial we will focus on Android, but iOS is kind of similar.

cd to project folder and

╰─$ react-native run-android

Step 2: Creating a less ugly screen

index.android.js

 <View style={styles.container}>

        <View style={styles.top}>

          <Text style={styles.textheader}>

            Social Login

          </Text>

        </View>

        <View style={styles.bottom}>

            <Text> Button will come here </Text>

        </View>

      </View>

//Styling:

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#1C2833',

 

    alignItems: 'center',

    flexDirection:'column',

    justifyContent: 'center', 

  },

  top:{

    flex:1,

    justifyContent: 'center', 

  },

  bottom:{

    flex:1,

  },

  textheader:{

    color:'white',

    fontSize: 50

  }

});

Step 3: Facebook SDK

Execute following on your project folder, we will use official fb repo:

react-native install react-native-fbsdk

react-native link react-native-fbsdk

Should take sometime based on n/w speed.

Assume you have Android Studio, else highly suggest you install it now.

Open the Android folder as android project in Android Studio. I will be using Android studio 2.2

In MainApplication.java add an instance of CallbackManager with getter; CallbackManager manages the callback to FB SDK.

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();

protected static CallbackManager getCallbackManager() {
  return mCallbackManager;
}

than under getPackages pass the newly created callback manager to FBSDK package.

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
          new FirestackPackage(),
          new FBSDKPackage(mCallbackManager)
    );
}
};

In MainActivity.java make sure you already have the following method. The SDK react link should have created this.

import android.content.Intent;

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
MainApplication.getCallbackManager().onActivityResult(requestCode, resultCode, data);
}

Now we will create an FB app which will handle our login flow.

Navigate to https://developers.facebook.com/quickstarts/?platform=android and follow the onscreen instruction.

You can either do the remaining few steps from FB or just read below instructions. Both are kind of same.

in android/build.gradle add 

mavenCentral()

So it should look like this.

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
        mavenCentral()
    }
}

in android/app/build.gradle add the following for Facebook SDK 

compile 'com.facebook.android:facebook-android-sdk:[4,5)'

So it should look like,

dependencies {
    compile project(':react-native-firestack')
    compile project(':react-native-fbsdk')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+"  // From node_modules
compile 'com.facebook.android:facebook-android-sdk:[4,5)'
}

Now sync your Gradle files on Android Studio.

Now open String.xml and add facebook_app_id. You can find the id from facebook page.

app/res/values/String.xml 

<resources>
    <string name="app_name">SocialLoginApp</string>
    <string name="facebook_app_id">%%%%6071338448%%</string>
</resources>

Open AndroidManifest.xml and add a meta-data element to the application element:

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>

Should look something like this.

</activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
</application>

Then update the android project info on FB console.

Click next, it will ask for hash key, on your terminal execute this:

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

You can close the Android studio now. Moving to react project:

Now open index.android.js

Add the following to import FB SDK.

const FBSDK = require('react-native-fbsdk');

const {

  LoginButton,

  AccessToken

} = FBSDK;

and then replace “ Button will come here ” text component section with the following code.

<LoginButton

              onLoginFinished={

              (error, result) => {

              if (error) {

                console.log("login has error: " + result.error);

              } else if (result.isCancelled) {

                console.log("login is cancelled.");

              } else {

                AccessToken.getCurrentAccessToken().then(

                  (data) => {

                    console.log(data);

                  }

                )

              }

            }

          }

          onLogoutFinished={() => console.log("logout.")}/>

Think the code is pretty self explanatory

Stop the React project and re run it again to load all libs etc.

Click on the button and make sure its log-in in and showing you the logout button. If thats working all set. (Alternatively check the chrome console for the console log of data)

Step 4: Firebase integration

For firebase integration we will use Firestack.

Within the main react project folder run the following>

npm install react-native-firestack --save

followed by

react-native link react-native-firestack

Now keep your android studio open while navigate to https://console.firebase.google.com/ 

Click ADD APP and download the google-service.json

Now in Firebase under Authentication enable Facebook. All FB related info like app id and secret key you will get it from FB console from the app previously created.

Add the JSON file under the main project. 

Under React Project/android/app

You can see it on android project.

Now under android/build.gradle

under dependency add this.

classpath 'com.google.gms:google-services:3.0.0'

and under android/app/build.gradle

add the following at the extreme end of the file.

apply plugin: 'com.google.gms.google-services'

Try a project clean on android studio (Build>Project Clean)to make sure everything is in right order.

Cool done with Android Studio. Moving to React project now.

add the import;

import Firestack from 'react-native-firestack';

and add the initializations just after that:

const firestack = new Firestack();

Now where we received the access token from facebook we will pass the access token to Firebase.

So under

AccessToken.getCurrentAccessToken().then(

                  (data) => {

add the following:

firestack.auth.signInWithProvider('facebook', data.accessToken, '') // facebook will need only access token. 

 .then((user)=>{

 console.log("Inside ");

 console.log(user); 

 })

Thats it. Run the app.  Note that Android requires the Google Play services to installed for authentication to function. So you may want to try running on a real device or configure simulator for Google Play service

For your reference here is my final index.android.js file.

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

 

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View

} from 'react-native';

 

const FBSDK = require('react-native-fbsdk');

const {

  LoginButton,

  AccessToken

} = FBSDK;

 

import Firestack from 'react-native-firestack'; 

 

const firestack = new Firestack();

 

export default class SocialLoginApp extends Component {

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.top}>

          <Text style={styles.textheader}>

            Social Login

          </Text>

        </View>

        <View style={styles.bottom}>

            <LoginButton

              onLoginFinished={

              (error, result) => {

              if (error) {

                console.log("login has error: " + result.error);

              } else if (result.isCancelled) {

                console.log("login is cancelled.");

              } else {

                AccessToken.getCurrentAccessToken().then(

                  (data) => {

                    firestack.auth.signInWithProvider('facebook', data.accessToken, '') 

                          .then((user)=>{

                            console.log("Inside ");

                            console.log(user); 

                      }) 

                  }

                )

              }

            }

          }

          onLogoutFinished={() => console.log("logout.")}/>

        </View>

      </View>

    );

  }

}

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#1C2833',

 

    alignItems: 'center',

    flexDirection:'column',

    justifyContent: 'center', 

  },

  top:{

    flex:1,

    justifyContent: 'center', 

  },

  bottom:{

    flex:1,

  },

  textheader:{

    color:'white',

    fontSize: 50

  }

});

 

AppRegistry.registerComponent('SocialLoginApp', () => SocialLoginApp);

Publishing to git hub if you need?

Demo of the final bot: https://www.youtube.com/watch?v=V_us1GSz4TI

Simple weekend trick. Check the video below where i tried playing in Central Park.

People who already use xcode just fake your phone location with inbuilt location simulator , run a test project and you are done.

For others this is what you need to do. 3 easy steps:

1. Download official Pokemon Go from any store you want. If you don’t know how to change store google for it.
2. Plug your iphone to your mac. You need to keep it connected to move around in virtual world.
3. Now download the git hub code from this repo: https://github.com/kaushikdas0/pok-mon_location_faker  (OR if you want create your own project and just use my GPX file.)
4. Find the place where you want to play pokemon in google map. Get the lat and long and put it on the GPX file. Run the default app once. Now switch to Pokemon Go. Now on the xcode just changing the GPX with new lat long will make you walk on Pokemon go.

Ya thats it.

You can always disconnect the phone from mac or sometime restart the phone to remove fake locations

DO AT YOUR OWN RISK.  

THOUGH I DONT THINK ANYTHING WILL HAPPEN UNLESS YOU KEEP CHANGING COUNTRY. JUST SIMULATE ONE COUNTRY

One more warning.

You know people are using several faker apps by side loading apps from various URL. Remember those can sniff your account info and other mobile information as they install certificate. Beware of such stuffs. This process is the most safe process you will ever have. This doesn’t do anything to the app. Just fakes location.

So this is how you can do it:

1. Install OSMC from the steps provided on their website.
2. Connect the Rpi3 to WLAN directly.
3. This will give the Rpi3 a ip address. Find this ip address from your router
4. SSH to Rpi3 from mac/windows. Default id/password is osmc/osmc
5. Now since the Rpi3 has a wifi inbuilt all i need to do is connect the wifi. You can use the utility called connmanctl to do this. Follow the steps below.

Type the following on terminal:

 $connmanctl

Then type:

$technologies

This should displays list of technologies. Something similar you will see:

/net/connman/technology/p2p
Name = P2P
Type = p2p
Powered = False
Connected = False
Tethering = False
/net/connman/technology/ethernet
Name = Wired
Type = ethernet
Powered = True
Connected = True
Tethering = False
/net/connman/technology/wifi
Name = WiFi
Type = wifi
Powered = True
Connected = True
Tethering = False

This will show if the WIFI is enabled or now. Above shows Wifi enabled.
If you want to enable wifi use this:

$enable wifi

Now scan for available wifi

$scan wifi

Then

$agent on

$services

$connect <PSK from list displayed by the above command>

Now it will ask for Pass key, enter your wifi password.

Its a one time setup and in future it will remember this setting.

Enjoy!!

So what does this do?

1. Detects someone coming nearby,
2. Turns it’s head towards the person coming,
3. Eyes glow
4. Screams!!!

Items needed for this build:

Electronics Items:

1. Arduino Uno R3 (Or raspberry pi, you can use the same concept but write your own code)
2. Diffused Red LED 10mm – 2 – Link
3. Adafruit Wave Shield – 1
4. Resistors – 10k Ohm – Bundle
5. NPN Transistors – P2N2222A – 5
6. Breadboard, Wires, Power supply and regular stuffs.
7. Ultrasonic Module – 1 – Link
8. Servo Medium Size Motor – 1 – Link

Props:

1. Halloween skull, better if made of soft plastic
2. Some black nets to get the feel.
3. Go crazy anything you want to add
4. A solid base where you can put the motor on which the skull will move.
5. A DIY cardboard base on which you can stick the skull to move.

Steps:

Step 1:

First thing, the Wave Shield needs to be assembled. Its going to take around 15min. Follow the soldering instruction in the manual.

This is how unassembled it came. Seriously WTF when i got the order without a clue that it has to be assembled.

And then after 15min mission accomplished.

Step 2:

Connect the ultra sound module and the motor now.

Once done you should test it working.

Step 3:

Load the code

/*
 * This example plays every .WAV file it finds on the SD card in a loop
 */
#include <WaveHC.h>
#include <WaveUtil.h>

SdReader card;    // This object holds the information for the card
FatVolume vol;    // This holds the information for the partition on the card
FatReader root;   // This holds the information for the volumes root directory
WaveHC wave;      // This is the only wave (audio) object, since we will only play one at a time

uint8_t dirLevel; // indent level for file/dir names    (for prettyprinting)
dir_t dirBuf;     // buffer for directory reads

const int trigPin = 7;
const int echoPin = 8;

SoftwareServo myservo; 
/*
 * Define macro to put error messages in flash memory
 */
#define error(msg) error_P(PSTR(msg))

// Function definitions (we define them here, but the code is below)
void play(FatReader &dir);

//////////////////////////////////// SETUP
void setup() {
  Serial.begin(9600);           // set up Serial library at 9600 bps for debugging
  
  putstring_nl("\nWave test!");  // say we woke up!
  
  putstring("Free RAM: ");       // This can help with debugging, running out of RAM is bad
  Serial.println(FreeRam());

  //  if (!card.init(true)) { //play with 4 MHz spi if 8MHz isn't working for you
  if (!card.init()) {         //play with 8 MHz spi (default faster!)  
    error("Card init. failed!");  // Something went wrong, lets print out why
  }
  
  // enable optimize read - some cards may timeout. Disable if you're having problems
  card.partialBlockRead(true);
  
  // Now we will look for a FAT partition!
  uint8_t part;
  for (part = 0; part < 5; part++) {   // we have up to 5 slots to look in
    if (vol.init(card, part)) 
      break;                           // we found one, lets bail
  }
  if (part == 5) {                     // if we ended up not finding one  :(
    error("No valid FAT partition!");  // Something went wrong, lets print out why
  }
  
  // Lets tell the user about what we found
  putstring("Using partition ");
  Serial.print(part, DEC);
  putstring(", type is FAT");
  Serial.println(vol.fatType(), DEC);     // FAT16 or FAT32?
  
  // Try to open the root directory
  if (!root.openRoot(vol)) {
    error("Can't open root dir!");      // Something went wrong,
  }
  
  // Whew! We got past the tough parts.
  putstring_nl("Files found (* = fragmented):");

  // Print out all of the files in all the directories.
  root.ls(LS_R | LS_FLAG_FRAGMENTED);
}

//////////////////////////////////// LOOP
void loop() {
	Serial.print("Looping started ********************************************");
	  // establish variables for duration of the ping, 
  // and the distance result in inches and centimeters:
  long duration, inches, cm;

  // The sensor is triggered by a HIGH pulse of 10 or more microseconds.
  // Give a short LOW pulse beforehand to ensure a clean HIGH pulse:
  pinMode(trigPin, OUTPUT);
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);
	
	  // Read the signal from the sensor: a HIGH pulse whose
  // duration is the time (in microseconds) from the sending
  // of the ping to the reception of its echo off of an object.
  pinMode(echoPin, INPUT);
  duration = pulseIn(echoPin, HIGH);
Serial.print(duration);
  // convert the time into a distance
  inches = microsecondsToInches(duration);
  cm = microsecondsToCentimeters(duration);
  
    Serial.print(inches);
  Serial.print("in, ");
  Serial.print(cm);
  Serial.print("cm");
  Serial.println();
  
  
  if (cm < 30 && cm != 0)
  {

 Serial.print("Playing sound ###################################");
  root.rewind();
  play(root);
  }
  
  delay(100);
}

/////////////////////////////////// HELPERS
/*
 * print error message and halt
 */
void error_P(const char *str) {
  PgmPrint("Error: ");
  SerialPrint_P(str);
  sdErrorCheck();
  while(1);
}
/*
 * print error message and halt if SD I/O error, great for debugging!
 */
void sdErrorCheck(void) {
  if (!card.errorCode()) return;
  PgmPrint("\r\nSD I/O error: ");
  Serial.print(card.errorCode(), HEX);
  PgmPrint(", ");
  Serial.println(card.errorData(), HEX);
  while(1);
}
/*
 * play recursively - possible stack overflow if subdirectories too nested
 */
void play(FatReader &dir) {
  FatReader file;
  while (dir.readDir(dirBuf) > 0) {    // Read every file in the directory one at a time
  
    // Skip it if not a subdirectory and not a .WAV file
    if (!DIR_IS_SUBDIR(dirBuf)
         && strncmp_P((char *)&dirBuf.name[8], PSTR("WAV"), 3)) {
      continue;
    }

    Serial.println();            // clear out a new line
    
    for (uint8_t i = 0; i < dirLevel; i++) {
       Serial.write(' ');       // this is for prettyprinting, put spaces in front
    }
    if (!file.open(vol, dirBuf)) {        // open the file in the directory
      error("file.open failed");          // something went wrong
    }
    
    if (file.isDir()) {                   // check if we opened a new directory
      putstring("Subdir: ");
      printEntryName(dirBuf);
      Serial.println();
      dirLevel += 2;                      // add more spaces
      // play files in subdirectory
      play(file);                         // recursive!
      dirLevel -= 2;    
    }
    else {
      // Aha! we found a file that isnt a directory
      putstring("Playing ");
      printEntryName(dirBuf);              // print it out
      if (!wave.create(file)) {            // Figure out, is it a WAV proper?
        putstring(" Not a valid WAV");     // ok skip it
      } else {
        Serial.println();                  // Hooray it IS a WAV proper!
        wave.play();                       // make some noise!
        
        uint8_t n = 0;
        while (wave.isplaying) {// playing occurs in interrupts, so we print dots in realtime
          putstring(".");
          if (!(++n % 32))Serial.println();
          delay(100);
        }       
        sdErrorCheck();                    // everything OK?
        // if (wave.errors)Serial.println(wave.errors);     // wave decoding errors
      }
    }
  }
}

long microsecondsToInches(long microseconds)
{
  // According to Parallax's datasheet for the PING))), there are
  // 73.746 microseconds per inch (i.e. sound travels at 1130 feet per
  // second).  This gives the distance travelled by the ping, outbound
  // and return, so we divide by 2 to get the distance of the obstacle.
  // See: http://www.parallax.com/dl/docs/prod/acc/28015-PING-v1.3.pdf
  return microseconds / 74 / 2;
}

long microsecondsToCentimeters(long microseconds)
{
  // The speed of sound is 340 m/s or 29 microseconds per centimeter.
  // The ping travels out and back, so to find the distance of the
  // object we take half of the distance travelled.
  return microseconds / 29 / 2;
}

Find it on Codebender here. https://codebender.cc/sketch:174116

Step 4:  

Assemble the LED and sound board together. Found some scary sound and add it to the sound board.

The final assembly should look something similar.

Step 5:

With the electronics been set, you need to find out a way (DIY) to setup the skull. Insert the LEDs and make sure it has a base to rotate.

We literally tried various bottles and boxes to find the right base to make it work.

And finally we succeed.

Here is how the final product looks like:

Here is how it looks like.

Fancy right But no clue about why i came up with “Swappy Dagger”

Anyways the whole magic is in this secret sauce:

func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        
        let pageWidth:Float = 310 + 25;
        
        let currentOffSet:Float = Float(scrollView.contentOffset.x)
        
        print(currentOffSet)
        let targetOffSet:Float = Float(targetContentOffset.memory.x)
        
        print(targetOffSet)
        var newTargetOffset:Float = 0
        
        if(targetOffSet > currentOffSet){
            newTargetOffset = ceilf(currentOffSet / pageWidth) * pageWidth
        }else{
            newTargetOffset = floorf(currentOffSet / pageWidth) * pageWidth
        }
        
        if(newTargetOffset < 0){
            newTargetOffset = 0;
        }else if (newTargetOffset > Float(scrollView.contentSize.width)){
            newTargetOffset = Float(scrollView.contentSize.width)
        }
        
        targetContentOffset.memory.x = CGFloat(currentOffSet)
        scrollView.setContentOffset(CGPointMake(CGFloat(newTargetOffset), 0), animated: true)
        
    }

Without that you won’t get the feel.

Anyways to get the code you can download it from my Git Repo.  If this is useful spread the love by sharing.

Cheers!

Make sure Node, NPM and nodemon(optional) is already installed.

How to use? (As if you need one )

1. Extract the zip to a folder.
2. Navigate to the folder using Terminal and type “npm install”. This will deploy all the modules needed. In this case express and express-handlebars
3. Then start the server, “nodemon app.js”
4. Access on port 3000.

Cheers!

Download the starter kit below:

Problem:

I have a string; SINCGKXXXYY . [Say these are 2 airport destinations + some junk text and i want to separate the airports out of the string in the easiest possible way!]

Use the following extension:

extension String {
    
    subscript (i: Int) -> Character {
        return self[self.startIndex.advancedBy(i)]
    }
    
    subscript (i: Int) -> String {
        return String(self[i] as Character)
    }
    
    subscript (r: Range<Int>) -> String {
        return substringWithRange(Range(start: startIndex.advancedBy(r.startIndex), end: startIndex.advancedBy(r.endIndex)))
    }
}

Once done you can use it using this

var myCrappyJunkText:String = "SINCGKXXXYY"

var firstCode = myCrappyJunkText[0...2]  //Should hold SIN

var 2ndCode = myCrappyJunkText[3...5]  //Should hold CGK

Cheers!

Installation:  (Skip steps which are already done)

Mongodb –

$ brew update
$ brew install mongodb

Then navigate to your project folder and install express, node, bla bla bla stuffs.. Guessing we did that already.Next..

Add mongoose to the project

$ npm install mongoose

Now coding.

Add Mongoose dependency:

var mongoose = require('mongoose');

Add MongoDB connection

var db = mongoose.connect('mongodb://localhost/users123');

Define a schema. This is like table structure but in a different format.

//New Schema Object
var Schema = mongoose.Schema;

//Schema Definition
var UserSchema = new Schema({
name: String
})

//Register schema to Mongoose
mongoose.model('User', UserSchema);

The above code is good enough to display if you have any data in your database, but you will need the below code to display it.

To display use this:

/* GET home page. */
router.get('/', function(req, res, next) {
mongoose.model('User').find(function(err, users) {
res.send(users);
});
});

To add data, once the schema is defined add the following:

//User model using User schema available in Mongoose.
var UserModel = mongoose.model('User');

//Create a new User Object
var user = new UserModel();

//Add the info to the attributes
user.name = "Kaushik1";

//Save it
user.save(function(){

//Do stuffs after save if you want to.
console.log("Saved");
});

Add good reference tutorial is this: http://cdnjs.com/libraries/backbone.js/tutorials/nodejs-restify-mongodb-mongoose