07/12/2017 06:15:00

Belajar React-Native, beberapa hari terkahir saya mencoba firmwork baru buatan facebook untuk aplikasi mobile, mungkin sobat bertanya kenapa tidak menggunakan android studio saja, jawabannya simple yaitu baik android studio dan firmwork hybid lainnya sama-sama saya tidak mengerti, sebagai orang yang dari dulu menggunakan php melihat listing android studio maupun react native sama-sama bikin pusing, karena kebetulan saya menemukan artikel untuk membuat aplikasi react native tidak ada salahnya saya mencobanya.

intinya aplikasinya bisa jalan, dan ada progress masalah debubg dan costum nanti belakangan, hal yang menarik adalah saya tetap bisa melakukan coding pada editor notepad++ walapun previewnya bukan lagi di browser tapi tetap menggunakan emulator android studio.

Hal yang paling dasar dari memulai firmwork baru adalah tingkat pemahaman dari struktur code yang ada, sepertinya dengan react native saya cukup bisa memahami meskipun banyak syntax yang baru saya temukan. 

sebagai gambaran awal dibawah saya sertakan code pertama saya untuk registrasi username, menggunakan php sebagai backend dan tetap mysql untuk databasenya. jadi tidak jauh-jauh banget dari php. kalau sobat ingin mencoba silahkan di copy script react-native nya.

Script react native pada app.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
	AppRegistry,
	StyleSheet,
	TextInput,
	View,
	Alert,
	Text,
	Button
} from 'react-native';


export default class MainProject extends Component<{}> {
	constructor(props) {
		super(props)
		this.state = {
			UserName	: '',
			UserEmail	: '',
			UserPassword: ''
		}
	}
	UserRegistrationFunction = () =>{
		const { UserName }  	= this.state ;
		const { UserEmail }  	= this.state ;
		const { UserPassword }  = this.state ;
	
		fetch('http://192.168.1.71/awesome/user_registration.php', {
			method: 'POST',
			headers: {
				'Accept': 'application/json',
				'Content-Type': 'application/json',
			},
			body: JSON.stringify({
				name: UserName,
				email: UserEmail,
				password: UserPassword
		
			})
		}).then((response) => response.json())
			.then((responseJson) => {
			Alert.alert(responseJson);
		}).catch((error) => {
			console.error(error);
		});
	}


	render() {
		return (
			
				User Registration Form
				 this.setState({UserName})}
					underlineColorAndroid='transparent'
					style={styles.TextInputStyleClass}
				/>
				 this.setState({UserEmail})}
					underlineColorAndroid='transparent'
					style={styles.TextInputStyleClass}
				/>
				 this.setState({UserPassword})}
					underlineColorAndroid='transparent'
					style={styles.TextInputStyleClass}
					secureTextEntry={true}
				/>
				
			
		);
	}
}

const styles = StyleSheet.create({
	MainContainer :{
		justifyContent: 'center',
		flex:1,
		margin: 10
	},
	TextInputStyleClass: {
		textAlign: 'center',
		marginBottom: 7,
		height: 40,
		borderWidth: 1,
		borderColor: '#2196F3',
		borderRadius: 5 ,
	}
});
AppRegistry.registerComponent('MainProject', () => MainProject);

Script Php sebagai backend user_registration.php

<?php
include 'DBConfig.php';
$con 		= mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
$json 		= file_get_contents('php://input');
$obj 		= json_decode($json,true);
$name 		= $obj['name'];
$email 		= $obj['email'];
$password 	= $obj['password'];
$CheckSQL 	= "SELECT * FROM tbl_username WHERE email='$email'";
$check 		= mysqli_fetch_array(mysqli_query($con,$CheckSQL));
if(isset($check)){
	$EmailExistMSG = 'Email Already Exist, Please Try Again !!!';
	$EmailExistJson = json_encode($EmailExistMSG);
	echo $EmailExistJson ; 
}else{
	$Sql_Query = "insert into tbl_username (name,email,password) values ('$name','$email','$password')";
	if(mysqli_query($con,$Sql_Query)){
		$MSG = 'User Registered Successfully' ;
		$json = json_encode($MSG);
		echo $json ;
	}else{
		echo 'Try Again';
	}
}
mysqli_close($con);
?>

Script database untuk mysql db_awesome.db

# Host: localhost  (Version 5.7.19)
# Date: 2017-12-07 18:31:27
# Generator: MySQL-Front 6.0  (Build 2.20)


#
# Structure for table "tbl_username"
#

DROP TABLE IF EXISTS `tbl_username`;
CREATE TABLE `tbl_username` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;