How to Build Signup Android Mobile Apps in Mesosfer Backend as a Service
How to Build Signup Android Mobile Apps in Mesosfer Backend as a Service
Introduction
Here you will learn about How to Build User Signup Android Mobile Apps in Mesosfer Backend as a Service. This is the second session of tutorial series. You can read the previous session here. In this section, we’ll be creating for simple android mobile application for user signup based on Mesosfer Documentation. We will prove that these steps is more simple and easy than usual.
Prerequisites
To follow this tutorial, you will need to prepare these items below :
- Sign up for an account in Mesosfer Backend as a Service.
- Install latest android studio. In this tutorial, the author used android studio version 2.2.1
- Download code from previous session.
Getting Started
Previously, You have created Class for initialize Application ID and Application Key. After that we will create module register.The first step you have to create new activity (RegisterActivity).
Change layout register in app->scr->main->res->layout->activity_register.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_email" android:id="@+id/text_email" android:imeOptions="actionNext" android:inputType="textEmailAddress" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_password" android:id="@+id/text_password" android:imeOptions="actionNext" android:inputType="textPassword" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_firstname" android:id="@+id/text_firstname" android:imeOptions="actionNext" android:inputType="textPersonName" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_lastname" android:id="@+id/text_lastname" android:imeOptions="actionNext" android:inputType="textPersonName" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_date_of_birth" android:id="@+id/text_date_of_birth" android:imeOptions="actionNext" android:inputType="date" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="1"> <android.support.design.widget.TextInputLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_height" android:id="@+id/text_height" android:imeOptions="actionNext" android:inputType="numberDecimal" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".5"> <android.support.design.widget.TextInputEditText android:hint="@string/hint_weight" android:id="@+id/text_weight" android:imeOptions="actionDone" android:inputType="number" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.TextInputLayout> </LinearLayout> <Switch android:text="@string/hint_is_married" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/switch_is_married" /> <View android:layout_width="match_parent" android:layout_height="@dimen/activity_vertical_margin" /> <Button android:onClick="handleRegister" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:textColor="@android:color/white" android:text="@string/register"/> |
For this step, first thing you need to do is initialize textInput in method onCreate.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
private TextInputEditText textEmail, textPassword, textFirstname, textLastname, textDateOfBirth, textHeight, textWeight; private Switch switchIsMarried; private String email, password, firstname, lastname, dateOfBirthString, height, weight; private Date dateOfBirth; private boolean isMarried; private ProgressDialog loading; private AlertDialog dialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_register); if (getSupportActionBar() != null) { getSupportActionBar().setTitle("Mesosfer Registration"); } // initialize input form view textEmail = (TextInputEditText) findViewById(R.id.text_email); textPassword = (TextInputEditText) findViewById(R.id.text_password); textFirstname = (TextInputEditText) findViewById(R.id.text_firstname); textLastname = (TextInputEditText) findViewById(R.id.text_lastname); textDateOfBirth = (TextInputEditText) findViewById(R.id.text_date_of_birth); textHeight = (TextInputEditText) findViewById(R.id.text_height); textWeight = (TextInputEditText) findViewById(R.id.text_weight); switchIsMarried = (Switch) findViewById(R.id.switch_is_married); loading = new ProgressDialog(this); loading.setIndeterminate(true); loading.setCancelable(false); loading.setCanceledOnTouchOutside(false); } |
Then add method handleRegister to catch input data from Mobile Apps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public void handleRegister(View view) { // get all value from input email = textEmail.getText().toString(); password = textPassword.getText().toString(); firstname = textFirstname.getText().toString(); lastname = textLastname.getText().toString(); dateOfBirthString = textDateOfBirth.getText().toString(); height = textHeight.getText().toString(); weight = textWeight.getText().toString(); isMarried = switchIsMarried.isChecked(); // validating input values if (!isInputValid()) { // return if there is an invalid input return; } registerUser(); } |
You need to make validation method like code below :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
private boolean isInputValid() { // validating all input values if it is empty if (TextUtils.isEmpty(email)) { Toast.makeText(this, "Email is empty", Toast.LENGTH_LONG).show(); return false; } if (TextUtils.isEmpty(password)) { Toast.makeText(this, "Password is empty", Toast.LENGTH_LONG).show(); return false; } if (TextUtils.isEmpty(firstname)) { Toast.makeText(this, "First name is empty", Toast.LENGTH_LONG).show(); return false; } if (TextUtils.isEmpty(lastname)) { Toast.makeText(this, "Last name is empty", Toast.LENGTH_LONG).show(); return false; } if (TextUtils.isEmpty(dateOfBirthString)) { Toast.makeText(this, "Date of birth is empty", Toast.LENGTH_LONG).show(); return false; } else { SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd", Locale.getDefault()); try { dateOfBirth = format.parse(dateOfBirthString); } catch (ParseException e) { // show error message when user input invalid format of date Toast.makeText(this, "Invalid format of date of birth, use `yyyy-mm-dd`", Toast.LENGTH_LONG).show(); return false; } } if (TextUtils.isEmpty(height)) { Toast.makeText(this, "Height is empty", Toast.LENGTH_LONG).show(); return false; } if (TextUtils.isEmpty(weight)) { Toast.makeText(this, "Weight is empty", Toast.LENGTH_LONG).show(); return false; } return true; } |
After that, add method registerUser.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
private void registerUser() { // showing a progress dialog loading loading.setMessage("Registering new user..."); loading.show(); // create new instance of Mesosfer User MesosferUser newUser = MesosferUser.createUser(); // set default field newUser.setEmail(email); newUser.setPassword(password); newUser.setFirstName(firstname); newUser.setLastName(lastname); // set custom field newUser.setData("dateOfBirth", dateOfBirth); newUser.setData("height", Double.parseDouble(height)); newUser.setData("weight", Integer.parseInt(weight)); newUser.setData("isMarried", isMarried); // execute register user asynchronous newUser.registerAsync(new RegisterCallback() { @Override public void done(MesosferException e) { // hide progress dialog loading loading.dismiss(); // setup alert dialog builder AlertDialog.Builder builder = new AlertDialog.Builder(RegisterActivity.this); builder.setNegativeButton(android.R.string.ok, null); // check if there is an exception happen if (e != null) { builder.setTitle("Error Happen"); builder.setMessage( String.format(Locale.getDefault(), "Error code: %d\nDescription: %s", e.getCode(), e.getMessage()) ); dialog = builder.show(); return; } builder.setTitle("Register Succeeded"); builder.setMessage("Thank you for registering."); dialog = builder.show(); } }); } |
Next build and run, then deploy in your smartphone.
After Register button clicked and succeeded, field user in Mesosfer backend will be automatically added.
Everything is done! Download full version code here.
Conclusion
We’ve tried to create android mobile apps for signup module with a minimum coding. So It can reduce your development time. Mesosfer provide almost all the items you need. So enjoy creating your Mobile application using Mesosfer Backend as a Service. Mesosfer helps you connect your project to the cloud. Cut off the development process so you can straight into the delivery process instead stumble on the complicated infrastructure.
