SECTIONS

</aside>

CONTENTS

Step 1: Remix Studio

Step 2: A New Project

Step 3: A New Screen

Step 4: Your First Visual Code

Step 5: Edit a Card

Step 6: Nodegraph Mechanics

Step 7: Meet the Essential Nodes

Step 8: Make Something Real

Step 9: Meet all the Nodes

</aside>

<aside> ✅

CHECK

You’ve built, published & viewed a simple Screen. You’ve reviewed the shortlist of essential Node primitives. You can look at both the Project view and a Screen view in Remix Studio and find your way around with some familiarity.

</aside>

Build a Simple Product

This is going to be a long page! The time to run is now, because once you’ve built a great product, launched it, and have adoring users — there’s no going back :-)

It’s time to progress your Project into a Product. A very simple one.

Let’s build a CRM (traditionally Customer Relationship Management, but in our case, a Contact Relationship Manager). If multi-billion dollar corporations have built it, so can we!

This is how we will do it:

Build the simplest basic version of a CRM on poc.remixlabs.com in your new example Project
Publish and test it right here on poc.remixlabs.com
Improve it by abstracting (separating) where the data is stored, from where the screen flows run
Host the data store portion on a cloud server and interact with it using “Agents”
Learn how to package the screen flows so you can distribute them on other surfaces (for example: your own website, a mobile app on your phone, or an iOS appclip you can pop up by just pointing your phone at a QR code)

Plan out your Product

A good Data Model is your foundation, drainage, and plumbing. Worth thinking through up front as it’s somewhat annoying to dig up and restructure once you’ve built on top of it.

Having said that, our visual system does make change easier to approach than traditional code based tools. [Rabbit Hole] more on this much later!

The Data Model

In our Contact Relationship Manager we’re going to track People we know, Companies we know or that these People might own or work in, and finally our Interactions with these People we know, such as meetings or calls with them.

<aside> 🔧

HOW

video coming soon…

</aside>

WHAT

The Remix data store (that database you get automatically with each Project) is a row based, schemaless, JSON record store.

If you’re not familiar with JSON or databases, think about Digital Index Cards. Each piece of information (a record) is stored like a single card (which can be represented in a JSON data format) and it looks something like this:

{
  "id" : "SCpyOxD0",
  "name" : "Theodore Donald Kerabatsos",
  "email" : "[email protected]",
  "phone" : "310-555-0123",
  "this_is_a_field" : "And this is its value!"
}

Which, in our visual system, you’ve already met as the 2-column table of field & value pairs — the Data Object Node — that we used to represent the person on the left here during our Card building exercise.

Our internal JSON representation of a record once you save it in your Remix Project database has a few distinguishing characteristics which we will see by and by.

<aside> 🤓

ASIDE: expand this section to see the JSON object representing the full anatomy of a Remix Record as stored in our database. </aside>

<aside> 🗒️

NOTE

We haven’t yet discussed an extremely important and useful concept: Relationships between two Records of different Entity Types.

This is where we use the IDs of records to draw pointers between the “Digital Index Cards”, for example Person with id X234 works with Company with id Y678

Depending on the practical nature of this relationship (One to One, One to Many, Many to Many) there are different recommendations on how to create and track these Relationships. We will get to this later in our journey [Rabbit Hole] more on this much later!

</aside>

The Screen Flow

A well conceived screen flow leads to simple navigation, which means your users are never disoriented. Let’s map out the basic screens we need for our basic CRM. Later we’ll link them via Navigation actions while we’re building each screen.

<aside> 🔧

HOW

video coming soon…

</aside>

WHAT

…

Build the MVP

An MVP is like a bicycle with training wheels — the simplest version of your product that can roll out the door and do its core job. No bells, no whistles, just the essential features that let you discover if you're on the right track before adding gears, reducing the weight of the seat post by 3 grammes, and buying that spandex.

For a CRM 101, we will need:

A form to enter the details of a person and save it
A list view of people
A detail view of a single person
A way to edit the details of an existing person (also a form)

1. The Form

<aside> 🔧

HOW

video coming soon…

</aside>

WHAT

…

2. The List

<aside> 🔧

HOW

video coming soon…

</aside>

WHAT

…

3. The Detail View

<aside> 🔧

</aside>

WHAT

…

4. The Form (Revisited)

<aside> 🔧

</aside>

WHAT

…