Blog

When building AngularJS apps (with Ionic or Bootstrap frameworks) using Appery.io, you can easily extend app functionality by adding native device features. Features such as push, geolocation, camera, etc., can be added by importing the appropriate plug-ins. To do this, go to CREATE NEW > From plug-in and select the appropriate plug-in. The native features come from the Cordova library, which is automatically installed in every app.

For each plug-in we have documentation as well as detailed tutorials on native device features. You can find the docs 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!

In the “Appery.io under the Hood” series, we’ll be explaining in detail how Appery.io works. We hope that this information will give you a deeper insight into how to make better apps by giving you a deeper understanding of the platform.

Loading resources when needed

When developing big scalable web apps, the question of how to manage tons of libraries and services arises pretty quickly. There are a few key reason why a powerful and flexible dependency management tool becomes mandatory:

• The vast majority of libraries dictate their own requirements for dependencies. This makes it critically important to load and launch resources in the appropriate order
• Loading all the libraries and other resources at once increases network traffic and should be avoided when possible. This is even more important for mobile apps
• App loading time can be significantly decreased when loading only the required libraries:
  • A ready event will be fired only once for all the required resources
  • For mobile devices and apps, page size can be optimized as much as possible to prevent browser or OS failures
  • Overloading the device CPU by loading unnecessary libraries will decrease battery life
• The bigger the development team, the more complicated library dependency management becomes

This is why Appery.io has chosen RequireJS to solve the cumbersome process of dependency management. Let’s see how RequireJS is used in Appery.io apps.

RequireJS

RequireJS implements an AMD (Asynchronous Module Definition) approach and allows the declarative description of dependencies among app modules. RequireJS also guarantees that all module dependencies will be resolved before module execution. In the AMD pattern means each module has its own isolated variables area. This makes your app more stable by reducing the possibility of namespace conflicts. 

Read the rest of this entry »

Configuring your app routing is really easy with the Appery.io Routing tab. You can find it under Project > Routing. When creating a new page, a route for it will be created automatically. You can then change its name or select needed dependencies, which is really convenient.

Then, in your code, you can get to that page using Route name this way:

Apperyio.navigateTo("Screen2");

Routes with dynamic parameters are available as well. You can find out more about it (and, generally, about the Appery.io routing feature) in our documentation.

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

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

PayPal API is one of the most popular Appery.io plug-ins, and now it’s also available for Ionic & AngularJS!

Our users have frequently requested the ability to add payments to their Ionic & AngularJS mobile apps more quickly, for example, to create an online shop. Now, with the help of this plug-in, you could build an online shop (for instance) to be used by your Ionic & AngularJS app really easily.

A few notes about the security implemented in this app:

• Authentication with PayPal occurs via a Server Code script. It takes your PayPal app credentials and sends XHR to PayPal. The token is stored to the database.
• By using the Secure Proxy feature, the actual token value will be substituted on the server side. This way any PayPal API can be triggered.
• Because of the server-based authentication, sensitive data such as the client secret or token value will never be shown in the app, which eliminates the possibility of theft.

Finally, a few, more general, notes:

• The flow implemented in this plug-in is similar to PayPal’s flow.
• We have a PayPal API plug-in tutorial here. Check it out to configure the plug-in.
• The plug-in is configured for a test environment, so use the PayPal guide too see what you need to do when going live.

The Media Manager allows you to work with image files in the App Builder. You can upload, rename, and delete images, as well as select them as assets for the Image component. You can open the Media Manager by clicking “additional menu” (the “three lines” button) in the upper-right corner of the builder and select “Media Manager”:

Opening the Media Manager

For example, you can upload your image through the Media Manager and use it as a custom page background via CSS (don’t forget to add the appropriate CSS class to the page):

.background
{
    background-image: url('../files/images/background.png');
}

Learn more in our 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!

With Appery.io and Ionic, you can easily add a spinner to a page:

1. Drag’n’drop the spinner component to a page.
2. Provide an expression for ng-show in the properties panel. It could be a variable that returns true or false.
3. To vertically and horizontally center the spinner do the following:
   1. Add a centered-spinner class to Class in the properties panel.
   2. Create new CSS by going to CREATE NEW > CSS > Create CSS.
   3. Add the following code to create the CSS file:

.centered-spinner {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -14px;
    margin-left: -14px;
}

.scroll
{
    height:100%;
}

Your spinner is ready to use! Don’t forget to change the variable provided for ng-show to true when you need to show the spinner, and to false when you need to hide it.

You can find related information here or 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 platform comes with many visual tools to help you build your mobile app fast. We understand that there are cases where you need to go beyond visual tooling and be able to customize your app with code. There are a number of ways to do that in Appery.io.

• You can write any custom JavaScript code in the app (client). You can also include any 3rd party libraries.
• With Appery.io Server Code you can develop any custom logic on the server, also using JavaScript. This logic is automatically exposed via a REST API. That’s like creating a custom API on the fly.

In this tutorial we are going to show you how to combine the visual tools with custom code to build a chat mobile app. In particular, you’ll learn how to use EventSource API to receive server-sent events and create a simple chat application. The app will be based on the Ionic Framework and also use Server Code script. The app looks like this:

Chat app

Read the rest of this entry »

There’s a set of time-saving snippets available to you when you’re writing app logic in AngularJS. They are located on the right side of the function editor window.

For example, you can generate REST service-invoking code by clicking on “Invoke service” snippet. Then, all you need to do is change the "service_name" to your actual service name.

Another popular snippet is “Open modal page” – the snippet will generate code to open the modal and modalOptions object as well.  As with the “Invoke service” snippet, you’ll have to change modal_name to your modal name. Then you can execute this function when needed (on button click, for example) and the modal will be opened.

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

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

With just a few quick steps, you can easily add any 3rd-party Cordova plug-in to your Appery.io app:

1. Go to the Github page of the plug-in and download the latest stable version by clicking “Download ZIP.” It’s important to download the latest stable version.
2. Go to Resources > Cordova plug-insand click Import Cordova plug-in, then: Choose file, locate the downloaded file and click Import plug-in The plug-in will appear under Cordova plug-ins

To manage all of the Cordova plug-ins for a particular app, go to Project > App settings > Cordova plug-ins and you’ll see the list. You can quickly enable or disable any plug-in.

Learn more in our 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!

By using the Appery.io Contacts plug-in, you can conveniently manage contacts on a user’s device. The plug-in is based on the Cordova API and can be imported into your Appery.io app like any other plug-in. Just click CREATE NEW > From plugin, select Apperyio Contacts Service and click “Import selected plugins.” There is a set of services you can use to perform the operations, such as find, remove, create, edit and more.

We’ve also prepared a detailed tutorial on how to use this plug-in, as well as a simple demo app (you can create it from the attached backup), that allows you to find, create and save contacts. Find it 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!