What are we going to build?
In this tutorial, you’ll learn how to build a merchandise mobile app where a user can sign in or register, and keep a list of his/her merchandise items. This app uses the Appery.io databases,
Users collections, and shows you how to create a sign in/registration feature.
Before you begin
Tutorial level: advanced.
Creating a new app
Create a new app in the Builder; from the
Apps page, click “Create new app,” enter an app name and click “Create”. After the app builder opens, go to
Pages > startScreen.
We’re going to create two pages and a database for the app.
Creating a sign-in page
The sign-in page allows users to sign in to their account, and view the merchandise there. The sign-in page also allows new users to register.
- The page is renamed to
- Inputs use placeholders to show the input label.
- Buttons are set to
Existing user/New usersections are created by placing the
Listcomponent, setting it to one item, and changing the item type to
Divider, by checking the “Divider” box.
PROPERTIES, change the
Existing user Usernameto signin_username and for
New user Usernameto register_username.
- Similarly, change the
Existing user Passwordto signin_password and for
New user Passwordto register_password.
- Both header and footer are hidden in this page.
Creating a merchandise page
Creating an app database
To start creating the app database, click on the “Database” button in the builder (upper right corner) or simply go to https://appery.io/database.
1. Create a new database; name it
2. Once the database is loaded, create a new collection (custom) called
3. Add one new column to the
Merchandise collection called
item (type should be string).
4. Then, open the
Security and permissions tab, check the “Secure collection” box and save.
5. After that, open the
Change default ACL tab. A new window opens where you have to choose
@Creator as a
Username, click “Add user” and “Save and Close” buttons.
After choosing the
Username value, appery user should click the “Add user” button prior to clicking “save”, otherwise default ACL won’t be changed.
Creating REST API services
Add/map/invoke services: sign-in
Mapping login service
We are going to start with
MerchandiseDB_login_service. When this service is invoked, the user signs into the app. A user is considered signed into the app when there is an active session token (returned by the service).
Rename the service instance to
Before you can invoke the service you’ve created, you’ll need to create a storage variable:
Project > Model and Storage and open the
2. Add a storage variable
userSessionId holds the current active session ID. This value is stored in the browser’s local storage.
There are two more things we need to do: handle a login failure, and if the login is successful, we need to navigate to the
DESIGN view, invoke the service upon “Sign In” button click.
Since we’ve created a sample user (Jane), we can now test the app. Launch the app in the browser and enter the credentials for the user you’ve created. If the login is successful, you’ll be redirected to the
Merchandise page. If the login is unsuccessful, you should see an alert message.
Mapping signup service
We need to add and map the
In terms of the
login service, you’ll need to handle invalid logins as well as successful ones.
If registration fails, the service returns an error message specifying why registration failed: for instance, a “user already exists” error message. To display the message returned by the service, go to the
var response = JSON.parse(jqXHR.responseText);
DESIGN view, invoke the service on the “Register” button click.
Add/map/invoke services: Mdse.
Add three services to the
MerchandiseDB_Merchandise_create_service– to add a new merchandise item for the signed-in user.
MerchandiseDB_Merchandise_list_service– to list all merchandise for the signed-in user.
MerchandiseDB_logout_service– to log out.
Mapping item_add service
The first service you’ll create will add a new merchandise item to the collection.
DESIGN view, invoke the service upon the “Add Item” button click.
Mapping item_list service
Passing the current session ID ensures that only the objects owned by this user are returned by the service.
You need to set the service to invoke on page show: Go back to
DESIGN, open the
EVENTS tab, then select
Merchandise >Page Show > Invoke Service > item_list. Save.
Mapping user_logout service
The service doesn’t return any data.
Invoke the service upon the “Logout” button click, and navigate to the
Signin page on the service’s
Testing the app
An optional step; you can configure the app so that all pages are rendered into one file. This increases app performance after the initial app load. Go to
Project > App settings > General and check the “Render all pages in one HTML file” box: