FREE VERSION. Created by: Jason Nesbitt Mobile App Development Guide

Transcription

1 FREE VERSION Created by: Jason Nesbitt Mobile App Development Guide Quickly learn all of the necessary skills needed to build your very own customisable mobile apps. Important: Download Example Files by following the steps below 1. Visit 2. Click on the GET EXAMPLES button in the top menu 3. Enter the following code: 1earn#pp$ev333 Brought to you by:

2 CONTENTS 1 INTRODUCTION 5 2 SETTING UP 667 Activity 2.1 Setup your development environment 8 3 START (COPY!) YOUR FIRST APP 910 Activity Create your first project 9 4 MANIPULATING YOUR FIRST PAGE ERROR! BOOKMARK NOT DEFINED.13 Activity 4.1 Open the first app page Activity 4.2 Change app text Activity 4.3 Add app content text Activity 4.4 Add a picture VIEW YOUR APP & MAKE CHANGES ERROR! BOOKMARK NOT DEFINED.18 Activity 5.1 View app as a website 18 #1 How Is It Looking 20 Activity 5.2 Move code to change the layout 20 #2 How Is It Looking 21 THE END! 24

3 1 Introduction Welcome to the beginning of your mobile development journey. Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step. - Lao Tzu

4 The world of technology moves very quickly. Many businesses are being left behind solely because of this fact. People believe that the best way to keep up with this technology is by paying extortionate amounts of money to have websites and apps developed. This doesn t have to be the case. There have been many advancements to simplify development so someone with no experience can put in a few hours and get something looking as good as the professionals. This is the exact reason for this guide the simplest, no- nonsense way of creating mobile apps by showing you the only information you need to know. The amazing thing about this guide is that you can keep referring back to it when you are at specific stages of your development. Don t feel any pressure to always read it all the way through; it is meant as a practical source to tackle the full circle of app development from conception to release. Don t be shy about asking any questions at Not only will you get the simple answers you need, but you can also help other coders as all useful questions and answers are posted on the website. Happy coding! Jason Nesbitt Nesbitt Web Please Note: This guide requires a bit of tenacity at times to get through. The rewards for this tenacity, however, will be incredible as it means you will have beaten most of the competition that has given up and you will have achieved the limitless skill of mobile app development! Learn App Dev Introduction 4

5 2 Setting Up Let s turn your machine into a development machine. The only source of knowledge is experience. - Albert Einstein

6 Setting up your development environment may seem daunting at first and, admittedly, it is the most complicated part of your development process! This is a good thing, though, because the fact that it is slightly complicated means that you will have an advantage over all of your competitors by using this simple guide to set up and get cracking. Activity 2.1 Setup your development environment Step 1 Install Node.js by visiting the following website and clicking the green install button: Step 2 Open your command prompt. The command prompt looks like this and the best way to find it is to search for CMD (if on Windows 8). The best way to find CMD on previous versions of Windows is to click the start menu, the type CMD in the search. MACs need to open Terminal Application. Learn App Dev Setting Up 6

7 Step 3 Type the following into Command Prompt and press the Enter key: npm install -g cordova ionic Step 4 Download and install TextPad by clicking the link below: Every aspect of your App can be created using only TextPad which means you don t have to buy any expensive software! TextPad is a simple text editor that makes seeing your code a little bit easier. Step 5 - (Only for Android Development) Download and install the Android SDK (Software Development Kit) environment by clicking the link below: bundle- windows- x zip Note: This is quite a large file that s good because it does all the magical stuff of creating your app! You will need to unzip the file that you downloaded and run the installation. The equivalent Apple ios Development kit can be found later in the guide. Activity 2.1 Complete Learn App Dev Setting Up 7

8 3 Start (Copy!) Your First App There is no faster way to get up and running than to copy something that already works. The best way to predict the future is to create it. - Peter Drucker

