Get Our Restaurant Template to Create Your Great Mobile App

We, at Appery.io, appreciate good cuisine so we set our minds on creating a simple Restaurant Template that can be of help to those small businesses who struggle to create their own restaurant management app.

There is no need to say that organizing a restaurant business and managing it effectively is a tough endeavor. Sad but true: even if you are a great chef and feel confident in your kitchen, even if your cooking skills are nothing but genius and all your guests are dying to try your culinary delights, there is still a big chance that your business will not succeed. And if you feel that you can’t do without a good restaurant management app perfectly tailored to your business environment, consider using our free and easily customizable Restaurant App template!

Goals we set for our Restaurant template

The requirements that we set for this app template were:

  • the template must be simple enough to be easily customizable by a non-developer
  • creating and managing the mobile app from the template should be quick to do and not break the bank
  • the app should have attractive UI and be intuitively easy to use
  • it must be available for both iOS and Android devices
  • the app must be easily maintainable and can be run from anywhere and anytime

Results we obtained

Now, when the app template is released and ready to be used, we would love you to try it yourselves.

This is really easy to do: simply click this link and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it. In a moment, you’ll have an app with a Menu page listing sample restaurant meals:

Restaurant template

 Restaurant template

The app also has the default About Us page and you will not need to invest much time to adapt it to your needs:

 Customizable About us page

The only prerequisite needed to start creating your first mobile application is being a registered Appery.io user. And if you are still hesitant about whether it is worth it, please be informed that you are welcome to sign up for free and make your final decision after two weeks of the trial period.

We also prepared a detailed step-by-step document for those who are interested in customizing the offered app sample. Follow it to see how easy it is to modify the app template and make it look like this:

Customized app template

Hopefully, the set goals were all reached and now you are a step closer to the mobile restaurant app of your dream! With this app, you will not be limited by a small start-up budget and will not need to be an experienced developer to modify the About Us page on the fly or quickly add mouthwatering meals to the Menu.

 

Bon appétit!

Adding Social Sharing to Your Arsenal is Easy with Appery.io!

Social networking has been gaining in popularity in recent years; and so has social sharing. At the moment, this feature is an integral part of any successful mobile app, in particular the ones meant to deliver their mission to as many people as possible.

With Appery.io, you can significatly simplify integrating the Social sharing feature into your mobile app and involve a wide audience by adding Cordova SocialSharing plug-in. And the beauty behind it is that creating such an app is just a matter of several clicks!

Moreover, for your convenience, we created a ready-to-go sample app, Ionic 5 Social Sharing plug-in Sample App, that can be used to share links, images, and text messages out of the app on social platforms or by email.

The best of it is that to get the sample app working on your device, you do not even need to create the app. You can simply use our Appery.io Tester app (it is free and available for both iOS and Android) to scan the sample app QR code we already generated for you and run it on your device:

Social Sharing Plug-in App QR Code
Also, before starting the app make sure you have the needed app(s) (Twitter, Facebook, Instagram, email app, etc) installed on your mobile phone:

 

 

But if you would lke to go further and learn all the ins and outs of how it was created, you are free to follow the detailed tutorial. Also, you can try it by recreating the app from the backup (note that you will need to be registered as an Appery.io user to do it).

New to Appery.io and do not know where to start? You might find our Getting started series or step-by-step quick start tutorials useful.

PS A great tip from the Appery.io Team: it’s easiest to start developing by following our educational video guide.

Interested? Then click below to sign up and feel free to experiment with many more our sample apps out there.

We’re Happy to Announce a New App Builder Release!

We are happy to announce that our new App Builder release is live now! And this time it comes with a handful of new features, cool enhancements and platform updates.

