GitHub address of the mall
https://github.com/Kcon-oion/shopping.git
If you are interested, you can learn the source code
The basic directory structure of the project
- The first is three Navigationviews, which are controlled by fragment and model respectively.
- The basic components are listview, scrowview, recycleview
- The connected database is sqllite
- Encapsulates the helper class of mysqlliteopenhelper to realize database connection
- Encapsulates the User class to save the user's attributes
Summary
Shopping mall APP, users can provide users with a clear and concise UI interface in the APP, you can select products in the APP, query the required products according to keywords, click on the product to view detailed information, and add your favorite products to the shopping cart , You can also remove unwanted goods from the shopping cart. If you want to buy the goods, click Settlement to place an order. You must have an account to use the APP. The user can register an account in the APP, and then log in to the mall after registration. For product selection, if the user already has an account, but forgets the account and password, you can log in according to the mobile phone number reserved during registration and log in through SMS verification. The user needs to fill in the delivery address to purchase the product, and you can use GPS to log in. Key to get the current address and automatically help the user to fill in. The specific information only needs to be modified slightly, which is convenient for the user’s operation. Android development has advantages in interface beautification and overall system, and the market share of Android system is also the No. 1. Edit the view based on the component framework given by Android. This project is based on Android for project development
Keywords: Android development, Baidu map, API technology, MobTech SMS verification, SQLite database
table of Contents
1 Demand analysis
1.1 User demand analysis
1.2 Functional demand analysis
2 Program development task management system analysis
2.1 Technical feasibility analysis
2.2 Economic feasibility analysis
3 System outline design
3.1 Overall function design
3.2 System process design
3.3 System database
4 Development software description and application
4.1 Development software description
4.2 Development software application
5 Detailed system design and design implementation
5.1 Welcome interface function
5.2 Login and registration interface function
5.3 SMS verification login function
5.4 Fill in the address GPS one-key access to the address function
5.5 Product preview and retrieval function
5.6 Product addition and removal from shopping car features
5.7 product features direct purchase
5.8 product review order functions
5.9 Log function to switch accounts and
6 core code
7 experiences
References
1. Demand analysis
1.1 User needs analysis
Everyone has online shopping experience. In online shopping, they will give a very beautiful graphical interface. The products provide detailed products and a lot of products for users to choose. There are many such shopping apps that have done very well. For example, this APP draws on the advantages of other malls and strives to realize the basic functions of shopping malls. To log in to the APP, you need an account and fill in the basic information. The sales address can also be filled in before placing the order. The user is always hesitant about the goods he likes. At this time, you can add the goods you want to the shopping cart first. Place an order directly to provide users with a good shopping experience.
1.2 Analysis of functional requirements
为吸引用户购买商品，界面提供了精美的商品图片给予用户挑选，还要将商品的其他数据也提供给用户，点击商品即可进入到商品的详细信息介绍，展示的一条条数据是用recycleview，scrollview，pageview来实现的，recycleview基本上已经替代了listview，APP也是主要以recycleview为主，整个商品的购物流程都在一个navigation中实现，分为了四个fragment，底部导航分栏，界面做的简洁易操作，用户操作给予了alterdialog的提示，需要购买的商品可以加入购物车或者直接下单，支付时会提示你需要支付的金额，在购物完可以在订单中查看，为用户提供了忘记密码的功能，可以根据注册时预留的手机号进行短信验证登录，用户在填写收货地址时，可以根据一键GPS定位获取到地址，用户只需要修改一些信息，无须全部手动添加，极大地优化了用户的购物体验
2. Analysis of program development task management system
2.1 Technical feasibility analysis
This program mainly uses the currently popular Android phones, Baidu Map API technology MobTech SMS to verify SQLite database. I have no previous experience of using a third-party SDK, but I started to read the SDK development documentation during my self-study. According to the development documentation and demo examples, I’m To achieve the required functions such as SMS verification and GPS positioning, recycleview, navigation, pageview, listview, alterdialog and other components, the technology is more proficient, and the use of SQLite database is also more proficient. If you encounter some problems, you can find many on Google. Tips and inspirations, continuous improvement and perfection of APP functions
2.2 Economic feasibility analysis
The software development platform of Baidu Map API technology MobTech SMS verification is free, and there are personal-oriented application development, which will not generate the cost budget of enterprise-level applications. During the development process, it is necessary to simulate real verification and GPS positioning and virtual machines. Can’t meet the basic requirements anymore, so the development of this app is carried out on real Android phones
3. System outline design
3.1 Overall functional design
图-总体设计图
The APP is divided into two main modules. The first module is the user's registration and login, and the other is the user's shopping. The other
is the registration function to
fill in the user's basic information, such as mobile phone number, ID card number, etc., reserved mobile phone number It is the basis for logging in to the account after forgetting the password. You can log in by verifying your mobile phone number by SMS
The second is the shopping function
Navigationview+fragment to realize the layout of the entire shopping. It is divided into four fragments: home, hot, shop, and count. The three fragments home, hot, and shop use the recyclingview layout. The hot fragments are pageview and recyclingview. , There is a fragment of count because the layout is relatively simple, use Listview, and the order list uses recycleview. In the home interface, you can view all product information, you can fuzzy query, find keywords to search, and click if you need items. Corresponding item, enter the detailed information of the product, the user can choose not to place an order to add to the shopping cart, or directly place an order to buy
3.2 System flow design
图-系统流程设计
When the user opens the APP, he will stay on Taobao’s welcome interface for a short time, and then enter the login interface. Those with an account can log in directly, and those without an account can register for an account, and those with an account but forget the password can use the mobile phone verification code. After logging in to the account
, the user logs in to the mall interface. There are many products to choose from in the mall. You can also search for products you are interested in by keywords. After previewing the products, you can find the products you like. You can click on the product to view detailed information and confirm After good products, you can choose to add them to the shopping cart or directly purchase to
view the shopping cart. The products that have been added to the shopping cart will be directly displayed on this interface. Click a checkbox button to indicate that the product you want to place an order will appear in the lower right corner. The amount of the product that needs to be paid, canceling the checkbox on the leftmost side of the product will reduce the amount of the product back to
view the order. Both the directly purchased product and the product placed in the shopping cart can view the order of the product. The product line data of an order, the product The information will be displayed in the order data.
Fill in the delivery address, you can fill in the delivery address with one-click GPS positioning, or you can fill in the delivery address yourself, click OK to save the address
3.3 System database
The database used by this program is SQLite. Three tables are established in it, namely user, shop, and shoptrolley tables. The attributes in the table are shown in the figure above.
图-shopping
图-user
图-shoppingtrolley
SQLite is an in-process library that implements a self-sufficient, serverless, zero-configuration, transactional SQL database engine. It is a zero-configuration database, which means that unlike other databases, you do not need to configure it in the system. Just like other databases, the SQLite engine is not an independent process, and can be statically or dynamically connected according to application requirements. SQLite directly accesses its stored files.
Using SQLite has the following advantages:
① No need for a separate server process or operating system (serverless).
② SQLite does not require configuration, which means no installation or management is required.
③ A complete SQLite database is stored in a single cross-platform disk file.
④ SQLite is very small and lightweight, less than 400KiB when fully configured, and less than ⑤250KiB when optional function configuration is omitted
.
⑥ SQLite is self-sufficient, which means that it does not require any external dependencies.
⑦ SQLite transactions are fully ACID compatible, allowing safe access from multiple processes or threads.
⑧ SQLite supports most of the query language functions of the SQL92 (SQL2) standard.
⑨ SQLite is written in ANSI-C and provides a simple and easy-to-use API.
⑩ SQLite can run in UNIX (Linux, Mac OS-X, Android, iOS) and Windows (Win32, WinCE, WinRT)
4. Develop software description and application
4.1 Development software description
The development software of this software is AndroidStudio, which is an Android integrated development tool launched by Google. Google has launched the idea version, which provides developers with Android development tools for development and debugging
(1) Gradle-based construction support;
(2) Android exclusive refactoring and quick repair;
(3) Prompt tool to capture performance, usability, version compatibility and other issues;
(4) Support ProGuard and application signature;
(5) Template-based wizard to generate commonly used Android Application design and components;
(6) A powerful layout editor that allows you to drag and drop UI controls and preview the effects.
(7) One-click import and synchronization of package dependencies
4.2 Development of software applications
图-java文件结构
图-文件结构
5. System detailed design and design realization
5.1 Welcome interface
Figure-Welcome interface When you
open the APP, there will be an acitvity controlled by the handler, a login interface that jumps to a delay of two seconds.
5.2 Login and registration interface functions
图-登录界面
图-注册界面
To enter the loginactivity, you need to fill in the password of the account. If you don’t have an account, you can click to register directly. For registration, you need to fill in the attributes of the basic attributes, account number, password, mobile phone number, and ID number. Note that the mobile phone number reserved here is used to log in when the password is forgotten. Basis, must be filled in truthfully
图-账号不能为空
图-密码不能为空
When filling in the account number and password of the login interface, the account number and password cannot be empty. If it is empty, an error will be prompted. When all the account numbers and passwords are filled in correctly, you can enter the main interface. The error message here uses the seterror method. When the error input method is jumped in, the error is displayed and the method is directly returned to jump out of the method.
5.3 SMS verification login function
Figure-SMS Verification Figure-Select Region
If you forget your account number and password, you don’t need to panic. You can log in to the mall by sending a verification code based on the reserved phone number, and select the area and phone number where the number is located.
Figure-Send SMS
Figure-Fill in verification
Click Send verification code, a pop-up box will prompt the confirmation message. After sending, there is a valid time of 60 seconds. The user must fill in the verification code within the specified time. If it expires, it will be invalid. You need to send the verification code again
图-验证成功
After receiving the verification code, return to the APP and fill in it. If it is correct, it will show success and enter the main interface directly. If it fails, it will display the verification code error.
5.4 The user fills in the address, GPS one-click to obtain the address and
fills in the delivery address. If the user feels that the address is troublesome, he can directly obtain the address with one-click, and the APP will locate the mobile phone. This needs to apply for permission in the manifest and register a server for real-time This is not enough. You also need to dynamically apply for permission to read, write and access the device. Click the one-click access button, and the current address will be filled into the edit box, with the accuracy accurate to the town and township, and the specific information user Just slightly modify
图-百度地图SDK开发平台
Register an android project, fill in the basic information, package name, secret key, etc., read the classes and methods of the development document attributes, and build your own project based on the example demo
Figure-Generate a secret key. You
need to use jre's keytool exe file to generate a secret key, which is generated in the .android directory. This secret key needs to be filled in under the created project
5.5 Product preview and retrieval
图-预览商品
图-检索商品
Use recycleview to implement this stream layout. The parameters that need to be passed in the adapter are cursor and listener, one carries the data source, and the other sets the listener event. The data is encapsulated with the getdata method to obtain it from the sqllite database. Here I implement one by myself. The sqlliteopenheloer class is used to specify the database and initialization. The database object obtains data information. The pictures and product information here are rounded corners. The way to try is different. The picture uses the CardView component under androidx, which comes with it. There is a rounded corner attribute, imageciew does not have its own rounded corner attribute, and this linearlayout information box is realized by setting the style. Set the rounded corner attribute in the xml file, and the layout inherits the style.
图-滚动广告-热门商品
The scrolling advertisement here is the layout of the pageview. It needs an adapter. The operation is basically the same as that of the recycleview, but it needs to cooperate with the handler for delayed playback and processing to the first picture and the last picture. If five pictures are needed here, item In the middle, you need to set seven pictures to the border and jump back to the middle five pictures, as if the five pictures have formed a ring
5.6 Adding and removing products to the shopping cart
图-商品详情
图-加入购物车
Click on the product to enter the detailed information of the product. Here, shopdetail uses the scrollview component, which is also the androidx component. The androidx component needs to import the dependency, which is different from the normal layout. When the data exceeds the interface, it will not Not displayed, but there is a scroll bar, you can go down to view the following information, after clicking the shopping cart, the page will jump back to the home fragment interface, continue to select products, click shop to view the products in the shopping cart, shopping The realization of the car is also a recycleview, and there is also a checkbox in the shop-item, which is used to realize click and check settlement
图-移除购物车
图-商品结算支付
If you want to remove a product from the shopping cart, you only need to click on the corresponding product, and a dialog box will pop up to prompt you whether to delete the alterbullder.dialog dialog box. You have to create and show here, and the dialog box will only be clicked. It will be displayed. If you choose to cancel, you will not delete. If you choose to confirm, an event will be triggered. Delete this row of data in the shopping cart table in the database. Recycleview updates the data. When you delete, the item disappears from the shopping cart. Check the item you want to buy. The amount of will be accumulated, when the check is unchecked, the amount returned will be reduced, click to pay and the amount to be paid will be displayed, click confirm, the product will be removed from the fragment of the shopping cart, which can be queried in the order
5.7 Direct purchase of goods
图-商品直接购买
In addition to adding goods to the shopping cart, you can also click to buy now, and a pop-up dialog box prompts whether to buy, and displays the amount. Click confirm to place the order, the order will be displayed in my order, the intent jumps back to the main interface, and the user can Continue to select and purchase products
5.8 Product view order
图-查看订单
My order is also realized using recycleview, showing pictures, product introduction and amount
5.9 Switch account and log out
图-用户详细信息
图-点击item变换颜色
The component that clicks the button will change the color. Create an xml file, set the color of the press and the default color to achieve the operation of clicking to change the color. The component needs to inherit this style
图-切换账号
图-用户退出
Click to switch to jump directly to the intent to loginactivity, click to exit directly to exit the APP
6. The core code
here is to create a global object, because the user has always existed since the login, so there is no need to always use the bundle to transfer data in each activity or fragment. Here you have to inherit the application and statically instantiate yourself.
图-User类
Override oncreate to get its own instance, so that each activity only needs to call the static class without creating an object
图-User类的oncreate
The name of the application needs to be changed to the name of the class in the manifest
图-manifest的application
In the activity, only the class name.getinstance. method is needed to obtain the properties and methods of this global object, and the user’s basic information is stored in this class
图-user类的实现
In the face of memory leaks, you need to create a bitmap object, first reduce the pixel point to one-fifth, and then use recycleview to achieve
To create a recycleview, the parameters required in the adapter are cursor and listener. The cursor is the data source, the listener is the listener, which implements event monitoring, and the cursor is to call a self-implemented soqlitehelper implementation class to specify the database
图-recycleview
Pageview uses the postion to set its loop playback. The default position requires a delay operation with the handler, and the pageview’s postion is updated every two seconds.
图-pageview
Implementation of SMS verification
图-短信验证实现
The realization of Baidu map positioning, initlocation is the basic way to achieve positioning, the accuracy of latitude and longitude, the frequency of positioning and other parameters
图-百度地图实现