Blog

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.

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:

  var module = angular.module('AngularTranslate', ['pascalprecht.translate']);

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

  define(['require', 'angular'], function(require, angular) {
      
      var module = angular.module('AngularTranslate', ['pascalprecht.translate']);
      
      module.config(
          
          ["$translateProvider", function($translateProvider) {
              $translateProvider.translations('en', {
                  TITLE: 'Hello',
                  FOO: 'This is a paragraph.',
                  BUTTON_LANG_EN: 'english',
                  BUTTON_LANG_DE: 'german'
              });
              $translateProvider.translations('de', {
                  TITLE: 'Hallo',
                  FOO: 'Dies ist ein Paragraph.',
                  BUTTON_LANG_EN: 'englisch',
                  BUTTON_LANG_DE: 'deutsch'
              });
              $translateProvider.preferredLanguage('en');
          });
      
  }]);

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

$translateProvider.determinePreferredLanguage();

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.

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

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.

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:

   data.splice(0, 1);

Debugging 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.

AngularJS provides a powerful and convenient way to organise your code via services, factories, directives and more. Here, at Appery.io, we call them AngularJS resources. As usual, in best traditions of Appery.io, we’re making complex stuff easier. So, to create a preferred resource perform, CREATE NEW > JavaScript. Then choose what type of resource you want to create by selecting the needed option from the type drop-down. When clicking “Create JavaScript”, new custom JavaScript will be added to your project with a ready-to-use template of the chosen resource. Inserting a few useful comments in each template will help you to start coding quickly. Afterwards, you can simply use the created resource in scope functions by calling it the Apperyio.get() function:

var my_service = Apperyio.get("service_name");

Appery.io API Express enables enterprises to easily and securely integrate apps with any back-end system. Recently, the Appery team has published two guides on how to create databases with Microsoft Azure and Google Cloud SQL and then use them with API Express. If you are new to API Express, start with this beginners tutorial. It shows you how to create services based on API Express models and perform CRUD operations.

Check the API Express 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!

Using Server Code snippets and plug-ins are a great way to save time when making server scripts. Instead of digging through the Server Code documentation, you can simply choose one of the snippets located on the right side of the screen in script editor mode. The set of snippets provided by the Server Code API are the most common, but if you think of other useful snippets, let us know and we’ll add them to the list.

Server Code plug-ins are another way to save time when implementing your logic. To find Server Code plug-ins, go to the Server Code page and then to the Plugins tab. For now, there are two plug-ins. With them, you can quickly integrate with the Twilio or SendGrid API via XHR (XMLHTTPRequest). Simply click “Import” to create the server script based on the plug-in selected, and then customize it by specifying your API keys.

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

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

Snippet to invoke a REST API

A snippet is a pre-made and reusable section of code that can be quickly inserted into your own code. It is a convenient and time-saving way to pull frequently used Appery.io functions.

A recent update has introduced a new snippet – Invoke REST API ($http).  Invoke REST API ($http) is a wrapper for Angular’s($http) and can be used to send AJAX requests. This snippet is described in more detail here.

Shortcuts, like snippets, can save you time. A shortcut allows you to type a few characters that expand into the corresponding code. For example, type $Cg and then press Ctrl+Space or Cmd+Space to quickly add the Config.get function. The shortcut will be translated into:

Apperyio.Config.get( expression/*, default*/ );

You can find the whole list of shortcuts here.

Make sure to check out all of our mobile development tips. Do you want to build apps fast?

Start developing with our trial plan!