Blog

Are you ready to turn your mobile device into an offline map powerhouse?

Imagine exploring new places with no need for data connections. With Appery.io’s Offline Map app template, you can create a fully functional map app — no coding experience required. Here’s how you can get started today.

To make sure creating this app takes minimum of your time and efforts, you can watch our YouTube video:

Also, you are free to follow our detailed tutorial on using our customizable Offline Map app template. 

In short, the process can be described in the following simple steps:

Step 1: Build Your Offline Map App with Appery.io

Creating your app with Appery.io is a breeze. Simply:

1. Go to the Apps tab in Appery.io.
2. Click Create new app and choose the Offline Map template.
3. Give your app a name, click Create, and your project will be ready in seconds.

This template includes predefined data and settings to make the setup seamless. You’ll see everything organized in the Project view section, with all essential elements already in place.

Step 2: Get a Mapbox Access Token

To activate your maps, you’ll need a Mapbox access token:

1. Visit the Mapbox’s website and generate your unique access token.
2. In Appery.io, navigate to Services > Settings and enter your token.

This token enables the map features and gives you access to interactive, high-quality mapping.

Step 3: Test Your App on a Device

Testing in a browser won’t work due to the native APIs. To test, click to export the app as an APK (Android) or IPA (iOS), or use the Appery.io Tester app for quick previews.

Exploring the Offline Map App

Launch the app, and you’ll see a default map of San Francisco. Test the different view modes, like Streets or Outdoors, to see what suits you best.

Pro Tip: Use the Appery.io Tester app (available for free on iOS and Android) to preview your map instantly before exporting.

Want a full-screen experience? Hide the controls while using the Appery.io Tester.

To go fully offline, follow these steps:

1. Enable online mode on your device.
2. Click Maps to open the preloaded maps page.
3. Download one of the maps — this is what allows offline access later.

Now you’re set to navigate without an internet connection!

Customize Your App

You’re free to modify the template to fit your specific needs. The template documentation provides insights on how to use free maps from resources like MapTiler. Whether you choose free or paid maps, you’ll find options to match your adventure.

Export Your App

When done, take your app on the road! With Appery.io, exporting is easy. For Android and iOS, follow the export guides linked in the template documentation.

Start Navigating — No Connection Required!

With Appery.io’s Offline Map app template, your mobile device becomes a robust, customizable navigation tool. Perfect for travel, hikes, and exploring remote areas, this template takes your app ideas offline with ease.

Happy navigating!

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!

We’re thrilled to announce that the Appery.io team has just released a ready-to-go template: App Starter Offline, that serves as a dynamic, adaptable, and interactive foundation for creating state-of-the-art mobile applications, fully equipped to support offline mode and accessible on any device.

Offline Mode: A Game-Changer

One of the standout features of the App Starter Offline template is its robust offline mode. Not only can you read app data when offline, but you can also modify it and synchronize changes. This ensures data consistency, even in situations where multiple users are accessing and modifying data under different online/offline scenarios. Whether your users are in a remote location with no network access or simply in an area with spotty coverage, they’ll be able to continue their tasks without interruption.

Rich Feature Set: Beyond Offline Mode

While offline mode is the star, App Starter Offline comes packed with a host of other valuable features:

– Authentication Options: Robust and secure authentication methods, including options such as username & password, and FaceID.

– Extensive User Settings: A comprehensive settings dashboard for users to personalize their app experience, including account preferences, notification controls, and privacy settings.

– Personalized Profiles: Enable users to create and edit their profiles with personal data and images for a unique, customized experience.

– Multilingual Support: Make your app accessible to a global audience with a wide range of language options.

– Dark Mode: Reduce eye strain in low-light conditions and conserve battery life, toggling between light and dark themes.

– Secure Messaging for Verification: Enhance security with double opt-in sign-up and operations via email or SMS confirmation codes, perfect for password changes or new device verifications.

Detailed Guide Included!

To ensure a smooth and tailored implementation process, we’ve also provided a comprehensive guide on how to use and customize the App Starter Offline template. Whether you’re a seasoned developer or just starting, our guide will assist you in maximizing the potential of this robust template.

Bonus Time!

New How-To Video: Simplify Your Work in Appery.io Editor