We hope you will enjoy all the new features, improvements, and updates listed below:

  • Appery.io Educational Video Guide where you will learn how to create a stunning UI for your very first mobile app, get help on how to add the needed features, debug and test it, and much more…

  • In conformity with the regulation from Google Play requiring that all apps meet target API level 31 (Android 12), all Android built apps were successfully migrated to Android 12. No additional actions on your part are required.
  • Also, uploading custom launch images was discontinued in Android 12 as the system will always apply the new Android system default splash screen on cold and warm starts for all apps. Please check here for more details.
  • Auto Generation of iOS certificates was added to our platform which will significantly simplify building your apps for iOS.

  • A brand new FilePicker core component that allows you to quickly add file selection to your app.

  • Creating new app themes is now made easier and more user-friendly.

  • Please be informed that support of the projects created with Ionic 4 was discontinued. In this regard, we recommend that you consider effortless migrating your Ionic 4 project(s) to their Ionic 5 version. You are welcome to check out this page to learn how to do it.
  • And, finally, we would like to remind you that many of the 3rd party custom Cordova plug-ins that were prevoiusly released, but not timeously updated by their creators, can be broken or outdated and therefore not work as expected. Therefore, please be aware that every app created in Appery.io comes with Apache Cordova library installed and our users are free to add both plug-in types to their app(s):

    – Preconfigured Appery.io Cordova plug-ins (Core Cordova Plug-ins) that are verified to be up-to-date;

    Custom Cordova plug-ins installed independently. Unfortunately, some of these may not be compatible with the latest technologies which is an issue beyond our control and may require additional troubleshooting. You may consider purchasing one of our Support Pack services if you need help with integrating custom Cordova plug-in(s) into your app.

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Highly Rated and Most Popular Software In Low Code Development Award!

We are happy to share a piece of great news announcing that Appery.io has been awarded two more prizes as the best SaaS Low-code development product globally and recognized as

  • Top 10 Highly Rated Software in Low Code Development Platforms for Q3 2022

and

  • Top 10 Most Popular Software in Low Code Development Platforms for Q3 2022: 

Both awards were showcased on our SaaSworthy profile so you are welcome to check it out!

We greatly appreciate this acknowledgement of our contribution and would like to use this opportunity to say thanks to you, our Appery.io community, as we could not have done it without your incredible support and valuable feedback.

You are awesome! This is you that will motivate us to continue working hard to make you low-code development more enjoyable and productive!

Happy developing!

 

PS: And if you are still not with us, join our community and try building your first mobile app for free:

Collecting Your App Statistics is Now Easy with Our Google Analytics Plug-in

We are happy to announce that the updated Google Analytics plug-in is live now and ready to be used with no restrictions for building your mobile applications. Any Appery.io user (including those enjoying their 14-day free Trial subscription) can now add it to their Ionic 5 app(s).  What is extra – it can be added in no time at all and will work on both iOS and Android devices! This makes adding the option of collecting different statistical information about how your app is used even simpler!

So, if you like the idea of adding this functionality to your Ionic 5 project(s), you are highly welcome to do that by creating your mobile app with Appery.io with importing the Google Analytics plug-in from the Catalog of Appery.io plugins:

And just in case you are unaware of the fact that we offer so many different out-of-the-box example apps that can be easily added to your Ionic 5 project, please visit our Appery.io Plug-ins Categories page.

PS  As a gesture of goodwill, we have also created this step-by-step tutorial for you to make your development experience even more positive and productive.

Happy developing!

Need Internationalization In Your Appery Apps? Happy To Help!

Considering how you can quickly make your mobile app support different languages? Or need to make your online store app easily adapted to specific local languages tht will definitely increase the profit? And, of course, you want to add more value to your project without investing much development time? We have the simple and fast solution that can help: apply the Internationalization feature to your Appery.io project(s).

We are happy to let you know that you can now try our sample app created to demonstrate the multilingual Ionic 5 mobile app built with Appery.io using ngx-translate third-party Internationalization (i18n) library.

And even more than that: you not only have the option to follow the instructions in order to get the working app, but also use the one-click-away option to install the fully functioning Ionic 5 app.

Well, actually, all you need to do is simply click this link and in a moment, your app is ready to start!

To test it, try clicking the language switching buttons in the header along with clicking the SUBMIT YOUR FEEDBACK button:

And last but not least: 

You can also try the magnificent option of quick testing the app on your device: use our Appery.io Tester app. The app is absolutely free and available for both iOS and Android.

Doing this is super easy – just install the Tester app on your device, run it and scan the code below to enjoy the app on the device:

Happy developing!

Grab New Features Introduced with our Midsummer Release

