Blog

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.

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.

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.

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.

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");

A recording of the first webinar in our 2016 webinar series is now available. It introduces you to the App Builder and how to build apps with Ionic/AngularJS.

From this video, you will learn:

• How to create a new Ionic app
• The various views inside the App Builder for Ionic and AngularJS
• How to build an app connected to a cloud database:
  • Building the app UI using the Design view
  • Mapping data between scope and services using the visual Mapping view
  • Binding data between scope and page using the visual Binding view
• How to test the app quickly in the browser

Check out the video now:

To learn more how to build apps fast, go to our YouTube channel.

You can still sign up for our next webinar (tomorrow), “Getting Started with App Builder for jQuery Mobile Apps”!

To help developers with uploading their files to the Appery.io backend, we have just released the Files Upload plug-in for AngularJS (both Bootstrap and Ionic).This process uses the Input component with afile type. You can click Choose File to select the needed information to enable it appear as list on the page at the end. To upload all files click Upload all, or for single files select Upload selected.

A quick note about configuring the plug-in: the Appery.io database requires a sessionToken for uploading files to the database. To make the plugin simpler to use, use the Master Key.To configure this plugin you should provide the ID of the database that you will be using to store the files, and select the Master Key instead of sessionToken.

However, please keep in mind that for security reasons, we recommend you use sessionToken instead of Master Key.  This plug-in is configured to work with the Appery.io database, but it can be modified to work with any other API provider that allows for file uploads. You will need to change the upload REST API and update any parameters.

As usual, we’ve prepared a detailed tutorial for this plug-in, which you can find here.

If you have any problems with this plug-in or with file uploading in Appery.io, contact our support team for assistance.

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!

The Appery.io team is starting 2016 with new and exciting updates and improvements to the platform!

App Builder enhancements

The latest Appery.io update brings some cool features to the visual App Builder.

New Ionic components

Two new UI components for Ionic were just released: Card and Text.

The Card can be used to visually separate information on a page. It allows for more control and flexibility, and can even be animated. This new component is based on Google’s Card UI design.

The Text component can be used to conveniently place any custom text or AngularJS expression (wrapped with {{...}}) on the page.

The Ionic Button has obtained new property – Icon Only. It makes a button look like an icon. This property converts a button to an icon by changing Icon Style and Style properties, and ignoring the Text property.

It’s now possible to copy and clone components in the App Builder. To create a full copy of a UI component with all nested children, (including other components), click the clone icon on the top right of the component:

Cloning a component

Ionic page templates

When creating a new page in Ionic, you can choose a blank page or a page with ionContent. The blank page is a simple page without any extra components. Use it when you don’t need to make any special adjustments to the scroll or scrollbar settings. The page with ionContent is a multi-tool page with a ion-content directive and many settings provided by Ionic. Use it when you need to make flexible adjustments to page scroll behavior.

You can find more detailed templates description in our docs.

Read the rest of this entry »