Giter Club home page Giter Club logo

puente-ionic-datacollection's Introduction

Puente Data Collection and Asset Identification Application

travis Codacy Badge codecov

About this Application

This is a Community Health Records Data Collection Application that integrates Ionic 3, Angular 2+ and Parse Server. It's being used for community development data collection and assessment in the Dominican Republic.

Key Libraries

Google Maps Javascript SDK

Screenshots

Development

Here are terminal commands to get both Ionic and Cordova installed on your machine

npm install ionic -g
npm install [email protected]

Here are some quick commands to get started after install Ionic and Cordova:

  • npm install: Install Node dependencies
  • npm start: Start the hot reloading development server.
  • npm test: Run the test suit and watch for changes.
  • npm build: Build a production optimized bundle of the app.
  • npm lint: Run the ESLinter.

File structure

puente-data-collection/
│
├── resources/
│
├── src/
│   ├── app/                      *Holds main logic for application
│   │   ├── app.constant.ts       
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.template.html
│   │   └── main.ts
│   │
│   ├── assets/
│   │   └── icon/
│   │       └── favicon.ico
│   │
│   ├── pages/                    * Holds Model, View, and Controller for each page of the application
│   │
│   ├── providers/                * Provides "services" or functions to be used/re-used throughout application
│   │
│   ├── theme/
│   │   └── variables.scss        * Defines CSS scheme for application
│   │
│   └── index.html
│
├── typings/
│    └── cordova-typings.d.ts
│
├── .editorconfig                 * Defines coding styles between editors
├── .gitignore                    * Example git ignore file
├── config.xml                    * Cordova configuration file
├── ionic.config.json             * Ionic configuration file
├── LICENSE                       * MIT License
├── package.json                  * Defines our JavaScript dependencies
├── package-lock.json             * Defines our exact JavaScript dependencies tree
├── README.md                     * This file
├── tsconfig.json                 * Defines the root files and the compiler options
├── tslint.json
└── *.png                         * Images for the README.md

Ionic Framework

The Ionic framework allows for the creation of highly interactive, cross-platform mobile applications that can be deployed across iOS, Android, and Windows devices. These hybrid applications include native functionalities, exhaustive gestures, and customizable tools to enhance user-friendliness. Those powerful capabilities are brought to Ionic because it provides mobile-friendly HTML, JS, and CSS components to developers.

Some of its advantages are:

  • Open source
  • Code once, run on all mobile devices
  • One programming language for all mobile OS
  • Use of well-known web technologies
  • A huge community

Parse Server

Parse Server is an open source version of the Parse backend that can be deployed to any infrastructure that can run Node.js. It works with the Express web application framework and can be added to existing web applications, or run by itself. Its repository is on Github.

Parse offer a backend to store data, push notifications, social media integration for our app etc. The features provided tend to be helpful in prototyping quickly.

  • General Purpose: Open Source
  • Hosting: Self-hosting or Parse Server Hosting providers. Supports local testing and development
  • Custom Code: Supported via Cloud Code
  • Database: Mongo DB
  • Push: Support push notifications for Android, iOS. Also users can manage Push Notifications campaigns
  • Storage: No restricted time limits and no file storage restrictions. Control over backup, restore and database indexes
  • Ideal for: General purpose applications

Known Issues and Troubleshooting

ios-deploy isn't working!

From here

sudo npm install -g ios-deploy --unsafe-perm=true --allow-root

Sometimes running one of ios build scripts

npm run ios:build

doesn't work if you have an iPad or iPhone attached to the computer during building.

Documentation

https://hopetambala.github.io/puente-ionic-datacollection/

Contribution

  • Report issues
  • Open pull request with improvements
  • Spread the word
  • Reach out to me directly at [email protected]

puente-ionic-datacollection's People

Contributors

hopetambala avatar renovate-bot avatar snyk-bot avatar

Watchers

 avatar  avatar  avatar

puente-ionic-datacollection's Issues

upgrade to APK 28

Describe the feature you are requesting

A clear and concise description of the functionality you would like implemented.
Need to upgrade android app to APK 28 (targetSdkVersion)

Describe your use case

A clear and concise explanation of the obstacle you are facing.
Need to be able to push the new version of the app on the app store

Patient Consent Form

Describe the feature you are requesting

A clear and concise description of the functionality you would like implemented.

A patient consent form that would allow the data collector to read the rights to the community member

Describe your use case

A clear and concise explanation of the obstacle you are facing.
Want to make sure we're providing the right amount of consent regarding data collection in the communities

photos with low connectivity, takes too long to submit record

Description

Describe your issue here. Feel free to use screenshots along with code snippets and/or error logs
when a user is in a low connective area, a photo takes way too long to submit (sometimes minutes)

Steps to reproduce

Tell us how to recreate your issue.

Stepping into a low internet connectivity site and trying to submit a profile picture

Expected results

What did you think would happen?
I thought submitting the picture would be instant

Actual results

What really happened?
Took several seconds (if not minutes) to submit a photo

Submit error for ID form

Description

