Unlock Real-Time Communication with WebSockets on Appery.io

Introduction to WebSockets with Appery.io

Have you ever wondered how apps send updates in real-time? The magic happens with WebSockets. Today, we’ll show you how to add WebSockets to your apps using Appery.io. This low-code app-building platform makes it easy to create complex apps quickly. Note that this post supports our comprehensive video tutorial and if you are interested in details, you are welcome to watch it.

By following the steps below, you can easily enhance your app with real-time communication features using WebSockets and Appery.io. Exciting, right? Let’s get started!

Setting Up Your App

First, create an empty app in Appery.io. Then, go to the Catalog of Appery.io plugins and select the WebSocket Example plugin.

Before importing it, you can click the link to open its documentation page. You’ll see it contains the code for the WebSocket server. This server needs to be run somewhere. While real applications may use Amazon or Azure, we’ll use CodeSandbox for testing.

Using CodeSandbox

1. Create a new Devbox.

2. Select Node.js Server from the list of backend frameworks.

3. Name your Devbox and set its visibility to “Public”.

4. Install two npm modules: `express` and `socket.io`.

Now, let’s move to the next step.

Setting Up Your WebSocket Server

Copy the server code from the documentation page and paste it into your `index.js` file in CodeSandbox. If everything is correct, the server should start successfully.

Back to Appery.io

Return to the Appery.io project and click Import selected plugins with the WebSocket Example plugin checked. This plugin helps you integrate WebSockets into your app. But first, let’s test it.

Testing Your App

Go to the Project > Routing section and set “WebSocketScreen” as the default page.

Next, navigate to TypeScript > WebSocket and specify the URL of your WebSocket server obtained from CodeSandbox.

Now, run your app in different browsers like Google Chrome, Firefox, and Edge. Enter a test message and click the “Send” button.

Ready! The message should be delivered to all clients in real-time.

Conclusion

Now you’ve seen how to add Websockets to your apps using Appery.io. This post is a companion piece to our detailed video tutorial. The demo app isn’t a finished product but provides a solid template for building your own real-time communication features. Give it a try and unlock powerful networking capabilities in your applications!

Google reCAPTCHA Now on Appery.io: Boost Your Site Security:

In the fast-paced app world, safety is crucial. At Appery.io, we’re thrilled to introduce Google reCAPTCHA plugins for added web app protection.

About Google reCAPTCHA: Quick Overview

Google reCAPTCHA is a strong tool to tell real users from bots, adding an extra security layer. It stops spam and guards your sites from fake activities.

Easy Integration with Appery.io: Simple and Effective

Our App Builder now easily adds Google reCAPTCHA plugins, both version 2 and version 3. To start, sign up with Google reCAPTCHA to get unique keys, ensuring a secure and personalized app integration.

Why Go for reCAPTCHA Plugins on Appery.io?

  1. Strong Defense: Shield your web app using advanced security from Google reCAPTCHA.

  2. User-Friendly: Our App Builder simplifies the process for all-level developers.

  3. Version Choices: Customize security with options for version 2 or version 3 based on your needs.

Getting Started: Easy Guide

  1. Open App Builder: In Appery.io App Builder, go to the Plugins section.

  2. Find reCAPTCHA: Look for reCAPTCHA plugins (version 2 and version 3) in the Appery.io catalog.

  3. Sign Up and Get Keys: Before adding the plugin, sign up with Google reCAPTCHA to get keys for secure app integration.

  4. Pick Your Version: Choose either version 2 or version 3 based on your security preference.

  5. Simple Configuration: Customize plugin settings in the Appery.io App Builder, including adding keys from Google.

  6. Test and Deploy: Ensure a smooth user experience before deploying your web application.

You can find more details on the Plugins page.

Or check out our YouTube video tutorial if you need visual assistance!

Stay Tuned for More Upgrades

This is just the beginning! As we focus on security and user experience, more enhancements and features are coming soon to Appery.io.

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

How to Read CSV Files in Your Application | Appery.io

From now on, you can read CSV files and display their content on both web and mobile applications created in Appery.io. Watch our new tutorial to learn more about the CSV Reader plug-in that does all the work for you.

How to Redirect Your App to HTTPS | Appery.io

If you need a secure application with an HTTPS-only protocol, then you’re in the right spot. Check out our new video and learn how to redirect your application from an HTTP to HTTPS protocol by installing the HttpToHttps plug-in from the Appery.io development team.

