Blog

In today’s tech-driven world, mobile app development has evolved to be more accessible and efficient than ever before. With the emergence of innovative tools like the ChatGPT plugin and platforms like Appery.io , building powerful apps has become a breeze, even for those with no coding experience.

At the forefront of this technological advancement is the integration of the ChatGPT-4o functionality into mobile apps using Appery.io . This dynamic duo enables developers to process uploaded images and receive human-like responses seamlessly.

To kickstart this process, the Appery.io team showcases how to leverage the Appery.io platform as a no-code editor, alongside the new Appery ChatGPT plugin. With predefined services at your fingertips, the integration of OpenAI’s power into your app becomes a seamless experience – no coding required!

Key takeaways from the integration process:

1. Create a new blank Ionic app on Appery.io, naming it “ChatGPT-4o Image Processing_No-Code” for easy identification.

2. Click CREATE NEW > From Plugin and add the Appery Chat GPT plugin by selecting it from the Appery.io plugins catalog.

3. Also, add the Camera service for uploading images effortlessly.

4. Integrate the OpenAI key from the OpenAI portal into the Settings service of your app.

5. Once the building blocks are in place, it’s time to craft the app’s user interface. With components like buttons for capturing images, uploading functions, and querying ChatGPT for responses, the app promises a user-friendly experience.

6. The integration doesn’t stop at the UI design – defining services such as input and output mappings ensure that the app functions smoothly. With the Camera service mapping images to display on the screen and ChatGPT service processing queries, the app’s core functionalities come to life effortlessly.

7. Appery.io’s platform streamlines the process further by enabling direct triggering of services with a simple button click.

8. Testing the app’s functionality, whether on a mockup image or a real device using the Appery Tester tool, showcases the app’s capabilities in real-time.

In conclusion, the seamless integration of ChatGPT plugin on Appery.io signifies a paradigm shift in mobile app development, proving that complex application logic can be achieved without writing a single line of code.

Stay tuned for more insights on leveraging Appery as a low-code editor in our upcoming video!

We have an exciting news for you today! In our last video (you can find more details in this post), we showed you how to integrate an app with ChatGPT-4o using our platform as a no-code editor. Now, we’ll take it a step further. In out new video tutorial, we are demonstrating a similar integration, but this time using a low-code approach.

This means that only a minimum amount of code will be needed to implement the ChatGPT functionality for more complex integrations. Intrigued? Let’s dive in!

For your convenience, we are also providing the step-by-step instructions below.

Getting Started: Create a New App

First, let’s go to the Appery.io platform and traditionally create a new app.

You’ll need to add the necessary OpenAI Key that you can get from the OpenAI portal. Navigate to the Settings service and enter this key.

Just like before, any application will automatically get access to the OpenAI object once the OpenAI API key is specified. You can find more details in our documentation if you need further guidance.

Setting Up the User Interface

Before we start creating our UI, we need to decide how the code will access the input and display the output. We can use either local or global variables. For this demo, let’s use global variables.

So, open Screen1 in your new app, drag the following UI components onto the page and define them as follows:

– Textarea (this is where you’ll enter questions):

• Label = Question
• [(ngModel)] = $v.question (Global variables are accessed with the $v variable) 

– Button: (this will trigger the function named process() to handle the questions):

• Text = Process
• (click) = process()

– Text: (this will display the responses from ChatGPT):

• Text = {{obj}}
•  Text in Editor = Food1 (to make page appear appealing in the editor without breaking the app’s UI)
• *ngFor = let obj of $v.arr

We configured our no-code app to receive output as an array, not a string. For this low-code app, we’ll do the same. Let’s assume that ChatGPT will return an array of entities which we will iterate over and display.

Setting Up the Process Function

It’s time to configure the process function:

1. Open CODE > Functions, enter process for the function name and make sure it’s set as an async method.

2. Define the process method with the following code:

this.$v.arr = await this.$a.openai.aioRequest(this.$v.question, {format: ["food1", "food2", "..."]})

In this code, we’ll use the OpenAI object to send requests and receive an array of strings as responses. The first parameter is our question, represented by $v.question.

