Blog

In the past, each hospital department was in charge of ordering and maintaining its own inventory. This approach was inefficient and costly. In more recent times, a centralized supply chain management approach based on numerous process automations has become more prominent. As a result, technology has started to play an even more prominent role in transport and inventory management as well as in supplier relations. Nowadays, hospitals tend to switch to a dedicated all-in-one inventory system.

Our client, a not-for-profit healthcare network that includes hospitals and other medical divisions, recently introduced an Appery.io-based modern inventory system that consists of Par Counting, Express Issue, and Package Tracking applications:

Par Counting

Making sure that items are always in stock is a critical task for a hospital warehouse. With this application, counting of stock items has become much easier. Scanning with a fast hardware barcode scanner, counting per cart, filtering, sorting and focusing on critical items, and offline automatic synchronization are a few key features in the application.

Express Issue

Express Issue automates issuing products from an inventory while simultaneously decrementing the count of processed inventory and charging the department requesting that product.

Package Tracking

Whether it’s a flower bouquet or a vendor track shipment, each package is supplied with an internal barcode to go through the different workflow stages to the addressee. Also, the tracking application allows fast debiting (via a fast barcode scanner and a portable printer), transparent routing, and digital signing on receiving.

Benefiting from Technology

Thanks to the Appery.io platform support for hybrid apps, these applications require next-to-no modifications to run on both iOS and Android devices as well as in Web browsers. This makes the development price tag much lower.

In addition, Appery.io API Express streamlined Vuetura-supported communication as well as cost-effectively integrating these applications with legacy back-end systems such as PeopleSoft, Active Directory, and other databases. Because of this, both operation and maintenance costs are projected to go down. Moreover, the Appery.io out-of-the box offline synchronization feature saved a lot in infrastructure upgrade cost.

Leading in Digital Transformation

As rising expenses threaten the viability of traditional healthcare distribution methods, this healthcare network continues to show the way in digital transformation with its focus on supply chain fundamentals.

We are constantly working to improve our platform, and now we are pleased to announce that the performance of our backend services will increase significantly with the new update, which will be rolled out into production in a few days. We carefully investigated and integrated GrallVM, just finished version 1.0.0-rc14 Alpha and Beta testing, and now we are ready to present a new version of GrallVM 19.0.0!

Basic Thesis

PWA works only in SSL secured mode. Therefore you need to use URL to your App only with HTTPS protocol.

All resources in your application should be also set as HTTPS.

In case of using at least one HTTP resource, your app will not be considered as a PWA.

Your app should be published on a custom domain. For this, you need to open your app on the “General”  tab and scroll down to “Hosting” options. There you can set your own domain or a subdomain of “.app.appery.io” to host your app.
Note: every time you have made changes in your App you need to click “Publish” button to make it available on the published domain.

PWA Activation

Open Project -> App settings -> PWA.

Click on the checkbox “Enable PWA publishing” to enable PWA in your Appery.io app.

Set  “Label”, “Short label” and “Description” for your PWA application.

Set at least one type of icon for your PWA app. Please note that only appropriate size .png files are accepted as icons in this interface.

Route handlers (rare case)

This part of PWA options is used to control custom resources loading. There are two ways to load resources. By network and by the cache. There is also a combination of these ways.

You can not control Appery.io builtin resources, you can only control custom resources. Let’s try how it works:

1. Add an image component to your application.
2. Use custom URL (not from media manager) for this image. Note, it should be HTTPS, as well as all other resources in your app.
3. Open PWA settings and set appropriate resource URL and needed network strategy.
   

How to test PWA:

First, run your App:

1. Open your browser and load your App by using your custom domain URL.
2. Open browser debugger (usually, by clicking F12 button).
3. Navigate to debugger “Application” tab.
   
4. Click on “/manifest.json” to check your App current manifest JSON file.
   
