??, jamstack?? ?? ??? ?? ???

?? ?? ??? ? ????? ??? ????? ????? ??? ???? ????? ??? ?? ??? ??? ??? ? ??? ?? ?? ??? ??????. ?? ??? ??? ?? ?? ?? ??? 3 ??? ??? ???? ????. ??? ?????? ??? ?????. ???, ??? ?? ?? ??? ?????.

? ??? Google ????? ???? ? ?? ?? ?? ? ???? ?? ???? ?? ????.

1. ??? ?? ???? ???? ??????
2. ??? ???? ????
3. ?? ?? ??? ??? ???? ?? ? ??? ??. ??? ?? ?? ???? ????? ???? ???? ?? ??? ???????.

???? ??? ?? ??? ??? ??? ??? ?????.

? ??? ??? ??? ??? ????? ???? ?? ?? ??? ??? Cron Jobs????. Cron ??? ???? ?? ?? ??? ???? ??? ???? ???? ????. ??? ?????. ????? Google ???? ?? ???? ?? ? ? ??? CRON ??? ?? ???? ? ? ??? ?? ?????. Cron Triggers ?? ??? ??? ? ??? ????. ??? ??? ?? ??? Cron? ?? ??? ??? ??? ?? ?? ????.

???? ?? ? ??? ???? ?? HTTP ??? ????? ???? ??? ?????????. ? ??? ?? ??? ??? HTTP ??? ?? ?????. ??? ??? ??? ?? ?? ?? ? ??? ??? ??? ?? ?????.

?? (?? ???? I)?? ?? ? ??? ??? ?? ?? - ????? ??? ?? Sarah Drasner? ??? ??, ?? ?? ?? ????? ?? ?????? (??? ? ??? ?? ?? ??). ??? ???? ??? ????, ??? ??? ??? ??? ???? ?? ? ?? ?? ?? ????. ??? ?? ??????.

https://www.youtube.com/watch?v=simam4fxpoo&

??? ??? ? ? ????. ??? ??? ???? ?? ?? ??? ??? ????. ?? ?? ??? ?? ??? ??? ???? ?? sendgrid ???? ????? ????. ???? ??? ?? ???? ???? ??? ??????? ??? ? ????. ??? ??? ??? ??? ????? ?? ? ? ????.

?? ? ????

? ????? ? ?? ?? ??? ??? ????.

1. ?? ??? ?? : ??? ??, ???? ?? ????? UI? ???? Calendar UI.
2. 8Base GraphQL : ?? ??? ?????? ???. ???? ??? ??, ?? ? ???? ? ????. ???? ???? ???? ?? ??? ?? ???? ????.
3. ??? ?? : ??? ??? ?? ???? ??? ??? ??? ??? ???? ?????. ??? Cron ??? ???? ??? ??? ?? ??? ???? ????.

? ???? ??? ???? ??? ? 3 ?? ??? ???? 3 ?? ?? ??? ????. ??? ??? ?? ??, ??? ??, ??? ???, ?????, ??? ?? ? ????. ??? ??? ???? ??, ??? ???? ?? ?? ??? ????? ???? ?????.

???? repo

????

? ????? ? ????? ? ?? ???? ?? ? ??? ?? ??? ???? ??? ???? ?? ????? ?? ???? ??? ? ????. ??, ?? ??? ?????? ??? ? ???? ???? ?? ???? ?? ??? ? ??? ?? ??.

? ?? Create-React-App ????? ? ??? ?? ??? ??? ?? ???? ??????. ??? ??? ??? ???? ??? ?? ? ????? ?? ??? ??? ?????. ??? ??? ?? ?????.

1. ??? ?? ??
2. ??? ??? ?????? ?? ? ? ?? ?? ??
3. ??? ?? ?? ??
4. ??? ?? ? ???? ?????? ?? ??? QL ??
5. ????? ??? ????? ???? ?? ?? ??

? : ??? ???? ? ?? ???? ?? ??? ?? ??? ????. ?? ??? ?? ???? ?? ?????? ?? ????? ? ?? ???? ? ? ??? ?????.