We also need the response to be an array of strings, so we’ll define the format for the second parameter in our code.

To enhance user experience, add a loading indicator before sending the request and remove it once the response is received.

await this.$a.showLoading()

await this.$a.dismissLoading()

All Set! Testing the App

Your app is ready for testing! Enter a query, press the button, and see the output from ChatGPT-4o:

Thank you for keeping up with us! We hope you found this video helpful.

Don’t forget to subscribe to our channel for more insightful content. Stay tuned and happy coding!

Hey, everyone! 👋

The Appery.io team here, ready to present you a new exciting video tutorial that’s going to change the way you approach app development!

In our new YouTube video, we’re diving into how you can seamlessly integrate ChatGPT-4o into your text processing mobile app with zero coding required, thanks to the amazing Appery.io platform! 🚀

We’ll kick off by walking you through creating a new app on Appery.io , where you’ll learn how to add the Open AI key and integrate the predefined ChatGPT plugin. From setting up a simple user interface to handling data mapping and responses, this guide ensures you get your app running smoothly in no time.

You’ll discover how to:

1. Create a dynamic UI where users can ask questions and receive humanlike responses.

2. Integrate the ChatGPT service effortlessly using Appery.io ’s no-code editor.

3. Enhance user experience by adding a loading indicator while the request processes.

4. Format responses conveniently and adjust data mapping for an efficient display.

Watch as we transform complex logic into a fully functional app without writing even a single line of code. 📱✨

By the end of this video, you’ll have a working app that can process text queries with humanlike responses, all thanks to Appery.io and ChatGPT-4o. And if you’re curious about how to achieve similar results with minimal coding, be sure to subscribe and stay tuned for our next tutorial!

🔥 Don’t miss out – click play and let’s get started on creating something amazing together!

#Appery #NoCode #AppDevelopment #ChatGPT #AI #MobileApp #Plugin

Hello everyone!

Have you ever wished mobile app development could be more straightforward? Appery.io, a powerful low-code app-building platform, can make your dreams come true—especially when you integrate it with ChatGPT. Combining Appery.io and ChatGPT accelerates the development process and simplifies adding complex business logic to your applications.

Why Use Appery.io with ChatGPT?

Appery.io‘s intuitive builder lets you quickly create your app’s user interface (UI). And with simple tools, you can seamlessly integrate ChatGPT, an advanced AI from OpenAI. By using ChatGPT, you can add sophisticated features to your app without diving deep into complex coding.

A Simple Integration Guide

Here’s a simplified walkthrough of how you can get started:

1. Create a New App

First, open Appery.io and create a new app. In a blank Ionic app, click CREATE NEW > Page to generate a page with a predefined GPT-4o screen layout based on GPT-4o technology.

2. Obtain an API Key

For this integration, you’ll need an API key from the OpenAI portal. Just click the provided link, generate your API key, and copy it.

3. Insert Your API Key

Go to Project > Model and Storage > Storage tab, and paste your copied API key. This step is essential for enabling the AI technology.

4. Build Your UI

Next, open Screen1 and create a simple UI to test your app’s business logic:

– Textarea component: For entering questions, define the [(ngModel)] value as “question”.

– Button component: Add a button for processing requests and name it “process”. Define its (click) method as process().

– Text component: This will display the response from ChatGPT. Define its Text value as {{result}}.

5. Add Business Logic

Navigate to the CODE tab and add two variables: `question` and `result`. Also, define the “process” function as an asynchronous method.

this.result = await this.$v.openai.aioRequest(this.question);

When you included the screen layout earlier, the OpenaiModule (check TypeScript > Module) was automatically added. This module has the `openai.aioRequest` method, which you’ll use in your “process” function.

6. Test Your App

Save your app and start testing! Ask a question and see how ChatGPT responds.

7. Enhance Business Logic to Get Response in the Form of an Array 

Let’s say you want a response in the form of an array.

To get different output format response, for example, an array, you’ll need to modify your function with defining the format parameter.

this.result = await this.$v.openai.aioRequest(this.question, {

    format: {

            arr: [“”, “”, “”]

        }

    });

