Intercept Network Requests in a React Native App

React Native is development framework enabling development of applications for both Android and iOS using the same react like code base. It provides fast development for JavaScript engineers, and reduces the need to learn both iOS and Android proprietary development method and tools.

Most apps do not stand on their own, and need to send network requests to a server. In many cases, intercepting these requests from within the app, and adding/changing some of the requests has a real value, for example, handling authentication, adding tracking info, and more.

 In this post we will present how to intercept network requests in a React Native app. We will start by creation of a new React Native app, then add a sample network request from the app, and finally, we will learn to intercept the network requests.

Create a New React Native App

To create a new React Native app, run the following:

npx react-native init MyTestApp

cd MyTestApp

Then run these commands.

Each command should run in a different terminal (in the MyTestApp folder).

Terminal 1:

npx react-native start

Terminal 2:

npx react-native run-android

Send a Network Request

First install axios:

npm install -S axios

Add a call upon onPress on any element to axios:

async function apiCall() {

 const axiosInstance = axios.create({

   baseURL: 'http://www.my-server.com/',

   headers: {

     'Cache-Control': 'max-age=640000',

     'User-Agent': 'MyApp',

   },

 });

 axiosInstance.get('index.html').then(response => {

   console.log(response.data);

 });

}

Intercept Network Requests

In android/app/build.gradle under dependencies section, add:

implementation 'androidx.appcompat:appcompat:1.4.0'

implementation 'com.google.android.material:material:1.4.0'

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

implementation 'com.squareup.retrofit2:retrofit:2.9.0'

implementation 'com.squareup.retrofit2:converter-gson:2.9.0'

In the MainApplication.java 

import com.facebook.react.modules.network.OkHttpClientProvider;

And in the onCreate method:

OkHttpClientProvider.setOkHttpClientFactory(new InterceptorClient());

Lastly, implement the Interceptor intself:

import com.facebook.react.modules.network.OkHttpClientFactory;

import okhttp3.OkHttpClient;

import okhttp3.Request;

public class InterceptorClient implements OkHttpClientFactory {

    @Override

    public OkHttpClient createNewNetworkModuleClient() {

        return new OkHttpClient.Builder()

                .addInterceptor(chain -> {

                    Request original = chain.request();

                    Request.Builder builder = original.newBuilder()

                            .addHeader("My-authenticatoin", "my-token");

                    Request request = builder.build();

                    return chain.proceed(request);

                })

                .build();

    }

}

AWS Batch in Go

 

In a previous post we've used AWS batch using boto3.

In this post we will wrap usage of AWS batch using golang.

First we'll create the batch wrapper class.

package awsbatch

import (
 "fmt"
 "github.com/aws/aws-sdk-go/aws"
 "github.com/aws/aws-sdk-go/aws/session"
 "github.com/aws/aws-sdk-go/service/batch"
 "time"
)

type BatchWrapper struct {
 batch *batch.Batch
 jobs  []*string
}

func ProduceBatchWrapper() *BatchWrapper {
 awsSession, err := session.NewSession()
 if err != nil {
  panic(err)
 }

 awsBatch := batch.New(awsSession)
 return &BatchWrapper{
  batch: awsBatch,
  jobs:  []*string{},
 }
}

Next, we submit batches, and let them run in the background.

func (b *BatchWrapper) SubmitBatch(
 jobName string,
 environment map[string]string,
) {

 overrides := batch.ContainerOverrides{
  Command:     []*string{aws.String("/simulatorbackend")},
  Environment: []*batch.KeyValuePair{},
 }

 for key, value := range environment {
  overrides.Environment = append(
   overrides.Environment,
   &batch.KeyValuePair{
    Name:  aws.String(key),
    Value: aws.String(value),
   },
  )
 }

 input := batch.SubmitJobInput{
  JobName:            aws.String(jobName),
  JobQueue:           aws.String("my-batch-queue"),
  JobDefinition:      aws.String("my-batch-jobdef"),
  ContainerOverrides: &overrides,
 }

 output, err := b.batch.SubmitJob(&input)
 if err != nil {
  panic(err)
 }

 b.jobs = append(b.jobs, output.JobId)
}

