RSS

Have Mobile App Idea?

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

Got Mobile App Idea? Bring your App Idea to App Reality using AppyBuilder.

infographic

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

Advertisements
 
Leave a comment

Posted by on October 30, 2018 in Uncategorized

 

Drawing Polygons on Canvas

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

Need to draw polygon with multiple sides on Canvas? Image below shows output of a simple app that was created in AppyBuilder. It includes a polygon that can be rotated, skewed, scaled and transitioned into multiple sides using Slider

AppyBuilder Designer components

Image below shows the components that were used in AppyBuilder. It includes 3 Sliders, 1 Canvas, and 2 ImageSprites

Blocks Editor (coding):

Canvas component, includes a block called DrawPolygon. Using this you can specify:

  • centerX: the polygon center X position
  • centerY: the polygon center Y position
  • numSides: Number of sides (e.g 3 for triangle)
  • polyRadis: The radius from poly center to sides
  • cornerRadius: the radius of vertex (if 0 means no curve)
  • rotation: how far it should skew (e.g. if 4 sides, specifying 45 will make it look like square and specifying 0 will make it look like diamond)
  • fill: boolean indication if it should fill color or not

When sliderScale Slider thumb-position is changed, its related event-handler PositionChanged will automatically get triggered.  Int his event-handler, we:

  • clear the previously drawn poly
  • find the center of our canvas for both x and y
  • Use 4 sides for square
  • Use the sliderScale thumbPosition to get its current value
  • Use a radius of 11 for cornes
  • use a rotation (skew of 12)
  • make it fillable for color

For rotation of the poly, we use same block, but this time, when sliderRotate thumb position changes, we use its thumb-position to change the rotation value:

For changing number of sides, we use sliderSides.PositionChanged to get its current thumb-position and change the value for numSides:

 

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
Leave a comment

Posted by on October 13, 2018 in Uncategorized

 

Airtable – Spreadsheet or Database?

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

Airtable is a non-visible component that is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. Airtable can store information in a spreadsheet that’s visually appealing and easy-to-use, but it’s also powerful enough to act as a database that businesses can use for customer-relationship management (CRM), task management, project planning, and tracking inventory.

AppyBuilder has component and blocks to access and manipulate your Airtable spreadsheets. To start using Airtable:

  1. create an account HERE or simply log into Airtable. Next, create a spreadsheet using “Add a base” and then selecting “Start from scratch”

2. After assigning a name, you’ll be brought to a screen like below. I

  • Item 1 is the name of your spreadsheet (also referred to as base-id).

  • Item 2 is the name of your table (store away this table name)

  • Item 3 is the name of your view (Store away this grid name)

  • Click item 4 (+ sign) to add column.

  • Click on each header (item 5) to either change default column name, or delete column or add a new column.

  • Click on Account (item 6) to retrieve your account API Key (store away this API Key)

Generating API key is by going to your account (item 6 above) and then generating (or viewing) an API Key:

4. Finally, you’ll need to retrieve an id (BaseId) that is a unique id for the selected table. Goto https://airtable.com/api and then select the spreadsheet that was just created. When the page opens, scroll down to “AUTHENTICATION” and on right hand side select “node.js”. Take note of this BaseID.

To manipulate (Add, Read, Update, Delete) data, goto your AppyBuilder project and fro Storage category, select Airtable and drop onto layout:

The properties section of Airtable component will now have the properties shown below. Paste your Airtable API key and Base ID into properties above. Also change the TableName and ViewName to match your Airtable names (use defaults if you haven’t changed them)

In blocks-editor, you can find may blocks to retrieve rows or add, delete, update row / cell data:

There are also event-handler blocks that are associated with the blocks. For example, to retrieve row data, you’ll use Airtable.GetRow block. Once result is retrieved, it will trigger Airtable1.GotRow event-handler:

AppyBuilder contains may other blocks for handling single or multiple rows or columns or even single cell:

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
Leave a comment

Posted by on September 22, 2018 in Uncategorized

 

AppyBuilder – Support for Android 4.x

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

To set this configurable option, sign into AppyBuilder and open an existing app or create a new app. Next, in the Component section, select Screen1 (main screen of project):
Now, in the Screen1 properties, you’ll notice drop-down option for setting the minimum API and maximum API versions (Android API version):
Use MinAPI to create backward compatibility all the way back to Android API 14 (Ice Cream Sandwich) to Android API 21 (Lollipop).
Use MaxAPI to meet Google Play’s target API level (26) requirement. Note that Target API 26 requires app user to manually grant permission for sensitive permissions. AppyBuilder includes built-in blocks / feature to ease this process for you and will automatically display relevant information allowing user to grant permissions (such as image below):

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
1 Comment

