Intro to Android and iOS App Development

Create an app with Buzztouch


Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Housekeeping
  • Introduce TAs
  • Help each other
  • Have fun

Introductions

Tell us about yourself.

  • What is your name?
  • What experience do you have with programming, making apps, or making websites?
  • What type of app would you like to make?

The plan for today

  1. Set up your first app on Buzztouch
  2. Compile your app in iOS or Android
  3. Add screens to your app
  4. Consider some app screen options
  5. Create your own app
  6. Show and tell your apps!

Get Ready!

Do you have either Xcode or Android Studio installed?

Do you have an icon image (1024 x 1024px)?

Get one here.

Do you have a header image (1536 x 720px)?

Get one here.

What is Buzztouch?

Buzztouch is an open source "app engine" that powers tens of thousands of iOS and Android applications with its Content Management System (CMS).

  • Buzztouch empowers you to make an app without code, but gives you full access to the code.
  • You (and your clients) can add content to the app on a Control Panel.
  • Like WordPress, it is powered by mySQL/PHP.
  • App content is in JSON format.

Why Buzztouch?

Buzztouch is ideal for "aspiring" developers

  • You can make an app without code.
  • You own the code and can modify it.
  • You can make a nice app with free plugins.
  • You can purchase additional screens for your apps on the Plugin Market.
  • You can self-host the Buzztouch Control Panel, which allows you to change the CSS to match your company's CSS. Your client will see your logo and design rather than the Buzztouch logo and design.

Alternatives

Are there alternatives to Buzztouch?

  • Web-apps and responsive websites
  • Javascript-based programs, like Appcelerator. You write the app code in Javascript for both iOS and Android.
  • Game Salad for reskinning app games.
    GameSalad.com

Let's Develop It!

It's time to register for Buzztouch and create our first app! We will do each step together.

  1. Register
  2. Add developer profile
  3. Add Menu Image Student Plugin
  4. Create an app
  5. Upload an icon
  6. Select plugins to download
  7. Download app project code

Step 1

Register for Buzztouch

https://www.buzztouch.com/pages/register.php

After you register, you must confirm your membership via email.

Step 2

Set up your developer profile

https://www.buzztouch.com/account/developer.php

Step 3

Add the Menu Image Student Plugin

Menu Image Student

Step 4

Create an app

Account -> Applications -> + New App ->Create a new App

Step 5

Upload an icon

Account -> Applications -> Select Your Application -> App Icon

The icon file should be 1024 x 1024 pixels. Buzztouch will create several sizes of your app icons and place them in your app project.

Step 6

Select plugins to download

Account -> Applications -> Select Your Application -> Download iOS or Android Project -> Choose Plugins to Include -> Select All

Step 7

Download App Package

Let's Develop It

It is time to compile your app in Xcode or Eclipse!

Let's Develop It

Move the folder to where you want to keep your projects and unzip the Buzztouch package.

Android

  • Open Android Studio and select Import Project
  • Import the project folder.
  • Start your emulator or connect your Android device
  • Run your project
  • Tip: Use GenyMotion or your own Android devices for testing, rather than the Android Studio emulators.

iOS

  • Click on the project file in the Buzztouch folder. This opens your project in Xcode.
  • 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.
  • 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.
  • Run your project

Close the app on your device, emulator or simulator. You should see the icon you uploaded.

Let's Celebrate!

We have all built and are running a real Android or iOS project! Everything else will be easier.

Android Studio or Xcode Tour

  • Where do you manage files?
  • Where do you view a file?
  • How do you compile and run your project?
  • How do you search?
  • Where is the console log?
  • How do you clean a project? And when should you clean it?

App Content Workflow

Here is the workflow for changes without a file resource:


1. Add content on Buzztouch. 2. Refresh your app.


That's it! Unless you add a file resource, you don't need to run Xcode or Android Studio each time you make a change on Buzztouch.com. You do need to rerun the project if you add a file resource, like a PDF or an image, so it can be compiled into the app project.

Let's Develop It

Make a menu screen. We will work through this together.

Make your home screen

  • Go to Buzztouch.com -> Account (upper right) -> Applications -> Select your application -> Screens/Actions
  • Nickname: Does not display, but is the default for the nav bar name. Name this one Home Screen Menu
  • Screen: Choose Menu Image Student from the dropdown list.

Refresh your app.

It should look like this screenshot. Now we are going to put in your header image.

Add a header image

  • 1536 (h) x 720 (w)
  • Image name must be all lower case and underscore. No caps or special characters.
  • Xcode: Drag the image into BT_Images folder.
  • Android Studio: Drag image into res/drawable.
  • Open up your "Home Screen Menu" in Buzztouch.com
  • Add the header image in the Control Panel. Save.
  • Run your app. See your image?

Run vs. Refresh

When you add an image or other file resource to your project, you need to compile (or "run") your app again to include the new resource in the project. If you make changes on the Buzztouch control panel that don't include a resource, you only need to refresh.

Adding Menu Items

You can add or link screens in a menu.

  • If you link an existing screen, Select it in Load Screen Nickname.
  • 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.

Let's Develop It!

Note: Each row is a different free plugin. We will go over how to use them in a few minutes.

Let's Develop It!

Refresh your app. It should look similar to this image, but with your own header image.

Screen Properties

Nickname

Screen Properties

Background Color

Buzztouch uses hexadecimal numbers. You can get color numbers from W3 Schools.

Screen Properties

Background Image

Let's Develop It!

Change the background color on your screen. Refresh your app to see how it looks.

App Content:
The magic of JSON

Go to Buzztouch.com -> Account (upper right) -> Applications -> Select your application -> Configuration Data.

  • This is the content in your app in the JSON format.
  • Note Design and Live mode.

JSON -> BT_Config.txt

The JSON data is in your app is not the most current JSON. It is the JSON at the time you downloaded your app project.

  • Xcode -> BT_Config ->BT_config.txt
  • Android Studio -> app -> assets -> BT_config.txt
  • 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.
  • If your app isn't working right, try pasting the most current version of the JSON into the app.

More Screens

Adding Text and Image Documents

  • PDF Doc: Adds a PDF. iOS has a built in PDF reader, and Android launches a PDF reader.
  • 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.
  • 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.
  • Custom HTML/Text: Add your own HTML with a text editor if you don't know HTML.

More Screens

Menus

  • Menu Simple: Same as Menu Image Student, but with no header image.
  • Menu Buttons: Create menu buttons in a grid, horizontal row, or vertical row.
  • Plugin Market: Menu with Image, Menu Image Advanced, Menu Image Buttons, Menu Image Rows and many more!

More Screens

Interactive Screens

  • For App Store approval, add interactive functionality designed for tablets and smartphones.
  • Location Map: iOS has cool animations, Android requires registration with Google.
  • Interactive Quiz

Let's Develop It!

Add a URL to the customURL screen and a location to Location Map. Location map will not work on Android until registered. Google Play Services

Discussion

What do you want to do with your app?

Questions

What questions do you have?

Problem solving in the console log

Optional Demonstration

Modifying app code

Optional Demonstration

Next Steps

  • Introduce yourself to the Buzztouch Community.
  • Research questions on Google, and then post them on the forum.
  • File an app with Google Play or the App Store.
  • Consider joining Buzztouch as a member. Use PromoCode "GDI" for a discount.
  • See the Buzztouch How-To page.
  • More resources are available at BuzztouchEducators.com.

It ain't easy...

"I'm not telling you it's going to be easy - I'm telling you it's going to be worth it."
― Art Williams