RSS

FREE AppyBuilder Plan

image

aiLive is now AppyBuilder and it offers FREE & SILVER membership plans

You can view plans at http://appybuilder.com/#pricing

This slideshow requires JavaScript.

AppyBuilder includes (but not limited to):

  • Google Map (Experimental)  — See post HERE
  • AdMob  banner, interstitial ads – See post HERE
  • Amazon banner, interstitial ads – See post HERE
  • Millenum Media banner, interstitial ads
  • MobFox banner ads
  • Google InAppBilling for selling goods and services (e.g. products on Google Play Store or subscriptions like magazines) – See post HERE
  • Gallery Viewer – display list of thumbnail / buttons in a horizontal scroll view – See post HERE or HERE
  • Toggle Button
  • Horizontal Scroll View – See post HERE
  • Vertical Scroll View – See post HERE
  • SQLite – Relational Database – See post HERE
  • Light Sensor
  • Pressure Sensor
  • Temperature Sensor
  • Custom Fonts for labels / buttons – See post HERE
  • Ability to create flashlight apps
  • Ability to get device info (phone number, IMEI, etc.) – See post HERE
  • Keeping screen on
  • GPS enhanced features
  • Text copy/paste feature
  • …. and many other features to list
 
5 Comments

Posted by on April 4, 2016 in Uncategorized

 

Develop mobile Flashight app

In this post I’ll discuss how to develop a flashlight app using AppyBuilder (FREE or Silver plan).

The final app will look like image below, allow user to tap on ON or OFF image buttons to turn camera flash ON or OFF and to also change the displayed image to ON or OFF flashlight images.

 

image

Designing the layout:

To start, goto AppyBuilder (free or silver) and create a new project called flashlight.

We’ll use HorizontalArrangement to contain the ON, OFF image Buttons and to also include a text (Label) that will display in between the two image buttons.

image

Table below shows the components and their associated properties that were used to design the above layout. Note: For images, refer to the .zip file at the end of this post.

image

Next, from User Interface palette, drag and drop an Image component into viewer and set its width and height to Fill parent and set its Picture to flashon.png.

From Media palette, drag and drop a Camera non-visible component into viewer. Also, from User Interface, drag and drop a Notifier component into viewer. Camera will be used for turning flash on or off and Notifider will be used to display alert messages. By now, your viewer should look like figure below:

image

Coding the blocks:

We are done with designing the layout and will now switch to Blocks Editor to code the app functionality.

Once in Blocks Editor, select the Camera component and you’ll see its associated blocks as shown in figure below. You’ll notice that Camera has a HasFlash block that once executed, returns true if device has flash or false if it doesn’t. Camera also has a FlashOn block that takes a logic true or false block  to turn flash on or off.

image

We now logic for turning flash on when btnFlashOn button is Clicked. While in Blocks Editor, select the btnFlashOn component and then select its Click event handler which will be triggered when the ON button is clicked. From built-in Control blocks, select IF block. We’ll use this block and plug in  Camera.HasFlash to determine if our device has flash or not. If Camera HasFlash, then we’ll use Camera.FlashOn and use logic true to turn flash on, else we’ll use our Notifier component to pop-up a message letting user know that device doesn’t have a flash light. If device has flash, we’ll also change the Picture for Image to flashon.png to show that flash is on.

The blocks for coding this is shown in figure below:

image

Lastly, we’ll code the blocks for turning flash off. Figure below shows that in the Clicked event-handler of btnFlashOff, we use Camera.FlashOn block to turn flash off and switch the Image picture to flashoff.png.

image

Download .apk:

You can download .apk from HERE or scan QR code below to install onto your device:

image

Download source code and images:

The source .aia and images can be downloaded from HERE.

 

 
Leave a comment

Posted by on July 3, 2016 in Uncategorized

 

App Inventor offline

If you are interested to run App Inventor offline, then grab the AppInventorOfflineJune222016.zip from HERE.

This offline version is built based on MIT App Inventor that was released on June 15, 2016.

Please also checkout AppyBuilder at http://AppyBuilder.com

 

 
12 Comments

Posted by on June 25, 2016 in Uncategorized

 

AppyBuilder Intro

 
Leave a comment

Posted by on May 8, 2016 in Uncategorized

 

Google Map Component

Check out the new GoogleMap component in aiLive

Forum HERE. Wanna try out Demo Servers? See HERE. Wanna Join? See HERE

 
2 Comments

Posted by on March 27, 2016 in Uncategorized

 

Implementing fixed Header & Footer

Check video below to see how to quickly develop an Android mobile app that has a fixed header to display at top, a fixed footer to display at bottom and a scrollable middle content.