Also, adjust your UI accordingly by adding an *ngFor attribute with the value set to let obj of result?.arr to the Text component and replacing its {{result}} with {{obj}}.

When testing, enter a request like, “Provide a list of ten healthy foods” and click the button to process it. ChatGPT will return the requested list formatted correctly. And just like that, with minimal coding, you’ve added valuable business logic to your simple app!

That’s all for now. To discover how Appery.io and ChatGPT can streamline mobile app development by integrating AI-powered business logic explore our YouTube video guide:

Remember to stay tuned – in our next videos, we’ll demonstrate how to add image processing functionality.

Have you ever wondered how to make you Ionic app access the list of contacts of your device?

This blog post walks you through the steps of creating an Ionic app that can do that. Also, if you prefer watching video guides, you can follow this YouTube tutorial to create such an app:

Getting Started with Your Ionic App

First, we need to create a brand-new Ionic app. For this tutorial, we’re using the Appery.io platform, which makes the development process straightforward and efficient.

1. Create a New App:

Open Appery.io and click Create new app.

Name your app and confirm. This action creates a blank Ionic app with a predefined screen layout named Contacts.

2. Adding the Contacts Page:

Add this Contacts page layout to your app and adjust the routing to make sure it points correctly to this page.

Reviewing & Testing Your App

Your app is now ready to display contacts. This page will show names, phone numbers, and pictures of contacts. Let’s click TEST to quickly preview the app.

You can also preview what the app looks like and how it functions by using the Appery.io Tester, a native app for testing. It’s user-friendly and works perfectly!

How It Works Behind the Scenes

Now, let’s go deeper into the technical step-by-step process to understand how everything works:

Cordova Plugins:

Under the Project > App settings > Cordova plugins tab, you’ll see that the app uses the Cordova Contacts plugin, which has been automatically imported. This plugin helps fetch the contacts.

Ionic Contacts Wrapper

We utilize the Ionic Contacts wrapper for better integration. You can check its detailed documentation page if you wish to dive deeper into this.

Setting Up Variables

Open the Contacts page’s CODE tab to see the variables that were added automatically:

– `contacts`: Returns the contact list.

– `keyword`: Enables filtering.

– `SAMPLE_AVATAR`: Displays a sample picture. You can upload your custom one by using the Media Manager, if needed.

– `SAMPLE_CONTACTS`: Provides a sample list for testing in the browser.

Displaying Contacts List in the App

Now, let’s scroll to the Functions section to see how the contacts list is added in our code.

If the app runs in a browser, it uses the sample contacts from the variable above. But if the app is run on a real device, it accesses the actual contacts list via the predefined `contacts` variable.

Creating a User-Friendly UI

Here’s how to make the contacts list visually appealing and easy to navigate:

List Component:

Uses ListItem with the *ngFor attribute to iterate through the contact list and display each contact’s information.

Filtering Contacts:

The *ngModel keyword in the Search component allows users to filter contacts by name.

Using Selections:

The app lets users select contacts easily. Selected contacts have the selected property set to true.

Conclusion

And that’s how to get access to the list of contacts in an Ionic app! This straightforward guide aimed to simplify the technical aspects and provide a clear path for even beginners. Now you can easily fetch and display contacts in your Ionic apps.

Happy coding!

Hello everyone!

Welcome to an exciting journey where we’ll show you how to add text recognition to your mobile app using the Appery.io Text Recognition plugin. Our new step-by-step video guide is designed to make everything simple and clear, even if you’re new to this technology.

In this video, you will be guided on how to:

1. Import the Text Recognition plugin to your app
2. Update default routing
3. Test your app

Also, you will learn what modes come with the plugin:

Static Text Recognition:

• Echo mode
• Camera mode
• Gallery mode

Real-Time Text Recognition: 

• 10-second recognition
• Continuous recognition

After watching the video guide, you will understand the app structure and also get the code breakdown to see the full picture of what’s behind the plugin.

Ready to Add Text Recognition to Your App?