9 This pack comes with an example app to get you started. You can steal and change it to be your own app within no time at all! It s amazing how changing the colours/layout and adding your own content can turn it into a completely original app. Below is the easy step- through guide to get an example project on to your machine so that you can begin editing it. Don t worry about how many confusing files there are in there; we will explain exactly what you can ignore and what you need to pay attention to. Just in case you didn t read it: There is an important file to download and unzip that can be found at the top of this book! Go download it now if you haven t done already. Activity Create your first project Step 1 Open up the folder that you downloaded with this guide and copy the following folder onto your desktop: Example #1 - Simple Tab App Step 2 Right- click on the folder and rename it as: myapp The reason for this is to make it easier to reference later on when we are building and running the app on a mobile device. Activity 3.1 Complete Double- click your myapp folder and you ll notice that there are a few confusing folders and files in there. All you need to know at this point is: You will be ignoring every folder except the www one! Okay, panic over. Double- click on the www folder. This is basically your website which runs as an app. Now is a good time to explain each of the folders/files. css folder The items in this folder dictate how your app looks. We will change these soon to give your app its own, unique look img folder This is where all of the images within the app go, such as your logo, etc. Learn App Dev Start (Copy!) Your First App 9

10 js folder This is where the JavaScript coding goes. This is the most complex part of the app and does a lot of the smart functionalities. We will try to avoid this as much as possible, but we may need to make some small changes to make our app work exactly the way we want it to. lib folder This is where all of the magical files that make the app work so well reside. We can ignore this one completely and be thankful that it is there. index.html file This is the main app file and is the one that we will be editing most as it contains all of the pages and items that we want to appear in our app. That s it! We can now look at editing these files to make your own app. Learn App Dev Start (Copy!) Your First App 10

11 4 Manipulating Your First Page Let s start at the beginning, and make some changes. The beginning is the most important part of the work. - Plato

12 Activity 4.1 Open the first app page OK, we re all set up so now it s time to make some changes and really make this app your own. Step 1 Double- click on the myapp folder to open it. Step 2 Double- click on the www folder to open it. Step 3 Right- click on the index.html file and select TextPad from the menu that appears. Activity 4.1 Complete This will open the TextPad application that we installed earlier. You are now staring at the code that makes every website in the world work! Quite exciting, isn t it? Well, it may not look that exciting but it is very powerful. All of the top section can be ignored. Bring your attention to the 2 lines about halfway down the page that say: This, as you may have guessed, is the home page. It is the first page that people will see when they open your app. You can actually specify another page for the app to start on but we will discuss that later. You will be very amazed to see how good the page looks, considering there are only 10 lines that make this page function! Let s start by changing the title that appears at the top of the page. The word Home doesn t give it much of a custom feel, so let s change it to be our home. Learn App Dev Manipulating Your First Page 12

13 Activity 4.2 Change app text Step 1 Update the line mentioned above so that it has your name in it to look like this (the changes are underlined): Activity 4.2 Complete The next thing that we re going to change is the content of this first page. An easy way to spot real content in the code is to look for real sentences that make sense. Before writing content, we will briefly discuss the different type of styles of text. These styles are a quick way of having larger text in places and are very useful for creating headings, sub headings etc. Below is a list of a few of them: <h1> - This is the largest heading and is useful for titles. <h2> - This is a slightly smaller heading which can be used for sub- headings. <h3> - You can see a pattern here. The numbers keep increasing to make the text smaller. <p> - This is the most common item used to write text. You will see it a lot. <a> - These are used to link one page to another, which includes linking external pages like Facebook and Google. <br /> - This adds a new line. It can be very useful and you will see it in some of the example code. It is unlikely that you will use any other items when writing text. Below is an example of a heading, a subheading and a bit of text below, it to give you an idea of how they are used: This text would make a perfect addition to your first app. Learn App Dev Manipulating Your First Page 13

