Git Product home page Git Product logo

android's Introduction

5calls

Quicknav

Automated testing

CircleCI

Cross-browser testing

BrowserStack Status

Table of Contents

Development Notes

The frontend is written in React with Redux for state management and Typescript for type safety and documentation. The application server back end -- for data processing -- is written in Go.

To build the application, you need to install Yarn and run the following commands:

# install dependencies and
#   compile .scss files to .css:
yarn

# Run unit tests in watch mode
yarn test

# Run unit tests with a code coverage report
yarn test:coverage

# start the app running in the
#   webpack development server:
yarn start

# start the app running in https mode
#   (needed for browser geolocation):
yarn start:https

# build the app into build folder
#  for server deployment:
yarn build

# any updates to .scss files need
#  to be compiled to css using:
yarn clean-build-css

Using yarn add to add new dependencies will throw an error related to node-sass-chokidar, which can be ignored.

For the best development experience, you should install both the React and Redux Development Tools extensions into your browser. Both browser extensions are available for Chrome and Firefox.

Unit testing

Unit testing in this repository is done using Jest with Enzyme in addition to the redux-mock-store library to support Redux-related tests.

End-to-end Integration Tests

E2E testing for this project is done using TestCafe with testcafe-react-selectors. This provides a web scraping test bed that provides an assertion library to ensure that the expected elements appear on each page under test.

Running the tests

Before running the tests, the development server must be running using the command yarn start Once the test server is running, you may either run all the tests on your local browser using one of the following commands

