How to Build a Sample Ionic 3 Search App

Posted: February 28th, 2019Author: , and

This is a continuation of the post How to Build a Sample Ionic 3 List App. In this document, we will provide step-by-step instructions on modifying your Ionic 3 list app so that data can be shared between its pages.

Remember, you can only proceed with the steps in this post only after you have made sure the application from the previous post works as expected.

  1. To begin with, go to the Databases tab and open the database to be used in the app. Make sure the needed collection has a column of string type named description. If needed, create it by clicking the +Col button and filling it with data:
  2. Once done, switch to the Apps tab and open the Sample Ionic 3 app created in the previous blog post. In the Project view tree, click Model. There, define the models so that they look like the following (note that, here, the SingleItem model is renamed to Item):
  3. A Query service from the collection should be imported in this step: Create new > Database Service; in the new window, select the database and check the Query service checkbox of the needed collection. Click Import selected services to confirm: The subfolder with the corresponding name should now have been added to the Services folder in the Project view tree.
  4. It is time to add a new pageCreate new > Page, set the page name to Details, and confirm by clicking Create Page.
  5. Under the PROPERTIES tab, change the Navbar Text component to Details.
  6. Drag and drop a Text component on the page and define its Text property as {{name}} selecting h1 for the Container property.
  7. Now, add another Text component to the page and set its Text property to {{description}}:
  8. Switch to the CODE tab, click Edit internal includes, and, in the pop-up window, scroll down to find { NavParams } from “ionic-angular”. Then check it and confirm the selection by clicking Save:
  9. Then, proceed to the Variables section adding and defining variables as follows (ensure the private navParams variable is checked in the Add DI checkbox):
  10. To finish with the Details page, add a new function to it, name it constructor, and define it with this JavaScript code:
  11. In the next step, some changes to the existing List page should be made. So, in the DESIGN view, under the PROPERTIES tab, select the Navbar Text component and rename it to List.
  12. Now, place the Input component on the page and define its [(ngModel)] property as query.
  13. Modify the existing List item by adding a new attribute (click)navCtrl.push(“Details”, item):
  14. Rename the Button Text property to SEARCH and change its (click) attribute to search() that will initiate navigation to the other page (Details) of the app (if you decide to keep the list functionality in the new app, create a new button for search so that there will be two of them):
  15. Once done, open the CODE tab and click Edit internal includes. Check 2 dependencies: { NavController } from “ionic-angular” and your added query dependency (the last on the dependencies list) in the Dependencies pop-up window. The List service can be unchecked now if not used for the modified app.
  16. Save. The services with the corresponding names should now be added under Internal includes:
  17. After that, add 2 variables: query of type String and queryService of the type of your query service (added to Internal includes). Make sure the Add DI checkboxes for private navCtrl and queryService variables are checked. (Delete the listService variable if it will not be used in the app.)
  18. Finally, add a function to the page named search and define it with this JavaScript code (the loadList function will not be used so it can be deleted):

    Voilà!

    The app is ready for testing. Click the arrow button next to the Test menu item. In the drop-down, select Show without frame and click Launch. The List page will be loaded. Enter the name of the item from your database collection (for example, Coat) and click SEARCH. The item Coat will be returned on the page. Then, click this item to open the Details page with the item description:

    Note: You might also want to leave the List service functionality created earlier. In this case, both List and Query services should work as expected.

How to Build a Sample Ionic 3 List App

Posted: February 9th, 2019Author: , and

This post will describe step-by-step how to build a sample app with Ionic 3 that will retrieve a list from your database collection.

  1. Create a new Ionic 3 app. From the Apps page, click Create new app > Ionic 3 (beta), give it a name, and click Create.
  2. Import the List service from any existing or newly created Appery.io database collection. Create new > Database Service, select the needed database and check the List service checkbox confirming import.
    The subfolder with the corresponding name should now have been added to the Services folder in the Project view tree.
  3. Add a model called SingleItem of type Object and 2 attributes: name and _id. Then, add the Items model of Array type and define it in the following way:
  4. Open Pages and rename Screen1 to List using the “cog” sign.
  5. Under the DESIGN tab, add a List component to the List page and delete the 2nd and 3rd items on the list.
  6. Select the List item and add the property *ngFor=let item of items. Also, set the Text property to {{item.name}}.
  7. Now, add a Button component to the page, select it, and define its Text property as Load List and (click) property as loadList().
  8. Switch to the CODE tab, click Edit internal includes, check your added list service, and save:The service with the corresponding name should now be added under Internal includes.
  9. Add 2 variables: items of type Items and listService of the type of your list service (added to Internal includes). Check the Add DI checkbox for listService.
  10. Finally, add a function, name it loadList, and define it with this JavaScript code:

Voilà!

You can now test your app. To do so, click the arrow button next to the Test menu item. In the drop-down, select Show without frame and click Launch. The page will be loaded. Now, click the Load list button. The list appears loaded with the items from the database:Note: To learn how this app can be modified to search and share data across its pages, proceed with this post.

How to Convert Phone Numbers Into Real Business Data with EveryoneAPI

Posted: June 6th, 2017Author:

EveryoneAPI by Telo allows to convert a phone number into real business intelligence with a simple API request. The complete reverse phone append product is simple to use, yet powerful and built for developers by developers. As you probably already know, integrating with any 3rd party REST API using the Appery.io Server Code is also simple. In this blog post, I will show you how to invoke a test a script that calls the Everyone API.

To start, create a new Server Code script with the following code:

The only thing you need to do, is to replace the auth_token and account_sid with values from your account. Sign up for an account here. It’s fast and simple.

The phone number for which you want to get information is passed as a parameter to the script (line 1). To test the script, switch to Script parameter tab (on the right side), enter a parameter called telephone and then set it to a test value. Here is an example testing the API using the Appery.io telephone number:

Server Code script

Server Code script

Once you finished and tested the script, you easily import into your app. This video shows how to do that.

Looking for more APIs by Telo? Check out the CallerID Server Code plug-in:

Plug-ins

Plug-ins

This plug-in creates a Server Code script that integrates with OpenCNAM API. The OpenCNAM API allows you to get caller ID information for phone number provided.

How to Build an App with Infinite Scroll

Posted: July 21st, 2015Author: and

One of the core benefits Appery.io platforms provides is the ability to customize any app with custom code. While the visual builder offers speed and simplicity, being able to write code, add 3rd party libraries gives you the flexibility you need to customize the app as much as you need. In this example we are going to show you how to build an app with infinite scroll feature — as you scroll down, list data will be automatically loaded.

You will create an app that loads a list of dog breads. As you scroll in the app, the data will be loaded automatically. The app looks like this:

App with infinite scroll

App with infinite scroll

Read the rest of this entry »