When running Puente ionic data collection on my local machine. I log into the local application running in my browser. I try to complete an ID form for the app. I can not enter any input to Mother, Father, Guardian first/last name, but everything else has data. I then try to submit the form by pressing the "submit button" at the bottom of the page and receive this error.

Screen Shot 2019-11-08 at 10 26 24 PM

Environment

  • version of Puente-Ionic-Datacollection?
  • which browser and its version? Chrome Version 77.0.3865.120
  • versions of the following (if known and/or applicable)
    • node.js: 8.1.2
    • RxJS

Steps to reproduce

Run Mongod in one terminal, run ionic serve inside of Puente ionic data collection with a node virtual environment in another terminal, run npm run start inside of Puente node cloud folder with node virtual environment in a third terminal. Login to Puente ionic data collection app in browser (started with ionic run serve). Click on the ID form. Fill out the form. Hit the submit button, This is where I see the error page shown above.

Expected results

I expected to see some submission success confirmation page and then be able to use that patient information in other forms on the application.

Actual results

I received the error message shown above.

Mother, Father, Guardian input fields

Description

I am running Puente-ionic data collection on my local machine. I am able to log in and I then attempt to create an ID form (Identification and Registration). I am able to get to the form. Then I attempt to fill in the data. I am able to fill in everything but three fields:

Screen Shot 2019-11-08 at 10 02 28 PM

Screen Shot 2019-11-08 at 10 02 38 PM

Whenever I try to enter any values in the "Mother, Father, Guardian" First Name or Last name (as soon as I click the text box to enter the text, the site immediately goes to this page:

Screen Shot 2019-11-08 at 10 09 52 PM

Environment

  • version of Puente-Ionic-Datacollection?
  • which browser and its version? Chrome Version 77.0.3865.120
  • versions of the following (if known and/or applicable)
    • node.js: 8.1.2
    • RxJS

Steps to reproduce

Run MongoD in one terminal, run ionic serve inside of ionic data collection folder with node environment (8.1.2) in a second terminal, and npm start inside of Puente node cloud code folder with node environment (8.1.2) in a third terminal. Login to the Puente ionic data collection app (started with ionic serve) that opened in browser. Click on ID to fill out that form. Click in either the "Mother, Father, Guardian" first name or last name and the error should present itself.

Expected results

I expected to be able to enter text into the fields.

Actual results

I received an error message from Chrome (pictured above).

Variable number of questions on custom forms on the mobile app

Describe the feature you are requesting
A clear and concise description of the functionality you would like implemented.
In order to receive a variable response from the backend for number of questions, we have to remove hard-coding the fields on the front-end

Describe your use case
A clear and concise explanation of the obstacle you are facing.
Client's need flexibility with creating custom forms

Explain how this feature supports your use case? Other use cases?
Why should this be implemented in the way you are suggesting?
For a production application, it's important to give users the flexibility to create a survey and have a variable amount of questions (based on the number of questions created on the backend)

Photos on Find-Records-Page

Describe the feature you are requesting

A clear and concise description of the functionality you would like implemented.
An ability to retrieve photos from the backend and show on the Find-Records Page

Describe your use case

A clear and concise explanation of the obstacle you are facing.
Can't see the photos that I've posted on the patient identification form

Explain how this feature supports your use case? Other use cases?

Why should this be implemented in the way you are suggesting?
So that data collectors can verify the photos they've been posting

Additional Info

Add any other information relevant to this request

inconsistent styling of headers

Description

Headers on the pages are different sizes

Environment

Steps to reproduce

Tell us how to recreate your issue.
Press tabs on the bottom to switch between pages

Expected results

What did you think would happen?
The toolbars on the top wouldn't move

Actual results

What really happened?
The spacing on the toolbars on the top shifted

add jasmine and karma testing suite

Describe the feature you are requesting

A clear and concise description of the functionality you would like implemented.
We need a better testing suite in order to make sure everything is working 100% of the time

Describe your use case

A clear and concise explanation of the obstacle you are facing.
It's difficult to manually test the entire application every time we build for production

Explain how this feature supports your use case? Other use cases?

Why should this be implemented in the way you are suggesting?
If we use karma, we have an easier testing suite

Additional Info

Add any other information relevant to this request
Jasmine is what we use to create the unit tests, and Karma is what runs them. Jasmine is a framework for writing code that tests your code. It does that primarily through the following three functions: describe, it, and expect.

Files with the *spec.ts extension are the file jasmine/karma are looking for

fix linting

Description

Describe your issue here.
Fix linting issue

Environment

  • version of Puente-Ionic-Datacollection?
  • which browser and its version?
  • versions of the following (if known and/or applicable)
    • node.js
    • RxJS

Steps to reproduce

Tell us how to recreate your issue.

Expected results

What did you think would happen?

Actual results

What really happened?

Change language without logging out

Describe the feature you are requesting

A clear and concise description of the functionality you would like implemented.

The ability to change the language in multiple places

As a foreign language practitioner, I want the ability to switch to another language within the application so that

Describe your use case

A clear and concise explanation of the obstacle you are facing.
_i.e. As a __________, I want __________. So that, _________.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.