5. Set other parameters on “Manifest” tab. There should be no any errors and warning.
6. Navigate to “Service workers” tab.
7. There should be information about current service worker and its’ state. Like “#5557 activated and is running”. It does mean “Service worker with identifier 5557 installed and currently activated”.
   

If you need to make changes in your App (change label, add button etc.) you should save changes first.

Then click “Publish” App to publish a new version on the current custom domain. Wait until publishing process will succeed.

Update your App in a previously opened window.

In “debugger->Application->Service workers” you will see the current worker is set an old one. And the new worker is installed but is waiting for something. You will notice there are no changes on the page you have made previously.

To activate new service worker you need to click on “Skip waiting” in the debugger.

Close all tabs which are using this service worker in the browser (usually, all tabs with this URL should be closed).
After this, you need to open a new tab and load application URL here again. Then open debugger on “Application” tab and you will see the new service worker active.

In this post, you will learn how to add information to a pop-up in an Ionic application.

Setting Up the App

To start with, let’s create a new Ionic app.

1. From the Apps page, click Create new app > Ionic, give it a name, and click Create.
2. Open Pages and go to Screen1. Under the DESIGN tab, add a Text component to the page, select it, and define its Text property as Username: {{username}}.
3. Next, drag and drop an Input component to the page and set username as its ng-model.
4. Add one more component to the Screen1 page, a Button with Text: Edit and ng-click: edit().

   The page UI should look like this:

5. Now, in the Project view, open the Project > Model tab, create a new model of Object type, and name it Global. Add a string parameter to it named username: 
6. Next, add a new variable, name it global, and select Global for Type under the SCOPE tab of the index page: 
7. After that, switch to the Screen1 page, and under the SCOPE tab, add a new scope function named edit and provide it with the following code where the added global variable in the template of the popup is defined:

   $scope.global.username = $scope.username;
   var $ionicPopup = Apperyio.get("$ionicPopup"); 
   var alertPopup = $ionicPopup.alert({ 
       title: 'Edit username',
       template: '<input type="text" ng-model="global.username"/>',
       scope: $scope,
        buttons: [{
           text: 'OK',
           type: 'button-positive',
           onTap: function() {
               $scope.username = $scope.global.username;
               return;
           }
           
       },
       {
           text: 'Cancel',
           onTap: function(e) {
               return;
           }
       }]});

   Note, that in the code, any title can be provided and any HTML code can be added for template.

And…we are done!

Using the App

Now, to check the app, click Test. In a new window, put in Jane for Username and click Edit. The popup with this username will appear:

To enter a different name, just type it in and confirm by clicking OK. The local variable will be modified and the output can be instantly seen:

BTW: If you are into customizing your UI, here is a piece of good news. You can easily customize the looks of your pop-up:

We would like to provide you with information about our May release. We have only one new feature, but what a feature—Ionic 4!

The latest, most powerful version of the popular framework will be available for Appery.io next week. It’s packed with exciting new features that made waiting worthwhile! Appery.io Ionic 4 framework supports the latest Angular version 7 and Cordova 8. It will be released as a beta, because we plan to continue working on it and add new features and components.

Please note that Ionic 3 support will be canceled once the Ionic 4 beta period is finished, but before then you’ll have plenty of opportunity to update your Ionic 3 projects to version 4.

A piece of good news for the users who were interested in combining Login-Registration App and IndexedDB Storage but lacked information on how that can be done practically!

The Appery.io team would like to bring to your attention that a new tutorial has been published that provides step-by-step instructions on building an app that will get user images from the custom Files collection and make them available when the device is in offline mode.

The tutorial describes in details how one can save a set of images from Appery.io Files collection into IndexedDB cache with further making them available to users when the app goes offline.

Besides, it presents the list of functions provided by the IndexedDB Storage plugin which was introduced in Appery.io builder for your convenience:

A very interesting detail: this sample app can be published either as a regular iOS and/or Android app or as a PWA website.

Enjoy your programming with Appery.io!

