Body of POST Requests with HTTP/1.1

I recommend people to use the following structure of post requests minimally. Well, otherwise there is no way to do that thing.

POST /yis HTTP/1.1
Host: yismypeaple.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 30

name="neym"&surname="soerneym"

This example will post name=”neym” and surname=”soerneym” to yismypeaple.com/yis As you can see Content-Length is just total length of body which is starting with name=

You can get many information from there https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST

Post to HTTPS with ESP8266 / ESP32

The main difference between posting to http and https is using WiFiClientSecure instead of WiFiClient and using client.setCACert();

#include <WiFi.h>
#include <WiFiClientSecure.h>
#include <WiFiMulti.h>

WiFiMulti WiFiMulti;

const char *host = "my.api.com";
const char *uri = "/post_to_there";

void setup()
{
 Serial.begin(115200);
 WiFiMulti.addAP("Router_Username", "Router_Password");
 Serial.println();
 Serial.println();
 Serial.print("WiFi Connecting...");
 
 while(WiFiMulti.run() != WL_CONNECTED) {
        Serial.print(".");
        delay(500);
    }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

       delay(1000);
}

void loop()
{
   Serial.print("Connecting to ");
   Serial.println(host);

   WiFiClientSecure client;

   const char* root_ca = \
  "-----BEGIN CERTIFICATE-----\n" \
"MIIDSjCCAjKgAwIBAgIQRK+wgNajJ7qJMDmGLvhAazANBgkqhkiG9w0BAQUFADA/\n" \
"MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT\n" \
"DkRTVCBSb290IENBIFgzMB4XDTAwMDkzMDIxMTIxOVoXDTIxMDkzMDE0MDExNVow\n" \
"PzEkMCIGA1UEChMbRGlnaXRhbCBTaWduYXR1cmUgVHJ1c3QgQ28uMRcwFQYDVQQD\n" \
"Ew5EU1QgUm9vdCBDQSBYMzCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEB\n" \
"AN+v6ZdQCINXtMxiZfaQguzH0yxrMMpb7NnDfcdAwRgUi+DoM3ZJKuM/IUmTrE4O\n" \
"rz5Iy2Xu/NMhD2XSKtkyj4zl93ewEnu1lcCJo6m67XMuegwGMoOifooUMM0RoOEq\n" \
"OLl5CjH9UL2AZd+3UWODyOKIYepLYYHsUmu5ouJLGiifSKOeDNoJjj4XLh7dIN9b\n" \
"xiqKqy69cK3FCxolkHRyxXtqqzTWMIn/5WgTe1QLyNau7Fqckh49ZLOMxt+/yUFw\n" \
"7BZy1SbsOFU5Q9D8/RhcQPGX69Wam40dutolucbY38EVAjqr2m7xPi71XAicPNaD\n" \
"aeQQmxkqtilX4+U9m5/wAl0CAwEAAaNCMEAwDwYDVR0TAQH/BAUwAwEB/zAOBgNV\n" \
"HQ8BAf8EBAMCAQYwHQYDVR0OBBYEFMSnsaR7LHH62+FLkHX/xBVghYkQMA0GCSqG\n" \
"SIb3DQEBBQUAA4IBAQCjGiybFwBcqR7uKGY3Or+Dxz9LwwmglSBd49lZRNI+DT69\n" \
"ikugdB/OEIKcdBodfpga3csTS7MgROSR6cz8faXbauX+5v3gTt23ADq1cEmv8uXr\n" \
"AvHRAosZy5Q6XkjEGB5YGV8eAlrwDPGxrancWYaLbumR9YbK+rlmM6pZW87ipxZz\n" \
"R8srzJmwN0jP41ZL9c8PDHIyh8bwRLtTcm1D9SZImlJnt1ir/md2cXjbDaJWFBM5\n" \
"JDGFoqgCWjBH4d1QB7wCCZAA62RjYJsWvIjJEubSfZGL+T0yjWW06XyxV3bqxbYo\n" \
"Ob8VZRzI9neWagqNdwvYkQsEjgfbKbYK7p2CNTUQ\n" \
"-----END CERTIFICATE-----\n";

   client.setCACert(root_ca); 
   
    if (!client.connect(host, port)) {
        Serial.println("Connection failed.");
        Serial.println("Waiting 5 seconds before retrying...");
        delay(5000);
        return;
    }
    
  String body = "BODY to be Posted";

  String postRequest = 
  "POST " + uri + " HTTP/1.1\r\n" + 
  "Host: " + host + "\r\n" + 
  "Content-Type: application/x-www-form-urlencoded\r\n" +
  "Content-Length: " + body.length() + "\r\n" +
  "\r\n" + body;
  
  Serial.println(postRequest);
  client.print(postRequest);
  client.stop();

  Serial.println();
  Serial.println("***DONE***");
  Serial.println();
  delay(6000);
}