Posted by on September 21, 2018 in Uncategorized

 

Tutorial – Shrink & Grow Images

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

Tutorial, written by imagPeter Peter Mathijssen

This tutorial adds new functionality to “Rotating Images” post found HERE. It shows how to add Grow & Shrink effects to images.

For this effect, 2 buttons and 2 clock components were added.

Selectie_999(421)

The Clock2.timer block makes the image 10 pixels bigger every 1/10th of a second. The clock1.timer block makes the image 10 pixels smaller every 1/10th of a second. The blocks for Grow and Shrink look like image below:

Selectie_999(422)

Looking for .aia source file? Get it HERE.

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
Leave a comment

Posted by on July 8, 2018 in Uncategorized

 

Tutorial – Rotating Images

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

This tutorial, written by imagPeterPeter Mathijssen, shows you how you can get use AppyBuilder to create a nice graphical effects.

Assumption: You have basics knowledge of AppyBuilder for creating projects / apps.

Media image files: The images were used from site HERE

For this tutorial, we use Image component and its RotationAngle block:

Selectie_999(417)

The end result will look like image below which uses a Clock non-visible component:

Image below shows list of components that are used for this tutorial. It also shows the media (asset images):
Selectie_999(414) Selectie_999(415)

Button2 through Button7 Click blocks, show how to switch between different asset images. Button1.Click block shows how to start / stop (toggle) animation using Clock component.  Once animation (Clock) is enabled, then Clock1.Timer will automatically be triggered and continues to change the the image RotationAngle, giving it the end result that you see in the gif image below:

Note: The rotation angle of the image is changed by 60 degrees when the clock fires.

You can press, Button 1 to 6 to alternate between images. Press the Start/Stop button to Start or Stop the rotation.

Looking for .aia source file? Get it HERE.

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
Leave a comment

Posted by on July 7, 2018 in Uncategorized

 

Using GenyMotion with AppyBuilder

Title

Join Community: http://Community.AppyBuilder.com

Drag, Drop, Snap Blocks, Build app

AppyBuilder FREE online platform allows individuals to design and build Android mobile apps, using Drag-n-Drop interface. You can use Wi-Fi or USB to connect to AppyBuilder companion for Live-Development testing.

Below is a tutorial from  Husain Al-Haboubi, a community member in AppyBuilder forum HERE. It discusses using GenyMotion emulator for Live Development.

Installing Emulator

  • Download and install GenyMotion: https://www.genymotion.com/#!/download
  • Download and install Oracle VM VirtualBox (Currently, only v5.1.26 works): https://www.virtualbox.org/wiki/Downloads
  • Open GenyMotion and install and add a virtual device – choose any one.
  • Close GenyMotion and open Oracle VM VirtualBox. Choose the virtual device you have just added then press Settings. From Network >> Adapter 2 choose Bridged Adapter from Attached to. Then click OK. (Leave Adapter 1 as Host-only Adapter)
  • Above will create a unique IP address for the Virtual Device in your home network.
  • Open the GenyMotion again and double click the virtual device. This will open the virtual device.
  • The virtual device has no Google Play Store and it has to be installed manually by yourself.
  • After you have successfully ran the emulator and it’s up and running, click on Open GAPP on the top right corner of the emulator. Click Agree and Install. This will install Google Play on your emulator and will restart your emulator.
  • At this time, you are done and you can open Google Play and sign in to your Google account then download and install AppyBuilder companion from Play Store.
  • Note: If you are having issues with the companion identifying the Wi-Fi, open up Oracle VM VirtualBox >> Select the device >> Settings >> Adapter 2 >> Advanced >> Change Adapter Type to PCnet-Fast III

Using Camera in the Virtual Device

If your app uses Camera and you would like to perform Live-Testing, follow instructions below

  • Close all virtual devices and close GenyMotion.
  • Download and install ManyCam: http://download.manycam.com/
  • Open ManyCam, click the small arrow on screen 1 then Desktop >> Area under cursor.
  • Keep ManyCam open then open Oracle VM VirtualBox. Click on the virtual device and then settings. Click Display >> Video Capture. Check Enable Video Capture.
  • Next, open the virtual device. When it’s open, click on the camera icon on the right bar (Third icon).
  • Press ON then for front camera, choose Webcam 0 and for back camera, choose  Webcam 0.
  • Click preview to make sure the camera is working.

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 
Leave a comment

Posted by on March 21, 2018 in Uncategorized

 
 
%d bloggers like this: