Blog

Dyjit’s vision is to make life better by introducing digital experiences where they do not yet exist. Dyjit’s first product, knowye (know what you eat), is a hospitality platform that transforms the traditional paper menu into a digital marketing channel and enables restaurants to cater and market to shifting consumer needs.

• Filter the menu to items that meet your preferences. For example, if you are a vegan or looking for a gluten-free dish, your personal menu with additional ingredient related details will be shown.
• Select items for your order.
• Estimate your bill, calculate the tip, split with your group.
• Add items to your wishlist or favorites.
• Keep your menu and selection history.

The Dyjit team selected the Appery.io lowcode platform to build and launch their first mobile app.

The Appery.io visual App Builder allows building the app UI 3-4 times faster than using traditional tools.

The Appery.io platform also provides out-of-the-box, integrated backend services such as a cloud database, Server Code for app logic and Push Notifications. This means you don’t need to look for any other backend services and can build and test the entire app quickly and with less resources. The platform enables building a complete mobile app fast, without needing to have a traditional development team.

The app UI was quickly built using the Appery.io App Builder for jQuery Mobile. On the backend, the app leverages the Appery.io Database and Server Code for custom app logic. Running the app on the Appery.io platform will enable the Dyjit team to easily scale the app to any number of backend API calls without lifting a finger. And that’s precisely the reason why the Dyjit team selected the Appery.io platform – it enables them to spend time building their product without worrying about app infrastructure and tooling.

Knowye is available in the Apple and Android app stores and piloting at Heartland Brewery in New York’s Port Authority. Follow knowye’s progress on their Facebook page.

Bon appetite!

Appery.io had a strong 2016 and inches closer and closer to 400,000 developers. At the same time, the constant platform updates we roll out add more benefits, services, features, and options. Even without the constant updates, supporting a platform with so many developers would not be a simple task. Our platform has to be ready for continuous updates, increased load, and new user requests and requirements.

We want to provide high SLA level services and avoid unexpected slowdowns and downtimes for customers’ apps even during peak hours. To provide the required scalability and resilience, we rely on industry leader Amazon Web Services and its various features such as Auto Scaling, Launch Configurations, and CloudWatch.

In this blog post you will learn how exactly we ensure scalability and resilience for Appery.io API Express and Server Code services.

Read the rest of this entry »

We are happy to share that the Appery.io platform now has support for the IPv6 protocol. In case you don’t know what IPv6 is, you can read more about it here. IPv6 is is the most recent version of the Internet Protocol (IP) and Apple requires all apps to support this network protocol. This means that an app published to the App Store has to use IPv6 network protocol to communicate with the app backend. That’s why this support is important. Our goal has always been to support all the latest and modern features, technologies and requirements on the Appery.io platform.

Now you get all the benefits of using IPv6 network with Appery.io Backend Services:

• API Express
• Server Code
• Database
• Auto-update

The above services now all support IPv6, you can still use the old IPv4 version as well.

IPv6 support information

You can also check out IPv6 validation for api.appery.io.

IPv6 support is important as it allows to submit apps to the Apple App Store. This is just the first phase where IPv6 is supported for communication between app and backend services. The second phase will include IPv6 support to external services from Appery.io Backend Services such as API Express or Server Code.

Validating an email entered on a form is one of the most fundamental requirements in any mobile app. In this blog post, we are going to show you how to validate an email input field using a regular expression. This blog post is a follow-up to How to Add JavaScript Form Validation to a Mobile App post.

Validating an email input field using a regular expression is very simple. Here is the code to perform email validation.

// Read a value from the email input component.
// Apperyio() is a quick wrapper for a jQuery select
// emailInput is the name of the UI component
// It's possible to use jQuery directly as well
var emailInput = Apperyio("emailInput").val();

