iOSDK is enabling developers to buidl amazing applications on top of Newcoin in record time.
npm install @newstackdev/iosdkiOSDK is enabling developers to buidl amazing applications on top of Newcoin in record time.
Blockchain development is hard. Managing authorization, users, content and relationships is hard. Building backends and UIs is hard. iOSDK and the Newgraph API are set to help teams reach business logic implementation sooner.
Please visit the newstack console. The alpha environment is at console-dev.newstack.dev).
You don't strictly have to register your application on Newstack to use iosdk, but this approach is going to make your life easier,
if you are planning to use the powerful services the Newstack ecosystem is offering.
Use this if starting a project from scratch. This stage involves
``
curl https://raw.githubusercontent.com/newstackdev/iosdk/main/scripts/create.sh | bash -s
This will generate a demo craco-based project. (craco is a layer on top of create-react-app that allows easier customization of webpack, among other things overriding lesscss variables used by ant-design styles).
Run ` craco start ` to start the demo app.
`
npm i @newstackdev/iosdk --save
You will likely want to use parts of the SDK in such scenario, see Usage below.
and/or @newstackdev/newgraph-api-client depending on your implementation plan.$3
Newgraph API (see below) is described as a Swagger and can be used to generate a client in any language. We welcome contributions in this space.Usage
$3
Following the Project Starter section under Installation above, you should by now have an installed project that shows a default landing page for the user.#### Application
Check
src/index.tsx for the basic setup.
Note the single #### Adding routes
Some routes and pages are provided as part of the SDK. Add more routes and pages using the built in
react-router as shown in src/index.tsx:
`
#### Extending state management
iOSDK manages state and provides actions to interact with it and the underlying API libraries. However your use case is unique, and you will likely need to add more state, actions and effects.
Note
. It provides an example for setting up a simple counter state. This state is included in the larger state provided by the SDK so you can add your logic on top of what's already provided:`
import { Action } from "@newstackdev/iosdk/src/types";const test : Action = (({ state, actions }) => {
// actions.custom.info();
state.app.counter++;
});
export const app = {
app: {
actions: {
test
},
state: {
counter: 0
},
effects: {}
}
};
export default app;
Check the overmind docs for namespaced to see how you can nest state and actions to implement complex use cases.
$3
Pages are normal react components, however note that by importing:
you are getting the state with your custom actions defined in the previous section injected right into
and state. This means no extra work needs to be done to use them immediately as in the usage of state.app.test() and state.app.counter below: `
const HelloIO: NLView = () => {
const actions = useActions();
const state = useAppState(); return <>
Hello {state.api.auth.user?.username}!
}const GoodbyeIO: NLView = () => <>
Goodbye IO!
Hello
These awesome underlying technologies and their dependencies are used to make the imlementation possible with reasonable effort:
| | Technology | Notes | |
|---|---|---|---|
| Language | Typescript | A Bhai-lang implementation is considered | |
| Authorization | Firebase | More is underway | |
| Component framework | React | Implementations for vue, angular, svetle and others are under consideration | |
| State management | Overmindjs | See overmindjs. | |
| Component library | Ant design | See https://ant.design/ | |
There are more opensource technologies we all know and love than we can enumerate here, see package.json for an overview or follow along with the docs.