Building Your First Mobile App: Pt 1 - The Very Basics

A little while ago I wrote a general explanation on how to become a mobile app developer from scratch. I would now like to introduce to you the first part of a series that will break down this process and go into the details. We will be making a simple messenging app like the life coaching app I created for iPhone here: https://appsto.re/gb/Cu_Hdb.i

What you will need

A computer
An internet connection
A text-editor

If you want to create an iPhone app, at some point you will need to use a Mac. You could theoretically just borrow one from a friend, but it won’t be a 10 minute job.

For your text-editor you can technically just use notepad or the command line if you are ultra-hardcore but I am assuming you are a mere mortal and will want your code highlighted in different colours and have nice context-menus to perform simple functions.

I’m just gonna go ahead and recommend Atom to you, but there are plenty of other options if you just search for text-editors via your favourite search engine.

Let’s get started

Open your text-editor and get to a point where you are able to type some code. This will vary depending on your text-editor, there will probably be a startup screen in most of them and you are just looking to create a blank file. You should be able to work this out yourself.

HTML

If you already know HTML you can probably just skip this section. If not, type the following:

<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <p>Hello world!</p>
    </body>
</html>

Save the file as “helloworld.html”, navigate to it in whatever operating system you are using and open this new file in your favourite web browser. You should just see a piece of text on a white screen saying “Hello world!” and the title of the page (usually displayed on the tab) as “My First Webpage”.

There are thousands of tutorials on HTML online tutorials online, with this place being a decent place to get started (click “Next” at the top or bottom of the page there once you’ve read it).

However for the purpose of completeness I will quickly explain that HTML works with opening tags (<html>) and closing tags (</html>). You can tell the difference by the "/" just after the opening triangular bracket. Everything inside these tags is part of that tag's DOM object and it creates a sort of tree if you like. The head and body are inside of the html, the title is inside the head, the paragraph (p) is inside the body.

If you look around at this page you will notice that there are buttons inside the navbar, if you click on the menu button you will see links inside the menu and this looks the same in the HTML. <navbar>menu-button</navbar><menu>about link, explore link</menu>

The HTML doesn’t look exactly like this, but you get the idea. Again you should be getting really familiar with these concepts on your own before you continue.

Javascript

Before we write some javascript, go to the “p” tag in your HTML (inside your text-editor) and change it to look like this:

<p id=“mypee”>Hello world!</p>

This will allow the javascript we are about to write to easily identify this p tag.

Now inside the <body></body> tags, after the <p></p> tags write this:

<script>
</script>

These tags are telling the browser that anything inside them will be written in JavaScript, a different language which is designed for manipulating the DOM (the tags inside the body). So inside these tags you’re going to write some javascript. Try this for size:

(function() {
    setTimeout(function(){
            document.getElementById('mypee').innerText = 'Goodbye world :(';
    }, 2000);
})();

Once you save the file in the text-editor and reload your browser you should see the “Hello World” for 2 seconds, and then it will change to “Goodbye world :(“. If it doesn’t work you may have made a mistake, make sure your entire code looks like this:

<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <p id="mypee">Hello world!</p>
            <script>
                (function() {
                setTimeout(function(){
                        document.getElementById('mypee').innerText = 'Goodbye world :(';
                }, 2000);
                })();
        </script>
    </body>
</html>

Unlike HTML, it may be easier to understand if you look first at the document.getElementById line. This is telling the page to get an HTML element by it’s id, which we specified as “mypee”, then to change it’s “innerText” to what’s right of the equals sign. The line is contained inside a function(){ }, which is being told to be executed after 2000 milliseconds. That then is wrapped inside a function which is executed once the page has loaded.

Just like the HTML tutorials, you will have to do some JavaScript tutorials by yourself. Once you have got good at HTML and JavaScript you will be ready for the next part of this series. I hope you enjoyed this simple tutorial and don’t forget to follow me for the next installment! I also write about Philosophy, Ethics and other nerdy subjects if you are interested in those too!

Gracias y chao :)