We need our endpoint’s root certificate to establish communication with HTTPS pages. ‘root_ca’ variable is holding our endpoint’s root certificate. We need to know which certificate our endpoint is using. So we can gather it with different ways. Here…

You can find root certificate from your SSL providers website or just visiting the address.

You can find certificate key in exported file.

Adding Native-Base to your React Native App

Native-Base is an UI library to create your UIs much faster and simpler.

Create your app first.

react-native init MyApp

I recommend you to install Yarn.

npm install yarn

Go in your application’s main folder and install native-base.

npm install native-base --save

Now link native-base with your app.

react-native link

Let’s test our first app. Edit your App.js file like this.

import React from 'react';
import { Container, H1 } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <Container>
          <H1>
            My first app with native-base.
          </H1>
      </Container>
    );
  }
}

Run your app.

react-native run-android

Preparing a release with React-Native for Android

In React-Native, debugging is relatively easy but preparing an app for Google Play Store or apk for your phone needs a key to sign your app.

Get in CMD as administrator. Go to the JDK directory. cd C:\Program Files\Java\jdk*****\bin
Type the following to create a file called my-upload-key.keystore in that folder. You can change the keystore name or alias. It will ask for password, i recommend you to type a strong one.

keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Copy that keystore file to android/app folder in your application directory.

Edit android/gradle.properties and add the following.

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=YOUR_PASSWORD
MYAPP_UPLOAD_KEY_PASSWORD=YOUR_PASSWORD

Edit android/app/build.gradle, add the release {} part and change signingConfigs.debug as .release

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

cd in android folder and type

gradlew bundleRelease

AAB file is now ready in android/app/build/outputs/bundle/release/app.aab . You can submit to Google Play Store.

To test the release and create an apk file. Run app with following.

react-native run-android --variant=release

Your apk is ready in android\app\build\outputs\apk\release

Creating a React-Native Application

Before creating a React Native Application in Windows, i recommend to use Chocolatey. It’s a package manager application, just like yum, apt, dnf, portsnap in Linux and BSD. Install chocolatey as administrator with following CMD command.

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

I recommend to install NodeJS (especially LTS), JDK and Python in case if we need to follow react-native command instead of Expo CLI.

choco install -y nodejs-lts python2 jdk8

Now we are ready to install react-native cli to create our sample project.

npm install -g react-native-cli

Now we need to install Android Studio. Get it from there: https://developer.android.com/studio

We need to set two environment variable. Go in to Control Panel. Choose System and Security -> Change Settings -> Advanced Tab -> Environment Variables and click New. Set a ANDROID_HOME variable with location C:\Users\<em>YOUR_USERNAME</em>\AppData\Local\Android\Sdk , secondly set a platform-tools variable with path C:\Users\<em>YOUR_USERNAME</em>\AppData\Local\Android\Sdk\platform-tools . Change YOUR_USERNAME with your Windows username.

Now it’s Android Studio part. We need to download couple things and create an emulator device. Open it., yes. Click Configure -> SDK Manager. Check Android 9.0 (Pie), then check Show Package Details and check Google APIs Intel x86 Atom System Image and Android SDK Platform 28 etc.

Now come to the SDK Tools path and download Android SDK Build Tools, version 28.0.3.

Click Apply.

Turn back to Android Studio intro menu.

Click Configure -> AVD Manager -> Create Virtual Device -> ? A device choice of yours i choose Pixel 2 -> Choose Pie as System Image.

If you did all of these things, let’s create our sample project.

react-native init MySampleProject

Come in with cd MySampleProject. Run it in debug mode.

react-native run-android

Probably you get an error while building… Finally, there is a tweak that you need to do in your created MySampleProject folder. Go in to android folder, edit build.gradle file then change to minSdkVersion =  28