Siphon is a sandbox environment which lets you create React Native apps without the need to install Xcode or Android Studio. Siphon makes it possible to push and publish instant updates to production apps.
Siphon provides a command line tool which makes it easier to create and test apps with a few commands.
In this tutorial, I’ll show how to use Siphon to create react native mobile apps. I’ll create and test the app using the Siphon sandbox environment.
Source code from this tutorial is available on GitHub.
Getting Started
To get started with Siphon, download the siphon command line tool.
curl https://getsiphon.com/install.sh | sh
Install the Siphon sandbox app on your test phone by opening https://getsiphon.com/a on an Android device or https://getsiphon.com/i on an iOS device.
Once installed, register for a free account and login.
Creating Siphon App Interface
Use the siphon command to create the mobile app structure.
siphon create SiphonFireBaseApp
This will ask for your Siphon account credentials, enter them to create the app structure. Open the Siphon sandbox from your phone to see the SiphonFirebaseApp app.
Open the project directory to see the app structure. Inside is a file called index.js which contains the react code for the mobile app.
Remove all the code in index.js as you’ll create your own app interface from scratch.
You’ll be creating a simple login screen with two input text for email address, password and a sign in button. To create the buttons and input text You’ll need react, so start by requiring react-native.
var React = require('react-native');
Define the input text boxes and buttons:
var {
AppRegistry,
View,
Text,
TextInput
} = React;
AppRegistry is required to register the component. The react native button library is used in the app, so install it using npm. Initialize the app using npm.
npm init
Enter the details when prompted and you should have a package.json file in the application folder. Install the react native button using npm.
npm install react-native-button --save
The --save option saves the react native button dependency in the package.json file. Initialize the react native button in index.js.
var Button = require('./node_modules/react-native-button');
Define a react class called SiphonApp in index.js.
var SiphonApp = React.createClass({
// code will be here !!
});
Add a render function to display the view in the SiphonApp.
var SiphonApp = React.createClass({
render: function() {
return(
<View>
<Text>
Siphon App Home
</Text>
</View>
)
}
});
Register the SiphonApp class using AppRegistry.
AppRegistry.registerComponent('App', () => SiphonApp);
Push the changes using the siphon command line tool.
siphon push
Refresh the app in the Siphon SDK on your phone to view the mobile app.
Add a title to the SiphonApp render function to show at the top of the app, replacing the current Text element.
<Text
style={{
padding: 5,
margin: 10,
marginTop: 50,
fontSize : 25,
color : 'rgb(0,0,255)',
textAlign: "center"
}}>
Siphon Firebase App
</Text>
Add two text views to the SiphonApp render function to display the text boxes for username and password.
<TextInput
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
marginTop: 20,
borderWidth: 1}} placeholder="UserName" />
<TextInput
secureTextEntry={true}
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
borderWidth: 1}} placeholder="Password" />
Add a button for the user to sign in to the application.
<Button
style={{
fontSize: 20,
height: 40,
padding: 5,
margin: 10,
backgroundColor: 'black',
color: 'green'
}}
styleDisabled={{color: 'red'}}>
Sign In
</Button>
Here is the complete SiphonApp class:
var SiphonApp = React.createClass({
render: function() {
return(
<View>
<Text
style={{
padding: 5,
margin: 10,
marginTop: 50,
fontSize : 25,
color : 'rgb(0,0,255)',
textAlign: "center"
}}>
Siphon Firebase App
</Text>
<TextInput
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
marginTop: 20,
borderWidth: 1}}
placeholder="UserName" />
<TextInput
secureTextEntry={true}
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
borderWidth: 1}}
placeholder="Password" />
<Button
style={{
fontSize: 20,
height: 40,
padding: 5,
margin: 10,
backgroundColor: 'black',
color: 'green'}}
styleDisabled={{color: 'red'}}>
Sign In
</Button>
</View>
);
}
});
Save the changes and push it via the siphon command line tool. Open the app from the Siphon SDK to view the login screen.
Binding Events to Trigger Sign In
Add an onChange event to the username and password text inputs to bind the text to a variable:
...
onChangeText={(text) => this.setState({username: text})}
...
onChangeText={(text) => this.setState({password: text})}
...
On the sign in button add an onPress event to handle button clicks.
onPress={this._handlePress}
In the SiphonApp react class, define the _handlePress function triggered by the onPress event:
_handlePress:function(event){
var username=this.state.username;
var password=this.state.password;
console.log('Username is ',username);
console.log('Password is ',password);
},
Here is the modified SiphonApp react class:
var SiphonApp = React.createClass({
_handlePress:function(event){
var username=this.state.username;
var password=this.state.password;
console.log('Username is ',username);
console.log('Password is ',password);
},
render: function() {
return(
<View>
<Text
style={{
padding: 5,
margin: 10,
marginTop: 50,
fontSize : 25,
color : 'rgb(0,0,255)',
textAlign: "center"
}}>
Siphon Firebase App
</Text>
<TextInput
onChangeText={(text) => this.setState({username: text})}
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
marginTop: 20,
borderWidth: 1}}
placeholder="UserName" />
<TextInput
onChangeText={(text) => this.setState({password: text})}
secureTextEntry={true}
style={{
height: 40,
borderColor: 'gray',
padding: 5,
margin: 10,
borderWidth: 1}}
placeholder="Password" />
<Button
onPress={this._handlePress}
style={{
fontSize: 20,
height: 40,
padding: 5,
margin: 10,
backgroundColor: 'black',
color: 'green'}}
styleDisabled={{color: 'red'}}>
Sign In
</Button>
</View>
);
}
});
Save the changes and push them:
siphon push
Siphon provides a command to monitor logs when the app is running. From the project directory type the following command to monitor logs:
siphon logs
Enter a username and password and click the sign in button to see the resulting logs in the terminal window.
Using Firebase to Authenticate Username &Amp; Password
Next you’ll add functionality to authenticate the username and password entered against a Firebase database. To get started with Firebase, create an account, and log in to Firebase. Click on the Login & Auth tab on the left menu and under the Email and Password tab, click to enable email and password login.
If you scroll down the page you should see an option to add users to the list. Click the Add User button, enter an email address and password and click add. This user will authenticate the mobile app. Note the unique Firebase URL from the browser, in my case, it’s https://burning-fire-1723.firebaseio.com
Next, install Firebase client inside the mobile app to call the API.
npm install firebase --save
Require the firebase library in the index.js file.
var Firebase = require('firebase');
Inside the _handlePress function, replace the code with a reference to Firebase URL, for example:
var ref = new Firebase("https://burning-fire-1723.firebaseio.com");
Use of the authWithPassword API to authenticate the username and password against Firebase.
ref.authWithPassword({
email: username,
password: password
}, function(error, authData) {
if (error) {
console.log("Login Failed!", error);
} else {
console.log("Authenticated successfully");
}
});
Once the username and password is authenticated, the above code logs the message Authenticated successfully or an error message. Save the changes and push them using siphon push.
Try to login to the app using the email address and password added earlier and you should get a success message in the terminal log console.
What Next? How to Use in Production?
When the app is complete, you can create a production-ready app using the following command for your platform(s) of choice:
siphon publish --platform ios
siphon publish --platform android
This command will prompt you to enter some information about your app, and then Siphon will build, package and submit the app to stores on your behalf.
Publishing using Siphon requires a paid subscription. For more detailed information on publishing using Siphon read the official documentation.
Wrapping It Up
In this tutorial, you learnt how Siphon helps in creating a react native app without installing Android Studio or Xcode. One advantage to using Siphon is the ability to push updates to your app without needing to release a new app store version each time.
Would you use Siphon? Any comments and questions, please let me know below.
Jay RajJay is a Software Engineer and Writer. He blogs occasionally at Code Handbook and Tech Illumination.