To implement this feature, activate the Appery.io Text Recognition Cordova plugin in your project and you are ready to go!

And that’s it for now! Thanks for following along. We hope this guide helps you add robust text recognition to your mobile app.

Happy coding!

Are you interested in mobile app development but concerned about the complexities of deploying your app? Look no further! Today, we’ll discuss custom domain publishing in the context of Appery.io, a user-friendly, low-code app-building platform. This feature allows you to seamlessly publish your Appery.io application on a custom domain with an automatically generated SSL certificate. This process eliminates the need for purchasing SSL certificates, saving you both time and money.

What is Appery.io?

Appery.io is an accessible, low-code platform designed for developing mobile apps. It stands out due to its ease of use and rapid development capabilities. Whether you’re an experienced developer or just starting your journey, Appery.io provides an intuitive interface for building high-quality applications quickly.

Why Choose Custom Domain Publishing?

1. Professional Appearance: Publishing your app on a custom domain provides a more professional look and feel.

2. Enhanced Security: The automatically generated SSL certificate ensures your app is secure without any additional costs.

3. Ease of Sharing: Custom domains make it easier for users to remember and access your app.

Step-by-Step Guide to Custom Domain Publishing

Here’s a simple guide to publishing an Appery.io application on a custom domain:

1. Enter Your Domain Name:

– If you have an existing domain, enter it in the designated field within the Appery.io platform Hosting section and click Publish.

– Follow the on-screen instructions for the next steps.

2. Don’t Have a Domain?

– Click on the provided link to purchase a domain from Google or another domain provider.

3. Configure DNS Settings:

– If you already own a domain, navigate to your Domain Registration Website.

– Click on the “Manage” button and access the DNS settings.

– Add a new record: specify the name and IP address you copied from the instructions.

4. Finalizing the Process:

– Retry the publish process if an error occurs; sometimes, new DNS records need a few minutes to propagate.

– Click Publish again. Once completed, your app will be available by default via HTTPS.

Viewing and Sharing Your Published App

Once your app is published, you can view it through the provided link. For sharing purposes, Appery.io offers a user-friendly interface that makes your app more appealing and professional. You can share this directly on popular social media platforms like Facebook, Twitter, LinkedIn, or even via email.

Conclusion

Custom Domain Publishing withAppery.io makes mobile app deployment straightforward and efficient. No more worries about buying SSL certificates or dealing with complicated setup processes. Your app can now have a professional touch with enhanced security in just a few steps.

Sounds interesting? Head over to our latest video for the complete guide!

If you found this article helpful, consider subscribing to our blog for more guides and tips. Thank you for reading, and happy app developing!

Hey everyone! The Appery.io team is excited to announce our latest video tutorial on integrating push notifications into your mobile app by using Server Code. 🎉

Push notifications are a powerful tool for engaging app users. With Appery.io, integrating these notifications is simple, even if you’re not tech-savvy. In this video, we are showing you how to add push notifications to your mobile app using Appery.io , a low-code platform that makes app development accessible for everyone.

Our new how-to video covers:

– Setting Up Push Notifications: Learn how to configure notifications before sending.

– Triggering Custom Actions: See how to trigger popups or other actions when a notification is delivered.

– Sending Technical Data: Discover how to pass custom data, like navigation instructions, via push notifications.

– Automating Notifications with Server Code: Understand how to send notifications programmatically for real-world use cases.

– Targeting Specific Devices and Users: Master the art of sending notifications to individual devices and users.

Highlights from the Video

1. Real-Time Updates: With Live debug, any changes you make in Appery.io are instantly reflected on your mobile device.

2. Custom Alerts: Trigger TypeScript code when a notification is delivered, showing custom alerts or actions.

3. Server Code Integration: Learn to automate push notifications using server-side code.

4. User Targeting: Send notifications to specific users across all their devices by linking user IDs.

Watch Now

Don’t miss out! Watch the full video tutorial and elevate your app’s user engagement effortlessly. Click below to watch the video.

Want more insights? Check out our YouTube channel for more videos and tutorials.

Don’t forget to like and subscribe. Your support keeps us going!

