What we will build

In this workshop, we'll create a nicely-designed app that uses emoji to enhance a Tarot card reading. This app consists of a Card of The Day screen, a list of All Cards with a modal popup giving standard and reversed meanings, and a screen showing cards for Past, Present and Future, a simple Tarot layout. If you're curious about Tarot, read more here.

For this app, we'll also use Microsoft's very cute emoji pack, which you can discover in the Emojipedia alongside other styles. The design of this app was done by talented designer Lester Gonzales, and built by Jen Looper for the NativeScript Uplabs Challenge in 2018.

In this workshop, you'll learn about building good UI with NativeScript-Vue, how to use plugins, handle routing, and build custom components for a mobile app.

Demo

What you need

You will need a mobile device, either an iPhone or an Android, on which you can install two mobile apps that interact with the NativeScript Playground. The Playground makes it a lot easier to try out NativeScript development, or just to test out an idea or a plugin. For our purposes, we will use it to easily build a full mobile app that will run within the two apps that are required by the plugin.

So, you need to do two things:

  1. Download the two NativeScript Player apps

  2. Create an account for yourself in the NativeScript Playground by going to play.nativescript.org.

When you get to the Playground, you'll be greeted with a splash screen:

splash screen

Click the 'Vue' icon and a sample app will be scaffolded for you. You'll be shown a QR code. Open the NativeScript Play app on your mobile phone and scan that code. You should see a basic app on your phone. At this point, STOP!

Now you need to login. Create an account before continuing. By logging in, you won't lose your work in case of an issue.

After you login, you can save your project. Click the 'save' icon in the top navigation bar. You can also give your project a name so that it will have a meaningful title in the Projects pane.

naming

Once you click 'save' (don't forget to keep clicking that button as you work!) your work will be versioned (watch the url: v=1 means the first version of your work) and you can roll back in case of a problem.

TIP

Note, you need to press the 'save' button to save a version. Saving work using Ctrl-S will refresh the app on your device, but that work will be lost unless you save it as a version if you want to keep working on your app later.

Explore the sample app

Let's take a few minutes to look through the sample app that was scaffolded in the playground.

There are only a few files: app.css, app.js, and components/HelloWorld.vue.

  • app.css - contains the global CSS for your app. If you have styles that are used throughout your app, put them here. Right now, there's just a line importing the css for one of the core themes available to you.

  • app.js - the 'brains' of the app, this is the central switchboard that launches the interface. First the NativeScript-Vue plugin is imported. Then, the home component is imported. Finally, the Vue instance is rendered, with the HelloWorld component being injected into the app's frame. Finally, the app is started with $start().

  • components/HelloWorld.vue - this file is a Vue SFC, or single-file component. It contains the standard three blocks of such a component: a template, a script, and a style block.

    • The template block includes NativeScript markup, standard for mobile development. Markup such as a <Label> refers to the NativeScript modules that abstract away from the developer the complexity of writing native code cross-platform.

    • The script block contains the component's logic. So far, this area contains a blank data object. You can populate this block with standard Vue elements such as methods, props, etc.

    • The style block contains the scoped attribute which means that the styles in that block will remain exclusive to that component. This is a useful way to keep styles granular.

    In the next section, you'll create a navigation strategy for this app.