??? ?? Github? ???? ??????.

 git ?? -B ??? ---single-branch https://github.com/christiannwamba/calendar-app.git

Root Package.json ??? ?? ? NPM ???? ???? Serverless Package.json :

 NPM ??

??????? ??????? ??? ??

? ??? ???? ???? ?? ?? ?????? ? ??? ???? - ??????? ? ??? .

???????? ?? ? ?? ? ???, ?? ?? ??? ???? ? ???????. ??? ???? ??? ??? ???? ?? ????? ?? ?? ????. ?? ??? ?? ???. ??? ???? ? ? ??? ??? ?? ? ???? ?? ??????.

???? ?? ???? ??? ??? ?? ?? ?? ???? ? ?????.

??? ??? ?? ???? ????? ??? ????. Azure? ???? ??? ???? ?? ?? ??? ?????. ??? ?? ???? ??? ??? ??? ?? ? ?? ??? ??? ????.

1. ??? ? ? ??? ??? ??? ???? ?? ??? ???? ??? ???? ? ??? ? ???? (???????).
2. ????? ??? ??? ?????. ??? ??? ???? ??? ????. HTTP? ?? ? ?? ? Sationeless? ?????. ????? ??? ??? ?? ?????? ??? ??? ?????. ??? 1,000,000 ? ?? ??? ???? ??? ?? ?? ? ?? ??? ????? ?? ? ?? ???? ??? ??? ?????. ?? ????? ??? ??? ????? ?? ????? .

??? ???? ???? ??? ?? ??? ??? ??? ??? ?? ????? ??? ??? ?? ? ??? ???? ?????. ???? ??? ??? ??? ?? ??? ??? ? ??? ?? Sarah? ??? ? ? ? ?????.

?? ?? ??? ? ????? ??? ??? ????? ??????. ??? ????? ???? ??????? ??????.

?? ??? (8Base)? ??? ????? HTTP ???? ???? ???????? ??????. ?? ?? ???? ???? ???? ??????? ??? ?????. ?? ??? ???? ??????? ??? ?? ????? ???? ???????? ?? ?? ?? ??? ?????. ?? ??? ?? ??????. ???“??? ???”? ?? ?? ????.

??????? ? ??? ??? ????

VS ??? ???? ?? ??? ??? ??????. ? ??? ?????.

1. Azure ??
2. ? ??

? ??? ? ????? ?? ??????. VS ?? ?? ? ?? CLI ??? ?????? ?? ? ? ????. CLI ?? ??? ??????.

NPM ?? -G Azure-Funtions-Core-Tools

# ??

?? ? azure/functions
Brew ?? Azure-Funtions-Core-Tools

???? Azure ?? ???? ???? Azure? ??? vs ??? ?????????. ?? ???? Azure ?? ??? ?? ??? ??? ?? ? ????.

?? ?? ??? ??????? ??? ??? ??? ???. ??? ??? ??? ?? ??? ?????.

???? ??????.

1. Azure Extension ???? ???? ?? ???? ?? ?? ??? ??????.
   
2. ??? ? ?? ????? ?? ????? ??? ?? ?? ???? ??????. ? ? ???? ?? ?? (????? ??)? ????.
3. ???? ??? ????? ???? ???? ??? ????. ? ???? ??? ??????.
4. JavaScript? ??? ??????. TypeScript (?? ?? ??)? ???? ???? ?????.
5. ????? ?? HTTP ???? ??????. ??? ??????.
6. ? ?? ??? ???? ??????

???? ???????? ????. ?? ????? ???? ?? ?? ??? ????.

1. ?? ???? ??????.
   
2. ????? ?? ???????? ??????.
3. ??, ScheduleOrChestrator ? Enter? ?????.
4. ???? ??? ????? ???? ?????. Orchestrator? ????? ???? ???? ?? ??? ?????.
5. Azure ???? ??? ??????. ? ???? ?? ??? ??? ??????.
6. ??? ? ?? ??? ?? ???? ??? ????.

?????, ?? ??? ???? ??? ????. ???? ??? ??????.

• ????? ?? ??? ??????.
• ??? ?????.
• ???? ??? ???? ????.