And finally, we wait for all the batches to complete.

func (b *BatchWrapper) WaitForBatches() {
 input := batch.DescribeJobsInput{
  Jobs: b.jobs,
 }

 b.jobs = []*string{}

 for {
  output, err := b.batch.DescribeJobs(&input)
  if err != nil {
   panic(err)
  }

  allDone := true
  for _, job := range output.Jobs {
   if *job.Status == "FAILED" {
    panic("job failed")
   } else if *job.Status == "RUNNING" || *job.Status == "STARTING" || *job.Status == "SUBMITTED" {
    fmt.Printf("job %v id %v status %v\n",
     *job.JobName,
     *job.JobId,
     *job.Status,
    )

    allDone = false
   }
  }
  if allDone {
   return
  }
  time.Sleep(time.Second * 10)
 }
}

Classical Information

 

In this post we will use a method to present classical information. This basic method will be used in later posts to discuss quantum information. This is based on the information in the Qikit course.

Classical State and Probability Vectors

If X represents a bit, whose state can be 0 with probability 1/3 and 1 with probability 2/3, then we mark it as follows.

X bit

Σ = {0,1}

Pr (X=0) = 1/3   and    Pr (X=1) = 2/3

This state can also be presented as probabilistic column vector:    

Notice that:

1. all numbers in the vector are non-negative real numbers
2. The sum of the vector is 1

Bra and Ket

Bra is a row vector with 1 set in a single position, and all others are zeros.

(1,0) is bra zero, and the shorthand is marked as <0|

(0,1) is bra one, and the shorthand is marked as <1|

Ket is a probability column vector representing the X bit in only one state.

X is bit 0, and the shorthand for that is ket zero, marked as |0>

X is bit 1, and the shorthand for that is ket one, marked as |1>

We can use bra and ket to create vectors and matrices, for example:

 = 1/3 |0>   + 2/3 |1>

Deterministic Operations

We can define a function to make a change to the bit X.

For example: 

f1(X) = 1, will always convert the value of the bit to 1

f2(X) = !X, will always change the value of the bit to the opposite value.

The functions can be represented as matrices, so that M |X> = |f(X)>

For example, the corresponding matrices for the functions above are:

M1 = 

M2 = 

Probabilistic Operations

We can also configure probabilistic functions that have a probability of changing a bit.

Notice that the sum of each column in the matrix must be one.

For example:

M = 

and then

M |0> = always |0>

M |1> = 50% |0> and 50% |1>

NPM and Dependencies

 

Npm is a software registry, which holds hundreds of thousands libraries. It is used in a JavaScript based project to install dependencies.

The dependencies are added using npm, which install the dependencies in a transitive manner. This means that in case we install library A, which requires library B, and library B requires library C, then A, B, and C are all installed.

Not only that but npm also manages the versions requirements, so if A requires a specific version of B. Unlike other tools (like maven) npm can install different versions o the same library. See a nice example in the post: Understanding npm dependency resolution.

Still, there are some keynotes of npm usage for an npm user to keep in mind.

First, always install dependencies using install flag, e.g.:

npm install my-dependency-library

This does the following:

1. Adds the recent version of the library to the package.json file.
2. Add all the transitive dependencies of the library to the package-lock.json file.
3. Install (downloads) all the transitive dependencies to the node_modules folder.

Second, npm does not start in vein every run. It inspects the current content of the package.json, package-lock.json, and the node_modules folder, and prefer using the dependencies from there instead of downloading new ones. This means, that if something went wrong, and we want to start a fresh dependencies installation, we need to delete both package-lock.json and the node_modules folder before running npm install.

Third, a very common error is "npm unable to resolve dependency tree". This is due to a dependency resolving algorithm change in recent npm versions, as explained here. To solve this, start a fresh dependencies installation (as specified above), and run npm with the --legacy-peer-deps flag.