Last Sunday, the Appery.io Team came out with a new, midsummer, release packed with the following useful features:

  • The JQM lib version updated to 5.4 that includes the latest version of jquery (3.6.0), so that you can now make sure your JQM projects are published to app stores without any security warnings.
  • All you need to do is simply update your app lib version by selecting it under App settings > Resources > Libraries version:
Please note that the .size() method has been removed in jQuery 3.0. So, if your JQM project uses this method, you will need to replace it with the .length property to refer to the number of elements in the jQuery object.
  • A new, simplified look for the Templates tab. Now, creating new app from our ready-to-go-with and fully functioning Appery.io app templates is even simpler:

 

  • Another new option that allows setting the default values for app storages:

Also, this release traditionally introduces some extra updates and minor bugfixes that will hopefully make your development routine even more user-friendlier.

Well, this is it for now but please stay tuned – we have more exciting features in store!

How to Never Miss Important Messages in Push Chats

In this post, we will guide you on how to create a Push Notification sounds mobile app where no messages will be missed.

Actually, we will create a chat app that will receive messages from push notifications. No one should miss our messages, so we’ll make them loud enough with special sounds!

Let’s do it using Appery.io so it doesn’t matter if your friend uses iPhone or Android, they can use your app anyway!

Creating push project from backup and customizing it

You know what? We have already prepared this project for you, so you can grab .zip file from here and open it in Appery.io and we will walk through you this project to explain how to customize it and how it works from the inside.

1. To do this, choose Create new app > From Backup, then select the downloaded .zip file, click Create, and wait a bit while Appery.io creates the project for you.

If you have any questions, you can learn everything you need and more about restoring Appery.io projects from the documentation.

OK, great! Now you have a shiny new project in your Appery.io workspace! And it’s time to make it entirely yours.
2. First, click the Push button on the toolbar to be redirected to the Push Notifications > Settings page:

This awesome page already has the Enable Push Notifications checkbox checked, but you also need to select the database where the chatting devices will be registered.

Creating and linking database

3. If you have no database that will do, you will first need to create one that will be linked to our app: go to the Databases tab in the header and create a new database, for example PushChatDB:

4. Now, you can link it to our app on the Push Notifications > Settings page:5. After you confirm this operation, the database will be linked and you will be able to copy its Push API key to clipboard:

6. In your project, unfold the Services > Settings folder and paste the copied key into the PUSH_API_KEY value field:

Configuring Push settings

To configure other settings on the Push Notifications > Settings page, you need to complete the following configuration steps:

– Choose an ID for your app. If you plan to support iOS, please make sure your app ID matches the ID in your APNS certificate.

– Set Package name under the Project > App settings >Android binary tab to your app Bundle ID chosen in the previous step.

– Set Bundle ID under the Project > App settings > iOS Binary tab to your app ID as well:

– Set up Firebase Cloud Messaging Provider. Make sure the app package name in Firebase matches your app ID.

– Download Google Services JSON file and Firebase Admin SDK JSON file from Firebase and add them to Push Notifications > Settings page.

– To support push notifications on iOS, add your APNS Push Certificate and Certificate password in iOS settings.

Detailed instructions for above steps can be found on the Push Notifications Configuration page in Appery.io documentation.

App composition

Now, let’s go back to the App Builder and take a look at the app composition.

The app has 2 pages: SignUp and Chat, which are custom versions of the two predefined page templates (SignUp and Chat correspondingly), available via Create New > Page dialog.

SIgnUp page

The SignUp page has the userName input field, which is a storage variable defined in Project > Model and Storage > Storage:

This page also has the Page create event that fires the pageShow() function to check if this userName has already been registered and so the SignUp page can be skipped:

To view the pageShow() function, open the page CODE panel and select it:

 

let userName = await this.Apperyio.data.getStorage("userName");
if (userName) {
this.Apperyio.navigateTo("chat");
}

Chat page

The Chat page has the Push notification event that fires the notificationReceived(event) function to handle push notifications. Here we are forwarding the event to the pushChatService.receive(event) service and updating the messages list on the page:

If the app receives the Push notification event for the user that has not signed up yet, he will be redirected to the SignUp page:

 

await this.pushChatService.receive(event);
await this.updateMessages();

let userName = await this.Apperyio.data.getStorage("userName");
if (!userName) {
this.Apperyio.navigateTo("signup");
}

