Build Data Driven IOS & Android Apps With WordPress REST API & NativeScript – Part 2

The WP Crowd
Published: July 27, 2016

Make sure you have read Part 1 – An Introduction before proceeding as we are about to dive right into the action.  In this post we will get our simulator/emulator up and running with a simple template project and learn a bit about the layout XML files that make things look purdy on the screen.

Part 3 is available here.

Setting Up NativeScript

{N} has a great guide on their website so there’s no need for me to rewrite the whole thing over here.  Follow the instructions and get the framework setup.  If you hit any snags, hit me up on here or @ChrisFlanny on Twitter.

Prepping WordPress

You will need a WordPress install to do this tutorial.  You will also need to install the REST API plugin.

To keep things simple we are going to just work with regular posts.  It’s just as easy to use custom post types or any data available through the REST API but we are going to learn the basics here so you can branch out in any direction you’d like.  So activate the REST API and let’s get started.

New NativeScript Project

tap-img-nativescript-ios-emulator-simulatorOpen up your terminal and navigate to a directory where you’d like to host this project.  Once there we are going to create a new, blank project template.  Type:

tns create WPFeed

This will setup all the basic components you need to begin building your app.  You can go ahead and start an emulation to see what’s happening.  To run your emulator navigate into the new directory

cd WPFeed

then type

tns livesync ios --emulator --watch

Replace “ios” with “android” if you are on PC.  You can emulate Android on a mac as well but it’s a bit more complicated, here’s a guide to getting that setup.  You should now see the screenshot above or something similar.  This is the default app with minimal functionality for you to start toying with.

This livesync command is pretty awesome.  It will add any ios dependencies you will need to build the project the first time you run it.  You can also do that beforehand by typing

tns platform add ios

But there’s no need since this command does it for you.  Also, livesync allows you to make updates live so you can see them in your emulator as you code.  There’s a small caveat though.

When you update XML or CSS the emulator will update your changes live.  When you update your JS code the app will relaunch automatically.

/app/ Directory

do-not-push-this-button-family-guyWhen you created this new project it built out some directories and files necessary for working in NativeScript.  It creates the project folder based on the name you chose, in our case “WPFeed.”  Inside there you will see a directory named “app.”  This is the only directory you will be touching anything.

And when I say “only” I mean ONLY.  Do not touch anything outside of this directory or you are going to find yourself debugging issues for hours/days/years.  NativeScript handles all the framework functionality needed outside of /app.

I wrote a blog specifically regarding the /platform/ directory as it can be very tempting.

Let’s Write Some Code

I don’t know about you but I freaking hate waiting to write code.  When I’m learning something new I tend to breeze past the intro and prep stages and just start hacking away.  Bad idea, please read the first post, it’s short I promise, and read the previous parts here before diving in.  You have? Awesome! Let’s do some stuff.

Open up file WPFeed/app/main-page.xml, if you are using an IDE such as PHPStorm (highly suggested) then open the /app directory as a project.

Now I’m not going to give a full blown NativeScript tutorial as they have great introductory documentation on their site.  Though they don’t have the deepest docs on more advanced topics, the basics are pretty well covered.  That said, let’s discuss what we are looking at here.

Layouts

Each screen you see in an app is a layout file, an XML file with some NativeScript specific tags.  We are going to cover four of these briefly to give you an idea of what they do.  These four can build some pretty simple but useful apps.

Page

All pages/xml files should have a <Page> tag.  Think of it as the <html> tag we use on the web.  It holds everything and passes arguments similar to the DOM in a web site that we can manipulate and read.  We use this a lot in our JS files for manipulating elements.

StackLayout

There are quite a few Layout elements like this including GridLayout and AbsoluteLayout.  You can only have one! Only one parent that is, you can nest them all you want.  But within the <Page> tags you can only have one child layout, though that child layout can have many children (must be catholic).

there-can-only-be-one-highlander-nativescript-layouts

I learned this the hard way after spending hours trying to debug a layout issue.

Labels & Buttons

These are pretty self explanatory.  If you want text on the page use a Label element and set it’s “text” property.  If you want an interactivey-feeling button use the Button element, though anything can trigger a “tap” these tend to have the native clicky vibe when pressed.

CSS

The best part about all of this is we can have a .css file (with the same name as our .xml and .js file for that page) that controls the look and feel.  You can slap an id=” or a class=” on your elements and control their styles.  It works pretty well with standard css but there are some differences.  We won’t go too detailed on that in this series but again, the NativeScript docs have most of it laid out for you.

Summary

OK so we have NativeScript up and running along with a WordPress site and an emulator showing some stuff we can interact with.  We’ve peeked into the xml layouts and things are lookin’ good! Up next we will write some JS that hits up our REST API and brings in some data then we will use that data to fill up some space on the screen.  It’s exciting times, ain’t it?!

Get the latest from The WP Crowd

Leave a Reply

4 Comments on "Build Data Driven IOS & Android Apps With WordPress REST API & NativeScript – Part 2"

avatar
Sort by:   newest | oldest
Erwin
Guest

Finally found some time to look into your article. First I had to get all things installed with the terminal, I’m not really familiar with that. After some errors to solve, a few warnings left, I get a positive answer from ‘tns doctor’, so I’m ready to start. Things in your article are pretty straight forward.

Looking out to the next part!

trackback

[…] Find Part 2 of this series here.And Part 3 here. […]

trackback

[…] sure to check out Part 1 and Part 2 of the series to get caught up on integrating the WP REST API into NativeScript […]

wpDiscuz