Creating Native Mobile Apps with Tabris.js framework - relation from Madison PHP 2018 conference - by cookieguru.

This is a Guest Blog Post from our long-term community member – cookieguru – who recently have an opportunity to present our Tabris.js framework at Madison PHP conference.

Taco Shaker API with Tabris.js framework

I’m Tim Bond, although you may have seen me in the Tabris community as cookieguru. I recently had the pleasure of leading a Tabris workshop at the Madison PHP Conference. In this 3 hour workshop we built from scratch a small app called Taco Shaker, a simple app built on Tabris.js utilizing the Taco Fancy API coupled with cordova-plugin-shake that will show a random taco recipe every time an Android or iOS device was shaken.

Building simple native mobile apps in just 3 hours

In this short time, all attendees got an overview of how Tabris.js works, an introduction to TypeScript, and went from zero to finished app all thanks to the quick test-deploy cycle that Tabris offers. Attendees also got to experience the Tabris.js build servers, which can build a finished app or integrate new plugins, all without having to install hefty SDKs on your development machine. If you haven’t tried Tabris yet, it only takes a few minutes to get started.

Try out our Taco Shaker API created with Tabris.js framework

There’s only one piece of software to installed&endash;and you may already have it! If you want to give Taco Shaker a try, there are just 6 short steps:

1. Download and install the Tabris.js 2 app from the Google Play Store or Apple App Store. Alternatively, on Android you can download a prebuilt binary that contains the shake plugin here.

2. Download and install Node.js

3. Install the Tabris.js command line client with npm install -g tabris-cli@2.6.2

4. Clone or download the taco shaker repo
If you are using the developer app from one of the app stores, it does not include the shake plugin so you’ll want to comment out line 88.

5. From the command line, cd in to that directory and run tabris serve -w

6. On your mobile device, and select the URL tab (or swipe from the right) and enter the correct address exposed by the server

Building your application online, no manual build necessary!

This serve command does two things: First, it starts a webserver on your development machine. Your mobile device will connect to it for your app’s source code. Second, this will also run the TypeScript compiler automatically every time your source code is changed. Want to see how quickly we can check for changes in the app?

Let’s move the mixins after the condiments; move line 34-44 so they are just above the Recipe header on line 58. Save the file, and on the device, swipe right to open the developer console. Tap the refresh icon on the upper right. Your device will grab the freshest code from your development machine and we can instantly see the changes, no build necessary!

What kind of spices would you add to this app?

Let us know in the comments below!

About the Author

Tim is a senior full stack developer that got his start with PHP 14 years ago. He is the author of multiple mobile apps and is very active in the Tabris.js community. When not in front of a computer, you’ll probably find him hiking or biking around beautiful Seattle, or putting together a new Lego set on one of the rare rainy days.

————-