// Regular expression to validate email input value
var re = /^(([^()[\]\\.,;:\s@\"]+(\.[^()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var test = re.test(emailInput);

// condition check part
if(test) {
    alert ("Everything is good.");
}
else {
    alert("Invalid email entered. Please try again.");
}

You can quickly add this code to any app inside a JavaScript file and reuse. Looking for more examples and how-tos? Check out YouTube channel for large number of short videos.

reCAPTCHA is a nice service that usually added to a registration form and helps prevent bots from registering automatically. The service usually displays a small and easy challenge to a human but which would be difficult for a bot to answer. In this blog post we are going to show you how to add reCAPTCHA to an Ionic app.

Let’s start.

1. Create a new Ionic app based on Ionic Blank template.
2. Go to https://github.com/vividcortex/angular-recaptcha, download vcRecaptcha.js, and unzip the file.
3. Inside the App  Builder, go Create New > JavaScript, name it vcRecaptcha, check Upload from file and select the angular-recaptcha.js file from your drive. For type, select Angular module and click Create JavaScript.
4. Now, open Screen1 and add an HTML component to the page.
5. Under the Properties panel, click Edit and add the following code:

   <div vc-recaptcha key="'XXXXXXXX'" on-success="onSuccess()"></div>
   

   where 'XXXXXXXXX' is the key generated on https://www.google.com/recaptcha/admin (your key must be inside the double quotes).

6. Switch to Scope view and add a new function, name it onSuccess, and add the following code to the editor:

   Apperyio.navigateTo("Success");

   onSuccess() is the scope function that executes when the correct Captcha is entered (here, another page will open).

7. To demonstrate this, create a new page and name it Success. Add a Text component to the page and paste Welcome! for its Text property.
8. Also, if you want to add a solving annotating images to your reCaptcha, go to Project > Routing, click Manage dependencies for Screen1, and check reCaptcha.

That’s it. You are ready to test your app with the reCAPTCHA.

reCaptcha example.

Looking for more examples? Check out our sample apps list. Every app has preconfigured app UI and app backend for you to try.

Hi there – this is John, Appery.io CEO.

There has been a fair amount of discussion on the recent change in pricing for the Appery.io platform. I do want to assure you all that we are reading, listening, and we do understand the concern. We are grandfathering existing customers to their plans, but even without that, the change would actually affect a very small number of our customers as our platform is very efficient in the use of API calls, etc..

These changes should only impact a few of our customers that have the higher levels of consumption and need high levels of support and SLAs. For those customers you can contact us and we can work with you on an appropriate business model.

For the vast majority of customers, the only effect is that you will end each month having consumed 50% or 75% of the allowance versus an extremely small percentage.

By doing this, we are moving our high consumption customers to appropriate plans so that performance and quality of service is maintained for all. Please post any comments or questions and I will be happy to answer them.

When building an Ionic/AngularJS app with the Appery.io App Builder you can add an HTML component to play back video files.

In this tutorial, you will learn how to do this.

To start, you need to create a new Ionic app.

1. Drag an HTML component to the page and click Edit to modify the code.
2. Add the following to the tag editor:

   <video controls="controls" width="640" height="340" name="Video Name" ></video>

   

   Edited HTML tag

3. Save it and switch to the SCOPE tab.
4. For the init() function, pass the following:

   $scope.makeAction();

5. Now, create a new function and name it makeAction and add the next code, replacing urlToVideo with the URL of the video you need to play:

   var vidURL = "urlToVideo";
   var myVideo = document.getElementsByTagName('video')[0];
   myVideo.src = vidURL;
   myVideo.load();
   myVideo.play();

Below is the example of playing back the video with URL = http://clips.vorwaerts-gmbh.de/VfE_html5.mp4:

Sample video playback with embedded player

Note that some HTML video may be unavailable for playback.

Validating user input is one of the most important requirements in a mobile app. The most common approach of form validation requires that you check the form fields before the form is submitted; this is to make sure that the required information is supplied. Today we will show you how you can validate the input fields in your app before submitting the information to the Appery.io Database.

In this example the app will have following simple design:

Form app design

Read the rest of this entry »

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.