1. Mobile App Certification Course. In this course we will work you through on how you can start developing mobile apps for yourself or for many industries and firms that will need your services. Note: You will need a paper and pen to write down important points as you go through the training to enable you practice effectively on app development after the course as only practice will make you perfect. NEXT Course introduction: Developing Mobile apps

2. Course contents Mapp 1.0: Overview: Introduction to Mobile App development platform-Application craft. Mapp 1.1: Creating a new app using Application craft tool Mapp 1.2: Editing your app in the IDE(Integrated development environment) Mapp 1.3: Adding Widgets Mapp 1.4: Changing properties Mapp 1.5: Assigning names to widgets Mapp 1.6: Creating Events Mapp 1.7: Previewing and running your app Mapp 1.8: Deploying your mobile app into AppStore and PlayStore using PhoneGap PREVIOUS NEXTPREVIOUS NEXT

3. Throughout the duration of this course we will be using application craft as our development tool or software for mobile app development. To access Application craft logon to www.applicationcraft.com to create your account. Once you sign up to application craft( it’s got a 45 days free trial version ) and then logon with your account details, you will see a windows similar to the one illustrated below.www.applicationcraft.com Mapp 1.0: Overview Developing Mobile apps NEXT PREVIOUS

4. Mapp 1.1 Creating a new app using Application craft tool Once you logon using your account details in application craft, click on new on the top left corner of the IDE window as annotated with a red circle in the previous slide to create your new app. On the window that pops up enter the name of your new app- you may name it anything you like example MyFirstApp. Also you will need to choose a theme name as Generic and click ok. A new window open with the name of your app appearing on the left panel, select your app by clicking on your app as it will appear on the left panel of the window and click on Edit(found below the quick response QR block ). Developing Mobile apps NEXT PREVIOUS

5. Mapp 1.2: Editing your app in the Integrated Development Environment (IDE) As soon as you click on edit, a window similar to the one below will appear. Please note: The IDE is where you actually design your app and give it all its functionality : Whether the app is to forecast the amount of pollution in the different areas of Niger Delta caused by oil exploration or the various locations of restaurants and bars within the Lagos metropolis. IDE window and its description: Developing Mobile apps NEXT PREVIOUS

6. Mapp 1.3: Adding your Widgets Widgets let you design your mobile app interface in application craft. They are icons located on the left hand side as illustrated in the window shown in the previous slide. You will need to drag any of the widgets on to the design stage as shown below making sure you: (1) Click on anywhere on the main stage of the page then change the layout property as absolute located on the right side panel. (2) Then drag the widgets to the main stage of the page as illustrated below.(3) Do the same for text widget which you will find on the left panel.(4) Repeat the same for action button widget found on the same left hand panel. Developing Mobile apps NEXTPREVIOUS

7. Mapp 1.4: Changing properties of your Widgets (1) Double click on the button widget you have created as shown in the previous slide (2) With the layout property automatically selected type the name that you would want to appear on the button example GreetMeApp or ProductFinder on the property side on the right hand side of the window. (3) Press enter key for the name of your app to appear on the button. (4) Again click on the button widget on the main stage and now on the right hand property panel you will see Style, change the colour of the button by choosing any colour of your choice from the colour property and you can also change the colour of the text on the button in the same way and press OK after you have finished with the property panel. Developing Mobile apps NEXT PREVIOUS

8. Mapp 1.4: Changing properties of your Widgets See the diagram below for illustrations. Developing Mobile apps NEXT PREVIOUS

9. Mapp 1.5: Assigning name to your Widgets Click on your Label widget on the main stage and now in the property bar, select the Name property near the top right. Enter something like lblName. lblName implies a Label and txtName could be a text Input field, imgFace is an image Widget that shows someone's face on your button ( You will not use the imgFace in this App). Press Enter when done with the property panel Now do the same for the Text widget (how about txtName) and the Button (My btnGreetMe). You cannot use spaces or weird characters. You will see what works and what doesn't. If you want to use the equivalent of spaces, try lblFirst_Name. Note this App will say hello Arthur when one clicks on GreetMe button so long as the user inputs the name Arthur. Developing Mobile apps NEXT PREVIOUS

10. Mapp 1.6: Creating Events for your widget button(GreetMe) of your app Note: Now that you have changed the name of the button to GreetMe, click on the GreetMe button and at the bottom right hand side of the screen you will see Events tab, click on it and on the on the top right corner you will see all Events available, click on OnClick and click on JavaScript to choose JavaScript option. Note: In this app I have specified what I want to do with the app but in your future development you can add databases using the event tab from where your mobile app can retrieve information and feedback the user of your app, this will be dealt with in our advanced mobile app course. See the diagram below for illustration. Developing Mobile apps NEXT PREVIOUS

11. Mapp 1.6: Creating Events for your widget button(GreetMe) of your app Code Mode: As soon you click on the JavaScript you will be taken to a code mode: I know most of you may not be good with coding but don’t worry so much as not much code is needed in most apps. Type in the codes below into the code window and you are done with the GreetMe mobile app. Step1 : As you choose JavaScript after clicking on Event tab, OnClick and JavaScript: Developing Mobile apps NEXT PREVIOUS

12. Mapp 1.6: Creating Events for your widget button(GreetMe) of your app Code Mode: Step2 : Type in the code below into the second line of the javascript code editor as seen in the area annotated in red as shown the previous slide: Here is the code! Developing Mobile apps NEXT PREVIOUS

13. Mapp 1.7: Previewing and running your app You can preview and run your app in the Integrated Development Environment(IDE) mode and your screen should look like the one illustrated below: Developing Mobile apps NEXTPREVIOUS

14. Mapp 1.7: Deploying your app into AppStore and PlayStore Once you have tested your app and its up and running you will need to deploy it to AppStore or PlayStore for the public to use either as a paid app or free. One of the easiest ways to deploy your app is to create an account with PhoneGap by logging on to www.PhoneGap.comwww.PhoneGap.com Create account with PhoneGap just like the way you created account with Application Craft and you are ready to upload your app for a wider use! Click here to print this training slide Click here to print your Certificate Developing Mobile apps NEXT PREVIOUS