Push Notifications for iOS are essential for keeping your app users engaged and informed. Imagine seamlessly integrating this vital feature into your mobile app without coding headaches. That’s exactly what you can do with Appery.io, a user-friendly, low-code app-building platform. Let’s take a closer look at how you can set up push notifications for iOS using Appery.io.

Why Use Push Notifications for iOS?

Push notifications are a powerful way to communicate with your users. They ensure timely updates, promote re-engagement, and improve overall user experience. For iOS apps, configuring push notifications can often seem complex. But with Appery.io, even those without deep technical expertise can accomplish this task with ease. For details, you can watch our how-to video or follow the steps below.

Getting Started with Appery.io

Before diving into the configuration process, you need to create your app on Appery.io:

1. Create Your App:

– Log into Appery.io.

– Start a new project by selecting the template that suits your requirements.

2. Enable Push Cordova Plugin:

– Navigate to the App settings > Cordova plugins section.

– Enable the Push Cordova plugin to add push notification capabilities.

3. Configure iOS Binary:

– Go to the iOS binary section and note that the app already has a bundle ID that is required for setting an app for iOS.

Note that the build type indicated is Debug which means the app is created for testing purposes. When building an app to be uploaded to the App Store, select the Release option instead.

– However, due to Apple’s policies, you need a a distribution certificate and provisioning profile to install apps on iOS devices.

Setting Up Your Apple Developer Account

Setting up your Apple Developer account is a must if you plan to develop for iOS. So, if you have no account, you need to create it. When done, you are ready to start with configuring your Apple Developer Console.

1. Create a Certificate:

– Log into the Apple Developer Console, click the Identifiers link.

– Create an identifier for your app by clicking the + button, specifying it as an App ID (paste the Bundle ID you copied before) and adding the description.

– Scroll down to enable the push notifications capability and register your new app.

– Switch to the Certificates section and click + to create a new Apple Development certificate, then click Continue.

Note that the Apple Development certificate type can be used for development purposes only! If you are planning to publish your app with the App Store, the build type iOS Distribution is required!

– In the next page, you must upload a Certificate Signing Request. To get it, go back to Appery.io Resources tab. Click Generate certificate, for Platform select iOS, and click Next.

– The Generate iOS certificate wizard opens. In Step 1/3, download the CSR file to your drive.

– In Step 2/3, the instructions are displayed how to exchange the certificate signing request (CSR) you just downloaded for an Apple certificate (.cer).

– For this, go back to the Apple Developer Console Certificates section and click Choose File to select and upload the downloaded CSR file. Click Continue.

– Download the generated certificate in the next step.

– Go back to Appery.io and in Step 3/3 of the Generate iOS certificate wizard, choose it, enter the name and password for your certificate, and click Generate.

The development certificate is generated successfully.

• Now, you can add it to the Appery.io app App settings > iOS binary tab. To do it, scroll down to the Distribution certificate section, and select the iospush certificate you just generated (refresh the list if the certificate cannot be found).

2. Create a Provisioning Profile:

– Now, we need to create a Provisioning profile. For this, in the Apple Developer Console, register your device in the Devices section. You will be asked to add your device UDID. To find it, start iTunes, go to the Summary section, and click the device info panel several times until the UDID appears.

– Next, go to the Profiles section and create a new profile.

When specifying it, indicate it is of the iOS App Development type, then proceed to selecting an App ID from the list, then selecting your certificates and devices (you are free to select all the available certificates/devices).

– When done, enter the Provisioning Profile Name, click Generate and download it to your drive.

– You can now upload it to Appery.io. Go to the App settings > iOS binary tab, scroll down to the Distribution certificate section, and click the Change button to upload the file you just generated using the Media Manager tool. Then, click the Push link in the header to open the Push Notifications tab.

Set Up Push Notifications in Appery.io

Now, let’s configure push notifications within Appery.io:

1. Enable Push Notifications:

– In your project, go to the Push Notifications > Settings section and enable the Push Notifications checkbox.

2. Configure the Database:

– In the Database settings section,  select a database where device tokens will be stored. You can use any existing database or create a new one.