In addition to the new template, we’re excited to share a brand-new how-to video on our YouTube channel . This video demonstrates how to simplify your work in the Appery.io editor using the “Text in Editor” feature, all without disrupting your app’s UI. Check it out to streamline your development process and ensure a hassle-free experience. 

Conclusion: An Essential Tool for Modern Developers

Ideal for entrepreneurs, startups, and businesses aiming to launch applications in sectors like social networking, e-commerce, health & fitness, education, or any user-centric service, the App Starter Offline template is designed to provide an impeccable user journey from the very first interaction. Additionally, whether you’re developing a comprehensive product or testing a minimum viable product (MVP), this template will be instrumental in accelerating your development process and enhancing user engagement. So why wait? Dive into the world of seamless offline experiences with Appery.io‘s App Starter Offline template today and watch your app reach new heights.

Stay tuned for more updates and don’t forget to subscribe to our YouTube channel for the latest tutorials and tips!

In the digital age, integrating advanced technology into your applications can set you apart from the competition. One of the most groundbreaking technologies today is GPT-4o, a version of the AI model developed by OpenAI that can transform how we interact with software. For those who are not developers, the thought of adding such advanced capabilities to an application might seem daunting. However, with platforms like Appery.io, it’s not only possible; it’s also straightforward.

Appery.io is the first mobile building platform that offers even two options to integrate the GPT-4o model into your app:

1. By using the GPT-4o app template for easy building your own Chat GPT app based on the GPT-4o model
2. By adding a ready-to-go-with GPT-4o screen layout.

On top of it, our latest YouTube tutorial offers a user-friendly guide on how to either create a new mobile or web application with GPT-4o support or add it to an existing app using Appery.io, a powerful yet easy-to-use, low-code app-building platform. This video is ideal for anyone interested in stepping into the world of app development without needing to dive deep into complex programming languages. Appery.io provides a seamless environment where you can visually develop your application, integrate backend services, and include sophisticated features like GPT-4o without writing extensive code.

Whether you are looking to enhance a personal project or elevate a professional application, incorporating GPT-4o could significantly improve functionalities such as natural language understanding, automated reasoning, and personalized user interactions. This tutorial isn’t just about integrating AI; it’s about making cutting-edge technology accessible to everyone. By the end of the video, you’ll not only understand what GPT-4o can do for your apps but also how to incorporate it using Appery.io seamlessly. Embrace the future of app development – start integrating GPT-4o today and see your applications do more than they ever could before. Watch our tutorial now and take the first step towards unlocking new possibilities.

In the digital era, making your app not just functional but flawlessly adaptable across devices is the holy grail of app development. Your app’s ability to greet each user with the same elegance, regardless of the device, is not an added bonus—it’s a critical mission. Here’s your golden ticket to an enthralling journey into the world of Responsive App UI using the enchanting platform of Appery.io.

And for those ready to embark on this adventure, we highly recommend watching our detailed video guide. It’s your visual companion through each step, ensuring a captivating and successful journey into responsive app design:

Step 1: Initiate Your Adventure

Commence your quest by creating an app from scratch within Appery.io. This mystical platform doesn’t require you to be a coding wizard. It merely asks for your vision. Choose the CREATE NEW option, select Page, and embark on an exciting ride, choosing among various screen layouts that spare you tons of development time.

Step 2: Fine-Tune Your Craft

Now, dive into the heart of your design, where you will encounter multiple UI components, ready to be shaped according to your will. Quick tip for starters: head straight to the Styles tab once you select a component. Adjusting the width to 100% and setting a Max Width property ensures your app element enjoys the flexibility of a yogi, stretching comfortably across screens of all sizes.

Step 3: Play with Grids Like a Pro

The Grid component in Appery.io is nothing short of a magic canvas, allowing your creative ideas to take flight. Imagine it as your spellbook where setting the Grid property to ‘Fixed’ anchors your design firmly across realms (or screen sizes, in mere mortal terms).

Step 4: Manipulate the Grid Cells

Your quest for responsive mastery leads you next to the Grid Cell. Here lies the secret to balancing content across the screen landscapes. From the snug confines of a cellphone to the expanse of a desktop, adjusting the default sizes can transform your app’s presence dramatically. A tweak here, a nudge there, and behold—the perfect alignment!

Step 5: The Alchemy of Visibility 

