Make Your Own Million-Pound App: An Introduction

Tagged with
cover-image

A team of four Labbers is attending the BBC Digital Taster Event in Middlesbrough this week, where we’ll be running a workshop on building web applications for students ages 13-19. Here is Rob Cochran’s introduction to the technologies we use for rapid prototyping.

Getting started

Before you begin building your million-dollar app, you need to decide what platform you want it to be used on: web browser, Android or iOS.

Web Apps with React

Want to build a web application? You’ll probably want to get familiar with React.

React is used for creating a presentation layer for your application, known as the front-end. The checkboxes users select, the news feeds they scroll through, and the faces they swipe left or right on? Those can all be built with React. It was developed by Facebook and it’s taken the market by storm because it’s flexible, powerful, adaptable and — once you learn it — easy to apply to many situations.

Find out more: “Tutorial: Intro to React”, Facebook

iOS and Android Apps with React Native

If you want to build an app for mobile / tablet (iOS / Android), then React Native is a good front-end tool for you. It’s similar to React, but it taps into the native functionality of your phone or tablet. This allows it to make use of GPS, cameras, microphones, accelerometers etc.

Find out more: “Tutorial”, React Native

HTML5

Hyper-Text Markup Language (HTML) has been around for ages. It’s the workhorse of the internet, and it’s still very much in use today. It’s the easiest type of code in this tutorial and integral in any browser-based application. React will take care of some of your HTML, but it’s still really important to know how it all fits together.

Find out more: “HTML5 and CSS3 Tutorial”, html5andcss3.org

Make it SASSy

You have an endless range of possibilities available when deciding how you want your app to look. You may want to consider things like the accessibility of your app, e.g.: if a user doesn’t see very well, they might need the text colour to contrast with the background, so they can read the words more easily. Be aware that complex styling can take a while for a user to get their head around, so try to keep your design intuitive!

All of an app’s colours and shapes are controlled by Cascading Style Sheets (CSS3), which these days are more commonly put together using Syntactically Awesome Style Sheets, or SASS for short.

Find out more: “Getting Started with SASS”, scotch.io

Programming languages

One thousand and one programming languages exist and one thousand and one programmers will argue long into one thousand and one nights about which is best. A versatile and popular choice is a derivative of JavaScript called ES6. It’s used by both React and React Native and has a wide support network. One reason it’s good as a starting point is that you can use it for both front-end code and back-end code.

Find out more: “ECMAScript 6 Tutorial”, Christophe Coenraets

Environment, the back-end

In many cases, your front-end application will need to talk to another application that lives on a server and can handle things like databases, which can store things like user login details. Front-end is often called client-side, which means that it works on the client, or platform — your laptop or tablet. Back-end is often called server-side which means that it works on a server somewhere else. It’s made available by requesting content over the internet.

NodeJS

One environment that we use frequently in News Labs is NodeJS. It’s a JavaScript-based system that has literally thousands of modules available to quickly and easily extend your application’s back-end. These modules are installable packages of code that add abilities to your application. For example, you can install a node module called Gifify which takes video and turns it into gifs.

Find out more: “JavaScripting”, Node School

Services

APIs: Application Programming Inter-what-nows?

Many applications use third-party services to provide them with information. For example, you may want to ask Google for restaurants near a user’s current location. To do this, you’d use what’s known as an Application Programming Interface (API), which allows your application to talk to another service. APIs are everywhere, and to use them you need to familiarise yourself with HTTP requests.

Find out more: “HTTP: The Protocol Every Web Developer Must Know - Part 1”, tutsplus.com

Storage

MongoDB

If your application needs user accounts or needs to permanently ‘remember’ other things for your users, you’ll need to store the information somewhere. This is where databases kick in. Like languages and environments, there are different options for database systems, but MongoDB is a popular storage system that connects well with Node and React.

Find out more: “A Basic Introduction to Mongo DB”, Mongo DB

Version Control

Git

When developing code, you will need a way to deploy it, share it, have other people work on it and track changes. The BBC and most organisations use (Git)[http://github.com].

Find out more: “Got 15 Minutes and Want to Learn Git?”, Code School

Try it

Ready to start building? Take a look at our Million-Pound App tutorial. You’ll modify an app that uses the Open News API to present a live feed of recent news stories to users.

Good luck!


Categories:

Tags: