Passing Data from Modal to Parent

Posted: July 25th, 2017Author:

Today we’ll show you a small example of how to pass data from a modal to its parent.

  1. Create a model as shown in the screenshot below:

    Create Model

    Create Model

  2. Then, define a scope variable “user”, based on this model on the index page.
  3. Create a simple page to run the modal and show the global variable “user” like this:

    Screen page

    Screen page

  4. Create a simple modal with the same structure as the page above (to show the variable “user” and change its property):

    Modal page

    Modal page

  5. Open the modal you’ve created from the page of your application with the JavaScript code below:

That’s it! Now you can run the application. You can change the user’s name on the page and see its value on the modal. Go ahead. Change the user’s address on the modal and see this value displayed on the page.

How to Build a Cordova App Fast

Posted: June 12th, 2017Author:

One of the core components in Appery.io platform is a cloud build service which builds a binary file (hybrid) for iOS or Android. Appery.io leverages Apache Cordova (PhoneGap) to create a binary file. Launching the build process is very simple. Right from inside the App builder, clicking the Export button you will see the option to create a binary file for iOS or Android.

Export menu

Export menu

Once Binary (.ipa) or Binary (.apk) is selected, the build process starts. The build process usually takes one minute. When the build is completed, the file is downloaded to your computer. From there you can publish the app to an app store, using the standard publishing process for each store.

Learn more about how to use Apache Cordova in Appery.io to build hybrid apps and use native APIs.

How to Add reCAPTCHA to an Ionic App

Posted: September 15th, 2016Author: and

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:

    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:

    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

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.

How to Install and Use the Cordova Background Plugin for Route Tracking

Posted: December 21st, 2015Author: and

Every Appery.io app comes with the Apache Cordova library automatically installed. This means you have access to default Cordova APIs such as Camera, Contacts, Geolocation, and more. Many users also wanted to add 3rd-party Cordova plugins to the app. To make this process very simple, we’ve added a simple wizard. In this tutorial you are going to learn how to upload a Cordova plugin to your app and use it. You will build an app that will track your route and draw it on a map. The app will do this in the background. (This is a popular feature in fitness apps.)

Read the rest of this entry »

How to Query a Database by Date

Posted: June 25th, 2015Author: and

Screen Shot 2015-06-25 at 1.28.03 PM

Selecting a date via a Datepicker component and querying a database by date is one of the most common tasks a mobile app will do. With Appery.io’s out-of-the-box cloud database and auto-generated APIs, querying the database is fast and simple.

Read the rest of this entry »