How to Create Your First App
Important
This guide has been designed to teach you how to create your own Mobile Applications without any programming.
If you follow the tutorial step by step, in just over half an hour you will have your first prototype ready and will also understand the fundamentals needed to create (and sell, if you wish) Applications for all types of SMEs.
To begin, we will create an App for a Medical Centre with:
- User Registration (Login)
- Clinic Information
- Social Media Integration to encourage virality
- Appointment Booking Function
- And a private Files area so the clinic can share specific documentation with each patient
And as if that were not enough, at the end I will explain some advanced functions, such as:
- Integrating an Artificial Intelligence Assistant specialised in medicine to answer users' questions
- Customising 100% of the App's design by modifying the code
- And creating automations by connecting the App to other tools used by the clinic
To give you an idea of its market value...
If a clinic commissioned the development of a custom App like this one, it could not do so for less than €30,000 and around 6–8 months of development.
Let's begin...
Step-by-Step Guide
For our example, we are going to create the App for the Medical Centre of the fictional paediatric specialist Dr Anna Smith
1- Materials
To make creating this App even easier, we will provide all the graphic materials needed for the different sections of the App:
2- Creating the code
1 - First, log in to Scoreapps with your username and password at https://app.scoreapps.com/login
2 - Next, go to the "Apps" section in the left-hand menu of the Dashboard.
3 - Then click the + New App
4 - Next, enter a name for your App and click the CREATE
(In our example, we will use the name DR ANNA SMITH)
5 - The initial wizard will then appear, where you must choose a Template with which to start your App. These are predefined designs that include functions the system considers suitable for each niche. However, you can later change absolutely everything, both the design of the selected Template and its functionality (adding new functions or removing the included ones)
For our example, we will select the blank Template to build our App completely from scratch
The blank template will then load in the builder:
3- Builder Steps
As you can see, App creation is divided into 6 Steps: Design, Colours, Functions, Application, Advanced and Publish
Step - Design
This step contains everything related to App navigation, cover design, typography or font, and several other settings.
We will begin by clicking "Choose Navigation (Layout)"
A pop-up window will appear with a library of different Layouts or navigation menus.
Bear in mind that each Layout has its own configuration settings
For our demo, we will select Layout 1 which is selected by default, and click outside the pop-up window to continue.
Next, scroll down slightly to a section called "Home Page", where we will add the App's cover or home-page design.
You will see a pink question-mark icon where you can find an explanatory video on how to design the Home Page image.
For this Demo, we have already provided the finished image. Simply click the blue "Change home image" and upload the image downloaded from the GRAPHIC MATERIALS called HOME.jpg
Once the image has loaded, click the "View changes" button above the emulator on the right-hand side of the builder, and you will see the cover image we uploaded.
A little further down, you will find the "Localisation Settings"
In the "Currency" drop-down, select the currency you wish to use and, under "Default language", select the desired language.
For our Demo, we will choose Euro as the currency and Spanish
Step - Colours
Here you can change the colours of the different elements that make up the App
To change a colour, simply click the colour circle and select the desired colour, or enter its RGB or HEXADECIMAL colour code
For our Demo, we will customise only the following colour settings, using this colour code for blue:
rgba(55, 111, 255, 1)
You can copy and paste the code directly
A little further down, also configure the following "Button" colour setting
Step - Functions
In this step, we will add the desired sections or functions to our App.
If you scroll down, you will see a wide variety of available functions that you can add to the App. There is also a function search box on the left-hand side of the builder to help you find the function you need.
For our Demo, we will add the following functions:
- Custom Page
- Share
- Pro Bookings
- Files
- My Account
To add these functions to your App, simply type the function you want in the search box and it will find it.
To add that function to the App, simply click its tile:
Once you have added the functions listed above, click "View changes" in the emulator on the right-hand side of the builder. It will appear as follows:
The "Your functions" bar will appear as follows:
If you wish, you can change the order of the functions by clicking the arrows icon for each function and dragging it to the desired position:
Likewise, if you wanted to remove a function from your App, you would only need to click the X icon to delete it:
At this point in the Guide, we will explain how to see how your App is looking on your own mobile device
To do so, follow the steps in our Article: How do I preview an App? using the icon found in the GRAPHIC MATERIALS as the PWA icon, called "APP ICON"
From now on, with the PWA version of the App installed on your device, you can see all the changes as we configure them (you will need to exit and reopen the App for the changes to appear)
Now we will continue configuring the different functions we have added to our App:
Function - CUSTOM PAGE
Click the icon for the first function added, "Custom Page"
The configuration settings for this function will open:
We will begin by changing the icon for this section of the App. To do so, click the blue icon
A window will open where we can either add our own custom icon or choose one from the builder's icon library.
For our example, we have chosen the following icon, but you can choose whichever one you prefer:
Now we will change the Title of this section to "CONTACT"
Continuing with the configuration of this App section, we will add a "Header Image" block
Click the blue "Add header" button and upload the image called "CONTACT HEADER", found in the SECTION - CONTACT folder within the GRAPHIC MATERIALS
Next, we will add a "Text" block
We will use this text block to include information about Dr Anna Smith
You can enter any text you wish. For this example, we have added the following text:
Dr Anna Smith is a renowned paediatrics specialist in Madrid. After earning her medical degree and specialising in paediatrics at Getafe University Hospital, she completed extensive training in several areas of the specialty. In particular, she is an expert in monitoring healthy children, digestive disorders, functional abdominal pain, constipation, breastfeeding and sleep problems.
Now we will add a "Button" block
And configure it as follows:
As the custom icon, upload the image called "TELEPHONE", found in the "SECTION - CONTACT" folder within the GRAPHIC MATERIALS
Next, we will add another "Button" block and configure it as follows:
As the custom icon, upload the image called "EMAIL", found in the "SECTION - CONTACT" folder within the GRAPHIC MATERIALS
To finish configuring this App section, we will add one last "Button" block, configured as follows:
As the custom icon, upload the image called "LOCATION", found in the "SECTION - CONTACT" folder within the GRAPHIC MATERIALS
In the "Link" field, you can enter the URL of any Google Maps address you wish. For this example, we have added the following link, which you can copy and paste directly:
https://www.google.es/maps/place/Plaza+de+Alonso+Mart%C3%ADnez,+5,+Centro,+28004+Madrid/@40.4273369,-3.6982906,17z/data=!3m1!4b1!4m6!3m5!1s0xd42288e8c468a01:0x24ef5692c4bd1e82!8m2!3d40.4273328!4d-3.6957157!16s%2Fg%2F11rgc0r297?hl=es&entry=ttu
Finally, select the "In the browser outside the App" option and click "Save" at the top of the page
If you wish, you can refresh the App already installed on your mobile device and open the CONTACT section to see the settings we have applied.
Function - SHARE
Now we will click the icon for the added function,"SHARE"
As we did with the previous section, we will change the icon by clicking the blue icon
For our example, we used the search box to choose the following icon, but you can choose whichever one you prefer:
We will also edit the title of this function. In this case, we will keep the same text but write it in capital letters.
Next, we will configure this function's options.
First, click the blue "Cover image 1080 x 600" button and upload the image from the GRAPHIC MATERIALS called "SHARE SECTION IMAGE"
Then complete the following fields as shown and click the "Save" button
If you now preview the App on your device, you will see that this section appears as follows:
If you tap the blue SHARE button, you will be offered the option to share the App through different applications such as WhatsApp, email, etc.
Function - PRO BOOKINGS
In the same way as with the previous functions, we will change the Icon and Title of this section:
This is one of the most complex functions in our builder because it has numerous settings that allow it to be configured in different ways according to the project's needs, including changing text, adding different payment methods, etc.
To configure this App section, we will start with the "Settings" tab
For our Demo, we will configure the different sections of the "Settings" tab as follows:
IMPORTANT! In the Timezone drop-down, choose the time zone that corresponds to your location.
To finish configuring this tab, click the "Save" button
Now we will move to the "Payment" tab
This tab contains the different configuration options related to booking payments.
For our example, we will choose Cash as the payment method by clicking the pencil icon. Configure it as follows and then click the "Save" button
Now we will go directly to the "Labels" tab, where we can change some of the text displayed in this function.
For our Demo, we will change the following labels by clicking the pencil icon:
Providers > Doctor
Services > Appointments
Now we will move to the "Dashboard" tab
Clicking this section opens another browser tab, where we will configure everything related to the Appointment booking service.
The first thing you will see is an empty chart dashboard, where data will begin to be collected as bookings are made through the App.
To begin the configuration, go to the "Locations" section in the left-hand menu and click the "Add location" button
Complete the Location information as follows:
For the image, use the image called APPOINTMENTS HEADER found in the SECTION - APPOINTMENTS folder within the GRAPHIC MATERIALS.
Then click the "Save" button
Now click the three-dot icon and select the "Working days" option to configure the location's opening hours
We will now configure the location's opening hours from Monday to Friday, 8:00 AM to 8:00 PM.
Then, further down, click the "Save" button
Now go to the "Categories" section in the left-hand menu and click the "Add Category" button
Complete the information in this section as follows:
For the image, use the image called CATEGORY ICONfound in the SECTION - APPOINTMENTS folder within the GRAPHIC MATERIALS.
Then click the "Save" button
Now go to the "Services"section in the left-hand menu and click the "Add Service" button
Complete the information in this section as follows:
For the image, use the image called SERVICE ICONfound in the SECTION - APPOINTMENTS folder within the GRAPHIC MATERIALS.
Then click the "Save" button
Before moving to the next section, click the three dots to the right of the Service and select the "Edit" option
Make sure the Service is correctly linked to the Location we configured earlier.
Then click the "Save" button
Now go to the "Providers"section in the left-hand menu and click the "Add Provider" button
Complete the information in this section as follows:
For the "Description", you can enter any text you wish or use the text found in the "SECTION - APPOINTMENTS folder within the GRAPHIC MATERIALS called "PROVIDER DESCRIPTION".
Once you have completed all the fields in this section, click the "Save" button
Then click the three-dot icon and select the "Working days" option
Next, configure the Provider's availability from 8:00 AM to 8:00 PM
Then, further down, click the "Save" button
Then click the "Back" button at the top
Click the three-dot icon again and now select the "Services" option
Then select the service (Consultation with Dr) to link it to the provider (the doctor), and click the "Save" button
We have now completed the Bookings function configuration!
Now we will configure the "My Account" function
Function - MY ACCOUNT
Click the icon for the"My Account" function
As we did with the previous functions, we will change the Title of this section to ACCOUNT:
Next, select the "Auto registration"checkbox so users can register in the App
Then, further down, click the"Save" button
Now let's see what the user registration process looks like in the App!
First, click "View Changes" in the emulator to refresh the latest changes:
Then click the "ACCOUNT" menu icon
Next, click the "Create an account" link and register using the following details:
- First name: Arturo
- Last name: Gómez
- Email address arturogomez@gmail.com
- Password 123456
Select the checkbox to accept the Terms of Service and click "Register"
Done — we now have a user registered in our App!
Now we will configure the final function, "Files"
Function - FILES
Click the icon for the"Files" function
As we did in previous sections, we will change the icon for this App section by clicking the blue icon
For our example, we used the search box to choose the following icon, but you can choose whichever one you prefer:
We will also edit the title of this function. In this case, we will use the text MY RECORDS
Next, we will begin configuring this section.
We will start by clicking the "Settings" tab
For the question "Are new users enabled by default?" select YES
Next, in the "File type name" field, enter .PDF
Then click the "Image" button to upload the image called "PDF ICON" found in the SECTION - MY RECORDS folder within the GRAPHIC MATERIALS.
Once the PDF icon has loaded, click the blue "ADD" button
Next, click the "Files" tab
In the "Select a user" tab, select the user we registered and click the blue "Manage" button
Then, in the Folder List section, click the blue "Add a folder" button
A pop-up window will open. Enter the title "MEDICAL RECORDS" and click "Save"
A little further down, in the File Listsection, under "Filter by Folder" select the folder we just created, "MEDICAL RECORDS" and click the blue "Upload a File" button
The following pop-up window will open:
Click the "Select file" button and upload the PDF called "SAMPLE CHEST X-RAY" found in the SECTION - MY RECORDSfolder within the GRAPHIC MATERIALS.
Then complete the remaining fields as follows:
Next, go to the "Users" tab to mark our user as Active :
Congratulations, you have completed the App build!
Now, click "View changes" in the emulator and go to the App's "MY RECORDS" section. You will see the MEDICAL RECORDS folder and the CHEST X-RAY file that we just uploaded for the user Arturo Gómez:
Now that you are registered in the App as the user Arturo Gómez, you can also try making a booking from the APPOINTMENTS section of the App
Other Advanced Functions
Now that you have created your first App and have the basic knowledge needed to use Scoreapps, I will explain how you can take your App to the next level.
Artificial Intelligence
AI is revolutionising everything. From service delivery to customer relationships, AI is being incorporated into more and more productive processes every day. And one way to add tremendous value to your Applications is undoubtedly to include an AI assistant that can advise users 24/7.
If you wish to add an AI agent to your App, you have 2 options (and neither will take more than 10 minutes):
Add Your Own Code to the App
If you are an advanced user, you should know that you can also add your own HTML, CSS and JS code to the Application.
You can customise the design as much as you wish by modifying the CSS. If you want to create your own module or integrate any external website, you can use the Code function for that.
Automations
If you are creating an App for a clinic, your client may want to connect the App to its database, CRM or Email Marketing tool. With Scoreapps, you can connect your Apps to other tools and create automations very easily.
That is what Webhooks are for.
A webhook is like an automated messenger that notifies other applications when something important happens in your app or tool. For example, if a customer fills in a form, the webhook can send that information directly to Make or Zapier so they can act on it, such as saving the contact in a CRM or sending an email.
In short, webhooks help you connect tools and create automations without having to do anything manually. You simply configure the rules, and the webhook notifies the other application and passes the data in real time. It is an easy way to save time and make your business more efficient!
Builder guidance
- Content access: if “You need an account” appears, check the message, installed Registration, Pro Registration or My Account features, session, user, role or group and content protection.
- Deleting a feature: first select the feature you want to remove. The available actions may vary depending on the item.
- Addresses and maps: entering an address in a form does not automatically enable Google Maps. Address entry, geolocation, maps, autocomplete, Places and Routes are different features.
- Home Page: this is the App's visual cover. Opening a link automatically depends on the configuration and available features.
- App images: the home cover, startup image, slider and splash screen are separate assets and may require different dimensions.