Create a mobile app in less than 10 minutes

There are many options when creating a mobile application, from complete development environments to practically automated online generators. There are also some tools that are not so well known, but that offer admirable advantages.

To demonstrate the power of one of these tools we have developed this small example. If you follow the steps in this post, the end result will be a functional application that after some small adjustments will be as elegant and useful as the calculator originally installed on your device.

The tool in question will be Livecode Community 9, an IDE to create multi-platform applications, with its Community edition you can create applications for free for Windows, Linux, Mac, iPhone, Android and in an experimental phase for the web.

Is it possible to create a functional application in less than ten minutes?

Yes, it is possible with a little practice, but, we do not recommend it, to create an application we should dedicate time to the details, in the download link that appears at the bottom of this page you can download the complete example of our functional and ready calculator to compile to your mobile device, this was done in about 10 minutes. The user interface To begin with, we will create a GUI like the one below:

The main code of our app will be concentrated in a group that includes all the controls (graphics) used as buttons:

We have used graphic type controls to keep the example simple and to give it the desired look, but it could have been done using buttons or widgets.

For more details on how to do it you can lean on this video:

 

 

Coding our application

The main functionality of our calculator is concentrated in the group of controls and it would be as follows:

on mouseUp
      local tKey
      put the short name of the target into tKey
      if field "preview" is empty and field "edit" is not empty and tKey is not in "+-*/" then 
           put empty into field "edit"
      else
           put field "edit" into field "preview"
     end if

     switch tKey
       case "C"
           put empty into field "edit"
           put empty into field "preview"
           break
       case "="
          try
             put value(field "edit" ) into field "edit"
             put empty into field "preview"
          end try
          break
       default
          put tKey after field "edit" 
          updatePreview
    end switch
    hide graphic "effect" 
end mouseUp

on mouseDown
     set the rect of graphic "effect" to the rect of the target
     show graphic "effect" 
end mouseDown

on mouseRelease
    hide graphic "effect" 
end mouseRelease

command updatePreview
     try
        put value(field "edit" ) into field "preview"
    end try
end updatePreview

We must keep in mind that when opening the stack the application should adjust to the mobile device screen:

on preOpenStack
      set the fullScreenMode of this stack to "exactFit"
      hide graphic "effect"  --Hide control used to show btns clicks.
end preOpenStack

With this we will have our calculator functional and ready to test it on our phone or tablet.

You can keep improving the calculator to make it even better, remember, it was created in 10 minutes.

 

---

Currently, there are no comment.

Login to comment