testcafe <browsername> web-tests/*.ts
yarn web-tests:all

Or if you have access to browserstack, you may run on multiple browsers using the command

yarn web-tests:browserstack

Running on browserstack

To run on browserstack, ensure that you have environment variables set for BROWSERSTACK_ACCESS_KEY and BROWSERSTACK_USERNAME to the values of your browserstack account You may view test results on the dashboard

Debugging and running individual tests

You may run specific tests by running testcafe with the -t or -T option -t -T <partial test name, must meet grep search criteria. Ex. Tests that start with donate may be found with "Donate.*">

Tests may be run in debug mode with the --inspect-brk option.

testcafe --inspect-brk chrome web-tests/test.ts 

Breakpoints may be put in the test with the following syntax

// tslint:disable-next-line:no-debugger
debugger;

Then in chrome, navigate to chrome://inspect On this page, under Remote Target there will be an inspect link, click to start the debugger.

Architecture, Data Flow and Strong Typing

A selection of files in this repository include code comments describing the architecture, data flow and strong typing conventions used in developing the React-Redux-TypeScript version of the 5 Calls application. These include files that illustrate the following (see the individual files for more details):

Use of TypeScript to Strongly Type Request Parameters Passed by React-Router

Also illustrates the use of Redux to loosely couple a component to data passed to its props.
CallPageContainer.tsx
CallPage.tsx

Data Flow through a Component Heirarcy

Also note the TypeScript conventions used in these files.
CallPageContainer.tsx
CallPage.tsx
Why5calls.tsx

Redux Data Flow

See code comments containing the token 'REDUX DATA FLOW'. Also note the use of TypeScript in these files.
CallPageContainer.tsx
redux/callState/action.ts
redux/callState/actionCreator.ts
redux/callState/reducer.ts

Contributor Guidelines

Contributions to this repository are welcome. Please see the Contributing.md file in the 5calls/5calls repository for information on contributing to this repository.

Contributors

Other Client Projects

Create React App Code Generation

This project was created with create-react-app (CRA, react-scripts ver 1.0.0) using react-scripts-ts (ver 2.2.0) to add TypeScript support. In addition, the node-sass-chokidar library was added for preprocessing of SASS (.scss files) to CSS.

Subsequently, the CRA-created configurations were exposed using the eject command (yarn eject). This created the config and scripts folders and added dependencies and other configurations to package.json.

CRA_README.md is the original README.md file created when the create-react-app command was run.

android's People

Contributors

bryansills avatar chadschultz avatar dektar avatar gregliest avatar hblumberg avatar nickoneill avatar perlajarillo avatar trshafer avatar zuzana-m avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

android's Issues

Crash when returning to the LocationActivity from a permissions request

Description of the issue and brute force fix from #18.

"I also fixed a crash I encountered multiple times, when returning to the LocationActivity from a permissions request. When onBackPressed() was called, I was getting an IllegalStateException because onSaveInstanceState() had already been called. It's kind of awkward, since we're not doing FragmentTransaction, which is the normal reason this crash happens. Instead, AppCompatActivity inherits from FragmentActivity, which accesses the fragment manager in onBackPressed(), in case there's a fragment showing. So, the normal fixes don't work. I looked for an elegant solution for a while and couldn't find one, so I brute forced the solution by getting rid of the optimization to call onBackPressed(). I think this is fine because, with the current UX, we wouldn't expect people to be going back and forth between the MainActivity and LocationActivity frequently."

Zip code text field state is lost when app is backgrounded

On Android N.

Steps to reproduce:

  1. Open the app and enter a zip code.
  2. Hit the 'Edit' button next to the entered zip code. (Currently selected zip code is pre-populated in the text field)
  3. Hit the android system back button
  4. Hit the android running apps button and select 5calls
  5. Hit the 'Edit' button next to the entered zip code. Text field is not pre-populated any more.

Scrolling inertia does not work

Most mobile apps support scrolling with "inertia" so that the page keeps scrolling if you flick it up or down. This doesn't work on the 5calls app.

Tutorial crash - fragment not attached to activity

java.lang.IllegalStateException: Fragment ThirdTutorialPageFragment{489deda} not attached to Activity
at android.support.v4.app.Fragment.getResources(Fragment.java:646)
at org.a5calls.android.a5calls.controller.TutorialActivity$ThirdTutorialPageFragment$1.onCallCount(TutorialActivity.java:210)
at org.a5calls.android.a5calls.model.FiveCallsApi$3.onResponse(FiveCallsApi.java:124)
at org.a5calls.android.a5calls.model.FiveCallsApi$3.onResponse(FiveCallsApi.java:118)

Support Intents with Chrome

Definitely a future enhancement, but it'd be cool if we could launch the app from the browser, using Intents with Chrome. The UX would be pretty simple - the user opens a 5calls issue link in the website and gets some sort of toast/landing page to ask if they want to open it in the app (or something like that). Would obviously require coordinated frontend work to roll out, and some better UI/UX consideration. But I doubt this is high priority right now, so just leaving here for now.

Add local offices to issues UI!

Also track the office that was called in the local database so that later we can prompt the user to use a different number.

In contacts, local offices json is like:

"field_offices": [
{
"phone": "559-485-7430",
"city": "Fresno"
},
{
"phone": "310-914-7300",
"city": "Los Angeles"
},
{
"phone": "619-231-9712",
"city": "San Diego"
},
{
"phone": "415-393-0707",
"city": "San Francisco"
}
]

Google-services.json in source control?

@dektar

I'm trying to run the project, but I'm getting the error "File google-services.json is missing. The Google Services Plugin cannot function without it."

Should that file be in source control, or can I use one that I generate here?

current zip code is updated but issue list is stale when offline

If the device is offline, e.g. in airplane mode, and a user attempts to change the zip code, a notification fires that the device is not online and the list of issues is not updated (as there is no connection).

However, the header that shows which zip code is currently selected does update and thus does not match the displayed list of issues.

Add stats page with cool user stats

Maybe even graphs of cumulative calls over time.
Certainly stats on how many issues you've called for, how many representatives, and how many times for each representative.

Update TutorialActivity

With some UX support perhaps, create a more standard & friendly TutorialActivity with fewer words and more colors and pictures, and maybe a few screens.

Create tablet layouts

IssueActivity in particular would look bad on a tablet - the buttons would get super wide.

Probably have big margins for all activities on tablets, with more centered content, for starters.

NPE when API sends null JSON array

java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String org.json.JSONArray.toString()' on a null object reference
at org.a5calls.android.a5calls.model.FiveCallsApi$1.onResponse(FiveCallsApi.java:94)
at org.a5calls.android.a5calls.model.FiveCallsApi$1.onResponse(FiveCallsApi.java:82)

calls are counted when offline

Unclear if this is working as intended:

  1. enter a zip code and get to the list of calls
  2. turn on airplane mode
  3. go into an issue and give the result of the call (e.g. 'unavailable')
  4. a notification fires that the device is offline, but the call is logged locally and a green checkmark shows on the issue.

unclear if that call gets eventually logged to the server or not.

Add a force upgrade path?

Basically, how do we want to encourage or force people to upgrade the app? Android users are generally bad about upgrading, and if we ever deprecate part of the API, or make other breaking changes, we may want a way to make sure no one is using the affected old versions.

There are generally two ways to go about this:

  1. Soft upgrade (dismissable)
  • Something like an in app modal or push notification that's dismissable, alerting the user that there's a new version, and/or that their current version is now broken.
  • Pros: Not as intrusive.
  • Cons: Not 100% effective.
  1. Force upgrade
  • Lock the user out of the app with a link to the Play store to upgrade.
  • Pros: It guarantees that we get users off the affected old versions.
  • Cons: It's obviously intrusive to the user.

In my opinion, if we include a force upgrade code path, it should be for emergencies only. Emergencies can include hotfixes (if we release a version that is unusable for some reason). I would generally shy away from using the force upgrade to move users off of old versions, unless those versions are REALLY old, and they are becoming a significant maintenance burden.

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.