PushChat Service

Let’s take a look at the receive(event) service function that can be found under TypeScript > PushChatService. Here we need to handle several different situations:

 

Push message arrives with the app in background

In this case, the custom push notification sound will be played and the message will be displayed in the device’s notification center.

Our custom push notification sound file is called pushsound.wav. Switch to the Source tab, unfold the CORDOVA > resources folder and upload your custom sound file (should be prepared beforehand). Please note that to work on both iOS and Android the .wav format is recommended.

It is also recommended that this file is put into different folders for Android and iOS; this is handled on App settings > Cordova config tab.

For Android it will be:

<resource-file src="resources/pushsound.wav" target="app/src/main/res/raw/pushsound.wav"/>

For iOS the code is like this:

<resource-file src="resources/pushsound.wav" />

Push message arrives with the app in foreground

In this case, custom push notification sound will not be played and we have to play it ourselves from the `receive(event)` function in PushChatService that we assigned to handle the push notification request.

But how can we differentiate between the app in the background when the sound was already playing, and the app in the foreground, when we still need to play it?

Here, `event.additionalData.foreground` field comes to rescue, so we have the code:

var ext = event.sound.endsWith('.wav') ? '' : '.wav';
if (event.additionalData.foreground) {
var soundPath = "assets/static/" + event.sound;
var music = new Audio(soundPath + ext);
music.play();
}

To view it, open the ***PushChatService*** TS file and scroll down:

Sounds in Android vs sounds in iOS 

Finally, the app also handles the situation when event.sound is received without .wav extension on Android, but with this extension on iOS, so we add it if it’s missing. We also expect pushsound.wav to be in assets/static/ folder, so we go back to the Source tab and upload the pushsound.wav file to the IONIC/src/assets/static folder as well:

The remaining code in `receive(event)` function just saves the new message entry to local storage.

let messages = await this.Apperyio.data.getStorage("messages");
messages = messages || [];
messages.push({
time: new Date().toISOString(),
message: event.message,
user: event.title
});
await this.Apperyio.data.setStorage("messages", messages);

Sending push notifications

We have another function embedded into PushChatService named `send(text: string)` that sends push notifications to other devices registered in your database’s Devices collection. Registration happens automatically when the user opens the app for the first time.

Appery.io API to send push notifications is documented here.

Angular HttpClient was already imported in our PushChatService when we created it with Create new > TypeScript > Angular service. We can use it to send REST request to the Appery.io push notification server.

this.http.post < any > ('https://api.appery.io/rest/push/msg', {
"filter": {
"deviceID": {
"$ne": this.device.uuid
}
},
"payload": {
"title": userName,
"message": text,
"sound": "pushsound.wav",
"customData": {
"android_channel_id": "channel1"
},
"actionButtons": [],
"icon": "",
"color": "",
"image": "",
"launchImage": "",
"contentAvailable": false
}
}, {
headers: {
"X-Appery-Push-API-Key": pushApiKey,
"Content-Type": "application/json"
}
}).subscribe(data => {
console.log('-- push/msg result:', data);
});

Here, in the filter field, we indicate that we are pushes will be sent to every device except ours. We also specify android_channel_id for the sound. This Android sound channel is initialized in Push initialize event of the app module.

let channelName = 'channel1';

( < any > window).PushNotification.createChannel(
() => {
console.log('Push notification channel created:', channelName);
},
() => {
console.log('Error creating push notification channel:', channelName);
}, {
id: channelName,
sound: "pushsound",
description: channelName
}
);

Basically, that’s all. Now you can build an app for your Android or iOS phone, install it using a QR-code, and help a friend to do the same, and voila! You can send messages to each other!

Important! Be sure to turn off the Silent mode on iPhone, otherwise this little toggle on mobile will be muting your push notification sounds.

Summary

We took a look at push notification settings in Appery.io and explored the insides of a small but smart app that uses the push notification mechanism to create a chat.

Please check out the code in the attached project and let us know if you have any questions.

Happy coding with Appery.io!

Tester App: Just See How Easy It Is to Test the Ionic 5 App with Linked Cloud DB!

