Module 1: Introduction to app building

  • Published on
    22-Feb-2016

  • View
    52

  • Download
    0

DESCRIPTION

Module 1: Introduction to app building. Prototype!. A toolbox with four pillars. Rapid prototypes. Social web integration. Building blocks. HTML-based Web apps. Balsamiq Other flow & wireframing tools. Facebook integration. App Inventor AppShed Other building block tools. - PowerPoint PPT Presentation

Transcript

<p>Slide 1</p> <p>Module 1: Introduction to app building1Prototype!</p> <p>#As part of the course you will have to build a prototype of your app.</p> <p>The best way to test your product idea is to have a simple early version of it so that your target users, investors and Apps for Good judges can visualize your product and start using it to see how it works. </p> <p>Prototypes are very simple and focus only on the flow and the core features, i.e. the features that are absolutely essential to the user and to the problem your trying to solve. </p> <p>So dont worry about having to learn complex programming languages, the key challenge for your team will be trying to find the simplest way to test your product idea through a prototype. </p> <p>Image source: http://www.flickr.com/photos/82525741@N00/2087968839http://www.flickr.com/photos/artlung/4424880628Zolmo flow for Jamie Olivers app2A toolbox with four pillarsRapid prototypesBalsamiq Other flow &amp; wireframing toolsBuilding blocksApp InventorAppShedOther building block toolsHTML-based Web appsCode AcademyW3schoolsJSBinOther HTML-based learning programsSocial web integrationFacebook integration#It has never been easier to learn how to build apps for mobile, web and social platforms. There are a huge variety of different tools available to create prototypes and easy ways to teach yourself how to code.</p> <p>Here are a few of the tools you can use throughout the course.</p> <p>3Rapid prototyping</p> <p>#Rapid prototyping is, as its name suggests, a very quick way to visualise your app and create the basic flow of how your app will work.</p> <p>You dont need to know or do any programming.</p> <p>With the Balsamiq tool you simply drag and drop pre made drawings of app components (screens, buttons, menus etc) to create a visual of your app. </p> <p>Image source: Balsamiq4Balsamiq example: Weatherbirds</p> <p>#You can create web or mobile prototypes.</p> <p>Once you have created pages and established the flow of your app you can link components together so that users can click through the app as they would with the real app.</p> <p>As its quick and easy, Balsamiq is great for when you are still developing your idea, you can share it with users for testing and make changes based on feedback.</p> <p>As there is no coding involved it is simple but it is also very limited. With balsamiq you can only create a user interface, not any of the functionality behind it.</p> <p>You show how your app will work in principle but for a more practical prototype you will need to involve code.</p> <p>Image source: Weatherbirds app team [2012]5Building blocks</p> <p>#Building block tools enable you to create mobile apps without having to program them.</p> <p>They have written blocks of code for you, all you have to do is fit them together to create your app. They are a bit like Lego blocks. </p> <p>Its a great way to learn the mechanics of creating an app. Once you have built your app you can then test it on a phone</p> <p>Image source: http://www.flickr.com/photos/ogimogi/2253657555 6App Inventor</p> <p>#MIT App Inventor is a great starting point for building mobile apps and learning the principles behind programming</p> <p>You can create an app that uses features of a phone (sms, gps, accelerometer etc) in a basic way.</p> <p>App Inventor is a free, open source, desktop application. All you need is a computer and a Google account. You can also connect your phone and the app your creating will appear on screen so you can test its functionality. </p> <p>Watch this brief App Inventor introduction video: http://appinventor.mit.edu/explore </p> <p>Image source: MIT App Inventor</p> <p>7App inventor example: I.O.U.</p> <p>#Built by a group students from California, I.O.U is an app that helps you keep track of things you have lent to and borrowed from friends.</p> <p>This is what the students said: "Because we needed to put together an app in such a short amount of time, App Inventor was a great program since it allowed us to fully understand programming concepts without requiring us to learn a programming language. </p> <p>Image source: http://appinventor.mit.edu/explore/stories/technovation-challenge-winning-app-iou-now-available-google-play.html</p> <p>8App Inventor: What you can do</p> <p>Automated textingImages VideosAccelerometerGPSData storageExternal APIs#There are a number of tutorials available, ranging from basic to advanced, that take you through whats possible with App Inventor. </p> <p>Including:Automated textingImages and videosUsing the accelerometerGPSData storageExternal APIs</p> <p>Image source: App Inventor</p> <p>9AppShed</p> <p>#AppShed is an open building blocks platform that enables you to create hybrid apps (remember these are web based apps optimised for mobile phones) by dragging and dropping components and extensions.</p> <p>It is free (at its basic level). All you need is an App Shed account and a computer.</p> <p>AppShed is used to create basic business, educational and fun apps by organisations who cant code apps themselves, and cant afford to work with a professional web development team. </p> <p>AppShed Academy is the educational side of the tool, with some free tutorials available to get you started.</p> <p>Image source: AppShed</p> <p>10AppShed example: The Battle of Mons 1914</p> <p>#An ipointr portal taking you back to the First World War and the Battle of Mons. Containing unique images, text, sound and video, it tells the story of the first battle the Old Contemptibles of the British Expeditionary Force fought in 1914. Use the web links to find out more about the professional men of this Army and to explore your own family links to the past. Part of the ipointr series. http://apps.appshed.com/98910</p> <p>Note: this app is effectively a multimedia app optimised for the experience on a mobile phone. 11AppShed: What you can do</p> <p>Images VideosExtensions (Google maps, Facebook, Twitter)Expands to web app programming#Caters for all big mobile platforms (Android, IOS, Blackberry, Windows), but its functionality is focused on a mobile-optimised web experience. </p> <p>Here is what you can do: You can view apps live on a deviceWeb based, published through your browser so is easy to go back, edit and republish.Has a good range of extensions, from Google maps to Facebook and Twitter. Great for testing an idea, particularly a community based appCustomizable design.Community forum and FAQs for when you get stuck</p> <p>Advanced students can take it much further using web technologies (JavaScript, HTML, CSS) or programming (PHP) to create fully interactive high-level apps.</p> <p>Image source: AppShed video tutorial http://www.youtube.com/watch?v=J3J4LXyadXU12Web apps</p> <p>#Web apps can be built in a variety of ways using HTML, CSS and Javascript. You will get exposure to all three of these elements as part of the course. Beyond that there are other web programming languages such as PHP, Ruby and Python, which are currently not covered as part of Apps for Good.</p> <p>To get started, all you need is a browser and a text editor. Learning HTML, CSS and Javascript is a great way to get to know the foundations of building for the web.</p> <p> HTML (Hyper Text Markup Language) is THE language of the web. HTML describes what each part of a web page is to your browser. When you visit a website and see a headline and a bunch of paragraphs, a computer can tell the difference between a paragraph and a headline because each has its own HTML tag. CSS (Cascading Style Sheets) is a style sheet language that tells your browser what those contents should look like. This is used to design the layout and style of your web page. Javascript is responsible for making changes on a web page without you clicking a link, e.g. You view a slideshow or get pop-ups. Javascript is a programming language and actually one of the few programming languages that can work in your browser. </p> <p>HTML5 (an updated version of HTML) is a more dynamic language that has been updated to keep up with the variety of platforms and devices available as well as the popularity of multi media (video, audio, images). As such it is also a good option for building hybrid mobile, web or social apps.</p> <p>Image sources: http://w3webtutorials.com/html/html-background.phphttp://www.mozillaphilippines.org/</p> <p>13HTML</p> <p>#HTML is the only thing that you have to have in order to make a website. You write HTML just like normal text and save it in a file with .html at the end. </p> <p>See the HTML tags for headline , paragraph and audio . You will be able to quickly remember the key HTML tags and for more unusual ones you can use HTML cheatsheets: http://www.w3schools.com/html/html_quick.asp</p> <p>Image source: Skillscrush http://skillcrush.com/2012/06/24/html-2/14CSS &amp; Javascript</p> <p>#While HTML is the basis of a web page/ app and tells the browser what different parts of the page are, CSS says what those pieces should look like. And Javascript enables pop-ups without clicking on a link., e.g. see Google autocomplete a search term. </p> <p>Image source: Skillscrush http://skillcrush.com/2012/04/03/css/https://www.e-education.psu.edu/geog863/l1_p5.htmlhttp://microsoft.blognewschannel.com/category/blogs15Code Academy &amp; w3schools</p> <p>#You dont have learn HTML, CSS and Javascript off by heart, thousands of people have written and shared code so you dont have to start from zero.</p> <p>Tutorials on Code Academy and W3schools will teach you the basics. Also W3schools will give you example code for almost anything you want to do.</p> <p>All you need to understand is the principle behind coding and then you can copy and paste and adapt other peoples code to suit your needs. No need to reinvent the wheel!</p> <p>Image sources: Code Academy and W3schools</p> <p>16Facebook Integration</p> <p>#Facebook helps app developers:</p> <p>Help their users share their experiences and stories about your app via like buttons, facebook comments boxes, and other social plugins with just a few lines of code.Use Facebook Login to make it easy for users to both register for and login / out of apps.Ask users to share their data with your app to better personalise and enrich their experience.</p> <p>All you need is a free Facebook developer account and you can get access to code, tutorials, documentation, and create apps on the facebook platform.</p> <p>(Image from : https://developers.facebook.com/docs/plugins/)</p> <p>Details and documentation available on : https://developers.facebook.com/17Facebook app example: SoundCloud</p> <p>#Making their app completely social.</p> <p>Soundcloud, one of the most popular music sharing sites for young musicians provides an app integrated right into Facebook(and likewise uses Facebook Login at its site and on mobile apps to enhance the ability of users to find existing friends). </p> <p>Sharing is at the heart of Soundcloud, and its integration with Facebook makes great sense,and allows you to share any voice or audio you record, either publicly or keeping it private between your friends.18Facebook Integration : What you can doUsers spread stories about how they like and use your app through FacebookUsers can see which friends already like / use your appUse Facebook to manage who can login to your appPersonalize an app with information in their facebook profileEmbed your app within a Facebook page</p> <p>#Facebook provides different levels of integration that suit every social app, and level of ability</p> <p>From copying and pasting like buttons in a few minutes through to creating and posting content on behalf of your users with something called open graph, all the way to using facebook to manage your user registrations and login accessing user data within your app.</p> <p>Image from the Facebook Developers site : https://developers.facebook.com/docs/</p> <p>19appsforgood.org@appsforgoodcdi</p> <p>20</p>

Recommended

View more >