This short tutorial will show you how to save images from your device camera into Appery.io database.

1. Create a new Ionic project and database.
2. Add the Camera Service plug-in and File Upload App plug-in into the project by going to Project > CREATE NEW > From Plug-in, in the Builder.
3. Create a page CameraPage with 2 buttons Camera and Upload with corresponding attributes and the component Image to display the result:
   
4. On the Scope tab add this code for the Camera button:

   var requestData = {};
   Apperyio.get("Camera_getPicture")(requestData).then(
   function(success){
       $scope.im.image = success.image;
       $scope.$apply(); 
   },
   function(error){
   });

   

5. Then, add this code for the Upload button:

   function dataURLtoFile(dataurl, filename) {
   var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
   bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
   while(n--){
   u8arr[n] = bstr.charCodeAt(n);
   }
   return new File([u8arr], filename, {type:mime});
   }
   
   var filepointer = dataURLtoFile($scope.im.image, 'test.png');
   $scope.files.push({filename:"test.png", filepointer: filepointer});
   
   
   if ($scope.files.length === 0) {
   alert('No file for upload');
   return;
   }
   
   var requestData = Apperyio.EntityAPI('FileDB__files_upload_service.request');
   var user_scope = $scope.user;
   var files_scope = $scope.files;
   var formData = new FormData();
   requestData.data = _.pluck($scope.files, 'filepointer');
   
   Apperyio.get("FileDB__files_upload_service")(requestData).then(
   
   function(success){
   alert('All files has been successfully uploaded.');
   },
   function(error){
   
   },
   function(notify){
   
   });

6. Finally, enter tour database_id and master_key in  FileDB_settings:

And, that’s it! (Please remember that this app should be tested on a real device.)

Our Appery.io Tester App for iOS has been updated and now includes the new Cordova version.

Release Highlights:

• Cordova iOS 4.5.5
• Added Ionic 3 support
• fix minor bugs

Update or re-install Appery.io Tester App on your device. In our upcoming Appery.io release, we will update both Android and iOS Cordova platforms versions.

Our March platform update rolls out on March 10. It will be focused on support for progressive web apps (PWAs).

PWAs are a new software development technology. Like other hybrid solutions (Cordova, Electron, etc), PWAs work seamlessly on desktop, mobile, and tablets using a single source codebase.

“Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.” © Wikipedia

If you are still using a classic hybrid application, you have to  make a build for every platform you want to support and then distribute your application to an app market like Google Play or App Store. That means you need to register a developer account, buy platform-specific hardware and software, build and test your application for every platform, and then publish your application to the market. Once done, your application can be removed from the application market by a vendor if it doesn’t pass their review processes.

A PWA has the advantage that you are the only person who manages your application. All you need to publish your application is to be the host. If you are an Appery.io customer, you can do this in just a few clicks. Below, we describe how to do this.

Here is a checklist from the Google Developers site that walks you through how to convert existing apps to PWAs. With Appery.io, it’s not necessary to do this, but this is a helpful resource just in case.

We have added a PWA option for all project types supported by Appery.io. You don’t need to change any code in your existing app to make it a PWA.

Just open your app in the AppBuilder and configure the PWA settings like application name, icon, background color, etc.

The next step would be publishing your app.

PWA App Publishing.

Now, anyone who opens your app published in a web browser on a mobile device will be able to add it to the launch screen without installing it from the application market.

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 page: Create 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:

    this.name = (this.navParams.get('name') || "").toString();
    this.description = (this.navParams.get('description') || "").toString();

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):

    let query = this.query || "";
    
    this.queryService.execute({ // change 'MerchandiseDB_New_InStock_query_service' to actual variable name//
        data: {
        },
        params: {
            where: JSON.stringify({name:{ $regex: query, $options: "i"}})
        },
        headers: {}
    }).subscribe(
        (res: any) => {
            this.items = res
        },
        (err: any) => {
            console.log(err)
        }
    )
    

    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.