????? HTTP ???? ????

????/???/index.js? ??? ?? ? ??? ????. VS ?? ?? CLI ??? ???? ??? ?? ? ? ?? ??? ????.

 const df = ?? ?? ( "??? ??");
module.exports = Async ?? (????, req) {
  const client = df.getClient (????);
  const instanceid = await client.startnew (req.params.functionName, undefined, req.body);
  context.log (`id = '$ {instanceid}'? ???????? ??????.`);
  return client.createCheckStatusResponse (context.bindingData.Req, instanceId);
};

??? ?? ?? ???? ?????

1. ??? ??? ????? ?????? ??????? ????? ??? ??? ????.
2. ??? ?????? startNew () ??? ???? ???????? ?????. Orchestrator ?? ??? Params Object? ?? StartNew ()? ? ?? ??? ?????. REQ. Body? ?? Orchestrator?? ???? ? ?? ??? StartNew ()? ?????.
3. ?????, ??????? ??? ??? ???? ? ??? ??? ??? ??? ????? ???? ?? ????? ?????.

?? ??? ???? URL? ??? ????.

 http : // localhost : 7071/API/Orchestrators/{functionName}

??? functionName? StartNew? ?? ? ?????. ??? ???? ??? ??????.

 // LocalHost : 7071/API/Orchestrators/ScheduleOrchestrator

? URL? ??? ???? ??? ? ??? ?? ?? ?? ????.

????? ???????? ???????

HTTP ??? ???? ??? ??? ??? ??? ?? ??? ?????. ? ??? ??????? ??? ??? ?? ? ??? ??? ?????. Serverless/ScheduleorChestrator/Index.js ??? ????? ??? ? ????. ??? ???? ?????.

 const df = ?? ?? ( "??? ??");
module.exports = df.orchestrator (function* (context) {
  const input = context.df.getInput ()
  // TODO -1
  
  // TODO -2
});

Orchestrator ??? context.df.getInput ()? ???? HTTP ????? ?? ??? ?????.

TODO? ?????? -1? ?? ???? ?? ??? ?? ? ??? ?? ?? ?? ??????.

 context.df.createTimer (? ?? (input.startat))

? ?? ????? ??? ???? HTTP ???? ?? ?? ???? ?? ? ??? ?? ???? ????.

? ??? ???? ??? ???? ???? ???? ????? ??????. ??? ???? ????? ?? ?? ?? Todo ??? ?????? ?? ?? ?????.

 ?? ?? context.df.callactivity ( 'sendemail', ??);

??? ?? ??? ???? ???? ????. ??? ?? ? ?? ???? ????? ???? ????.

??? ?? ? ??? ?????.

 const df = ?? ?? ( "??? ??");

module.exports = df.orchestrator (function* (context) {
  const input = context.df.getInput ()
    
  context.df.createTimer (? ?? (input.startat))
    
  ?? ?? context.df.callactivity ( 'sendemail', ??);
});

????? ????? ??? ???

??? ???? ???????? ?? ??? ???? ?? ?????. ?? ??? Serverless/SendEmail/Index.js? ????. ????? ?? ???? ?????.

 const sgmail = require ( '@sendgrid/mail');
sgmail.setapikey (process.env [ 'sendgrid_api_key']);

module.exports = Async ?? (????) {
  // TODO -1
  const msg = {}
  // TODO -2
  ?? ???;
};

?? SendGrid? ???? ?? ?? API ?? ?????. ? ??? ?? API ?? ?? ? ????.

?? ??? ???? ???? ?? ?? ?? ??? ???? ????. serverless/local.settings.json?? sendgrid_api_key ?? ??? SendGrid key? ??? ??? SendGrid_api_key ?? ??? ???? ???? ??? ? ????.

 {
  "isencencrypted": ??,
  "??": {
    "AzureWebJobsStorage": "",
    "functions_worker_runtime": "??",
    "sendgrid_api_key": ""
  }
}

todo -1? ?? ?? ??????.

 const {???, ??, startat, description} = context.bindings.payload;

