Development Tip: New ClientSDK Methods For Better Offline Apps

Posted: April 6th, 2016Author:

appery

One of the new key features of API Express is that you can build apps offline with the synchronisation functionality so when you go online all off your changes have been synchronised. The ClientSDK library has a set of methods, which when you execute can you build more powerful apps offline. The last Appery update bought us the ClientSDK library of API Express’ new methods to work with action histories made offline:

  • revertLocalChanges – reverts all local changes made in offline mode without clearing the cached data.
  • getDeferredActions – returns the iterator, which you can use further to iterate through the history array items.
  • saveDeferredActions – saves changes to a history, if there was any changes.

ClientSDK will automatically detect the network state and when a device is connected to the internet the ClientSDK synchronises with the server, and sends all offline changes (actions history) made by the user. You can find more information here.

Make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Internationalisation In AngularJS Apps With Angular Translate

Posted: March 30th, 2016Author:

angular-translate

Internationalisation is one of the must have feature when building global reach mobile apps. An Angular Translate module can be really helpful in translating your app UI. It can be included into an Appery.io app in a few quick steps:

  • Go to the Angular Translate page and download the latest release bundle. Inside this bundle you’ll find angular-translate.min.js file – the one that you need to upload.
  • Open your AngularJS Appery.io app, click CREATE NEW > JavaScript. Type angular-translate.min for the name and select Upload from file, and browse for this file on your PC. Also, change its Type to Angular module, check the Use shim check box and finally, type pascalprecht.translate for Shim exports: input. Click Create JavaScript once the file will be uploaded.
  • Now, another module should be created. It will be responsible for the Angular Translate configuration. Perform CREATE NEW > JavaScript, type AngularTranslate for the name, and choose Angular module for Type. Click Create JavaScript.
  • You’ll see an Angular module template and a lot of commented configuring options. First, this module requires pascalprecht.translate as dependency, so add it  to square brackets. Here is how it should look:
  • Configuration logic should be added to the module.config function. Here is how your whole module should look when the configuration logic has been added:
  • The last step is to create a simple UI and check the translation engine. Go to any page in your app, place a Button on the page and provide {{ 'TITLE' | translate }} for its Text property. Launch the app!
  • If you see Hello on the button – you’re done.

One option is to customise the translation mechanism to initiate the language based on the browser or device language. For example, you can get the browser or device language like this:

Try Ionic app backup with Angular Translate included if you facing some issues.

Read more Angular Translate possibilities in its docs, and make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Design Faster with New Copy and Paste Functions Inside the Visual App Builder

Posted: March 23rd, 2016Author:

apperyio_context_menu

Component context menu

When building a mobile app in the Appery.io visual App Builder it’s very common to place the same component in multiple places. Before, you had to drag each component separately, now there is a simpler and faster to do this with our new copy and paste capabilities.

AngularJS projects in Appery.io use the standard copy and paste functionality that you are familiar with, plus you can clone (duplicate) a component. This means that you can copy your component via a context menu or hotkey (CTRL+C), and paste it even into a different AngularJS project! In order to open the context menu, select any component and click the cog icon.

You can find more information about UI components in Appery.io in our documentation, and make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Big Update: New Enterprise Components in API Express, Upgraded Push Notifications, New Ionic Version and More

Posted: March 20th, 2016Author:

This is our second major platform update in 2016, we are excited to share our new features and benefits to help you build enterprise apps fast.

New enterprise components in API Express

There are two new features of our API Express, these new service components are for creating advanced service logic using the visual builder. Our new features to API express are:  Script and ServerCode. Both components allow you to write custom service logic using JavaScript.

Screen Shot 2016-03-18 at 4.39.34 PM

API Express visual editor enterprise components

  • ServerCode component – allows call Server Code scripts from the API Express. This will be beneficial if your app relies on some server-side logic that is written as a Server Code script. Read more about this component here.
  • Script component – can be used for changing the body structure before passing the data to another component. Find more on Script component in documentation.

Read the rest of this entry »

Development Tip: Using The Bootstrap Grid In Appery.io

Posted: March 16th, 2016Author:

grid

Popular Bootstrap Grid is available in Appery.io’s Bootstrap project as an UI component that can be dragged and dropped to the page. The following steps show how to change grid cell sizes for different screen resolutions:

  1. First open the AngularJS / Bootstrap project and place the Grid component to the page.
  2. Now, if you will look at top right corner of the grid you’ll see a green plus button, this button will add a new row to your grid. If you don’t need to add a new row, but want to add new cells to existing row click on one of the grid cells and then choose GridRow through the breadcrumbs:
    new_cell
  3. A green “+” sign now will add a new cell to an existing row.
  4. You can configure the size for each cell for the four screen sizes. Click on the grid cell and the expand Columns properties in the PROPERTIES to the right of the screen. Type a number from 1 to 12 to define how it will look on the screen:
    cell_sizes