Delving deeper, you encounter the power of visibility. Through the Classes option, conjure spells to show or conceal elements with a finesse that leaves users bewitched. Marvel as components appear and vanish, guided purely by the size of the screen that summons them.

Step 6: Empower Through Customization 

Before you, lies an array of customization options, your arsenal to combat monotony. Applying the sacred code of CSS, change colors as one would potions, ensuring your app’s interface remains vibrant and inviting across all screens.

Step 7: Navigating the Terrain 

Your final test of mastery beckons with the application of navigation menus. In the realm of smaller screens, the mobile navigation menu reigns supreme. However, as the landscape expands, so should your menu, transitioning smoothly to a split menu for larger vistas.

By following these sacred steps within Appery.io, you not only unlock the mysteries of responsive app UI but also ensure your creation’s journey across devices is nothing short of legendary. Embrace this guide as your torchlight in the enchanting world of app design, where every screen, no matter how big or small, becomes a window to your masterpiece.

Fortify your skills, brave developer, for the path to app enlightenment through the power of Appery.io awaits. Rise, embrace the challenge, and transform your vision into a responsive reality that dazzles and delights across the digital cosmos.

Welcome, developers! Today, we’re thrilled to walk you through the seamless integration of one of the most popular payment systems into your app using our Stripe Shop template. Follow us along as we break down the process into easy-to-follow steps, empowering you to enhance your app’s functionality and user experience.

Step 1: Accessing the Appery.io App Builder To begin, head over to the Appery.io platform and access the App Builder. Here, you’ll find a range of templates to choose from. Select the Stripe Shop template to kickstart your journey towards integrating Stripe payments into your app effortlessly.

Step 2: Exploring Predefined App Pages and Services Upon selecting the Stripe Shop template, take a moment to familiarize yourself with the predefined app pages and services it offers. These include the Products, Details, Success, and Cancel screens, designed to streamline the shopping experience for your users.

Step 3: Leveraging Linked Backend Services Our Stripe Shop template comes equipped with linked backend services, including a database and server code, preloaded with test data. This allows you to test your app’s functionality immediately, providing a solid foundation for further customization.

Step 4: Customizing Your App Now it’s time to make the template your own. Utilize the App Builder’s intuitive interface to customize your app according to your unique requirements. Add new products, update existing ones, and tweak the design to align with your brand’s identity seamlessly.

Step 5: Integrating with Stripe API The heart of your app lies in its ability to process payments securely. With Appery.io’s Stripe Shop template, integrating the Stripe API is a straightforward process. Follow our clear instructions to replace the default Server Code keys with your own, ensuring seamless payment processing for your users.

Step 6: Testing Your App Before deploying your app to the masses, it’s crucial to thoroughly test its functionality. With Appery.io’s Tester app, you can easily test your app on your own device. Simply scan the generated code from the TEST menu, and you’re ready to put your app through its paces.

Ready to take your app to the next level? Dive into Appery.io’s Stripe Shop template today with our free trial period. Experience firsthand the power of low-code app development combined with seamless payment integration.

Need Assistance? If you encounter any roadblocks along the way, fear not! Appery.io offers comprehensive support, including step-by-step tutorials and direct assistance through the Get Help link in the App Builder. We’re here to ensure your success every step of the way.

Stay Informed Stay up-to-date with the latest tips, tricks, and tutorials by subscribing to our YouTube channel. Join our community of developers and unlock your app development potential with Appery.io.

Conclusion: With Appery.io’s Stripe Shop template, mastering Stripe integration has never been easier. Follow these steps, and you’ll be well on your way to building a feature-rich shopping app that delights users and drives business success. Happy coding!

The world of mobile app development just got more delicious – thanks to Appery.io and their latest addition: the Menu app template. This user-friendly template caters to small restaurant businesses and offers versatile features for both admins and guests. Let’s delve more into what the Menu template has to offer.

Please check this link to see what it can look like.

The creation of the Menu app is swift with Appery.io ‘s App Builder. All you need to do is select the Menu template and create – your restaurant’s app, equipped with all the necessary pages and services, will be ready to go in a jiffy.

The default layout of the app opens with the menu page, a customizable header featuring the restaurant name, and a bilingual language selector toggling between English and Spanish.

However, Appery.io ‘s flexibility allows you to add any language to the selector with minimal effort.