????? ??????? ??? ???? ??? ??? ?????. ??? ????? ?????. ????? ??? ??? ? ???? Serverless/SendEmail/Function.json?? ???? ?? ?? ????? ??????.

 {
  "???": [
    {
      "??": "????",
      "??": "ActivityTrigger",
      "??": "in"
    }
  ]]
}

????, ?? ????? TODO? ?????? ???? ?????.

 const msg = {
  to : ???,
  ?? ?? : {??? : '[??? ??]', ?? : 'Codebeast Calendar'},
  ?? :`event : $ {title}`,
  html :`<h4> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
};
sgmail.send (msg);

?? ???;

??? ??? ??? ????.

 const sgmail = require ( '@sendgrid/mail');
sgmail.setapikey (process.env [ 'sendgrid_api_key']);

module.exports = Async ?? (????) {
  const {???, ??, startat, description} = context.bindings.payload;
  const msg = {
    to : ???,
    ?? ?? : {??? : '[??? ??]', ?? : 'Codebeast Calendar'},
    ?? :`event : $ {title}`,
    html :`<h4> $ {title} @ $ {startat} </h4> <p> $ {description} </p>`
  };
  sgmail.send (msg);

  ?? ???;
};

??? Azure? ?????

Azure? ??? ???? ?? ????. VS ?? ????? ?? ? ?? ?? ?????. ?? ???? ???? ???? ?? URL? ?????.

??? ???? ?? ??? ??? ? ????? ????! ??? ??? ???? ??, ???? ?? ??? ???? ??? ?????. ??? ???? ???? ?? ?????.

8Base? ?? ??? ? ??? QL ???

8base ? ?? ?? ?? ??? ??? "Firebase for GraphQL"???. 8Base? ??? ??? ?? ??? ?? ?? ?????? ???? ?? ???? ??? GraphQL? ??????? ????.

???? 8Base? ??? ??? ???? ?? ?? ??? ????? ??? ????? ????.

???????? ?? ??? ??? ???? ?? ????? ?? ?? ??? ?? ? ???? ????? ???????. ??? ?? ??? ?? ???? ????? ???? ????. ??? ??? ? ?? ???.

???? ?? ???? ???? ??, ?? ??, ?? ??, ?? ? ?? ?? ?? ?????. ?? ???? "??"?? ??? ??? ? ??? ???? ?????.

??? ???? ???? ???? ??, ??, ????, ?? ? ???? ?? ? ??? ???? ?? UI?? ??? ???? ?? ??? ?? ? ? ??? ????? CRUD ??, ?? ? ???? ?? ? ??? ???? ?? ? ??? ????? ??? ??? ??? ??? ??? ?? ??? ???? ??? ???? ?? ????? ????? ??? ?? ??? ?? ?? 8Base? ?? ?????

??? ??? ???? 8Base? ???? ????? ?? ???????.

??? ?? ? ????? 8Base ???? ????

???? ??? ?? ?? ???? ? ?? ??? ??? ????. ??? ??? ??? ????? ?? ???? ??? ???? ?? ??? ????.

???? ???? ??? ??? ???? ??? ???? ??? ??? ??????.

??? ??? ???????. ??? ? ?????? ?? ?? ???? ?? ? ??? ???? ?? ?? ???? ?? ??? ????.

Auth0? ???? ??? Auth? ???? ?? 8Base?? ?? ?????. ??? ????? ???? ??? Auth? ???? ?? ??? ????? ?? ???????.

????? React ??? ???? ?? ?? ??? URL? ????.

???? ??? QL ?? ? ???? ???

URL? ???? ?? ?? ????? ??? ??? ??????? ???? ?? ?? GraphQL ???? API? ????? ??? ???? ?????. ???? ??????.

???? ?? ??? ?? ?????.

 ?? {
  eventslist {
    ??
    ?? {
      ID
      ??
      startat
      endat
      ??
      Allday
      ???
    }
  }
}

8Base UI? ?? ?? ??? ???? ???? ??? ??? ? ??? ?? ????.

?? ???? ??? ???? ??? ??? ???? ?? ??????? ?? ? ? ????.

??? ? ??? ?? ?????

????? ? ?? (? ???) ??? ??? ?????? ???? React ????. UI? ???? 4 ?? ?? ?? ??? ??? ??? ?????.

1. ??? : ?? ?? ???? ???? ??? UI
2. Event Modal : EventForm ?? ??? ?? ??? ????? ????? React Modal
3. Event Popover : Popover UI ?? ??? ??, EventForm ?? Delete Event? ???? ??? ????
4. ??? ?? : ? ???? ????? HTML ??

??? ?? ??? ?? ????? ?? React Apollo ?????? ???????. React Apollo ?? ??? React ??? ???? GraphQL ??? ??? ???? ??? ?????. ?? ?? ??? ???? ?? ?? ??? ????? ??? ???? ???? ?? ? ? ????. ??? ?? ????? ??? ???? React ??? ???? ?? ? ????? ?? ? ????.

src/index.js?? Todo?? React Apollo hooks? 8base ?????? ????? - 1 :

 'React-Apollo-Hooks'?? {apolloprovider} ?? ??;
'@8base/apollo-client'?? {8baseapolloclient} import;

TODO -2??? 8Base ?? ???? ?? ?? ??? URL? ?????? ?????.

 const uri = 'https://api.8base.com/cjvuk51i0000701s0hvvcbnxg';

const apolloclient = ??? 8baseapolloclient ({{
  Uri : Uri,
  Withauth : ??
});

? ?????? ???? ?? ? ??? TODO? ???? ?? ?????. 3 :

 REACTDOM.RENDER (
  <apolloprovider client="{apolloclient}">
    <app></app>
  </apolloprovider>,
  document.getElementById ( 'root')
);

??? ??? ??

??? ?? ??? ? ?? ?? ??? ????? NPM?? BigCalendar ?? ??? ?????. ? ??? :

1. ??? ??? ??? ?? ???? ??????.
2. ???? ???? ???? ? ??? ??? ? ?? (EventPopover) ?? ??? ?????.
3. ??? ??? ???? ??? ? ??? ?? (EventModal)? ??????.

??? ?????? ? ??? ?? ??? ?????. ?? ??? ??? ???? ?? ?? ?? ???? ?? 8Base? ????????.

todo -1? ?? ?? ??????.

 const {data, error, loading} = useQuery (events_query);

?? ??? NPM? Events_Query?? UseQuery ?????? ?????.

 'React-Apollo-Hooks'?? {useQuery} ?? ??;
'../../queries'?? {events_query} ?? ??;

Events_Query? 8Base Explorer?? ??? ? ?? ??? ??? ?????. SRC/??? ?? ??? ??? ????.

 ???? const events_query = gql`
  ?? {
    eventslist {
      ??
      ?? {
        ID
        ...
      }
    }
  }
`;;

Todo?? ??? ????? ???? ??????? -2 :

 if (error) return console.log (error);
  if (??)
    ?? (
      <div classname="???">
        <p> ?? ... </p>
      </div>
    );

??? ?? ??? EventPopover ?? ??? ???? ??? ?? ???? ??????. ??? ?? ?? ??? ??? ??? ????? ?? ? ?? ????. ? ?? ?? ?? ??? ?? ??????, ??? ??? EventForm? ????? ????.

??? ?? ?? ??? ??? ??, ???? ? ??

src/components/event/eventform.js? ?? ??? ??? ??????. ??? ???? ??, ?? ?? ???? ? ?????. TODO -1?? USECREATEUPDATEMATUM ? ?? ???? ?? ????.

 import {USECREATEUPDATEMATUMATUTATION, usedELETEMATUMATUMATIC}?? './eventMatureHooks'

• USECREATEUPDATEMATION :? ????? ??? ?? ????? ??? ?? ???? ????? ???????.
• ?? ?? :? ????? ?? ???? ?????.

??? ?? ? ??? ?? ??? ?? ??? ?????. ?? ? ??? ?? ??? ??? ? ? ????.

?? ???? TODO? ??????. 2? ? ??? ?? ?????.

 const createupdateevent = usecreateupdatemation (
  ?? ???,
  ???,
  EventExists,
  () => CloseModal ()
);
const deleteevent = usedeletemutation (event, () => closeModal ());

??? ?? ??? ?? (Apollo Hooks)? ?? ?? ? usemutation? ???? ?? ? ??? ?????. ? ??? ????? ???? ???? ??? usemutation ??? ?????. SRC/?? ??/???/EventMutationHooks.js?? ??? ?? ??? ?? ??? ?????.

 usemutation (mutationtype, {
  ?? : {
    ???
  },
  ???? : (??, {data}) => {
    const {eventsList} = Cache.ReadQuery ({
      ?? : events_query
    });
    cache.writeQuery ({
      ?? : Events_Query,
      ??? : {
        EventsList : TransformCacheUpDatedAta (EventsList, Data)
      }
    });
    // ..
  }
});

8Base?? ????? ?? HTTP ???? ??????

??? ??? ?? ???? ??, ??? ???? ? UI ??? ???? ? ? ?? ??? ?????. ???? ?? UI? ????? ?? 8base? ???? ???, 8Base? ???? ???? ??? ?? HTTP ???, ???????? HTTP ??? ??? ????? ???? ?????. ?? ??? ????? ???? ???? ??? 8Base? ?? ???? ???? ??? ???? ????.

8Base? ???? ?? ???? ?? ??? ??? ?? ??? ??? ? ????. ??? ?? ??? 8Base ???????? ?? ? ??? ?????? ??? ?????. ?? ??, ??? ????? ????? ??? ??? ?? ? ??? ??? ? ????. ???? ??? ? ? ???? ?? ??? ???.

8Base CLI? ???? ??????.

 NPM ?? -G 8Base

??? ? ?????? ?? ??? ???? ??? ??? ????.

 8Base init 8base

8base init ??? ??? 8base ?? ????? ????. ? ?? ???? ??? ??? ??? 8base ?? ?? (8base)? ???? ????.

??? ???? ??

8base/src? ?? ?? ???? SRC ???? triggerschedule.js ??? ????. ? ??? ??? ??? ??? ?? ????.

 const fetch = require ( 'node-fetch');

module.exports = async event => {
  const res = await fetch ( '<http trigger url>', {
    ?? : 'post',
    ?? : json.stringify (event.data),
    ?? : { 'content-type': 'application/json'}
  })
  const json = await res.json ();
  Console.log (???, JSON)
  json ??;
};</http>

GraphQL ????? ?? ??? ??? ???? ???? ??? ? ????.

? ??? ?? ? ? ?? URL? ??????. Azure URL? ??? ???? URL? ?? ?? "Copy URL"? ?? ? ? ????.

?? API?? ???? ?? ?? ?? ?? ??? ???????.

 NPM ??-?? ?? ??

8Base ?? ??

?????? ? ?? 8Base ??? ??? ???? ? ??? ??? ???? ?? ??? ???? ????. ??? ??, ??? ????? ????? ????. ? ??? 8base.yml ??? ?? ? ? ????.

 ?? :
  Triggerschedule :
    ???:
      ?? : src/triggerschedule.js
    ?? : ???
    ?? : ???

?? ????, ??? ??? ????? ?? ????? ???? ????? ??? ? SRC/Triggerschedule.js? ??????.

??? ?? ?? ???? ????

???? ???? ?? 8base ??? ??????? ?? ?? ?? ?? ? ? ????.

 8??? ???

?? ?? ?? ??? ???? ?? ?? ?????? ? ??? ??? ?????.

 8 ?? ??

?? ??? ??????

?? ??? ?? ??? ???? ? ? ??? ??????. ??? ???? ??? ??? ???????. ??? ??? ?????? ??? ?? ??? ???? ??? ?? ??? ?????. ??? ? ?? ??? ??? ? ? ??? ??? ?? ???? 2-5 ? ?? ??? ??????.

https://www.youtube.com/watch?v=simam4fxpoo&

?, ??? ?????! Sendgrid?? ??? ??? ????. ?? ??? ???? ??? ??? ??? ?? ??? ?? ??? ?? ????.

? ??? ??, Jamstack? ?? ??? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!