14 Activity 4.3 Add app content text Step 1 Copy all of the above text and paste/type it just below the current line of text so it looks like this (the changes are underlined): Activity 4.3 Complete Okay, now you know how to add content. Let s look at adding a picture to your first page. As they say, a picture is worth a thousand words! Adding an image is very similar to adding text but the item we use is: <img> We specify which picture to use by placing it in the same folder as the website and setting the source as the location and name of the picture. See below. Learn App Dev Manipulating Your First Page 14

15 Activity 4.4 Add a picture Step 1 Find the picture file that you would like to use and rename it image1. Make a note of the name of the file after the dot. For example, this will be.jpg or.png, etc. NOTE: You may need to do the following to be able to see the type of file (the bit after the dot). Open the folder that your picture is in and make sure the following box is ticked (Windows 8) You can also right click on a picture and go to Properties to see what type it is: jpg, png etc. Step 2 Copy the picture file that you would like to use and paste it into the following folder: myapp/www/img Step 3 Go back to our index.html file and paste the following line below the text that we just added (the line to be added is underlined): Activity 4.4 Complete You can easily change the height and width of the picture by changing the numbers in the height and width attributes. We ll leave it as this for now. You re probably wondering what your app looks like after making these changes. Don t worry, that section is coming up next and I am confident that you will be impressed. Learn App Dev Manipulating Your First Page 15

16 IMPORTANT Just before you get to the next section, I have one important thing that you should do very frequently: save your work! Either click on the save button at the top or press the ctrl + s keys on Windows or MAC + S keys on a MAC. Learn App Dev Manipulating Your First Page 16

17 5 View Your App & Make Changes Keep yourself motivated by seeing your app change. Nothing will work unless you do. - Maya Angelou

18 The reason why we are using the Ionic Framework to build our mobile app is because it is very easy to make changes and view them instantly. Do you remember some of the things we changed in the previous section? These are: the title header of a tab information within a page a picture within a page Let s see what these changes look like by doing the following: Activity 5.1 View app as a website Step 1 Open the myapp folder that is on your desktop by double- clicking it. Step 2 Open the www folder by double- clicking it. Step 3 Open the index.html file by double- clicking it. Activity 5.1 Complete It may look slightly different and stretched when it is displayed in your web browser (the file that opened when you double- clicked on index.html), BUT it will look great on a mobile screen. You could resize your browser now to see what it looks like when it shrinks to fit a smaller screen. Very quick and effective, isn t it? Look at the screenshot on the next page. Your app should look like this. Note: The browser has been resized to be similar to the size of a mobile screen. Learn App Dev View Your App & Make Changes 18

19 #1 How Is It Looking Learn App Dev View Your App & Make Changes 19

20 That doesn t look too bad for a few minutes of work, does it? The first thing that appears to be wrong with this is that the image is in the wrong place. The reason for this is because code works in a downward hierarchy. This means that the higher you put code, the higher it appears in the app. Let s move the image to be in a better place. Activity 5.2 Move code to change the layout Step 1 Copy the following <img> line: Step 2 Paste/type the same line below all of the text that you wrote earlier; it will be just above the button as shown below (changes are underlined). Step 3 Save your work and refresh your web page to see the difference. Activity 5.2 Complete You can see that just by putting the image code below the text we added, it appears below it. Now that we have done the simple editing and viewing of your app, it s time to make some real changes that will make your app fully unique. The next page shows what your app should now look like after moving the image. Learn App Dev View Your App & Make Changes 20

21 #2 How Is It Looking Learn App Dev View Your App & Make Changes 21

22 The End! I hope you ve enjoyed the free introduction guide to Learn App Dev. I can only imagine how much fun it was becoming a coder and getting a feel for how easy it is to make your own mobile apps. Don t panic the journey doesn t end here and there is a lot more amazing things that you can do! Head over to the website below to get the full guide and learn how to easily make Android and iphone/ipad apps that look as good as the professionals: See You On The App Stores! Jason