CHAPTER 1 1 INTRODUCTION
3.4 Development Tools
3.3.1.2 WBS Diagram
WBS diagram of the project is attached as Appendix A.
3.3.2 Gantt Chart
Gantt Chart is a bar chart used to illustrate the project schedule plan. The Gantt Chart further supports the WBS by graphically showing each project activity's start and end times. The Gantt Chart of the project is attached as Appendix B.
3.4.1 Language a. LESS
LESS, also known as the Leaner Style Sheet, is a stylesheet language extending from CSS that is used specifically for web application development. It is used to style the HTML elements so that the HTML elements can be displayed in different ways. In this project, LESS is used with React and Ant Design to style the web application.
b. HTML
HTML, also known as HyperText Markup Language. It is the standard markup language used in web application development. Nowadays, almost every web application uses HTML to develop web pages. There are many elements, like heading, body, table, link, paragraph, list, image, etc. All of the elements in HTML are enclosed by the start tag (<) and the end tag (>). These elements help to describe the structure of a web page. In this project, HTML is rendered using React to develop the web application.
c. TypeScript
TypeScript, also abbreviated as TS, is a strongly typed programming language extending JavaScript. It is known as the scripting language for web application development. Besides, it is mainly used to develop an interactive web applications. In this project, TypeScript is used by React to add interactive behaviour to the web application.
d. Python
Python is an interpreted high-level programming language. Due to its simplicity, it is one of the most widely used programming languages in the world today. Python is also well known for data science, as it provides many helpful libraries for data science that allow developers to perform data analysis efficiently. In this project, version 3.9 of Python is used to support the back- end server of the system.
3.4.2 Framework / Library a. Ant Design
Ant Design is an open-source React UI framework. It is one of the most popular frameworks for developing responsive and mobile-friendly web applications.
Ant Design provides pre-built LESS components that developers can implement without wasting much time defining the components themselves. It provides various components like buttons, dropdowns, navigation bars, thumbnails, alerts, etc. In this project, Ant Design is used along with React to design the web application using the components available in Ant Design to speed up the web application development process.
b. Django
Django is a Python web framework that allows developers to quickly and efficiently develop a high-quality web application. It follows the Model- Template-Views (MTV) architectural pattern. By using the MTV architectural pattern, it supports fast and parallel development. Django includes a powerful toolkit for building web APIs, the REST framework. The REST framework, also known as Representational State Transfer, is an integration framework in Django that serves as a web API for handling HTTP requests. In this project, the Django framework is used on the back-end server. The web and mobile applications are connected to the back-end server using the Django REST API.
c. React
React is a declarative JavaScript framework used to create interactive UI for web and mobile applications. It is a component-based framework used to manage the application's view layer in the Model-View-Controller (MVC) architecture. The paradigm of React is "Learn Once, Write Anywhere" which emphasizes the development of a single codebase when developing cross- platform applications. In this project, React is used for building the web application.
d. Progressive Web Application (PWA)
PWA is an application built using the web technologies but can deliver a native-like application. The popularity of PWA has risen over time due to its speedy experiences. By using PWA, the users can add the website to their mobile application with just one click. Besides, PWA also provides an offline experience if it is configured to have proper caching. In this project, PWA is used to develop the e-commerce platform so that the platform is available to Sharifah Food customers on mobile and the web.
3.4.3 Database a. PostgreSQL
PostgreSQL is an open-source Relational Database Management System (RDBMS). As the name implies, it uses an SQL database model to store data.
This project will use PostgreSQL as the database to keep all the data information of the system. The main reason for using the SQL database model instead of the NoSQL database model is that the SQL database model is much more reliable in transaction processing and concurrency control to ensure data consistency. Data consistency is the primary concern in this system because the inventory management system should store the inventory accurately.
Besides, the Django framework also indicates that it has the best integration with PostgreSQL, and Heroku provides free 1 GB with 10000 rows limitation software deployment with its PostgreSQL. Therefore, PostgreSQL has been selected for this project which uses the SQL database model. Moreover, the studied transaction management and concurrency control techniques are applied to the database.
b. Redis
Redis is an open-source in-memory data structure store. It is mainly used as in- memory storage. In this project, Redis will be used as the cache storage for both the inventory management system and e-commerce platform, as to improve the performance of the server.
3.4.4 Integrated Development Environment a. Visual Studio Code
Visual Studio Code is a lightweight, open-source source code editor developed by Microsoft. With its various available extensions, it is highly customizable and capable of covering a wide range of programming languages such as Java, C++, C#, Python, PHP, JavaScript, Go, Django, etc. Visual Studio Code has many features like IntelliSense, code refactoring, debugging, version control, working with GitHub, settings synchronization, integrated terminal, code snippets, Emmet support, integrated command-line interface (CLI), etc. In this project, Visual Studio Code is used to write the code needed to develop the system.
3.4.5 Other Development Tools a. Figma
Figma is both a vector graphics editor and a prototyping tool. It helps developers to develop low and high fidelity prototypes efficiently. By using Figma, applications can have better UI and UX designs. In this project, Figma is used to create low and high fidelity prototypes.
b. Git and GitHub
GitHub is a remote repository hosting service for version control in software development. It is a web server for software version control based on Git, a distributed version control system. In this project, GitHub is used to control the system. Since the project uses a prototyping methodology, different versions of the prototype can be stored on GitHub. If the latest version of the prototype contains errors, it can be reverted to the previous version.
c. Gmail SMTP
Gmail SMTP is a free Simple Mail Transfer Protocol (SMTP) server provided by Google. It can be used to send emails from own Gmail account to another.
This project uses Gmail SMTP to send email notifications to the customers, such as the order and customer position updates notifications.
d. Cloudinary
Cloudinary is a company that provides cloud-based image and video management services. The system contains a lot of features that facilitate image management. It allows the user to modify the image without image processing software, the user can pass in the query parameters in the URL, and the system will do its job. This project uses Cloudinary to manage the images of the Sharifah Food goods.
e. Stripe
Stripe is a financial service system that provides an online payment processing service. It allows the users to accept payments from plenty of payment methods.
This project uses Stripe as the payment gateway on the e-commerce platform to accept payment from the customers who place orders. Please note that the service provided by Stripe is commercial. Therefore, the payment can only be performed in test mode.
f. Heroku
Heroku is a Platform as a Service (PaaS) that offers developers the to build, run and operate their applications in the cloud. It supports several programming languages, including Python. Besides, it also provides add-ons so that the developers can include different third-party integrations to their applications.
This project uses Heroku to deploy the inventory management system and e- commerce platform, as Heroku offers its free integration with PostgreSQL and Redis.