when to feed my baby
Description
My first baby Daniel was born in March. My wife and my mom are taking care of him. According to our doctor we need to monitor the baby's healthy by recording how much formula Daniel he takes as well as how many diapers he use in each day. Since it's not convinent to carry the note book with them and aslo it's necessary to keep the data in sync between them, I develop this app which installed on their phones to recording. And since I store data in Elasticseach, I add kibana to visualize data.
This is a full-stack application that includes ionic, that is a mobile hybrid SDK build on top of AngularJS and cordova, expressjs that is the backend http server, Elasticsearch which act as database and Kibana which visulize the data stored in Elasticsearch.
The basic use case is record the feeding and diaper change, also view the recently data in the app. When the Moms click record, the data will be store both locally and send to the server. And when Moms view the recent data will be pull from both place and merged together before rendering.
Except a native ios app looking UI. I also use AngularJS extensively in this app. Since the data flow from client to server is async, I also leverage Promise to aviod the callback hell. As the code getting larger, I found it especially useful to use a good coding style such as angular-styleguide. And this project give me a sound practise on Elasticsearch. Last but not least, it expose a new way to me to visulize and analynize data using the web tech.
Reference:
Demo Vedio
Code Walk through Vedio
Highlight features
- Hybird ios app implementation, sync data between apps installed on different phone.
- Extensively use AngularJS. Such as directive, service, ui-router, promise.
- Use html5 new api such as localstorage.
- Express to implement REST API.
- Elasticseach as database.
- kibana to visulize data
How to run the code locally
Step 1. Install Node.js, Elasticsearch, Kibana, Ionic
Step 2. Turn on Elasticsearch, Kibana
Step 3. Get source code and install package
- Clone repo from GitHub:
$ git clone https://github.com/taoning2014/when-to-feed-my-baby
- cd into /backend,
$ npm install
Step 4. make fake data
- cd into /backend/db
$ node cvsToJSON
Step 5. start express server
- cd into /backend
$ npm start
. If there is no data in Elasticsearch, it will import fake data create from step 4 into it.
Step 6. start ionic
- cd into /ionic
$ionic serve
Tech used
- Ionic
- Ionic is the beautiful, open source mobile SDK for developing native and progressive web apps.
- AngularJS
- AngularJS is a complete JavaScript-based open-source client and server-side web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
- Gulp
- Gulp is a fast and intuitive streaming build tool built on Node.js.
- Express
- The best way to understand express is through its Official Website, particularly The Express Guide; you can also go through this StackOverflow thread for more resources.
- Elasticsearch
- Elasticsearch is an open-source, broadly-distributable, readily-scalable, enterprise-grade search engine. Accessible through an extensive and elaborate API, Elasticsearch can power extremely fast searches that support your data discovery applications.
- Kibana
- Kibana is an open source data visualization plugin for Elasticsearch.
- Node.js
- Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
Useful links
- Commitizen For Contributors
- ESLint An open source JavaScript linting utility.
- ES5: Airbnb JavaScript Style Guide
- Angular Style Guide
Copy right
Got some images from airbnb for demo purpose
License
MIT We believe that mean should be free and easy to integrate within your existing projects so we chose The MIT License