One of the captivating characteristics of this template is its divided meal categories. Choose from four different categories: starters, mains, desserts, and beverages. Each meal comes with its own page, complete with a photo, name, price, and further details. Tagging options like “new” are also available to highlight dishes that you’d like to promote.

The app has an Add to Order feature, allowing guests to keep track of their orders, review, and edit if necessary before the final order placement.

The app also includes an About Us page that you can customize to the nines! It allows you to replace photos, working hours, and contacts with your own.

Once the app is tailored to your restaurant’s needs, all you have to do is print the QR Code of the published app and put it on your tables. Your guests will enjoy the luxury of ordering their meals in their own language, effortlessly.

Now, let’s discuss customization. The Menu app template is designed so that you can personalize it without writing a single line of code. You can easily add categories, arrange them on the categories page, and even add proper images for them. Moreover, you can even customize the language options and the translations for them, offering a truly multilingual experience for your guests.

Watch this video for some tips on how it can be modified according to your needs:

Besides the smooth customization process, the back-end management of the Menu app also stands out. The Menu_DB database, linked with the app, houses all the predefined meal records in all available languages and their details, offering you an easy way to edit and add meals.

In addition, the beauty of Appery.io ‘s Menu app extends beyond just customizing meal details. It enables restaurant admins to update the menu right from the app itself, bypassing the need to access the App Builder.

As an added bonus, app enthusiasts can look forward to more from Appery.io. Future videos will dive deeper into other exciting features tailored particularly for restaurant admins.

For now, however, it’s time for restaurant owners to delve into low-code app development with Appery.io‘s new Menu app template and discover a revolutionary way to streamline their small businesses.

Anyone interested can try Appery.io for free and see what the platform, along with the Menu template, has to offer. Do not hesitate to subscribe to our YouTube channel for more insightful content as it continues to release.

Hey there, friends!

🌟 We are back again with yet another fun and informative dive into the world of Appery.io. If you’ve been hanging out with us for a while, you know we’ve already covered some pretty cool features, like user registration via SMS and beefing up security with two-factor authentication. What’s on the agenda today, you ask? We’re going to get our hands dirty by adding a custom database collection to our Appery.io App Starter project. It’s going to be epic, trust me! So buckle up, and let’s roll.

Kickstarting Your Database Collection

First off, we need a sweet spot to keep all our app data cozy and organized. Here’s the lowdown on setting up your very own database collection:

• Jump into your Appery.io account and open your project.
• Click your way to the database tab and say hi to your Starter_DB.
• Feeling adventurous? Let’s create a new collection by hitting “Create new collection” and teasing it with a catchy name (like “Tasks”).
• Don’t forget to tick the “Secure collection” box under “Security and Permissions” for that extra layer of protection. Because, of privacy, right?
• Save those settings, then shake things up a bit by adding some columns: name, date, priority, and userId.

Tweaking the App to Perfection

With our database set up, let’s give our app some flair:

1. Page Creation Fun – Need more pages? Easy! Duplicate an existing one and dub it “Tasks”. It’s like magic, but you’re the wizard.
2. Jazzing Up the Tasks Page – Time to get creative. Tweak your page to reflect your shiny new database. Think of it as giving your app a mini-makeover.
3. Design Time – Head over to the DESIGN tab and let your inner artist loose. Rename stuff, add cool Text components for dates and priorities, and have a blast while you’re at it.

Making Tasks a Breeze

Let’s ensure adding or tweaking tasks is smooth as butter:

• Clone a page for task management, and simply call it “Task.” Slick, huh?
• Update labels and fields to make sure they’re talking about the right stuff—dates, priorities, you name it.

The Grand Finale: Testing and Tweaking

All set? Let’s hit that TEST button and take your masterpiece for a spin. Register or log in (if you haven’t already) and try adding some tasks. Edit them, delete them, dance with them – it’s your party!

After your testing fiesta, don’t forget to check your database to see your beautiful tasks resting there. It’s like sending your kids off to college – so proud, yet so emotional.

And That’s a Wrap

Look at you, rocking the Appery.io scene with your custom database collection! Keep playing with it, mix things up, and find what makes your app heart sing.

I hope you had as much fun reading this as I had writing it. If you dig what we’re doing, smash that subscribe button and hang with us for more app-building adventures. Catch you on the flip side, and thanks a gazillion for watching! 🚀✨