Development Tip: Validating Forms in AngularJS Projects

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:
    $scope.user.name = 'Joe';
  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

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:
    data.splice(0, 1);

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

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

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

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!

Development Tip: AngularJS Service, Factory, Directive, and More in Appery.io

resource_template

 

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

Yeah, that’s easy.

Read more about resource 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!

 

Development Tip: Using Microsoft Azure and Google Cloud SQL with API Express

api_express_service_builderAppery.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!

Development Tip: Use Server Code Plug-ins and Snippets for Quicker Coding

snippets

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!

Uploading Files to the Appery.io Database in AngularJS Apps

cloud_upload1

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.

Development Tip: Using Snippets and Shortcuts for Quicker Code Editing

apperyio_snippets

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!