AppyBuilder – Opensource

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

Drag, Drop, Snap Blocks, Build app

If you are interested to get involved in adding enhancements, features, components or fixing bugs, check us out at GitHub here: https://github.com/AppyBuilder/AppyBuilder-Source

👍 How to Contribute

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am ‘Add some feature’)
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Learn about basics of GitHub, Forking, Updating and GitHub Pull Requests

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

AppyBuilder – Offline version

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

Drag, Drop, Snap Blocks, Build app

Looking for executable Offline version of AppyBuilder? Check GitHub link below that includes executable that can be run locally on:

• Linux
• Windows
• Mac

https://github.com/AppyBuilder/AppyBuilderPersonal

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 

Beginner Programming Concepts

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

Drag, Drop, Snap Blocks, Build app

Tutorial & Video Production:  By:  Pixii Bomb

 

Level: Novice/Beginner, Programming Concepts: Introduction

 

Level: Novice/Beginner, Programming Concepts: Variables

 

Level: Novice/Beginner, Programming Concepts: Variables

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 

 

AppyBuilder Code Editor

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

Drag, Drop, Snap Blocks, Build app

Interested in creating custom Extensions? AppyBuilder new Code Editor allows you to build extensions without the need to have any development tools such as ant, Java JDK, Git, etc. !  The Code Editor is fully cloud-based platform that takes care of your needs!

Getting Started

Use your favorite browser and goto http://Editor.AppyBuilder.com

If you have already registered, you can just login using your email and password, otherwise just click REGISTER and provide a valid email.

Creating Projects (extensions)

After successful login, you will be presented with the dashboard (below). The Dashboard will show you all projects that you have already created.

To create New Project, click on “New Project” and you’ll be presented with pop-up shown below. At this time, you’ll be presented with 4 choices. Currently, only Aix is activated for BUILD. We are planning to release Php and Html in future releases.

Click on “aix” to create a new extensions. You will be asked to enter a name. You don’t need to enter .java for your project, it will be assigned automatically:

Give your project a unique name (e.g. MyExtension) and click Continue button. You will then be presented with a base template in AppyBuilder CodeEditor:

You are now ready to create your awesome extension. Using this CodeEditor, you’ll be able to change options such as Theme and Font-Size. Change it to your preference. You’ll also notice icons for allowing such options as Save, Undo, Redo, Find, Replace, Line-Wrapping and Full-Screen (great for mobile-use). Once you are ready to create .aix, just click on BUILD button. You will be then presented with a dialog button like below:

Building of .aix time will be variable depending on volume and number of jobs in the queue. The system will automatically pop-up buttons when the build is ready (below). If there is build-error, you’ll notice only 1 button for viewing the LOG (Last Build Log), otherwise, you’ll also notice another button for downloading your .aix (“Download Aix). NOTE: Your LOG and Aix will be available for 12 hours. After that, the buttons for “Download Aix” and “Download Log” will disappear

To view the Log, or download Aix, just click on the related button. Clicking on “Download AIX” will download the .aix to your device, allowing you to import into AI platform. For example, the general template for .aix, will create 2 blocks for you as shown below:

That’s all. You have now created your own custom extension!

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 

Have Mobile App Idea?

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.

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 

Drawing Polygons on Canvas

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:

 

• Interested in .apk? Get it from HERE.
• Interested in source / .aia? Join AppyBuilder community for source at http://Community.AppyBuidler.com

 

Join forum community for tutorials, discussions, technical questions

http://Community.AppyBuilder.com

Website: http://AppyBuilder.com

Share, Like us below 🙂

 

 

Airtable – Spreadsheet or Database?

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 🙂

 

 

AppyBuilder – Support for Android 4.x

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

Drag, Drop, Snap Blocks, Build app

Interested in developing apps that are compatible even on Android versions 4.x? AppyBuilder now provides options that can easily be updated to support Android 4.x and above.

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 🙂

 

 

Tutorial – Shrink & Grow Images

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

Drag, Drop, Snap Blocks, Build app

Tutorial, written by  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.

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:

Pressing the grow or shrink button makes the image get bigger or smaller.

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 🙂

 

 

Tutorial – Rotating Images

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

Drag, Drop, Snap Blocks, Build app

This tutorial, written by Peter 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:

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):
 

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 🙂