– When you scroll down, you will see that you will also need to provide the Push Certificate to make you app send pushes.

3. Upload Push Notification Certificate:

– To generate and download a push notification certificate from the Apple Developer Console, go to the  Identifiers section, select the pushappios identifier created earlier and, in the Edit your App ID Configuration page, scroll down to the Push Notifications app service item, and click the Configure button.

– Select Development SSL Certificate and click Create Certificate.

 – Next, you need to generate and upload a certificate signing request for Apple Push Notification service SSL. To do this, go back to the Appery.io app and, in the Resources tab, generate a new request it by using the Generate iOS certificate wizard. When ready, the certificate signing request can be uploaded to Apple: for this, just select the file you just downloaded and upload it.

– After Apple has processed this request, you can finally download the push certificate and then upload it to Appery.io for use in your app.

– Go back to the Generate iOS certificate wizard, choose the certificate from your drive, then provide the name and password for your it. Click Generate.

– In the Resources > Certificates tab, find the the iospush certificate, and click the Export button.

– We can finally specify it for the app. Go to the Push Notifications > Settings page, scroll down to the iOS settings section and upload the certificate you just downloaded in the .p12 format.

4. Build and Install Your App:

– Build your app’s binary IPA file: EXPORT > Binary IPA.

– After the app is built, install the app on your device by scanning the QR code provided and grant permission to receive push notifications within the app.

5. Test Push Notifications:

– Go to Push Notifications > Send Push Notifications tab, choose your device type (iOS), specify the title and message of the push notification and click Send.

– Confirm it appears on your iOS device.

Conclusion

By following the above steps, you can effortlessly integrate Push Notifications for iOS into your app using Appery.io. This low-code platform simplifies app development, allowing you to focus more on great user experiences and less on coding complexities.

Ready to enhance your mobile app with push notifications? Start your journey with Appery.io today and keep your users engaged like never before!

Hey there, fellow app developers! Want to keep your users engaged? Push notifications are the perfect way to grab their attention. Today, in our new video tutorial, we’ll guide you through setting up push notifications for Android apps using Appery.io. Let’s dive in!

Here’s a short plan of actions:

Step 1: Create a New Application

First, launch Appery.io and create a new application. Go to Project > App settings > Cordova plugins and enable the Push Notification plugin to get started.

Step 2: Configure Push Settings

Exit the editor and head to the Push Notifications Settings section. Toggle the Enable Push Notification option. Then, we need to specify a database to store device identifiers.

Step 3: Set Up a Database

Navigate to the Databases tab and create a new database. By default, Appery.io provides the predefined Devices collection for storing device IDs and tokens.

Step 4: Link Firebase to Your App

Push notifications on Android require Firebase. You need to get two files:

1.  google-services.json

2. Firebase Admin SDK JSON

So, head to the Firebase console to create a Firebase account if you don’t already have one. Set up a new project and register your Android app. Grab the package name from the Android Settings in Appery.io and enter it into Firebase.

Step 5: Download and Upload Files

Download the `google-services.json` file from Firebase:

And upload it to your Push Notification Settings in Appery.io:

Then, click Next and follow the steps in Firebase to get the Admin SDK file and upload it to Appery.io.

Step 6: Generate Your APK

With everything configured, generate your binary APK file:

Step 7: Test Your Application

Scan the generated code to install the APK on your device:

Launch the app and grant permission to receive push notifications:

Minimize the app, refresh the Devices collection in your database, and you’ll see a new entry for your device:

Step 8: Sending Push Notifications

Go to the Push Notification Sending section in Appery.io. Specify the type of device (Android), and customize the notifications sending options of your message:

Send the test notification and watch it appear on your app’s icon:

Conclusion

And there you have it! You’ve successfully set up push notifications for your Android app using Appery.io. Stay tuned for more tutorials on setting up notifications for iOS, associating devices with users, and sending notifications from Appery.io Server Code.

Don’t forget to like, subscribe, and share this post if you found it helpful! Happy coding!

Feel free to leave any questions in the comments below. We’re here to help!