Quite recently, we’ve presented a great new option to easily test apps created with the Appery.io platform. Called Tester App, it’s a magnificent feature for Appery.io users, and we at Exadel hope that many users have already had a chance to try it out. But for those who are still unaware of it, we would like to use this post to give you a hand and demonstrate how easy and quick mobile app testing can be.

So, in this example, we will be testing our new Ionic 5 Binary Data sample app integrated with Appery.io Cloud DB (if you are interested in the details of how the app was created, please read here).

Getting Tester App

There is only one simple step that precedes testing itself, and that is downloading and installing the tester app from the appropriate app store: App Store and/or Google Play.

Tester App should download exactly like other apps on your mobile device, and the app icon should look like this:

Post image

All set: the app is here; you can start it on your device and proceed by scanning the generated code.

Generating QR Code

In this particular case, we have already generated the code for you but you are free to easily do so yourself for any of your apps:

Testing with our Tester App

The only step left is scanning the QR code with your device. So, just click the SCAN buton (the Scan tab opens by default but you can also find in the app footer):

Wait a couple of seconds to allow the app to load. When the app has loaded, you are free to try clicking all the buttons:

 
As you can see, the app looks good and functions well and the whole process took the fraction of the regular app testing time. Moreover, next time, the software will already be installed and reviewing the app will take even less of your precious development time.
 
Note that this sample app is linked to the test database and you will only be able to see the success toasts informing that the files have been uploaded.
If you want to get access to the added records from under the Databases tab, you will need to set up your own database and link it to your app (as described here).
 
 
 

Read the rest of this entry »

New Release: Upgraded Appery.io Tester and Live Debug Feature

We are excited to announce our new, May 2022, release reintroducing our upgraded Appery.io Tester app, with a brand new feature, Live Debug. We’re confident our Appery.io community is going to love it!

First thing first – our Appery.io Mobile Testing Tool:

This smart and handy testing app is live again and available for download from the App Store and/or Google Play. You’ll enjoy quick and effortless testing of your Appery.io apps on iOS and/or Android devices without needing to rebuild and then reinstall them each time a minor change is made.

Some time ago we closed our Appery.io Tester app support on both stores but our long-term users were emailing us requesting we bring back this handy and simple mobile app testing tool – offering encouraging positive feedback on the tool, and expressing disappointment that we’d removed it. And, as it has always been with Appery.io – 1) you asked … 2) we listened … and 3) … we acted!

Appery.io users who’ve already had a chance to use our testing app will undoubtedly welcome the upgraded version, but those who are fairly new to Appery.io and the Appery.io Tester app, really must read on… If your app has integrated API using native device features, there is no way it can be tested in the desktop web browser, so the only option is (sorry, was, as you now have two terrific options) to export the app by rebuilding its binary and then reinstall the app on the device – just to see how the updated UI and/or added functionality will look like and behave.

From now on, thanks to Appery.io testing tool, you will no longer need to rebuild and then reinstall the app each time a change is made – all you need to do is download and install the app from App Store and/or Google Play, run it on your device and click the SCAN button to scan the QR code you generated in our app builder.

As a bonus, you are free to organize the history of your tests and/or review the sample apps built with Appery.io.

Voilà! Isn’t testing your hybrid mobile app(s) so much easier now?

New Live Debug Feature

Another really great feature, Live Debug, has been added to our App Builder for testing and/or debugging your apps.

This is a game-changing feature for those users who, when developing with our platform, are going on a large scale with importing different custom Cordova plug-ins into their apps, but then having issues testing the complicated app functionality.

Before, you needed to 1) get the app version done, 2) export your app 3) install the app on the device, and only then 4) test it. This was a time-consuming and very tedious process that sometimes needed repeating multiple times until the intended result was achieved.

But now, we are happy to say that this irritating ordeal is a thing of the past! With the new version you only have to select the Live Debug build type (available for both iOS and Android) under the Project > App settings tab (or simply select both), save the app and export your project.

That’s it! The app binary can now be installed on the device and this procedure will NOT have to be repeated every time you modify the application in the app builder. Isn’t that a huge improvement to your development routine? We really hope this is a rhetorical question.

PS: A minor but very handy feature has been added to our app builder that will make it even more comfortable to use, and easily adjustable to different monitor sizes – now, you can switch the PROPERTIES panel views between 2 Panels, 1 Column or Tabs modes: