Skip to content
This repository has been archived by the owner on Nov 24, 2021. It is now read-only.

Make mobile web apps for total newbies

Gene Vayngrib edited this page Jul 15, 2013 · 17 revisions

Note: the details of connecting apps described in this article have changed, better doc is in works

Inception

You have an idea for a new Facebook, you see the mobile app economy creating 500K jobs and becoming a $30B industry overnight, you suddenly feel your inner Zuck rising, but you gulp up another Prozac and do, well ... nothing great. Despair not. I will show you how to use a breakthrough new system called Urbien to create a professional mobile app using just the browser, and .. launch it for free, you heard it. All you need to learn is how to make models. Models are a hackerspeak for common concepts, like Music, Tracks, Albums. In this course you will learn how to formally describe 'an Order for a Track placed to a Band by a Person at a Place' which makes for a full featured e-commerce app, built in 20 lines.

Making... scratch that, faking your first mobile app

Making an app is hard. Making a meaningful mobile apps is insanely hard, even for a professional developer. But you lucked out. Get off that lazy bench, and dive into this lesson. Soon, oh so very soon, you will see your app on iPhone or an Android phone.

Fork existing app

Forking is a hackerspeak for making a copy of someone else's code. After you make a copy, you can make any changes you like without being yelled at. Experiment, fail, start anew by making another copy, and this is how you learn. If you feel good about your improvements, you can offer original app author to incorporate them, by issuing a so called 'pull request'. This is the essence of modern development, it happens in the open, it is iterative, and it allows people to learn from each other. Now, you want to be a hacker? Then act as a hacker, fork it.

  1. go to http://urbien.com on your smartphone, or to http://urbien.com/app/UrbienApp in desktop browser, that is Firefox, Chrome or Safari. No Internet Explorer please. Seriously, you are a hacker, act like one! Not a hacker? Fake it till you make it!
  2. Click 'App gallery'. Now choose any app you like as your starting point, by clicking/tapping on its picture.
  3. Do you see 'fork me' in the top right corner? Click it. This opens an app admin page.
  4. You will be asked to login with your Facebook, Twitter, Google+ or LinkedIn account.
  5. One more step, click 'Fork me' button at the top of the page.

You now see in front of you your first app. Give it a good name that suits an accomplished person, you are about to become. Then describe it to your audience in simple practical terms. No marketing talk, for frak's sake. Remember, you are a hacker, and we hate that sh*t.

Examine your app

Each app has 3 key components: Models, Templates, Views.

  1. Models. Remember, these are your main concepts, like Orders, Music, Artist, etc. Each model has properties, like a Person has first name, last name, age, height. Now pay attention. First and last name are text properties, called strings, age is an integer and height is a so called float, it can contain integer or fractions. These are simple props, otherwise known as primitive props. The more interesting props point to other models, forming links between Web resources. E.g. Person's property 'city of birth' points to River Edge, which is not a string, it is a City. City is a model and it has its own props. Now give yourself a pat on the back, as you have just learned the coolest things there is. Props like the 'city of birth', otherwise called the resource props, form the very fabric of the mobile Web.
  2. Templates. Templates are just small chunks of HTML. What is cool about templates is that they work like your junk mail. Confess, you get a kick out of opening mail starting with: "Oh our dearest Read-them-all! We are so happy to sell you this new thing you do not need, and you can even buy 2 of them for the price of one". That part where your precious name is, was actually occupied by a so called variable which looked like this: "Oh our dearest {{sorryass-reading-this-junk}}! We are so ...". You get the point. Templates contain variables, so that you, the mobile developer, can harass with one template all the million app users, calling them names, their own names preferably.
  3. Views. Hey, easy so far, right? Views are written in Javascript and control all visual aspects of your app. Good news is you do not need to write them yet, since Urbien team prepared all the standard views you need along with all templates you need, so you just need to really know and do one thing, create models.

Repeat after me: Models, Templates and Views. Oops. Let's do it gain: Models, Models, Models. These 3 Ms are all your first app needs to operate. Yet 'operate' is not quite that satisfying for a hacker, so for it to succeed in the world, the main ingredient is to establish connections to other apps. Having a phone is good, but it is a bit more useful if you can call someone, n'est-ce pas?

App network

Note: words that start with capital letters, such as Artist or Potato or Potato (alternate pronunciation), usually refer to models. Occasionally they refer to the beginning of a sentence.

Building an app from scratch has never been easier, but sometimes you can make something great by tying a bow on an already great thing. A toaster is great, but a toaster with a bowtie? Legendary. We call such apps "remixes."

Remixes

Let's say someone (like me) made an app that organizes music into Albums, Artists and Tracks. Now someone (like you) has an idea for an app that allows people to create and share Playlists and see which playlists are the most popular.

  • Maybe this app will help people scope out brilliant DJs.
  • Maybe this app will be a variant of a shopping cart for music, and users will be able to buy a Playlist of songs as opposed to an Album.
  • Maybe this app will help people discover new artists by tagging on 1 additional (free) track from a new artist for every playlist you make.

You could, of course, have me assassinated and forge my will to bequeath my Music app unto you. I'd say that these days, that's pretty much your only viable option.

Or...you could simply plug your app into mine. Help yourself, I don't mind the extra traffic you'll bring me.

Your first-cut Playlist model could simply be a list of Tracks from my app. All the functionality of Tracks, Artists and Albums will still be present in your app, courtesy of my app. When I add functionality to my app, your app will gain that functionality immediately.

Your first remix app may only take you a few minutes to make. The key is to find the right bowtie, and that's up to you as an artist, not a programmer.

Remixes are great, but your juices can't be contained in such a small vessel, so on to Reactors.

Reactors

Toasters are awesome, but how cool would it be if every time your toast popped out, your taxes did themselves?

Let's say someone (like me) made an app that helps people keep track of their fitness. I let people track Runs, Weightlifting, Extreme Typing, etc.

Now someone (like you) has an idea for an app that monitors a person's calorie intake and expendature. You (rightly) think that no one wants to enter the same data 10 times into 10 apps. It's really fun but it's really not. When they enter a Run in the Fitness app, they probably don't want to go to their "To Eat or Not to Eat" app, and enter that Run in again.

You simply plug your app into mine. You make a little Trigger, that listens to when a person makes a Run or a Weightlift, and converts it to a Calorie, via high tech known to the hacker elite as "copy and paste."

Encouraged by your success, you write another little Trigger, that listens to when a person makes a Meal, Snack or a Binge entry in the Foodie app, and convert those to Calorie entries too.

Now if someone has all of our apps installed, they never need to enter anything twice. They'll enter their Runs and their Snacks and your app will do all the work for them and they'll be eternally grateful...for approximately five seconds, and then take your awesomeness for granted.