-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcreate.html
573 lines (407 loc) · 21.8 KB
/
create.html
1
2
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>Index ~ Make an iOS and Android App ~ Girl Develop IT</title> <meta name="description" content="This is the Girl Develop It curriculum to teach women how to make an iOS and/or Android app with Buzztouch. Buzztouch is a content management system for making apps. Content is on the control panel, and the app is compiled in Xcode or Android Studio. The course is meant to be taught in 2 hours, with a third optional hour to assist students with making and compiling their apps."> <meta name="author" content="Girl Develop It"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="stylesheet" href="reveal/css/reveal.css"> <link rel="stylesheet" href="reveal/css/theme/gdidefault.css" id="theme"> <!-- For syntax highlighting --> <!-- light editor<link rel="stylesheet" href="lib/css/light.css">--> <!-- dark editor--><link rel="stylesheet" href="reveal/lib/css/dark.css"> <!-- For use of font-awesome icons --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/global.css"> <!-- If using the PDF print sheet so students can print slides--> <link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print"> <!--[if lt IE 9]> <script src="lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <div class="reveal"> <!--Any section element inside of this container is displayed as a slide--> <div class="slides"> <!-- Opening slide --> <section> <img src = "images/gdi_logo_badge.png"> <h3>iOS and Android Apps</h3> <p class="blue">Create an app with the Buzztouch CMS</p> </section> <!-- Introduction and housekeeping --> <section class="hide-pdf"> <h3>Welcome!</h3> <div class = "left-align"> <p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p> <p class ="green">Some "rules"</p> <ul> <li>We are here for you!</li> <li>Every question is important</li> <li>Housekeeping</li> <li>Introduce TAs</li> <li>Help each other</li> <li>Have fun</li> </ul> </div> </section> <!-- Introductions --> <section> <h3>Introductions</h3> <div class = "left-align"> <p class = "blue">Tell us about yourself.</p> <ul> <li>What is your name?</li>
<li>What experience do you have with programming, making apps, or making websites?</li> <li>What do you hope to get out of the class?</li> </ul> </div> </section> <!-- Agenda --> <section> <h3>Training agenda</h3> <div class = "left-align"> <p class = "blue">The plan for today's training.</p> <ol> <li>Register for Buzztouch and set up first app on the Buzztouch control.</li> <li>Compile your app in iOS or Android. (We will split into two groups for this.)</li> <li>Add content to your app with the Buzztouch Control Panel</li> <li>Show and Tell your apps!</li> </ol> <br/> <br/> <br/> <b><p class = "blue">Before we start, does everyone have either Xcode or Android Studio installed?</p></b> </div> </section> <!-- About Buzztouch --> <section> <h3>What is Buzztouch?</h3> <div class = "left-align"> <p class = "blue" style="font-size:.9em">Buzztouch is an open source "app engine" that powers tens of thousands of iPhone, iPad and Android applications with its Content Management System (CMS). </p> <ul style="font-size:.7em"> <li>Buzztouch empowers you to make an app without code, but gives you full access to the code.</li> <li>You (and your clients) can add content to the app on a Control Panel.</li> <li>It is powered by mySQL/PHP which create the content for the app in JSON.</li> </ul> </div> </section> <!-- Why Buzztouch --> <section> <h3>Why Buzztouch?</h3> <div class = "left-align"> <p class = "blue">Buzztouch is ideal for "aspiring" developers</p> <ul style="font-size:.8em"> <li>Users can make an app without code.</li> <li>As users gain experience, they learn to modify the code.</li> <li>You own the code. Buzztouch gives you all the code for your app. </li> <li>While you can make a nice app with free plugins, there is a plugin market where you can purchase additional functionality for your apps. </li> <li>As you gain skill at adding code for new app features, you can sell your code on the plugin market. </li> <li>You can self-host the Buzztouch Control Panel, which allows you to change the CSS to match your company's CSS. </li> </ul> </div> </section> <!-- Alternatives to Buzztouch --> <section> <h3>Alternatives</h3> <div class = "left-align"> <p class = "blue">Are there alternatives to Buzztouch?</p> <ul style="font-size:.8em"> <li>Web-apps and responsive websites</li> <li>Javascript-based programs, like Appcelerator. You write the app code in Javascript for both iOS and Android.</li> <li>Beware of alternatives that use Buzztouch open-source code but sell it to users. </li> </ul> </div> </section> <!--Register for Buzztouch--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 1: Register for Buzztouch</p> <p><a href = "https://www.buzztouch.com/pages/register.php">https://www.buzztouch.com/pages/register.php</a></p> <img src = "images/register.png"> <p style="font-size:.7em">After you register, you must confirm your membership via email.</p> </section> <!--Set up Developer Profile--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 2: Set up your developer profile</p> <p><a href = "https://www.buzztouch.com/account/developer.php">https://www.buzztouch.com/account/developer.php</a></p> <img src = "images/profile.png"> </section> <!--Add Plugins--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 3: Add the Menu with Image Plugin</p> <p><a href = "https://www.buzztouch.com/plugins/">https://www.buzztouch.com/plugins</a></p> <img src = "images/plugin.png"> </section> <!--Create an app--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 4: Create an app</p> <p style="font-size:.8em">Account -> Applications -> + New App ->Create a new App</p> <img src = "images/create2.png"> </section> <!--Upload Icon--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 5: Upload an icon</p> <p style="font-size:.8em">Account -> Applications -> Select Your Application -> App Icon</p> <p>The icon file should be 1024 x 1024 pixels.</p> <img src = "images/icon.png" style="max-width:50%"> </section> <!--Add Plugins to app--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 6: Select plugins to download</p> <p style="font-size:.8em">Account -> Applications -> Select Your Application -> Download iOS or Android Project -> Choose Plugins to Include ->Select All </p> <img src = "images/addplugins.png" style="max-width:70%"> </section> <!--Download app package--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Step 7: Download App Package</p> <img src = "images/download.png"> </section> <!--Compile your app!--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>It is time to compile your app in Xcode or Eclipse! </p> </section> <!--Compile your app instructions--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>Move the folder to where you want to keep your projects and unzip the Buzztouch package.</p> <table width="100%"> <tr> <td width="50%"> <h4>Android</h4> <ul style="font-size:50%"> <li>Open Android Studio and select Import Project</li> <li>Import the project folder.</li> <li>Start your emulator or connect your Android device</li> <li>Run your project</li> </ul> </td> <td width="50%"> <h4>iOS</h4> <ul style="font-size:50%"> <li>Click on the project file in the Buzztouch folder. This opens your project in Xcode.</li> <li>Open the project navigator. (The button is on the top left and looks like a folder.) Click the disclosure arrow so you see all the project files.</li> <li>Go to Finder, and drag BT_Plugins, BT_docs, and BT_images folders into your project. The three folders should be parallel to BT_Core.</li> <li>Run your project</li> </ul> </td> </tr> </table> <p>Close your project on your device, emulator or simulator. You should see your logo. </p> </section> <!--Success!--> <section class="hide-pdf"> <h3>Let's Celebrate!</h3> <p>We have all built and are running a real Android or iOS project!</p> </section> <!--Xcode and Android Studio Tour--> <section class="hide-pdf"> <h3>Android Studio or Xcode Tour</h3> <ul> <li>Where do you manage files?</li> <li>Where do you view a file?</li> <li>How do you compile and run your project?</li> <li>How do you search?</li> <li>Where is the console log?</li> <li>How do you clean a project? (Clean when you add new resources or things are working right.)</li> </ul> </section> <!--App Content--> <section class="hide-pdf"> <h3>App Content</h3> <p class="blue">This section is on adding content to your app.<br /> Here is the workflow:</p> <ul> <li>Add a screen on Buzztouch.com</li> <li>Set the screen properties.</li> <li>Refresh your app on your device, simulator, or emulator. </li> <li>You don't need Xcode or Android Studio when you add content.</li> </ul> <br/> <p class="blue">You don't need to use Xcode or Android Studio when you add content.</p> </section> <!--Add Home Screen to app--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p class = "blue">Make a menu screen.</p> <ul> <li>Go to Buzztouch.com -> Account (upper right) -> Applications -> Select your application -> Screens/Actions</li> <li>Nickname: Does not display, but is the default for the nav bar name. Name this one Home Screen Menu</li> <li>Screen: Choose Menu Image Student from the dropdown list.</li> <li>Refresh your app.</li> </ul> <img src = "images/addscreen.png"> </section> <!--App Screen Menu Student--> <section class="hide-pdf"> <h3>Let's Develop It</h3> <p>Refresh your app. It should look like this screenshot. </p> <img src="images/screenshot1.png" /> </section> <!--App Screen Menu Student--> <section class="hide-pdf"> <h3>Add a header image</h3> <ul> <li>1536 (h) x 720 (w)</li> <li>Image name must be all lower case and underscore. No caps or special characters.</li> <li>Xcode: Drag the image into BT_Images folder. </li> <li>Android Studio: Drag image into res/drawable. </li> <li>Add the header image in the Home Screen Menu Control Panel. Save.</li> <li>Refresh your app.e</li> </ul> <img src="images/add_header.png" /> </section> <section class="hide-pdf"> <h3>Adding Menu Items</h3> <p class="blue">Select and view your Menu Image Student screen on the Control Panel.</p> <ul> <li>You can either add a screen or connect an existing screen.</li> <li>If you add an existing screen, Select it in Load Screen Nickname. </li> <li>You can also add a screen at the same time that you add a menu item. Instead of using Select, give your screen a nickname and Select the type of screen. </li> </ul> </section> </section> <section class="hide-pdf"> <h3>Let's Develop It!</h3> <img src="images/menu_list.png" /> <p class="blue">Note: Set the screen nickname to the type of screen for this exercise.</p> </section> <section class="hide-pdf"> <h3>Let's Develop It!</h3> <p class="blue">Run your app. It should look similar to this image, but with your own header image.</p> <img src="images/screenshot2.png" /> </section> <section class="hide-pdf"> <h3>Screen Properties</h3> <p class="blue">Nickname</p> <img src="images/nickname.png" /> </section> <section class="hide-pdf"> <h3>Screen Properties</h3> <p class="blue">Background Color</p> <img src="images/background_color.png" /> <p>Buzztouch uses hexadecimal numbers. <a href://w3schools.com>You can get color numbers from W3 Schools. </a></p> </section> <section class="hide-pdf"> <h3>Screen Properties</h3> <p class="blue">Background Image</p> <img src="images/background_image.png" /> </section> <section class="hide-pdf"> <h3>Let's Develop It!</h3> <p class="blue">Change the background color on your screen. Refresh your app to see how it looks. <img src="images/background_color.png" /> </p> </section> <section class="hide-pdf"> <h3>App Content</h3> <p class="blue">The magic of JSON</p> <ul> <li>Go to Buzztouch.com -> Account (upper right) -> Applications -> Select your application -> Configuration Data. This is the content in your app.</li> <li>Note Design and Live mode</li> <li>Xcode -> BT_Config ->BT_config.txt: This is the content at the point you downloaded your app.</li> <li>Android Studio -> app -> assets -> BT_config.txt: This is the content at the point you downloaded your app.</li> <li>Very Important: When you finish your app, before you file it with the App Store or Google Play, paste the most current version of your LIVE JSON into your app's BT_config.txt file</li> </ul> </section> <section class="hide-pdf"> <h3>More Screens</h3> <p class="blue">Adding Text and Image Documents</p> <ul> <li>PDF Doc: Adds a PDF. iOS has a built in PDF reader, and Android launches a PDF reader.</li> <li>Custom URL: Links to a URL that refreshes each time it is accessed. The URL is launched in a webview not a browser, so you need to make your own navigation. Works great with responsive web pages. </li> <li>HTML Doc: Include your own HTML document in the app. The content displays in a webview, but is already loaded and doesn't require internet access. </li> <li>Custom HTML/Text: Add your own HTML with a text editor if you don't know HTML.</li> </ul> </section> <section class="hide-pdf"> <h3>More Screens</h3> <p class="blue">Menus</p> <ul> <li>Menu Simple: Same as Menu Image Student, but with no header image.</li> <li>Menu Buttons: Create menu buttons in a grid, horizontal row, or vertical row.</li> <li>Plugin Market: Menu with Image, Menu Image Advanced, Menu Image Buttons, Menu Image Rows and many more!</li> </ul> </section> <section class="hide-pdf"> <h3>More Screens</h3> <p class="blue">Interactive Screens</p> <ul> <li>For App Store approval, add interactive functionality designed for tablets and smartphones. </li> <li>Location Map: iOS has cool animations, Android requires registration with Google.</li> <li>Interactive Quiz</li> </ul> </section> <section class="hide-pdf"> <h3>Let's Develop It!</h3> <p class="blue">Add a URL to the customURL screen and a location to Location Map. Refresh your app. Location map will not work on Android until registered. <a href="http://developer.android.com/google/play-services/maps.html">http://developer.android.com/google/play-services/maps.html</a> </p> <img src="images/addurl.png" /> <img src="images/addlocation.png" /> </section> <section class="hide-pdf"> <h3>Discussion</h3> <p class="blue">What do you want to do with your app? </p> </section> <section class="hide-pdf"> <h3>Problem solving in the console log</h3> <p class="blue">Optional Demonstration</p> </section> <section class="hide-pdf"> <h3>Modifying app code</h3> <p class="blue">Optional Demonstration</p> </section> <!-- Question --> <section> <h2>Next Steps</h2> <ul> <li>Introduce yourself to the Buzztouch Community.</li> <li>Research questions on Google, and then post them on the forum</li> <li>File an app with Google Play or the App Store.</li> <li>Consider joining Buzztouch as a member. Use PromoCode "GDI" for a discount.</li> <li>See the <a href="https://www.buzztouch.com/resources/" >Buzztouch How-To </a> page</li> <li>More resources are available at <a href="http://buzztoucheducators.com">BuzztouchEducators.com</a></li> </ul> </div> <footer> <div class="copyright"> HTML/CSS ~ Girl Develop It ~ <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a> </div> </footer> </div> <script src="reveal/lib/js/head.min.js"></script> <script src="reveal/js/reveal.min.js"></script> <script> // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ controls: true, progress: true, history: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none // Optional libraries used to extend on reveal.js dependencies: [ { src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); </script> </body></html>