Don’t forget that you can emulate page size directly inside the editor, and when testing the app in browser by clicking XS, SM, MD and LG buttons.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Validating Forms in AngularJS Projects

Posted: March 10th, 2016Author:

validation

Validating inputs in mobile is very popular. Thanks to AngularJS, it can be quickly completed in one simple and convenient form. In the following example, you will learn how to create a required Input via ng-required directive, and how to resolve this issue in case the Input is not filled (show a message and disable the button):

  1. First of all, there is a model with the following structure:
    • user (Object)
      • name (String)
  2. In the scope, there is a user variable type of user (based on model described in step 1)
  3. init function of the scope has a single line of code:
  4. On the page, there is a HTML component with a Container property = form (there is no such option in a dropdown so simply type it).
  5. Next add name property and set its value to myForm.
  6. Inside the HTML component, there are Input and Text components.
  7. Set the Input components to the following properties:
    • ng-model = user.name
    • name = userName
    • ng-required = true
  8. For the text component set it to the following:
    • Color = assertive
    • text = Required (or any text you want)
    • ng-show = myForm.userName.$error.required
  9. And finally, place the button below the HTML, and add a ng-disabled property with myForm.userName.$error.required value.

If you try to remove text from the input you will see that button becomes disabled, and a Required message will appear. This way you can produce more complex validations according to your needs. You can see how the example above is built by creating an app from this backup.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Adding Custom Logic to REST API Invocation

Posted: March 2nd, 2016Author:

editing_mapping

This blog post shows how to add a custom logic to a REST API invocation for jQuery Mobile apps.

You may often need to modify data for a services request or a services response. You may want to launch a dedicated JavaScript function to do this. This is useful when you need to rewrite the response data with filtered/edited values, instead of doing this each time for each mapping. For example, your service response has an unneeded first value that you want to remove from the response:

  1. Add new Run JavaScript action for Success event of your datasource.
  2. Using the drag and drop, move this action to the very beginning, so the Mapping action will be right to the Run JavaScript. This way, it’s guaranteed that the JavaScript code will be executed before the mapping.
  3. Click on Run JavaScript action and write your code. You have a data parameter in this JavaScript function – that is your response value.
  4. Write your custom logic to modify the response data. For example, to remove the first item of the response array (works only for arrays, not for JSON objects) use the following code:

Read more about Mapping in jQuery Mobile projects here and make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Quick Android App Debugging On The Device With Chrome

Posted: February 24th, 2016Author:

chrome-debuggingDebugging your JavaScript apps that are made with Appery.io can be performed in a several ways, but today we would like to share with you another method. This approach has been available before, but for a some reason not many people know about it. The flow is looks really simple:

  1. Connect the device to a PC with a cable.
  2. Export the Appery.io app as an Android binary (.apk).
  3. Scan the QR code to install the app.
  4. Launch Chrome and open the app on the device.
  5. That’s all! Now you have a really quick debugging tool to test your app with.

You should do a few steps to makes it work, but luckily they are not complicated and you can be ready-to-go in a few minutes.  A detailed guide about this feature and how to set it up you can found here.

Read more about the testing and debugging options here and make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Changes Needed: New AngularJS Push Plug-in Implementation

Posted: February 23rd, 2016Author:

pushregdeviceimpl
The following relates to the projects, which have already been imported as AngularJS Push Plug-in: by improving the AngularJS Push Plug-in, its PushRegisterDeviceImpl JavaScript file was modified. In order to update this file you need to replace its content with the updated one here. Alternatively you can simply re-import the plug-in itself,  making sure that you have removed all of the related assets before doing so. This depends upon the Ionic and Bootstrap projects.

If you experience any problems with new implementation do not hesitate to ask our support team to help you.

Development Tip: Appery.io Push Notification Flow

Posted: February 17th, 2016Author:

logo-localpushWhen implementing logic with a push notification function it is a good idea to understand how it works under the hood, so when you send a push notification using a REST API, Server Code, or via the web console, the flow should look like this:

  1. Appery.io push service receives and processes the request to send push.
  2. Then, Appery.io passes the message onto Google or Apple servers.
  3. Lastly, push notification providers (Google or Apple) delivers the message to a device.

Because the push notification was delivered by a third party (not by our service), the Appery.io platform can’t provide details on whether or not the push notification was delivered, and the reasons for this. However, we can provide certain error notifications along the lines of the device was not found. The same basic flows are valid for all push notification services (not only for Appery.io).

Read more about push notification in documentation and make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!