How to Add a Validation Feature to Ionic 4 Apps | Appery.io

If you’ve ever wondered how to add a validation functionality to your Appery.io app, you’re in the right place. In our new video tutorial, we demonstrate how to install and configure a new validation plug-in to your app in 10 minutes!

 

Development Tip: Use Server Code Plug-ins and Snippets for Quicker Coding

snippets

Using Server Code snippets and plug-ins are a great way to save time when making server scripts. Instead of digging through the Server Code documentation, you can simply choose one of the snippets located on the right side of the screen in script editor mode. The set of snippets provided by the Server Code API are the most common, but if you think of other useful snippets, let us know and we’ll add them to the list.

Server Code plug-ins are another way to save time when implementing your logic. To find Server Code plug-ins, go to the Server Code page and then to the Plugins tab. For now, there are two plug-ins. With them, you can quickly integrate with the Twilio or SendGrid API via XHR (XMLHTTPRequest). Simply click “Import” to create the server script based on the plug-in selected, and then customize it by specifying your API keys.

Make sure you check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

PayPal Secure Payments for Your Ionic & AngularJS App

paypal_logoPayPal API is one of the most popular Appery.io plug-ins, and now it’s also available for Ionic & AngularJS!

Our users have frequently requested the ability to add payments to their Ionic & AngularJS mobile apps more quickly, for example, to create an online shop. Now, with the help of this plug-in, you could build an online shop (for instance) to be used by your Ionic & AngularJS app really easily.

A few notes about the security implemented in this app:

  • Authentication with PayPal occurs via a Server Code script. It takes your PayPal app credentials and sends XHR to PayPal. The token is stored to the database.
  • By using the Secure Proxy feature, the actual token value will be substituted on the server side. This way any PayPal API can be triggered.
  • Because of the server-based authentication, sensitive data such as the client secret or token value will never be shown in the app, which eliminates the possibility of theft.

Finally, a few, more general, notes:

  • The flow implemented in this plug-in is similar to PayPal’s flow.
  • We have a PayPal API plug-in tutorial here. Check it out to configure the plug-in.
  • The plug-in is configured for a test environment, so use the PayPal guide too see what you need to do when going live.

Development Tip: Adding Cordova Plug-ins To Your App

import_cordova_plugins

With just a few quick steps, you can easily add any 3rd-party Cordova plug-in to your Appery.io app:

  1. Go to the Github page of the plug-in and download the latest stable version by clicking “Download ZIP.” It’s important to download the latest stable version.
  2. Go to Resources > Cordova plug-insand click Import Cordova plug-in, then: Choose file, locate the downloaded file and click Import plug-in The plug-in will appear under Cordova plug-ins

To manage all of the Cordova plug-ins for a particular app, go to Project > App settings > Cordova plug-ins and you’ll see the list. You can quickly enable or disable any plug-in.

Learn more in our documentation, and make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Development Tip: Managing Device Contacts with an Appery.io Plug-in

icon-contactsBy using the Appery.io Contacts plug-in, you can conveniently manage contacts on a user’s device. The plug-in is based on the Cordova API and can be imported into your Appery.io app like any other plug-in. Just click CREATE NEW > From plugin, select Apperyio Contacts Service and click “Import selected plugins.” There is a set of services you can use to perform the operations, such as find, remove, create, edit and more.

We’ve also prepared a detailed tutorial on how to use this plug-in, as well as a simple demo app (you can create it from the attached backup), that allows you to find, create and save contacts. Find it here.

Make sure to check out all of our mobile development tips.

Do you want to build apps fast? Start developing with our trial plan!

Mobile Dev. Tip: Geolocation Plug-in for AngularJS Apps

geolocation-plugin

Geolocation functionality is one of the most popular features in mobile development. In Appery.io, a geolocation plug-in is available out-of-the box and can be configured in minutes to use in your mobile app. Recently, we’ve updated the geolocation plug-in for AngularJS apps (both Ionic and Bootstrap) and now it is even more intuitive and faster to use. In the geolocation plug-in docs you can find out how to add the plug-in to your Appery.io app, so you can retrieve the current position and start\stop watching position.

Make sure to check out all our mobile development tips.

Do you want to build apps fast? Start developing with our free plan.