Beauty Me Case Study: Architecture Design

Beside of user interface design, it’s time for us to go for architecture design. Including all data flows and transfers from mobile app to server, from CMS to backend and vice-versa.

Beauty Me project will follow MVC in general, and also applies MVC onto all components including: Android app, iOS app, CMS front end, and web-service.

Database

We use MySQL server for database, and manually create table with MySQL Workbench. Many developer want to create database and table within their code, but we do not see any benefit with this project if we do the same way. And if we manually create tables with a tool like Workbench, then we can ensure database can successfully work, independent from any other logic parts. Evenmore, we can insert preparedStatement onto database, but at this project, we do not need to do such things.

I will not go into details of database and table, however you can have an overview of data modeling inside MySQL server like:

• a general database: beauty_me (note that we don’t use prefix like db_ to reduce redundancy)
• under this database, we create several tables to conform our idea and features of our app: - user: contains user information like username, password, etc.
• place: represent place object to be used across app
• product: has foreign key to place, contains all products of system
• config: will have only one row to store configuration of server-side system
• image: contain a image with id, path and thumbnail path (note that we store images in local directory, but need to store path/to/image inside database)

Mobile app

Within mobile app, we will create package .model for Android, and group reference /model for iOS to have each table inside database will map to single POJO class in mobile app. Because database can contain foreign keys to respresent 1-n and n-n relationship, we will create real class – variable/array within our mobile model. Like:

public class Place {
  private int id;
  private User user;
  private List<Image> images;
}

Web-service

Our web-service will be writen in pure JavaScript and run under NodeJS. We will need an ORM library to map between MySQL table and our JavaScript POJO object. We choose Sequelize to do this task and create corresponding ORM object inside a separate orm.js, then we expose all Sequelize model for other modules of NodeJS can work with.

CMS

Our CMS is only client-side only. It will act just like mobile app, stores all logical sources at client-side, performs authentication to web-service part, and use AJAX to retrieve/modify data.

We choose AngularJS to develop our front-end. Because AngularJS and web-service (NodeJS) talk the same language: JSON. Thus we simply do not need to define object here. Just consider everything is JSON and our work is easier.

Ok now we know all model can work. We will define architecture and data flow between all components inside system.

<image_here>

As above diagram, we can see MySQL server acts like data backend, and expose only to our web-service component. The web-service, in turn, expose all available method in form of APIs, for front-end and mobile apps to use. While frond-end can work with data sent/received directly from API, mobile apps will have to use a library, or manually write utility to help with data parse from pure JSON object to Android and iOS object.

So, everything is more clear now. We are going to defining web-service to conform REST architecture in next post. We will also discuss about how can we secure APIs, and restrict access to CMS API to administrator user only.