Published: July 18, 2018

    Explained hybrid mobile technologies and showed the differences between native and web app final version



    • 1. SANTRAL-COMMERCE HYBRID APP SANTRAL-COMMERCE HYBRID APP Roşan Erdemli Göktay Böcek Dorukhan Mert Başoğlu
    • 2. PURPOSE OF PROJECT PURPOSE OF PROJECT We wanted to create an e-commerce application in all portals (phones,tablets and computers) We wanted to make easier commerce with web services It increases the simplicity of human life Also e-commerse is cheaper than a retail selling.
    • 3. E-COMMERCE E-COMMERCE Electronics Commerce is a methodology of modern business which addresses the need of business organizations, vendors and customers to reduce cost and improve the quality of goods and services while increasing the speed of delivery. E-commerce refers to paperless exchange of business information using following ways.
    • 4. TRADITIONAL COMMERCE V/S E-COMMERCE TRADITIONAL COMMERCE V/S E-COMMERCE • Information exchange from person to person. • Information sharing is made easy via electronic communication channels E-Commerce Traditional Commerce • It is difficult to establish and maintain standard practices • easily established and maintain • Communications of business depends upon individual skills. • there is no human intervention. • depends heavily on personal communication. • provides user a platform where all information is available at one place.
    • 5. Slide25 We sit on a table and start to thing what we will do, and how we accomplish that idea? Business E-Commerce Technology Hybrid Platform (Ionic)
    • 6. DATA MODEL DATA MODEL Fees Categories Items (Category, Tags, Title, Price, Description, Number of Product Left) Sales
    • 7. FROM FIREBASE.COM FROM FIREBASE.COM Firebase is a complete platform for building mobile and web applications. Firebase provides a real-time JSON database for storing and sync your app's data, tools to authenticate users with only client-side code, and production-grade static asset hosting. They take care of the complex server infrastructure. Project Data-Store Is hosted on https://santral-commerce.firebaseio.com/
    • 8. Slide4 We have also provided a simple AngularJs Web Application to insert initial E- Commerce Data To our demo firebase account. AngularJs Admin Interface Is not developed in-house , based On Some Open source Projects for Firebase CRUD(Create-Read-Update-Delete) Operations.
    • 9. HYBRID APPLICATIONS HYBRID APPLICATIONS Hybrid apps are developed using web technologies: HTML5, CSS and JavaScript, then put inside a native container such Apache Cordova. These native containers run the web application code and package it into an app.
    • 10. IONIC IONIC Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code. Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova (PhoneGap) in order to run as a native app. Ionic also uses AngularJS for a lot of the core functionality of the framework.
    • 11. PROJECT SUMMARY  PROJECT SUMMARY Project is based on Ionic-Cordova Architecture, purpose is to develop a hybrid mobile application based on Cordova Plugins. Project is developed On Microsoft Windows OS and deployed to Android Mobile phones from This development machine. We Also provided step by step tutorials to deploy the thesis project on to Android Play And IOS Stores. Project is a simple E-commerce Mobile App , Database layer is hosted On A Free Google- Firebase Account(http://www.firebase.com).
    • 12. INSTALL IONIC INSTALL IONIC First, we installed Node.js. Then, we installed the latest Cordova and Ionic command-line tools. $ npm install -g cordova ionic We followed the Android and iOS platform guides to install required platform dependencies.
    • 13. Slide7 START A PROJECT We created an Ionic project using one of our ready-made app templates, or a blank one to start fresh. $ ionic start santral-commerce Run Project We used the Ionic tool to build, test, and run our app. We made sure to substitute iOS with Android to build for Android. $ cd santral-commerce $ ionic platform add android $ ionic build android $ ionic emulate android
    • 14. Slide8 After we created a clean empty project, We add required Cordova plugins ionic platform add android ionic platform add ios //build your platform ionic build android ionic build ios cordova plugin add cordova-plugin-inappbrowser cordova plugin add cordova-plugin-progressindicator cordova plugin add cordova-plugin-whitelist cordova plugin add cordova-plugin-splashscreen cordova plugin add cordova-plugin-network-information cordova plugin add cordova-plugin-geolocation
    • 15. Slide5 Implementation: Before Talking About How Implementation is done, we will describe development environment setup. ARCHITECTURE OF OUR PROJECT
    • 16. Slide24
    • 17. Slide9
    • 18. Slide23
    • 19. LIST OF AVAILABLE FUNCTIONALITIES OF PROJECT LIST OF AVAILABLE FUNCTIONALITIES OF PROJECT Browse products Search products Sort products Add or remove products to-from Shopping Cart Place order for the current Cart Sign-up using E-mail or Password Manage user account View recent orders
    • 20. Technical Overview Technical Overview Written in AngularJS With Cordova Plugins-Hooks Front-end uses Ionic Framework Widgets Database hosted on Google Firebase Free Account (https://santral-commerce.firebaseio.com/)
    • 21. ADMIN PANEL ADMIN PANEL Project consists of a simple Admin Interface. The interface is designed such that anyone without coding experience can use it to manage the products that are displayed in the hybrid App.
    • 23. Slide22 Manage the categories