05

Coding and app-making for beginners

Day 5

Last week you:

• learned how to give your HTML elements a class or id
• you then got really specific with your styling (not all paragraphs need to look exactly the same!)
• learned about code libraries like jQuery
• used jQuery to select a whole section of your HTML and hide it by default
• got hands-on experience being a real coder, copying and pasting chunks of code into your projects

So far you've successfully created an app template for yourself which you'll use as a base for your own ideas.

Today we're going to start personalising your apps, you will:

• jot down some ideas for apps
• create your own new Firebase
• design and structure your data
• hack the Firebase pusher and push data to your new database
• and start adapting the functions to display exactly what you want

That sounds like a lot!

We'll take it slowly :)

Your app

Have a think about how you can hack the template we've made together.

Remember the components:

• Interface: dropdown search menu and find button
• Data: we used people and ranked their skills, what could you replace people with?
• Logic: only the people who ranked highly in the searched-for skill are shown in the results

What app ideas could you bring to life using this same structure?

Build your own database

Good apps need good data.

This doesn't mean a lot of data, but rather well structured data.

A good database doesn't look like a bucket full of unstructured data. Instead, a good database is organised so that it's easy (and quick) to search through heaps of objects and pick just the ones you want.

Let's look at three general principles of database design, and then you'll apply those to your own database.

Key database design principles

1. Break your data into logical pieces

Bad example

Person
Danny Base 21

Better example

Name	Surname	Age
Danny	Base	21

This way you can take specific bits of data and spit them out wherever and however you want in your app.

Also, you could do things like calculate the average age of our people.

2. Use numbers for ranking

Computers are extremely good at maths. For a computer, computing numbers is a piece of cake. Yet computing natural languages (such as English) is something that even the most sophisticated machines still struggle with (think of Siri, for example).

What's the trick then, if you want your app to be able to tell you who are the best bakers in my area for example? You rank people according to their baking skills.

Bad example

Name	Surname	Baking skills
Danny	Base	Excellent
Jordan	Scripts	Amazing

Better example

Name	Surname	Baking skills (0-5)
Danny	Base	4
Jordan	Scripts	3

If you want to rank data objects by relevance to a certain concept / keyword, use numbers.

Name	Surname	Comedy	Sci-fi	Western
Quentin	Tarantino	2	0	3
Martin	Scorsese	3	0	1
Stanley	Kubrick	0	3	0
Sofia	Coppola	3	0	0

3. Use true or false

For yes or no answers. This is useful for filtering out results.

Name	Surname	filmMaker	likesPets
Quentin	Tarantino	true	false
Martin	Scorsese	true	true
Boris	Johnson	false	false

For instance, it would be easy to filter only the film-makers using this data structure.

Your turn!

Starting from you app idea, consider:

• What is the data unit?

  For example, in our demo app the data unit is a person and in the database we're storing people's profiles.

• What pieces of data will your data unit feature?

  For example, in our demo app for each person we're storing name, blurb, profile picture, likesPets, bakingSkills etc.

• Which data pieces will be used to rank, filter & sort?

  For example likesPets helps us filter data for the I'd like someone to keep my pet option, bakingSkills helps us filter data for the I'd like someone to bake a cake option, etc.

Make a list of all the data pieces for your data unit on paper.

Go to Firebase, log in and create a new app (which really means create a new database).

1. Hover over the greyed-out box in the top-left corner

   

• Give your app a unique name

  

• Click on CREATE NEW APP

  

• Once your new app is ready (it will take a few seconds) it will appear next to the greyed-out box, click on its URL to open it

  

Push data to your new Firebase

Go to bit.ly/FirebasePusher and click Remix.

This is a Thimble project which uses an HTML form to push data to Firebase. In order to make it work with your own Firebase database, you need to make a couple of changes:

Change databaseURL to your own Firebase URL

Tweak the input elements so that they reflect your data structures. Make sure you change the name attributes, eg:

<input name="CHANGE_THIS" ...>

> Add as many `input` elements as you need. You'll find some examples of common input types in the Thimble HTML code.


# Displaying data

Once you've created your own database and *pushed* data to it, you'll need to customise the code you already have to display your new data.

### Remix your project

So you don't lose your previous work:

> 1. `Publish` your project
> * Preview it 
> * Press the `Remix` button. This will make a copy of the project. Now you can tweak this code to fit your new data (without losing your first project).

### Customise your code

> In your remixed project, open `app.js` and change `databaseURL` to your own database URL. 

This will instruct the app to load data from your own Firebase.

> In `index.html` change the `option` elements to reflect your data. 

> Make sure the `value` attributes match the property names you are using in Firebase. 
	
For example, the `bakingSkills` in the HTML dropdown below **must** match the `bakingSkills` property stored in Firebase, letter by letter, and it's case sensitive.
	
```html
<select>
	<option value="bakingSkills">Bake a cake</option>
	...
</select>

Change the display

Go to the function show.js.

Scroll down to makeListItemHTML. This is the function which populates the results list:

function makeListItemHTML (person, index) { ... // li = List Item var li = '

' + '

' + person.name + '

' + '

'
return li; }

This function takes in the JavaScript object `person` and spits out an HTML list item `<li>...</li>`

As you can see, in `li` there are some **invariable bits** like `<li id="`, and some **variable bits** like `person.name` 

> If you want to add an `img` for instance, then you can tweak the lines where `li` is stringed together: 

> ```js
var li  = '<li id="' + index + '">' 
+ '<img src="' + person.image + '">' 
+ '<h2>' + person.name + '</h2>' 
+ '</li>'    

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License