http://ParamountCoders.com

Interested in aiLive? See HERE for details

 

 

 
Leave a comment

Posted by on March 21, 2016 in Uncategorized

 

Firebase Chat with Interactive Drawing

App Inventor introduced a new component called FirebaseDB which provides a way to use cloud data in apps you invent. The data is stored and maintained using Firebase database service (http://www.firebase.com), which is part of Google. A powerful feature of Firebase database is that data will be synchronized, in realtime, to every connected client. This means that if user1 stores a piece of data in the cloud, all connected clients will automatically be notified of the data change.

In this post, I’ll discuss how to develop a chat application, along with an interactive drawing app. The application will allow all connected users to chat with each. In addition, if any user draws on the app canvas, it will let all other user to view drawing, in realtime, as its being drawn! The final application will look like below showing two users chatting and playing the popular XOXO game.

image

Starting

This app, will have the graphics layout of App Inventor PaintPot (part 2) found HERE, but will have the additional realtime chat and interactive drawing capability.

We’ll start by creating a new project and we’ll call it PaintPotVIII (for Part III)

Designer Editor

We will implement ability to record the name of the last person sending chat message or performing drawing. For this, we’ll use the following components:

Component Name it Description
HorizontalArrangement HorizontalArrangement1 Length: Fill Parent
Container for below components
 Label Label1 Font: Bold
Text: *Your Name:
 TextBox txtName Length: Fill Parent

image

Next, we’ll add a component to show chat history:

Component Name it Description
TextBox txtChatHistory Length: Fill Parent
Height: 66DPs
Multiline
Clear text

image

Next, we will add components for typing a chat message for sending it to connected users:

Component Name it Description
HorizontalArrangement HorizontalArrangement2 Length: Fill Parent
Container for below components
 Button btnSendMsg Text: Send
 TextBox txtChatMsg Length: Fill Parent
Clear text
 Button btnClearHistory Text: Clear History

image

Next, we will add a Canvas with a background picture, used for interactive drawing:

Component Name it Description
Canvas Canvas1 Length: Fill Parent
Height: 300DPs
LineWidth: 5.0
Background Image kitty.png

image

Next, we need to add in a Label. This label will be used to show the current user’s name, if any, who is drawing. The name will be populated from txtName of the client whom is drawing on the canvas. This will be covered in detail in the blocks editor.

Component Name it Description
Label lblNowDrawing Text: Last by:
HorizontalArrangement default Length: Fill parent
Container for below components
Button btnWipe Text: Wipe
Button btnRed Text: Red
BackgroundColor: red
TextColor: White
Button btnBue Text: Blue
BackgroundColor: blue
TextColor: White
Button btnBlack Text: Black
BackgroundColor: black
TextColor: White

Final part on the Design Editor is to add a FirebaseDB component. This is a non-visible component that will be used to store and read data from could. For time being, leave all properties as default. For information about Firebase, please visit http://firebase.com

At this time, your layout, should look like image below.

image

Blocks Editor

Think of FirebaseDB as datastorage with functionality like TinyWebDb, where you can store key, value pairs. For this, we declare and use five global variables as shown below.

  • KEY_LINE variable will be used as key for storing and retrieving data-points for drawing lines
  • KEY_USER will be used as key for persisting/retrieving last user name
  • KEY_COMMAND will be used for determining the pen color (for drawing on canvas)
  • KEY_CHAT will be used for persisting/retrieving chat messages
  • csvList will be a list variable for parsing data that is retrieved from our FirebaseDB

image

When drawing on canvas or when tapping any of our color buttons, we need to check if user has entered name. If so, we store user’s name in FirebaseDB in cloud. To avoid redundant coding, we define a Procedure and reuse this procedure from different event handler blocks. For this, we declare a Procedure named “validateNameAndStoreName”. It basically checks to see if user has entered a value in txtName textbox. If true, then we use use our KEY_USER variable to store user name into our FirebaseDB. If no name entered, then no action will be taken.

image

When user taps on “Clear Chat History”, we need to clear its related textbox. Below are the blocks for this action:

image

Tapping on btnRed, btnBlue, btnBlack buttons should change the canvas pen color on our device AND also on ALL the connected devices. Blocks below shows that when button is clicked, we 1st, call our procedure validateNameAndStoreName procedure (see above). If you recall, that procedures checks to see if user has entered name and if so, it stores name into FirebaseDB. Next, based on clicked-button, we change the canvas paint color. Next, we store COLOR_RED (or black or blue) with a key of KEY_COMMAND into our database. These blocks will change the canvas paint color on user’s device and I’ll later cover how we change the paint color on ALL other connected devices.

image

Tapping on btnWipe should clear the canvas on our device and all other connected devices. Below are the blocks for this. The procedure checks to see if user has entered name, if so, it sends the user’s name to FirebaseDB. Next we clear the canvas. Then we store a value “ERASE” with key of KEY_COMMAND into FirebaseDB. We use KEY_COMMAND key as a generic tag (key) for storing color (above) or actions like ERASE (clearing canvas). More on this later.

image

Next, I’ll cover how to draw on our canvas. When dragging finger on canvas, Canvas.Dragged event handler will be triggered. For this, we need to draw lines on our canvas, send our name to FirebaseDB and also store the x,y coordinates to FirebaseDB. For this, we call our validateNameAndStoreName to save name to database. Next, draw line on our canvas using Canvas.DrawLine. Next, we need to store prevX, PrevY, currentX, currentY to our database. We will store then in a CSV format as shown below using the join block and store into FirebaseDB using a key of KEY_LINE.

image

Next, we’ll cover on sending chat messages. User can type a message in txtChatMsg textbox and tap the button to send the message. For this we perform a basic validation to ensure if any text has been entered or not. If no text entered, we don’t do anything. However, if text is entered, we send user’s name (using validateNameAndStoreName) to database. We also use our global variable KEY_CHAT to store chat message. Before sending the chat message, we take user’s name for txtName, join with colon (:) followed by chat message. Lastly, we clear the txtChatMsg. We are using a Procedure to accomplish this, but, for this, you could eliminate the procedure and pull all blocks into btnSendChat event handler.

image

Up to this point, I have shown you how to draw lines or change color on your own device and also how to store data into cloud FirebaseDB. However, this is an interactive app and any drawing or chat messages, should be drawn on all other connected devices and messages should also be send to all other devices.

FirebaseDB component has an event-handler block called DataChanged. Firebase sends notification to all other connected devices (for the same app) whenever its data is updated, deleted or inserted. For example, let’s say we execute FirebaseDB.StoreValue with key of KEY_USER and value of John. Once this value gets stored, FirebaseDB triggers DataChanged on every connected device that is running the same app.

A FireBaseDB.DataChanged event handler sends two parameters as follows:

  • tag: this is the name of the tag or the key for which data has been updated
  • value: this is the value for tag

When this event is triggered, we check to see which piece of data has been changed. If you recall, when drawing on canvas, we stored prevX, prevY, currentX, currentY in CSV format with a key of KEY_LINE.

The if block below, checks to see if the reported tag (key) is KEY_LINE. If yes, this means user another user is drawing on canvas. We get the CSV value, convert the CSV into a list using “list from csv row” and store it into our global csvList variable. Next, we simply take each piece of data and use it to draw lines on the canvas.

If the tag (key) is KEY_USER, it means data has been updated in cloud. We get the associated value and update our lblNowDraing text to show its related value (last user’s name).

If the tag (key) is KEY_CHAT, it means someone has sent in chat message. For this, we basically take value and join it with an empty line (\n) and join it with existing txtChatHistory textory message. We then store the result back into txtChatHistory textbox.

If the tag (key) is KEY_COMMAND, we call a stored procedure, called parseCommand, to inspect the command. We are using a procedure to reduce the number of blocks in our DataChanged event handler

image

The procedure parseCommandBelow is called from above blocks. It basically checks to see what command was sent to FirebaseDB. If the command was ERASE, we use Canvas.Clear to clear canvas. If command was COLOR_RED, we change paint color. We do same for COLOR_BLUE and COLOR_BLACK

image

The ultimate result is an interactive drawing app with chat feature where in realtime drawings on any user’s device will, in real-time, be shown on other connected devices that run the same app

image

Challenge:

You can challenge yourself by extending this app’s feature to draw circles when canvas is touched. Another challenge would be to make the kitty meow when a button (e.g. Pet Me) is tapped.

Code:

  • .apk – Click HERE to get the .apk to test on the app on your device. you can also scan QR code here:  image
  • .aia – Please note that there are 2 versions of this app:
    • A version that was developed using AiLive. This version includes all features that you see in this tutorial. Get it HERE:
    •  A version that was developed using MIT AI. This version, currently, does not include the chat feature and will soon be coming. Get it HERE

Comments / questions?

We love to hear from you. Use below to provide feedback. Like this tutorial? Please tweet or give us thumbs-up :o)

Interested about AiLive?

If you like to checkout AiLive, please see our top post HERE.

 
8 Comments

Posted by on March 6, 2016 in Uncategorized

 
 
Follow

Get every new post delivered to your Inbox.

Join 251 other followers

%d bloggers like this: